React POS 应用程序 - 在创建订单页面中加载类别和产品数据（第 33 部分）

在 React POS 系统系列的第 33 部分中，我们通过从数据库加载产品类别和产品并将其显示在 POS 屏幕中来构建核心“添加新订单”体验。首先，我们使用 Axios 在 React 中创建一个 fetchCategories() 函数，以使用存储在 localStorage 中的 JWT 令牌调用我们的安全 API。然后我们将类别渲染为 Bootstrap 按钮，以便用户可以在产品组之间快速切换。接下来，我们实现 fetchProducts(categoryId = 0) 来加载所有可用项目或按所选类别过滤项目。这为我们提供了一个干净的 POS 工作流程，单击任何类别按钮都会立即刷新产品列表。我们还正确处理错误状态，因此当数据加载失败时，UI 会显示有用的消息。在后端（Node.js + Express），我们构建了一个 POST API，使用 Express Validator 进行安全输入验证并按类别返回产品，并使用准备好的语句进行安全 MySQL 查询。端点仅返回可用产品，并支持使用category_id进行可选过滤。在本教程结束时，您的 POS“创建订单”屏幕将具有基于类别的动态产品加载、响应式网格布局和准备下一步的全堆栈结构：在页面加载时加载购物车数据。 💡 使用的技术：React.js、Node.js、Express.js、MySQL、REST API、JWT Auth、Axios、Bootstrap 5 源代码 - https://www.webslesson.info/2026/01/react-pos-system-nodejs-mysql.html