React POS App - 用戶管理組件（第 14 部分）

在我們的 React 銷售點應用程序開發系列視頻（第 14 部分）中，我們開始在 React 前端構建用戶管理模塊。這對於任何銷售點系統來說都是一個重要功能，因為它允許管理員有效地管理用戶、角色和訪問權限。我們首先在 React 組件目錄中創建一個新的 UserManagement.jsx 組件。設置所需的導入（例如 React、useEffect、React Router Link、jQuery 和 DataTables）後，我們將 DataTables.net 與 Bootstrap 5 樣式集成，以乾淨且專業的表格格式顯示用戶記錄。接下來，我們為 DataTables 配置服務器端處理，即使數據庫包含大量用戶，也能實現平滑的分頁、排序​​和搜索。我們還從 localStorage 檢索 JWT 令牌並將其附加到請求標頭中以確保安全的 API 訪問。在表內，我們定義了用戶 ID、名稱、電子郵件、類型、狀態和操作的列。我們還創建一個動態的活動/非活動徽章，並使用渲染函數生成一個編輯按鈕。最後，我們在 App.js 中添加路由，並在 Layout.jsx 中創建側邊欄導航鏈接。最後，我們測試頁面並確認前端已準備就緒，但後端 API 開發將在下一部分中介紹。源代碼 - https://www.webslesson.info/2026/01/react-pos-system-nodejs-mysql.html #ReactJS #NodeJS #MySQL #POSApp #FullStackDevelopment #WebDevelopment #JavaScript