从零开始构建Node.js实际项目案例详解手把手教你掌握全栈开发技能

威震华夏关云长

引言

全栈开发是当今IT行业最受欢迎的技能之一，它要求开发者同时掌握前端和后端技术。Node.js作为基于Chrome V8引擎的JavaScript运行时，使得使用JavaScript进行服务器端编程成为可能，极大地简化了全栈开发的学习曲线。本文将通过一个实际项目案例，手把手教你从零开始构建一个完整的Node.js全栈应用，帮助你掌握全栈开发的核心技能。

1. 环境搭建与准备工作

在开始我们的项目之前，需要确保你的开发环境已经准备就绪。

1.1 安装Node.js和npm

首先，你需要在你的计算机上安装Node.js和npm（Node包管理器）。你可以访问Node.js官网下载最新的LTS（长期支持）版本。

安装完成后，打开终端或命令提示符，运行以下命令验证安装：

2. node -v
3. npm -v

复制代码

如果安装成功，你将看到已安装的Node.js和npm的版本号。

1.2 安装代码编辑器

选择一个合适的代码编辑器对于开发体验至关重要。Visual Studio Code（VS Code）是一个免费且功能强大的选择，它对JavaScript和Node.js有很好的支持。

你可以从VS Code官网下载并安装它。安装后，建议安装以下扩展以提升开发体验：

• ESLint：JavaScript代码检查工具
• Prettier：代码格式化工具
• Node.js Extension Pack：Node.js开发扩展包

1.3 安装MongoDB

我们的项目将使用MongoDB作为数据库。你可以从MongoDB官网下载并安装MongoDB Community Server。

安装完成后，确保MongoDB服务正在运行。在Windows上，你可以通过服务管理器检查；在macOS或Linux上，可以使用以下命令：

2. sudo systemctl status mongod  # 对于使用systemd的系统
3. sudo service mongod status   # 对于使用init.d的系统

复制代码

2. 项目初始化与基础架构设计

2.1 创建项目目录

首先，让我们创建一个项目目录并初始化npm项目：

2. mkdir nodejs-fullstack-project
3. cd nodejs-fullstack-project
4. npm init -y

复制代码

这将创建一个名为nodejs-fullstack-project的目录，并在其中生成一个package.json文件。

2.2 项目结构设计

一个好的项目结构能够使代码更易于维护和扩展。我们的项目将采用以下结构：

2. nodejs-fullstack-project/
3. ├── client/                 # 前端React应用
4. ├── server/                 # 后端Node.js应用
5. │   ├── config/             # 配置文件
6. │   ├── controllers/        # 控制器
7. │   ├── models/             # 数据模型
8. │   ├── routes/             # 路由定义
9. │   ├── middleware/         # 中间件
10. │   └── utils/              # 工具函数
11. ├── .env                    # 环境变量
12. ├── .gitignore              # Git忽略文件
13. └── package.json            # 项目依赖和脚本

复制代码

让我们创建这个结构：

2. mkdir -p client server/{config,controllers,models,routes,middleware,utils}
3. touch .env .gitignore

复制代码

2.3 安装项目依赖

我们需要安装一些核心依赖来构建我们的应用。首先，安装后端依赖：

2. npm install express mongoose cors dotenv bcryptjs jsonwebtoken
3. npm install --save-dev nodemon

复制代码

这些依赖的作用如下：

• express：Node.js的Web应用框架
• mongoose：MongoDB对象建模工具
• cors：用于处理跨域资源共享
• dotenv：用于加载环境变量
• bcryptjs：用于密码哈希
• jsonwebtoken：用于生成和验证JWT令牌
• nodemon：开发时自动重启服务器

接下来，创建前端应用并安装依赖：

2. npx create-react-app client
3. cd client
4. npm install axios react-router-dom

复制代码

• axios：用于发送HTTP请求
• react-router-dom：React的路由库

2.4 配置package.json脚本

打开package.json文件，添加以下脚本：

2. "scripts": {
3.   "start": "node server/index.js",
4.   "server": "nodemon server/index.js",
5.   "client": "npm start --prefix client",
6.   "dev": "concurrently "npm run server" "npm run client"",
7.   "build": "npm run build --prefix client"
8. }

复制代码

你还需要安装concurrently来同时运行前端和后端：

2. npm install --save-dev concurrently

复制代码

3. 后端API开发

现在，让我们开始构建后端API。我们将创建一个简单的任务管理应用，它将包括用户认证和任务管理功能。

3.1 创建Express服务器

在server目录下创建index.js文件：

2. const express = require('express');
3. const mongoose = require('mongoose');
4. const cors = require('cors');
5. const dotenv = require('dotenv');
7. // 加载环境变量
8. dotenv.config();
10. const app = express();
12. // 中间件
13. app.use(cors());
14. app.use(express.json());
16. // 数据库连接
17. mongoose.connect(process.env.MONGO_URI, {
18.   useNewUrlParser: true,
19.   useUnifiedTopology: true,
20. })
21. .then(() => console.log('MongoDB connected'))
22. .catch(err => console.log(err));
24. // 路由
25. app.get('/', (req, res) => res.send('API Running'));
27. // 定义端口
28. const PORT = process.env.PORT || 5000;
30. app.listen(PORT, () => console.log(`Server started on port ${PORT}`));

复制代码

3.2 配置环境变量

打开.env文件，添加以下内容：

2. MONGO_URI=mongodb://localhost:27017/taskmanager
3. JWT_SECRET=your_jwt_secret
4. PORT=5000

复制代码

3.3 创建数据模型

在server/models目录下，我们将创建两个模型：User和Task。

创建server/models/User.js：

2. const mongoose = require('mongoose');
4. const UserSchema = new mongoose.Schema({
5.   name: {
6.     type: String,
7.     required: true
8.   },
9.   email: {
10.     type: String,
11.     required: true,
12.     unique: true
13.   },
14.   password: {
15.     type: String,
16.     required: true
17.   },
18.   date: {
19.     type: Date,
20.     default: Date.now
21.   }
22. });
24. module.exports = mongoose.model('user', UserSchema);

