销售点应用-DEV365 开发者社区

再次你好。让我们继续成为网络开发人员的旅程。在这篇文章中，我们将探索React及其许多功能和应用。

对于此项目，我创建了一个销售点（POS） /电子商务应用程序。

在这篇文章中，我将演示React电子商务应用程序中使用的各种组件。每个组件都有特定的目的，并有助于应用程序的整体功能。我将讨论USESTATE和使用效果挂钩以及React路由器，并概述我如何在每个组件中使用它们。

应用程序组件：
作为应用程序的入口点，我使用应用程序组件。它使用React路由器（浏览器，路由和路线）来处理导航并根据当前URL渲染不同的组件。此外，它包括用于导航的Navbar组件，并使用Usestate Hook管理Cartitems状态。

function App() {
  const [cartItems, setCartItems] = useState([]);

  return (
    <Router>
      <div>
        <NavBar />
        <Routes>
          <Route path="/" element={<Home onAddItem={setCartItems} />} />
          <Route
            path="/cart"
            element={<Cart items={cartItems} onDeleteItem={setCartItems} />}
          />
          <Route path="/data" element={<Data />} />
        </Routes>
      </div>
    </Router>

Navbar组件：
要显示一个带有指向主页和数据页面的链接的简单导航栏，我使用Navbar组件。它利用React路由器的链接组件来启用不同页面之间的无缝导航。

import React from 'react';
import { Link } from 'react-router-dom';

function NavBar() {
  return (
    <nav className='navbar'>
      <Link className='navbar-item' to="/">Home</Link>
      <span className='navbar-item'>|</span>
      <Link className='navbar-item' to="/data">Data</Link>
    </nav>
  );
}

export default NavBar;

家庭组件：
代表电子商务应用程序的主页，HOME组件负责使用使用效果挂钩从服务器中获取项目列表。然后，它将这些项目显示为项目卡。在此组件中，我使用USESTATE挂钩管理项目和Cartitems状态。此外，我已经集成了一个购物车组件，以展示添加到购物车中的项目。此外，我已经实施了功能来处理在购物车中添加项目，从购物车中删除项目并清除购物车。最后，在添加项目后，渲染增量和减少按钮以给予购物车的其他功能，而不是呈现同一项目的多个。

useEffect(() => {
    fetchItems();
  }, []);

  const fetchItems = () => {
    fetch('http://localhost:3000/items')
      .then((response) => response.json())
      .then((data) => setItems(data))
      .catch((error) => console.log('Error fetching items:', error));
  };

  const handleAddToCart = (item) => {
    const existingItem = cartItems.find((cartItem) => cartItem.id === item.id);
    if (existingItem) {
      const updatedItems = cartItems.map((cartItem) =>
        cartItem.id === item.id ? { ...cartItem, quantity: cartItem.quantity + 1 } : cartItem
      );
      setCartItems(updatedItems);
      onAddItem(updatedItems);
    } else {
      setCartItems((prevItems) => [...prevItems, { ...item, quantity: 1 }]);
      onAddItem({ ...item, quantity: 1 });
    }
  };

  const handleDecrementItem = (item) => {
    if (item.quantity > 1) {
      const updatedItems = cartItems.map((cartItem) =>
        cartItem.id === item.id ? { ...cartItem, quantity: cartItem.quantity - 1 } : cartItem
      );
      setCartItems(updatedItems);
      onAddItem(updatedItems);
    } else {
      handleDeleteItem(item);
    }
  };

卡车组件：
在购物车组件中，我的重点是显示添加到购物车中的项目。通过从家庭组件中接收状态和各种回调功能，我可以使用Usestate Hook有效地管理Cartitems状态。在此组件中，我渲染一个购物车列表，提供按钮以增加和减少项目数量，从购物车中删除项目并清除购物车。最后，我计算了购物车中物品的总价。


function Cart({ items, onDeleteItem, onClearItems, onAddItem, onDecrementItem }) {
  const handleRemoveItem = (index) => {
    onDeleteItem(index);
  };

  const handleDecrementItem = (item) => {
    onDecrementItem(item);
  }
  const handleClearItems = () => {
    onClearItems();
  };

  const handleAddItem = (item) => {
    onAddItem(item);
  };

  const calculateTotal = () => {
    const totalPrice = items.reduce((total, item) => total + item.price, 0);
    return totalPrice.toFixed(2);
  };

  return (
    <div className="cart-container">
      <div className="cart-items">
        {items.length === 0 ? (
          <p>Your cart is empty. Add items from the Item Selection.</p>
        ) : (
          <ul>
            {items.map((item, index) => (
              <li key={index}>
                <span>{item.name}</span>
                <div>
                  <button className="decrement-item" onClick={() => handleDecrementItem(item)}>
                    <FaMinus />
                  </button>
                  <span>{item.quantity}</span>
                  <button className="increment-item" onClick={() => handleAddItem(item)}>
                    <FaPlus />
                  </button>
                </div>
                <button className="delete-item" onClick={() => handleRemoveItem(index)}>
                  <FaTrash />
                </button>
              </li>
            ))}
          </ul>
        )}
        {items.length > 0 && (
          <button className="clear-button" onClick={handleClearItems}>
            Clear Cart
          </button>
        )}
        <div className="total">
          <span>Total: $ {calculateTotal()}</span>
        </div>
      </div>
    </div>
  );
}

数据组件：
数据组件充当一个页面，用户可以在其中添加和查看项目中的项目。为了实现此功能，我使用了使用Usestate挂钩的受控表单输入，并利用使用效果钩从服务器中获取项目。此外，我还合并了一个表格来添加项目，其中包含名称，类型，图片URL和价格的字段。添加项目时，我将邮政请求使用到服务器，然后更新Allitems状态。最后，我提供了从服务器获取的所有项目的表，允许用户使用删除按钮单独删除项目。

useEffect(() => {
    fetchItems();
  }, []);

  const fetchItems = () => {
    fetch('http://localhost:3000/items')
      .then((response) => response.json())
      .then((data) => setAllItems(data))
      .catch((error) => console.log('Error fetching items:', error));
  };

  const handleAddItem = (e) => {
    e.preventDefault();

    const newItem = {
      name: itemName,
      type: itemType,
      image: itemPicture,
      price: parseFloat(itemPrice),
    };

    fetch('http://localhost:3000/items', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify(newItem),
    })
      .then((response) => {
        if (!response.ok) {
          throw new Error('Failed to add item');
        }
        return response.json();
      })
      .then((data) => {
        onAddItem(newItem);

        setItemName('');
        setItemType('');
        setItemPicture('');
        setItemPrice('');

        fetchItems();
      })
      .catch((error) => {
        console.log('Error adding item:', error);
      });
  };

  const handleDeleteItem = (id) => {
    fetch(`http://localhost:3000/items/${id}`, {
      method: 'DELETE',
    })
      .then((response) => {
        if (!response.ok) {
          throw new Error('Failed to delete item');
        }

        fetchItems();
      })
      .catch((error) => {
        console.log('Error deleting item:', error);
      });
  };

  return (
    <div className="data-section">
      <h2>Add Items</h2>
      <form onSubmit={handleAddItem}>
        <input
          type="text"
          placeholder="Item Name"
          value={itemName}
          onChange={(e) => setItemName(e.target.value)}
          required
        />
        <input
          type="text"
          placeholder="Item Type"
          value={itemType}
          onChange={(e) => setItemType(e.target.value)}
          required
        />
        <input
          type="url"
          placeholder="Item Picture (URL)"
          value={itemPicture}
          onChange={(e) => setItemPicture(e.target.value)}
          required
        />
        <input
          type="number"
          placeholder="Item Price"
          value={itemPrice}
          onChange={(e) => setItemPrice(e.target.value)}
          required
        />
        <button type="submit">Add</button>
      </form>

      <h2>All Items</h2>
      <table className="item-table">
        <thead>
          <tr>
            <th className="category">Item Name</th>
            <th className="category">Item Type</th>
            <th className="category">Price</th>
            <th className="category">Actions</th>
          </tr>
        </thead>
        <tbody>
          {allItems.map((item) => (
            <tr key={item.id}>
              <td>{item.name}</td>
              <td>{item.type}</td>
              <td>{item.price}</td>
              <td>
                <button onClick={() => handleDeleteItem(item.id)}>Delete</button>
              </td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}

此应用程序可以用作销售点（POS）或电子商务网站，允许用户订购或接收订单。该应用程序可以针对许多类型的业务量身定制，例如餐馆，机械商店，服装店和在线商店。