假设你是一个单人开发者，使用主流技术栈（React + Node.js + MySQL），以下是详细步骤：
---
### **一、需求分析与原型设计**
1. **核心功能清单**
- 用户能添加、删除、标记完成待办事项
- 数据持久化（保存到数据库）
- 简单的界面（列表展示 + 输入框）
2. **手绘草图**
- 用纸笔或 [Excalidraw](https://excalidraw.com/) 画出界面布局：输入框在顶部，列表在下，每条待办有复选框和删除按钮。
3. **用Figma制作低保真原型**
- 创建静态页面，标注交互逻辑（如点击“添加”按钮触发保存）。
---
### **二、技术选型与环境搭建**
1. **明确技术栈**
- 前端：React（Vite脚手架）
- 后端：Node.js + Express框架
- 数据库：MySQL（本地安装或使用云数据库如PlanetScale）
- 部署：Docker + Vercel（前端）/ Railway（后端）
2. **本地环境配置**
```bash
# 安装Node.js（官网下载）和MySQL
# 前端初始化
npm create vite@latest todo-frontend -- --template react
cd todo-frontend && npm install
# 后端初始化
mkdir todo-backend && cd todo-backend
npm init -y
npm install express mysql2 cors
```
---
### **三、后端开发（API实现）**
1. **创建数据库表**
```sql
CREATE TABLE todos (
id INT PRIMARY KEY AUTO_INCREMENT,
title VARCHAR(255) NOT NULL,
completed BOOLEAN DEFAULT false
);
```
2. **编写API代码（`index.js`）**
```javascript
const express = require('express');
const mysql = require('mysql2');
const cors = require('cors');
const app = express();
app.use(cors());
app.use(express.json());
// 连接数据库（替换为你自己的配置）
const db = mysql.createConnection({
host: 'localhost',
user: 'root',
password: 'your_password',
database: 'todo_db'
});
// 获取所有待办
app.get('/todos', (req, res) => {
db.query('SELECT * FROM todos', (err, results) => {
if (err) throw err;
res.json(results);
});
});
// 添加待办
app.post('/todos', (req, res) => {
const { title } = req.body;
db.query('INSERT INTO todos (title) VALUES (?)', [title], (err) => {
if (err) return res.status(500).send(err);
res.sendStatus(201);
});
});
// 启动服务
app.listen(3001, () => {
console.log('后端运行在 http://localhost:3001');
});
```
3. **测试API**
使用Postman发送GET/POST请求到 `
http://localhost:3001/todos`，确认能返回数据。
---
### **四、前端开发（React实现）**
1. **组件结构**
- `App.jsx`：主组件
- `TodoList.jsx`：展示待办列表
- `TodoForm.jsx`：输入框和添加按钮
2. **关键代码（App.jsx）**
```javascript
import { useState, useEffect } from 'react';
import TodoForm from './TodoForm';
import TodoList from './TodoList';
function App() {
const [todos, setTodos] = useState([]);
// 加载数据
useEffect(() => {
fetch('http://localhost:3001/todos')
.then(res => res.json())
.then(data => setTodos(data));
}, []);
// 添加待办
const addTodo = (title) => {
fetch('http://localhost:3001/todos', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ title })
})
.then(() => {
setTodos([...todos, { title, completed: false }]);
});
};
return (
Todo List
);
}
export default App;
```
3. **启动前端**
```bash
cd todo-frontend
npm run dev
```
访问 `http://localhost:5173` 测试功能。
---
### **五、数据库连接与联调**
1. **解决跨域问题**
- 后端已通过 `cors()` 中间件允许所有来源（开发环境适用，生产环境需配置具体域名）。
2. **常见错误排查**
- 检查MySQL服务是否启动
- 确认数据库连接配置（用户名、密码、数据库名）
- 后端端口是否被占用（如3001）
---
### **六、部署上线**
1. **后端部署（Railway）**
- 将后端代码推送到GitHub仓库。
- 注册Railway，导入仓库，自动检测Node.js项目并部署。
- 在Railway控制台设置环境变量（数据库连接信息）。
2. **前端部署（Vercel）**
- 修改前端API请求地址为Railway提供的后端URL。
- 推送前端代码到GitHub，导入Vercel，自动部署。
3. **数据库云端化**
- 使用PlanetScale（兼容MySQL的Serverless数据库），替换本地数据库配置。
---
### **七、后续优化（实际项目必做）**
1. **添加身份验证**
- 使用JWT或Firebase Auth实现用户登录。
2. **错误处理**
- 后端添加全局错误中间件，前端用try/catch捕获异常。
3. **日志与监控**
- 使用Winston记录日志，Sentry监控错误。
---
### **八、避坑指南**
1. **依赖版本冲突**
- 使用 `npm install --save-exact` 锁定版本，或提交 `package-lock.json`。
2. **环境变量泄露**
- 敏感信息（数据库密码）通过 `.env` 文件存储，并添加到 `.gitignore`。
3. **CORS问题**
- 生产环境严格限制允许的域名，例如：
```javascript
app.use(cors({ origin: 'https://your-frontend-domain.com' }));
```
---
### **九、完整代码参考**
- 前端代码库：[GitHub - Todo List Frontend](
https://github.com/example/todo-frontend)
- 后端代码库：[GitHub - Todo List Backend](
https://github.com/example/todo-backend)
按照以上步骤操作，你将在2小时内完成一个可运行的全栈应用，并理解每个环节的实际操作。