复制代码

创建server/models/Task.js：

2. const mongoose = require('mongoose');
4. const TaskSchema = new mongoose.Schema({
5.   user: {
6.     type: mongoose.Schema.Types.ObjectId,
7.     ref: 'user'
8.   },
9.   title: {
10.     type: String,
11.     required: true
12.   },
13.   description: {
14.     type: String,
15.     required: true
16.   },
17.   status: {
18.     type: String,
19.     enum: ['To Do', 'In Progress', 'Completed'],
20.     default: 'To Do'
21.   },
22.   date: {
23.     type: Date,
24.     default: Date.now
25.   }
26. });
28. module.exports = mongoose.model('task', TaskSchema);

复制代码

3.4 创建认证中间件

在server/middleware目录下创建auth.js文件：

2. const jwt = require('jsonwebtoken');
3. const config = require('config');
5. module.exports = function(req, res, next) {
6.   // 从请求头获取token
7.   const token = req.header('x-auth-token');
9.   // 检查是否有token
10.   if (!token) {
11.     return res.status(401).json({ msg: 'No token, authorization denied' });
12.   }
14.   try {
15.     // 验证token
16.     const decoded = jwt.verify(token, process.env.JWT_SECRET);
17.    
18.     // 将用户信息添加到请求对象
19.     req.user = decoded.user;
20.     next();
21.   } catch (err) {
22.     res.status(401).json({ msg: 'Token is not valid' });
23.   }
24. };

复制代码

3.5 创建控制器

在server/controllers目录下，我们将创建用户和任务的控制器。

创建server/controllers/userController.js：

2. const bcrypt = require('bcryptjs');
3. const jwt = require('jsonwebtoken');
4. const User = require('../models/User');
6. // 注册用户
7. exports.registerUser = async (req, res) => {
8.   const { name, email, password } = req.body;
10.   try {
11.     // 检查用户是否已存在
12.     let user = await User.findOne({ email });
13.     if (user) {
14.       return res.status(400).json({ msg: 'User already exists' });
15.     }
17.     // 创建新用户
18.     user = new User({
19.       name,
20.       email,
21.       password
22.     });
24.     // 加密密码
25.     const salt = await bcrypt.genSalt(10);
26.     user.password = await bcrypt.hash(password, salt);
28.     // 保存用户到数据库
29.     await user.save();
31.     // 创建JWT
32.     const payload = {
33.       user: {
34.         id: user.id
35.       }
36.     };
38.     jwt.sign(
39.       payload,
40.       process.env.JWT_SECRET,
41.       { expiresIn: '5h' },
42.       (err, token) => {
43.         if (err) throw err;
44.         res.json({ token });
45.       }
46.     );
47.   } catch (err) {
48.     console.error(err.message);
49.     res.status(500).send('Server error');
50.   }
51. };
53. // 用户登录
54. exports.loginUser = async (req, res) => {
55.   const { email, password } = req.body;
57.   try {
58.     // 检查用户是否存在
59.     let user = await User.findOne({ email });
60.     if (!user) {
61.       return res.status(400).json({ msg: 'Invalid credentials' });
62.     }
64.     // 验证密码
65.     const isMatch = await bcrypt.compare(password, user.password);
66.     if (!isMatch) {
67.       return res.status(400).json({ msg: 'Invalid credentials' });
68.     }
70.     // 创建JWT
71.     const payload = {
72.       user: {
73.         id: user.id
74.       }
75.     };
77.     jwt.sign(
78.       payload,
79.       process.env.JWT_SECRET,
80.       { expiresIn: '5h' },
81.       (err, token) => {
82.         if (err) throw err;
83.         res.json({ token });
84.       }
85.     );
86.   } catch (err) {
87.     console.error(err.message);
88.     res.status(500).send('Server error');
89.   }
90. };
92. // 获取当前用户信息
93. exports.getCurrentUser = async (req, res) => {
94.   try {
95.     const user = await User.findById(req.user.id).select('-password');
96.     res.json(user);
97.   } catch (err) {
98.     console.error(err.message);
99.     res.status(500).send('Server error');
100.   }
101. };

复制代码

创建server/controllers/taskController.js：

2. const Task = require('../models/Task');
4. // 获取所有任务
5. exports.getTasks = async (req, res) => {
6.   try {
7.     const tasks = await Task.find({ user: req.user.id }).sort({ date: -1 });
8.     res.json(tasks);
9.   } catch (err) {
10.     console.error(err.message);
11.     res.status(500).send('Server error');
12.   }
13. };
15. // 添加新任务
16. exports.addTask = async (req, res) => {
17.   const { title, description, status } = req.body;
19.   try {
20.     const newTask = new Task({
21.       title,
22.       description,
23.       status,
24.       user: req.user.id
25.     });
27.     const task = await newTask.save();
28.     res.json(task);
29.   } catch (err) {
30.     console.error(err.message);
31.     res.status(500).send('Server error');
32.   }
33. };
35. // 更新任务
36. exports.updateTask = async (req, res) => {
37.   const { title, description, status } = req.body;
39.   // 构建任务对象
40.   const taskFields = {};
41.   if (title) taskFields.title = title;
42.   if (description) taskFields.description = description;
43.   if (status) taskFields.status = status;
45.   try {
46.     let task = await Task.findById(req.params.id);
48.     if (!task) return res.status(404).json({ msg: 'Task not found' });
50.     // 确保用户拥有任务
51.     if (task.user.toString() !== req.user.id) {
52.       return res.status(401).json({ msg: 'Not authorized' });
53.     }
55.     task = await Task.findByIdAndUpdate(
56.       req.params.id,
57.       { $set: taskFields },
58.       { new: true }
59.     );
61.     res.json(task);
62.   } catch (err) {
63.     console.error(err.message);
64.     res.status(500).send('Server error');
65.   }
66. };
68. // 删除任务
69. exports.deleteTask = async (req, res) => {
70.   try {
71.     let task = await Task.findById(req.params.id);
73.     if (!task) return res.status(404).json({ msg: 'Task not found' });
75.     // 确保用户拥有任务
76.     if (task.user.toString() !== req.user.id) {
77.       return res.status(401).json({ msg: 'Not authorized' });
78.     }
80.     await Task.findByIdAndRemove(req.params.id);
82.     res.json({ msg: 'Task removed' });
83.   } catch (err) {
84.     console.error(err.message);
85.     res.status(500).send('Server error');
86.   }
87. };

