【前端】从零开始的搭建顺序指南（技术栈：Node.js + Express + MongoDB + React）book-management

项目路径总结

后端结构

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