項目路徑總結

后端結構

server/
├── controllers/          # 業務邏輯
│   ├── authController.js
│   ├── bookController.js
│   ├── genreController.js
│   └── userController.js
├── middleware/          # 中間件
│   ├── authMiddleware.js
│   ├── validateMongoIdMiddleware.js
│   └── validatePaginationMiddleware.js
├── models/              # 數據庫模型
│   ├── book.js
│   ├── genre.js
│   └── user.js
├── routes/              # API路由
│   ├── auth.js
│   ├── book.js
│   ├── genre.js
│   └── index.js
├── utils/               # 工具函數
├── .env                 # 環境變量
├── server.js            # 主入口文件
└── package.json         # 依賴配置

前端結構（React+Vite）

client/
├── src/
│   ├── components/
│   │   ├── Book/        # 圖書組件
│   │   │   ├── BookForm.jsx
│   │   │   ├── BookItem.jsx
│   │   │   └── BookList.jsx
│   │   └── Genre/       # 分類組件
│   │       ├── GenreDeleteConfirm.jsx
│   │       ├── GenreForm.jsx
│   │       └── GenreList.jsx
│   ├── pages/           # 頁面組件
│   │   ├── Home.jsx
│   │   ├── Login.jsx
│   │   └── ...
│   ├── App.jsx          # 根組件
│   └── main.jsx         # 應用入口
├── .env
└── package.json

從零開始的搭建順序指南（技術棧：Node.js + Express + MongoDB + React）

后端搭建順序（關鍵路徑優先）

1. 初始化項目

   mkdir book-management && cd book-management
   mkdir server && cd server
   npm init -y
   npm install express mongoose dotenv cors
   

2. 基礎架構搭建

   • 創建 server.js 配置Express基礎服務

   require('dotenv').config();
   const express = require('express');
   const app = express();
   app.use(express.json());
   app.listen(process.env.PORT || 3000);
   

3. 數據庫連接

   • 在 models/ 下創建Mongoose模型（建議順序）：
   1. user.js（用戶系統是其他功能的基礎）
   2. genre.js（圖書分類）
   3. book.js（依賴分類和用戶）

4. 路由與控制器開發順序

5. 中間件開發

   • 先實現 authMiddleware.js（JWT驗證）
   • 再開發數據驗證類中間件

前端搭建順序（組件驅動開發）

1. 初始化Vite+React項目

   cd .. && npm create vite@latest client --template react
   cd client && npm install @mantine/core @mantine/hooks axios react-router-dom
   

2. 開發順序建議

3. 組件開發優先級

   1. 先完成 Layout.jsx 和路由配置
   2. 開發 GenreList.jsx + GenreForm.jsx
   3. 開發 BookList.jsx + BookForm.jsx
   4. 最后實現特殊頁面（如數據統計）

聯調階段關鍵點

1. 先在Hoppscotch測試所有API端點
2. 前端使用axios創建統一的API客戶端
3. 開發順序：
   • 先實現數據獲取（GET請求）
   • 再實現數據修改（POST/PUT/DELETE）
   • 最后處理文件上傳等特殊功能

調試工具推薦

1. 后端：
   • VS Code REST Client插件（測試API）
   • MongoDB Compass（查看數據）
2. 前端：
   • React Developer Tools
   • 瀏覽器Network面板監控API請求

典型開發流程示例（以圖書管理為例）

1. 后端：
   • 創建 models/book.js
   • 開發 controllers/bookController.js（CRUD操作）
   • 配置 routes/book.js
2. 前端：
   • 創建 BookList.jsx（展示數據）
   • 開發 BookForm.jsx（表單提交）
   • 在頁面組件中組合使用

建議在 .env 中統一配置：

# 后端
MONGO_URI=mongodb://localhost:27017/bookdb
JWT_SECRET=your_secure_key# 前端
VITE_API_BASE_URL=http://localhost:3000/api