复制代码

3.6 创建路由

在server/routes目录下，我们将创建用户和任务的路由。

创建server/routes/users.js：

2. const express = require('express');
3. const router = express.Router();
4. const userController = require('../controllers/userController');
5. const auth = require('../middleware/auth');
7. // @route   POST api/users/register
8. // @desc    注册用户
9. // @access  公开
10. router.post('/register', userController.registerUser);
12. // @route   POST api/users/login
13. // @desc    用户登录
14. // @access  公开
15. router.post('/login', userController.loginUser);
17. // @route   GET api/users/current
18. // @desc    获取当前用户
19. // @access  私有
20. router.get('/current', auth, userController.getCurrentUser);
22. module.exports = router;

复制代码

创建server/routes/tasks.js：

2. const express = require('express');
3. const router = express.Router();
4. const taskController = require('../controllers/taskController');
5. const auth = require('../middleware/auth');
7. // @route   GET api/tasks
8. // @desc    获取所有任务
9. // @access  私有
10. router.get('/', auth, taskController.getTasks);
12. // @route   POST api/tasks
13. // @desc    添加新任务
14. // @access  私有
15. router.post('/', auth, taskController.addTask);
17. // @route   PUT api/tasks/:id
18. // @desc    更新任务
19. // @access  私有
20. router.put('/:id', auth, taskController.updateTask);
22. // @route   DELETE api/tasks/:id
23. // @desc    删除任务
24. // @access  私有
25. router.delete('/:id', auth, taskController.deleteTask);
27. module.exports = router;

复制代码

3.7 更新服务器文件

现在，让我们更新server/index.js文件，添加我们创建的路由：

2. const express = require('express');
3. const mongoose = require('mongoose');
4. const cors = require('cors');
5. const dotenv = require('dotenv');
7. // 加载环境变量
8. dotenv.config();
10. const app = express();
12. // 中间件
13. app.use(cors());
14. app.use(express.json());
16. // 数据库连接
17. mongoose.connect(process.env.MONGO_URI, {
18.   useNewUrlParser: true,
19.   useUnifiedTopology: true,
20. })
21. .then(() => console.log('MongoDB connected'))
22. .catch(err => console.log(err));
24. // 路由
25. app.get('/', (req, res) => res.send('API Running'));
27. // 定义路由
28. app.use('/api/users', require('./routes/users'));
29. app.use('/api/tasks', require('./routes/tasks'));
31. // 定义端口
32. const PORT = process.env.PORT || 5000;
34. app.listen(PORT, () => console.log(`Server started on port ${PORT}`));

复制代码

4. 前端界面开发

现在，让我们开始构建前端界面。我们将使用React来创建一个单页应用。

4.1 设置React应用

我们已经使用create-react-app创建了React应用。现在，让我们清理并设置基本结构。

在client/src目录下，创建以下文件夹结构：

2. client/src/
3. ├── components/         # React组件
4. ├── context/           # React Context
5. ├── services/          # API服务
6. └── utils/             # 工具函数

复制代码

4.2 创建Context

我们将使用React Context来管理全局状态，如用户认证状态。

创建client/src/context/AuthContext.js：

2. import React, { createContext, useState, useEffect } from 'react';
3. import authService from '../services/authService';
5. export const AuthContext = createContext();
7. export const AuthProvider = ({ children }) => {
8.   const [user, setUser] = useState(null);
9.   const [isAuthenticated, setIsAuthenticated] = useState(false);
10.   const [loading, setLoading] = useState(true);
12.   useEffect(() => {
13.     const loadUser = async () => {
14.       const token = localStorage.getItem('token');
15.       
16.       if (token) {
17.         authService.setAuthToken(token);
18.         
19.         try {
20.           const res = await authService.getCurrentUser();
21.           setUser(res.data);
22.           setIsAuthenticated(true);
23.         } catch (err) {
24.           localStorage.removeItem('token');
25.           setUser(null);
26.           setIsAuthenticated(false);
27.         }
28.       }
29.       
30.       setLoading(false);
31.     };
33.     loadUser();
34.   }, []);
36.   // 注册用户
37.   const register = async (userData) => {
38.     try {
39.       const res = await authService.register(userData);
40.       localStorage.setItem('token', res.data.token);
41.       authService.setAuthToken(res.data.token);
42.       
43.       const userRes = await authService.getCurrentUser();
44.       setUser(userRes.data);
45.       setIsAuthenticated(true);
46.       
47.       return { success: true };
48.     } catch (err) {
49.       return {
50.         success: false,
51.         error: err.response.data.msg || 'Registration failed'
52.       };
53.     }
54.   };
56.   // 用户登录
57.   const login = async (userData) => {
58.     try {
59.       const res = await authService.login(userData);
60.       localStorage.setItem('token', res.data.token);
61.       authService.setAuthToken(res.data.token);
62.       
63.       const userRes = await authService.getCurrentUser();
64.       setUser(userRes.data);
65.       setIsAuthenticated(true);
66.       
67.       return { success: true };
68.     } catch (err) {
69.       return {
70.         success: false,
71.         error: err.response.data.msg || 'Login failed'
72.       };
73.     }
74.   };
76.   // 用户登出
77.   const logout = () => {
78.     localStorage.removeItem('token');
79.     setUser(null);
80.     setIsAuthenticated(false);
81.   };
83.   return (
84.     <AuthContext.Provider
85.       value={{
86.         user,
87.         isAuthenticated,
88.         loading,
89.         register,
90.         login,
91.         logout
92.       }}
93.     >
94.       {children}
95.     </AuthContext.Provider>
96.   );
97. };

复制代码

4.3 创建API服务

在client/src/services目录下，我们将创建API服务文件。

创建client/src/services/authService.js：

