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