2. import axios from 'axios';
4. const API_URL = '/api/users';
6. // 设置axios默认headers
7. const setAuthToken = token => {
8.   if (token) {
9.     axios.defaults.headers.common['x-auth-token'] = token;
10.   } else {
11.     delete axios.defaults.headers.common['x-auth-token'];
12.   }
13. };
15. // 注册用户
16. const register = async userData => {
17.   const response = await axios.post(`${API_URL}/register`, userData);
18.   return response;
19. };
21. // 用户登录
22. const login = async userData => {
23.   const response = await axios.post(`${API_URL}/login`, userData);
24.   return response;
25. };
27. // 获取当前用户
28. const getCurrentUser = async () => {
29.   const response = await axios.get(`${API_URL}/current`);
30.   return response;
31. };
33. export default {
34.   setAuthToken,
35.   register,
36.   login,
37.   getCurrentUser
38. };

复制代码

创建client/src/services/taskService.js：

2. import axios from 'axios';
4. const API_URL = '/api/tasks';
6. // 获取所有任务
7. const getTasks = async () => {
8.   const response = await axios.get(API_URL);
9.   return response;
10. };
12. // 添加新任务
13. const addTask = async taskData => {
14.   const response = await axios.post(API_URL, taskData);
15.   return response;
16. };
18. // 更新任务
19. const updateTask = async (id, taskData) => {
20.   const response = await axios.put(`${API_URL}/${id}`, taskData);
21.   return response;
22. };
24. // 删除任务
25. const deleteTask = async id => {
26.   const response = await axios.delete(`${API_URL}/${id}`);
27.   return response;
28. };
30. export default {
31.   getTasks,
32.   addTask,
33.   updateTask,
34.   deleteTask
35. };

复制代码

4.4 创建React组件

现在，让我们创建React组件来构建我们的用户界面。

创建client/src/components/auth/Register.js：

2. import React, { useState, useContext } from 'react';
3. import { useNavigate } from 'react-router-dom';
4. import { AuthContext } from '../../context/AuthContext';
6. const Register = () => {
7.   const [formData, setFormData] = useState({
8.     name: '',
9.     email: '',
10.     password: '',
11.     password2: ''
12.   });
13.   
14.   const [alert, setAlert] = useState(null);
15.   
16.   const { name, email, password, password2 } = formData;
17.   
18.   const { register } = useContext(AuthContext);
19.   const navigate = useNavigate();
21.   const onChange = e => setFormData({ ...formData, [e.target.name]: e.target.value });
23.   const onSubmit = async e => {
24.     e.preventDefault();
25.    
26.     if (password !== password2) {
27.       setAlert({ type: 'danger', message: 'Passwords do not match' });
28.       return;
29.     }
30.    
31.     const result = await register({ name, email, password });
32.    
33.     if (result.success) {
34.       navigate('/dashboard');
35.     } else {
36.       setAlert({ type: 'danger', message: result.error });
37.     }
38.   };
40.   return (
41.     <div className="register-container">
42.       <h1>Sign Up</h1>
43.       {alert && <div className={`alert alert-${alert.type}`}>{alert.message}</div>}
44.       <form onSubmit={onSubmit}>
45.         <div className="form-group">
46.           <label htmlFor="name">Name</label>
47.           <input
48.             type="text"
49.             name="name"
50.             value={name}
51.             onChange={onChange}
52.             required
53.           />
54.         </div>
55.         <div className="form-group">
56.           <label htmlFor="email">Email Address</label>
57.           <input
58.             type="email"
59.             name="email"
60.             value={email}
61.             onChange={onChange}
62.             required
63.           />
64.         </div>
65.         <div className="form-group">
66.           <label htmlFor="password">Password</label>
67.           <input
68.             type="password"
69.             name="password"
70.             value={password}
71.             onChange={onChange}
72.             required
73.             minLength="6"
74.           />
75.         </div>
76.         <div className="form-group">
77.           <label htmlFor="password2">Confirm Password</label>
78.           <input
79.             type="password"
80.             name="password2"
81.             value={password2}
82.             onChange={onChange}
83.             required
84.             minLength="6"
85.           />
86.         </div>
87.         <button type="submit" className="btn btn-primary">Register</button>
88.       </form>
89.     </div>
90.   );
91. };
93. export default Register;

复制代码

创建client/src/components/auth/Login.js：

2. import React, { useState, useContext } from 'react';
3. import { useNavigate } from 'react-router-dom';
4. import { AuthContext } from '../../context/AuthContext';
6. const Login = () => {
7.   const [formData, setFormData] = useState({
8.     email: '',
9.     password: ''
10.   });
11.   
12.   const [alert, setAlert] = useState(null);
13.   
14.   const { email, password } = formData;
15.   
16.   const { login } = useContext(AuthContext);
17.   const navigate = useNavigate();
19.   const onChange = e => setFormData({ ...formData, [e.target.name]: e.target.value });
21.   const onSubmit = async e => {
22.     e.preventDefault();
23.    
24.     const result = await login({ email, password });
25.    
26.     if (result.success) {
27.       navigate('/dashboard');
28.     } else {
29.       setAlert({ type: 'danger', message: result.error });
30.     }
31.   };
33.   return (
34.     <div className="login-container">
35.       <h1>Login</h1>
36.       {alert && <div className={`alert alert-${alert.type}`}>{alert.message}</div>}
37.       <form onSubmit={onSubmit}>
38.         <div className="form-group">
39.           <label htmlFor="email">Email Address</label>
40.           <input
41.             type="email"
42.             name="email"
43.             value={email}
44.             onChange={onChange}
45.             required
46.           />
47.         </div>
48.         <div className="form-group">
49.           <label htmlFor="password">Password</label>
50.           <input
51.             type="password"
52.             name="password"
53.             value={password}
54.             onChange={onChange}
55.             required
56.           />
57.         </div>
58.         <button type="submit" className="btn btn-primary">Login</button>
59.       </form>
60.     </div>
61.   );
62. };
64. export default Login;

复制代码

创建client/src/components/tasks/TaskForm.js：

2. import React, { useState, useContext, useEffect } from 'react';
3. import { AuthContext } from '../../context/AuthContext';
4. import taskService from '../../services/taskService';
6. const TaskForm = ({ currentTask, clearCurrent }) => {
7.   const { user } = useContext(AuthContext);
8.   
9.   const [task, setTask] = useState({
10.     title: '',
11.     description: '',
12.     status: 'To Do'
13.   });
14.   
15.   const [alert, setAlert] = useState(null);
17.   useEffect(() => {
18.     if (currentTask !== null) {
19.       setTask(currentTask);
20.     } else {
21.       setTask({
22.         title: '',
23.         description: '',
24.         status: 'To Do'
25.       });
26.     }
27.   }, [currentTask]);
29.   const { title, description, status } = task;
31.   const onChange = e => setTask({ ...task, [e.target.name]: e.target.value });
33.   const onSubmit = async e => {
34.     e.preventDefault();
35.    
36.     if (title === '' || description === '') {
37.       setAlert({ type: 'danger', message: 'Please enter title and description' });
38.       return;
39.     }
40.    
41.     try {
42.       if (currentTask === null) {
43.         await taskService.addTask({ ...task, user: user._id });
44.         setAlert({ type: 'success', message: 'Task added successfully' });
45.       } else {
46.         await taskService.updateTask(currentTask._id, task);
47.         setAlert({ type: 'success', message: 'Task updated successfully' });
48.       }
49.       
50.       // 清空表单
51.       setTask({
52.         title: '',
53.         description: '',
54.         status: 'To Do'
55.       });
56.       
57.       clearCurrent();
58.     } catch (err) {
59.       setAlert({ type: 'danger', message: 'Error saving task' });
60.     }
61.   };
63.   return (
64.     <div className="task-form-container">
65.       <h2>{currentTask ? 'Edit Task' : 'Add Task'}</h2>
66.       {alert && <div className={`alert alert-${alert.type}`}>{alert.message}</div>}
67.       <form onSubmit={onSubmit}>
68.         <div className="form-group">
69.           <label htmlFor="title">Title</label>
70.           <input
71.             type="text"
72.             name="title"
73.             value={title}
74.             onChange={onChange}
75.             required
76.           />
77.         </div>
78.         <div className="form-group">
79.           <label htmlFor="description">Description</label>
80.           <textarea
81.             name="description"
82.             value={description}
83.             onChange={onChange}
84.             required
85.           />
86.         </div>
87.         <div className="form-group">
88.           <label htmlFor="status">Status</label>
89.           <select
90.             name="status"
91.             value={status}
92.             onChange={onChange}
93.           >
94.             <option value="To Do">To Do</option>
95.             <option value="In Progress">In Progress</option>
96.             <option value="Completed">Completed</option>
97.           </select>
98.         </div>
99.         <div className="form-group">
100.           <button type="submit" className="btn btn-primary">
101.             {currentTask ? 'Update Task' : 'Add Task'}
102.           </button>
103.           {currentTask && (
104.             <button
105.               type="button"
106.               className="btn btn-light"
107.               onClick={clearCurrent}
108.             >
109.               Clear
110.             </button>
111.           )}
112.         </div>
113.       </form>
114.     </div>
115.   );
116. };
118. export default TaskForm;

复制代码

创建client/src/components/tasks/TaskItem.js：

2. import React, { useContext } from 'react';
3. import { AuthContext } from '../../context/AuthContext';
4. import taskService from '../../services/taskService';
6. const TaskItem = ({ task, setCurrent, clearCurrent }) => {
7.   const { user } = useContext(AuthContext);
9.   const onDelete = async id => {
10.     if (window.confirm('Are you sure you want to delete this task?')) {
11.       try {
12.         await taskService.deleteTask(id);
13.         clearCurrent();
14.       } catch (err) {
15.         console.error(err);
16.       }
17.     }
18.   };
20.   return (
21.     <div className="task-item">
22.       <h3>{task.title}</h3>
23.       <p>{task.description}</p>
24.       <span className={`status status-${task.status.replace(' ', '-').toLowerCase()}`}>
25.         {task.status}
26.       </span>
27.       <div className="task-actions">
28.         <button
29.           onClick={() => setCurrent(task)}
30.           className="btn btn-sm btn-primary"
31.         >
32.           Edit
33.         </button>
34.         <button
35.           onClick={() => onDelete(task._id)}
36.           className="btn btn-sm btn-danger"
37.         >
38.           Delete
39.         </button>
40.       </div>
41.     </div>
42.   );
43. };
45. export default TaskItem;

复制代码

创建client/src/components/tasks/TaskList.js：

2. import React, { useState, useEffect, useContext } from 'react';
3. import { AuthContext } from '../../context/AuthContext';
4. import taskService from '../../services/taskService';
5. import TaskItem from './TaskItem';
7. const TaskList = () => {
8.   const { user } = useContext(AuthContext);
9.   const [tasks, setTasks] = useState([]);
10.   const [loading, setLoading] = useState(true);
11.   const [filter, setFilter] = useState('All');
13.   useEffect(() => {
14.     const getTasks = async () => {
15.       try {
16.         const res = await taskService.getTasks();
17.         setTasks(res.data);
18.         setLoading(false);
19.       } catch (err) {
20.         console.error(err);
21.         setLoading(false);
22.       }
23.     };
25.     getTasks();
26.   }, [user]);
28.   const filteredTasks = filter === 'All'
29.     ? tasks
30.     : tasks.filter(task => task.status === filter);
32.   if (loading) {
33.     return <div>Loading tasks...</div>;
34.   }
36.   return (
37.     <div className="task-list-container">
38.       <h2>My Tasks</h2>
39.       <div className="filter-container">
40.         <button
41.           className={`btn ${filter === 'All' ? 'btn-primary' : 'btn-light'}`}
42.           onClick={() => setFilter('All')}
43.         >
44.           All
45.         </button>
46.         <button
47.           className={`btn ${filter === 'To Do' ? 'btn-primary' : 'btn-light'}`}
48.           onClick={() => setFilter('To Do')}
49.         >
50.           To Do
51.         </button>
52.         <button
53.           className={`btn ${filter === 'In Progress' ? 'btn-primary' : 'btn-light'}`}
54.           onClick={() => setFilter('In Progress')}
55.         >
56.           In Progress
57.         </button>
58.         <button
59.           className={`btn ${filter === 'Completed' ? 'btn-primary' : 'btn-light'}`}
60.           onClick={() => setFilter('Completed')}
61.         >
62.           Completed
63.         </button>
64.       </div>
65.       {filteredTasks.length === 0 ? (
66.         <div className="no-tasks">No tasks found</div>
67.       ) : (
68.         <div className="task-list">
69.           {filteredTasks.map(task => (
70.             <TaskItem key={task._id} task={task} />
71.           ))}
72.         </div>
73.       )}
74.     </div>
75.   );
76. };
78. export default TaskList;

复制代码

创建client/src/components/layout/Navbar.js：

2. import React, { useContext } from 'react';
3. import { Link, useNavigate } from 'react-router-dom';
4. import { AuthContext } from '../../context/AuthContext';
6. const Navbar = () => {
7.   const { isAuthenticated, user, logout } = useContext(AuthContext);
8.   const navigate = useNavigate();
10.   const onLogout = () => {
11.     logout();
12.     navigate('/login');
13.   };
15.   const authLinks = (
16.     <>
17.       <li>Hello, {user && user.name}</li>
18.       <li>
19.         <a onClick={onLogout} href="#!">
20.           Logout
21.         </a>
22.       </li>
23.     </>
24.   );
26.   const guestLinks = (
27.     <>
28.       <li>
29.         <Link to="/register">Register</Link>
30.       </li>
31.       <li>
32.         <Link to="/login">Login</Link>
33.       </li>
34.     </>
35.   );
37.   return (
38.     <nav className="navbar">
39.       <h1>
40.         <Link to="/">Task Manager</Link>
41.       </h1>
42.       <ul>{isAuthenticated ? authLinks : guestLinks}</ul>
43.     </nav>
44.   );
45. };
47. export default Navbar;

复制代码

4.5 创建页面组件

在client/src目录下，创建pages文件夹，并在其中创建以下页面组件。

创建client/src/pages/Home.js：

2. import React from 'react';
3. import { Link } from 'react-router-dom';
5. const Home = () => {
6.   return (
7.     <div className="home-container">
8.       <h1>Welcome to Task Manager</h1>
9.       <p>Please log in or register to manage your tasks</p>
10.       <div className="buttons">
11.         <Link to="/register" className="btn btn-primary">
12.           Register
13.         </Link>
14.         <Link to="/login" className="btn btn-light">
15.           Login
16.         </Link>
17.       </div>
18.     </div>
19.   );
20. };
22. export default Home;

复制代码

创建client/src/pages/Dashboard.js：

2. import React, { useState, useContext } from 'react';
3. import { AuthContext } from '../context/AuthContext';
4. import TaskForm from '../components/tasks/TaskForm';
5. import TaskList from '../components/tasks/TaskList';
7. const Dashboard = () => {
8.   const { isAuthenticated } = useContext(AuthContext);
9.   const [currentTask, setCurrent] = useState(null);
11.   const clearCurrent = () => {
12.     setCurrent(null);
13.   };
15.   if (!isAuthenticated) {
16.     // 这里应该重定向到登录页面，但我们将在路由中处理
17.     return null;
18.   }
20.   return (
21.     <div className="dashboard-container">
22.       <div className="dashboard-content">
23.         <div className="task-form-section">
24.           <TaskForm currentTask={currentTask} clearCurrent={clearCurrent} />
25.         </div>
26.         <div className="task-list-section">
27.           <TaskList setCurrent={setCurrent} clearCurrent={clearCurrent} />
28.         </div>
29.       </div>
30.     </div>
31.   );
32. };
34. export default Dashboard;

复制代码

4.6 更新App.js

现在，让我们更新client/src/App.js文件，设置路由和上下文提供者：

2. import React from 'react';
3. import { BrowserRouter as Router, Routes, Route, Navigate } from 'react-router-dom';
4. import { AuthProvider } from './context/AuthContext';
5. import Navbar from './components/layout/Navbar';
6. import Home from './pages/Home';
7. import Register from './components/auth/Register';
8. import Login from './components/auth/Login';
9. import Dashboard from './pages/Dashboard';
10. import './App.css';
12. function App() {
13.   return (
14.     <AuthProvider>
15.       <Router>
16.         <div className="App">
17.           <Navbar />
18.           <div className="container">
19.             <Routes>
20.               <Route path="/" element={<Home />} />
21.               <Route path="/register" element={<Register />} />
22.               <Route path="/login" element={<Login />} />
23.               <Route
24.                 path="/dashboard"
25.                 element={
26.                   <PrivateRoute>
27.                     <Dashboard />
28.                   </PrivateRoute>
29.                 }
30.               />
31.             </Routes>
32.           </div>
33.         </div>
34.       </Router>
35.     </AuthProvider>
36.   );
37. }
39. // 私有路由组件
40. const PrivateRoute = ({ children }) => {
41.   const { isAuthenticated, loading } = React.useContext(AuthContext);
43.   if (loading) {
44.     return <div>Loading...</div>;
45.   }
47.   return isAuthenticated ? children : <Navigate to="/login" />;
48. };
50. export default App;

复制代码

4.7 添加基本样式

创建client/src/App.css文件，添加一些基本样式：

2. /* 全局样式 */
3. * {
4.   box-sizing: border-box;
5.   margin: 0;
6.   padding: 0;
7. }
9. body {
10.   font-family: 'Arial', sans-serif;
11.   line-height: 1.6;
12.   background-color: #f4f4f4;
13.   color: #333;
14. }
16. .container {
17.   max-width: 1200px;
18.   margin: 2rem auto;
19.   padding: 0 1rem;
20. }
22. /* 导航栏 */
23. .navbar {
24.   display: flex;
25.   justify-content: space-between;
26.   align-items: center;
27.   background: #333;
28.   color: #fff;
29.   padding: 1rem;
30. }
32. .navbar h1 a {
33.   color: #fff;
34.   text-decoration: none;
35. }
37. .navbar ul {
38.   display: flex;
39.   list-style: none;
40. }
42. .navbar ul li {
43.   margin-left: 1rem;
44. }
46. .navbar ul li a {
47.   color: #fff;
48.   text-decoration: none;
49. }
51. /* 按钮样式 */
52. .btn {
53.   display: inline-block;
54.   background: #333;
55.   color: #fff;
56.   padding: 0.5rem 1rem;
57.   border: none;
58.   cursor: pointer;
59.   font-size: 1rem;
60.   border-radius: 5px;
61.   margin-right: 0.5rem;
62.   text-decoration: none;
63. }
65. .btn:hover {
66.   background: #555;
67. }
69. .btn-primary {
70.   background: #007bff;
71. }
73. .btn-primary:hover {
74.   background: #0069d9;
75. }
77. .btn-danger {
78.   background: #dc3545;
79. }
81. .btn-danger:hover {
82.   background: #c82333;
83. }
85. .btn-light {
86.   background: #f8f9fa;
87.   color: #333;
88. }
90. .btn-light:hover {
91.   background: #e2e6ea;
92. }
94. .btn-sm {
95.   padding: 0.25rem 0.5rem;
96.   font-size: 0.875rem;
97. }
99. /* 表单样式 */
100. .form-group {
101.   margin-bottom: 1rem;
102. }
104. .form-group label {
105.   display: block;
106.   margin-bottom: 0.5rem;
107. }
109. .form-group input,
110. .form-group textarea,
111. .form-group select {
112.   width: 100%;
113.   padding: 0.5rem;
114.   border: 1px solid #ddd;
115.   border-radius: 5px;
116. }
118. .form-group textarea {
119.   height: 100px;
120. }
122. /* 警告框样式 */
123. .alert {
124.   padding: 0.75rem 1.25rem;
125.   margin-bottom: 1rem;
126.   border: 1px solid transparent;
127.   border-radius: 5px;
128. }
130. .alert-danger {
131.   color: #721c24;
132.   background-color: #f8d7da;
133.   border-color: #f5c6cb;
134. }
136. .alert-success {
137.   color: #155724;
138.   background-color: #d4edda;
139.   border-color: #c3e6cb;
140. }
142. /* 首页样式 */
143. .home-container {
144.   text-align: center;
145.   padding: 2rem;
146. }
148. .home-container h1 {
149.   margin-bottom: 1rem;
150. }
152. .home-container p {
153.   margin-bottom: 2rem;
154. }
156. /* 认证页面样式 */
157. .register-container,
158. .login-container {
159.   max-width: 500px;
160.   margin: 2rem auto;
161.   padding: 2rem;
162.   background: #fff;
163.   border-radius: 5px;
164.   box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
165. }
167. /* 仪表板样式 */
168. .dashboard-container {
169.   display: flex;
170.   flex-direction: column;
171. }
173. .dashboard-content {
174.   display: grid;
175.   grid-template-columns: 1fr 2fr;
176.   gap: 2rem;
177. }
179. /* 任务表单样式 */
180. .task-form-container {
181.   background: #fff;
182.   padding: 1.5rem;
183.   border-radius: 5px;
184.   box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
185. }
187. /* 任务列表样式 */
188. .task-list-container {
189.   background: #fff;
190.   padding: 1.5rem;
191.   border-radius: 5px;
192.   box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
193. }
195. .filter-container {
196.   margin-bottom: 1rem;
197. }
199. .filter-container .btn {
200.   margin-right: 0.5rem;
201. }
203. .task-list {
204.   display: grid;
205.   grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
206.   gap: 1rem;
207. }
209. .task-item {
210.   background: #f9f9f9;
211.   padding: 1rem;
212.   border-radius: 5px;
213.   border-left: 4px solid #007bff;
214. }
216. .task-item h3 {
217.   margin-bottom: 0.5rem;
218. }
220. .task-item p {
221.   margin-bottom: 1rem;
222. }
224. .status {
225.   display: inline-block;
226.   padding: 0.25rem 0.5rem;
227.   border-radius: 3px;
228.   font-size: 0.8rem;
229.   font-weight: bold;
230. }
232. .status-to-do {
233.   background: #f8d7da;
234.   color: #721c24;
235. }
237. .status-in-progress {
238.   background: #fff3cd;
239.   color: #856404;
240. }
242. .status-completed {
243.   background: #d4edda;
244.   color: #155724;
245. }
247. .task-actions {
248.   margin-top: 1rem;
249. }
251. .no-tasks {
252.   text-align: center;
253.   padding: 2rem;
254.   color: #666;
255. }
257. /* 响应式设计 */
258. @media (max-width: 768px) {
259.   .dashboard-content {
260.     grid-template-columns: 1fr;
261.   }
262.   
263.   .navbar {
264.     flex-direction: column;
265.     text-align: center;
266.   }
267.   
268.   .navbar ul {
269.     margin-top: 1rem;
270.   }
271.   
272.   .navbar ul li {
273.     margin: 0 0.5rem;
274.   }
275. }

复制代码

5. 前后端连接

现在，我们需要确保前端和后端能够正确通信。为此，我们需要设置代理，以便前端可以向后端API发送请求。

5.1 设置代理

在client/package.json文件中，添加以下代理配置：

2. "proxy": "http://localhost:5000"

复制代码

这将允许前端应用将API请求代理到运行在端口5000上的后端服务器。

5.2 添加CORS支持

我们已经安装了cors中间件并在server/index.js中使用了它，这应该已经处理了跨域资源共享问题。但让我们确保它正确配置：

在server/index.js中，更新CORS配置：

2. // 中间件
3. app.use(cors({
4.   origin: 'http://localhost:3000', // 允许来自前端的请求
5.   credentials: true
6. }));
7. app.use(express.json());

复制代码

6. 测试应用

现在，我们已经完成了前后端的开发，让我们测试一下应用是否正常工作。

6.1 启动应用

在项目根目录下，运行以下命令启动应用：

2. npm run dev

复制代码

这将同时启动前端（在端口3000）和后端（在端口5000）。

6.2 测试功能

打开浏览器，访问http://localhost:3000，你应该能够看到首页。尝试以下操作：

1. 注册一个新用户
2. 使用新注册的用户登录
3. 添加一些任务
4. 编辑任务
5. 删除任务
6. 按状态筛选任务
7. 登出并重新登录

如果所有功能都正常工作，那么恭喜你，你已经成功构建了一个全栈应用！

7. 部署应用

开发完成后，你可能希望将应用部署到生产环境。以下是部署应用的基本步骤。

7.1 构建前端应用

首先，构建前端应用：

2. npm run build

复制代码

这将在client/build目录中创建一个优化过的生产版本的前端应用。

7.2 设置Express服务静态文件

更新server/index.js，添加以下代码来服务静态文件：

2. const path = require('path');
4. // 在其他中间件之后，路由之前添加
5. // 静态文件服务
6. if (process.env.NODE_ENV === 'production') {
7.   // 设置静态文件夹
8.   app.use(express.static('client/build'));
10.   // 任何不是API路由的请求都将被重定向到index.html
11.   app.get('*', (req, res) => {
12.     res.sendFile(path.resolve(__dirname, 'client', 'build', 'index.html'));
13.   });
14. }

复制代码

7.3 部署到云服务

你可以选择将应用部署到各种云服务，如Heroku、AWS、Google Cloud等。以下是部署到Heroku的基本步骤：

1. 创建Heroku账户并安装Heroku CLI
2. 在项目根目录下，创建Procfile文件，内容如下：

2. web: npm start

复制代码

1. 初始化Git仓库并提交代码：

2. git init
3. git add .
4. git commit -m "Initial commit"

复制代码

1. 创建Heroku应用并推送代码：

2. heroku create
3. git push heroku master

复制代码

1. 设置环境变量：

2. heroku config:set MONGO_URI=your_mongodb_connection_string
3. heroku config:set JWT_SECRET=your_jwt_secret

复制代码

1. 打开应用：

2. heroku open

复制代码

8. 总结与扩展

通过本文，你已经学会了如何从零开始构建一个完整的Node.js全栈应用。我们涵盖了以下内容：

1. 环境搭建与准备工作
2. 项目初始化与基础架构设计
3. 后端API开发
4. 前端界面开发
5. 前后端连接
6. 测试应用
7. 部署应用

8.1 可能的扩展

这个项目还有很多可以扩展的地方，例如：

1. 添加更多功能：任务分类和标签任务截止日期和提醒任务优先级任务评论和附件
2. 任务分类和标签
3. 任务截止日期和提醒
4. 任务优先级
5. 任务评论和附件
6. 改进用户界面：添加更多动画和过渡效果实现拖放功能来更改任务状态添加深色模式
7. 添加更多动画和过渡效果
8. 实现拖放功能来更改任务状态
9. 添加深色模式
10. 性能优化：实现分页加载任务添加缓存机制优化数据库查询
11. 实现分页加载任务
12. 添加缓存机制
13. 优化数据库查询
14. 添加测试：单元测试集成测试端到端测试
15. 单元测试
16. 集成测试
17. 端到端测试
18. 安全性增强：添加速率限制实现更严格的输入验证添加CSRF保护
19. 添加速率限制
20. 实现更严格的输入验证
21. 添加CSRF保护

添加更多功能：

• 任务分类和标签
• 任务截止日期和提醒
• 任务优先级
• 任务评论和附件

改进用户界面：

• 添加更多动画和过渡效果
• 实现拖放功能来更改任务状态
• 添加深色模式

性能优化：

• 实现分页加载任务
• 添加缓存机制
• 优化数据库查询

添加测试：

• 单元测试
• 集成测试
• 端到端测试

安全性增强：

• 添加速率限制
• 实现更严格的输入验证
• 添加CSRF保护

8.2 学习资源

如果你想进一步学习全栈开发，以下资源可能会有所帮助：

1. 官方文档：Node.js文档Express文档React文档MongoDB文档
2. Node.js文档
3. Express文档
4. React文档
5. MongoDB文档
6. 在线课程：The Web Developer Bootcamp by Colt SteeleMERN Stack Front To Back by Brad TraversyNode.js, Express, MongoDB & More: The Complete Bootcamp by Jonas Schmedtmann
7. The Web Developer Bootcamp by Colt Steele
8. MERN Stack Front To Back by Brad Traversy
9. Node.js, Express, MongoDB & More: The Complete Bootcamp by Jonas Schmedtmann
10. 书籍：“Node.js Design Patterns” by Mario Casciaro“Learning React” by Alex Banks and Eve Porcello“MongoDB: The Definitive Guide” by Shannon Bradshaw, Eoin Brazil, and Kristina Chodorow
11. “Node.js Design Patterns” by Mario Casciaro
12. “Learning React” by Alex Banks and Eve Porcello
13. “MongoDB: The Definitive Guide” by Shannon Bradshaw, Eoin Brazil, and Kristina Chodorow

官方文档：

• Node.js文档
• Express文档
• React文档
• MongoDB文档

在线课程：

• The Web Developer Bootcamp by Colt Steele
• MERN Stack Front To Back by Brad Traversy
• Node.js, Express, MongoDB & More: The Complete Bootcamp by Jonas Schmedtmann

书籍：

• “Node.js Design Patterns” by Mario Casciaro
• “Learning React” by Alex Banks and Eve Porcello
• “MongoDB: The Definitive Guide” by Shannon Bradshaw, Eoin Brazil, and Kristina Chodorow

结语

全栈开发是一项复杂但非常有价值的技能。通过构建实际项目，你不仅学习了技术，还了解了如何将这些技术组合在一起创建完整的应用。希望本文能够帮助你开始你的全栈开发之旅，并激发你进一步探索和学习的兴趣。记住，实践是最好的老师，继续构建项目，不断学习新技术，你将成为一名优秀的全栈开发者。