作品八：个人博客系统

博客系统是最经典的全栈项目之一 ​

涉及文章发布 、分类管理 、评论互动等功能 。​

通过这个项目 ，你可以学习如何处理 CRUD（ 增删改查）操作， 以及用户认证等基础功能。​

•

这个博客系统要支持文章的发布 、编辑 、删除和查看 。​

•

文章可以分类，支持标签 。用户可以注册登录，发布自己的文章 。​

•

访客可以浏览文章，但不能发布 。文章支持 Markdown 格式，可以添加封面图 。​

•

首页显示文章列表，支持分页和搜索。​

​

​

​

​

50%

​

​

​

​

50%

​

​

​

🔷

技术选型上，前端使用 React + TypeScript + Vite ，样式用 Tailwind CSS 。后端使用 Node.js +Express ，数据库用 MySQL 。用户认证用 JWT（JSON Web Token）。​

文章编辑器可以复用之前做过的Markdown 编辑器。​

​

开发步骤​

1）设计数据库​

开发的第一步是设计数据库。在开始写代码之前，先设计数据库结构。创建一个 database.md 文件，定义需要哪些表，每个表有哪些字段。​

​

代码块​

Plain Text

比如用户表需要：​

id（ 主键）​

username（ 用户名， 唯一）​

email（ 邮箱， 唯一）​

password（ 密码，加密存储）​

avatar（ 头像 URL）​

created_at（创建时间）。​

文章表需要：​

id ​

title（标题）​

content（ 内容，Markdown 格式）​

cover（ 封面图 URL）​

category（ 分类）​

tags（标签，JSON 数组）​

author_id（作者 ID ，外键关联 users）​

views（ 浏览次数）​

created_at ​

updated_at。​

分类表需要：​

id ​

name（ 分类名称）​

​

2） 写需求文档​

设计好数据库后，就可以写需求文档了。创建 PRD.md 文件：​

​

代码块​

Plain Text

# 个人博客系统 PRD​

​

## 核心功能​

### 用户功能​

- 注册：用户名 、邮箱 、密码​

- 登录：返回 JWT token​

- 个人中心：查看和编辑个人信息​

​

### 文章功能​

- 发布文章：标题 、内容 、分类 、标签 、封面​

- 编辑文章：修改已发布的文章​

- 删除文章：只能删除自己的文章​

​

3）与 AI 对话开发后端​

有了文档，就可以和 AI 对话开发后端了 。打开 Cursor ，开始和 AI 对话。第一步，初始化后端项目 ：​

​

代码块​

Plain Text

请创建一个 Node.js + Express 后端项目 ：​

1. 初始化项目 ，安装 express、mysql2、jsonwebtoken、bcrypt 等依赖​

2. 创建基本的项目结构：src/routes（ 路由）、src/controllers（控制器）、src/models（ 数据模型）、src/middleware（ 中间件）、src/config（ 配置）​

3. 配置数据库连接​

​

这个提示词说明了要创建什么项目 ，安装哪些依赖，项目结构是什么样的。第二步，创建数据库表：​

​

代码块​

Plain Text

根据 database.md 中的设计，创建数据库表的 SQL 语句。然后创建一个初始化脚本， 自动创建这些表。​

​

AI 会根据你的数据库设计，生成创建表的 SQL 语句。第三步，实现用户注册和登录：​

​

代码块​

Plain Text

实现用户注册和登录功能：​

注册接口 （ POST /api/auth/register）：​

- 接收 username、email、password​

- 验证参数（ 用户名 3-20 字符， 邮箱格式正确，密码至少 6 位）​

- 检查用户名和邮箱是否已存在​

- 密码用 bcrypt 加密​

- 保存到数据库​

- 返回成功信息​

​

这个提示词详细说明了两个接口的功能要求 。AI 会实现完整的注册和登录逻辑，包括参数验证 、密码加密、 JWT 生成等。​

第四步，实现文章 CRUD：​

​

代码块​

Markdown

实现文章的增删改查功能：​

创建文章（ POST /api/posts）：​

- 需要登录（验证 JWT token）​

- 接收 title、content、category、tags、cover​

- author_id 从 token 中获取​

- 保存到数据库​

​

这个提示词包含了文章的所有操作 。AI 会实现完整的 CRUD 功能，包括权限验证 、数据查询等。​

4）与 AI 对话开发前端​

后端开发完成后，就可以开发前端了 。建议先用 Postman 或类似工具测试后端接口 ，确保接口正常工作后再开发前端 。这样可以避免前后端同时出问题，不知道问题出在哪里。​

第一步，创建前端项目 ：​

​

代码块​

Plain Text

创建 React + TypeScript + Vite 前端项目 ，安装 react-router-dom、axios、react- markdown 等依赖 。配置路由：​

- / 首页（ 文章列表）​

- /post/:id 文章详情​

- /write 写文章（ 需要登录）​

- /profile 个人中心（ 需要登录）​

- /login 登录​

- /register 注册​

​

第二步，实现用户认证：​

​

代码块​

Plain Text

实现用户认证功能：​

1. 创建 AuthContext，管理登录状态和用户信息​

2. Token 存储在 localStorage​

3. 封装 axios， 自动在请求头添加 token​

4. 创建 ProtectedRoute 组件，保护需要登录的页面​

5. 实现登录和注册页面​

​

这个提示词说明了用户认证的实现方式 。AuthContext 用来管理全局的登录状态，ProtectedRoute 用来保护需要登录才能访问的页面。​

第三步，实现文章列表页：​

​

代码块​

Plain Text

实现首页文章列表：​

1. 获取文章列表，显示标题 、封面 、分类 、作者 、时间​

2. 支持分页 ，每页 10 条​

3. 支持分类筛选（ 顶部分类标签）​

4. 支持搜索（ 搜索框）​

​

第四步，实现文章详情页：​

​

代码块​

Plain Text

实现文章详情页：​

1. 根据 ID 获取文章详情​

2. 使用 react-markdown 渲染文章内容​

3. 显示作者信息 、发布时间 、浏览次数​

4. 如果是自己的文章，显示编辑和删除按钮​

​

第五步，实现写文章页：​

​

代码块​

Plain Text

实现写文章页：​

1. 使用之前做的 Markdown 编辑器​

2. 输入标题 、选择分类 、添加标签 、上传封面​

3. 左侧编辑，右侧实时预览​

​

开发技巧​

在开发全栈应用时，有几个技巧可以提高效率 。首先，使用环境变量管理配置 。数据库连接信息 、JWT 密钥等敏感信息不要硬编码在代码里 ，要用环境变量 。创建 .env 文件，把配置放进去，然后在代码中通过 process.env 读取。​

其次，要做好错误处理 。API 调用可能失败，数据库操作可能出错，要捕获这些错误并返回友好的提示 。可以让 AI 帮你创建一个统一的错误处理中间件。​

最后，开发时可以使用 nodemon 自动重启后端服务，使用 Vite 的热更新功能自动刷新前端页面 ，这样修改代码后不需要手动重启，大大提高开发效率。​

扩展思路​

基础版完成后，可以继续扩展功能 。​

比如添加评论系统，用户可以评论文章；​

添加点赞功能，给喜欢的文章点赞；​

支持文章草稿，保存未发布的文章；​

集成图片上传，上传到云存储；​

添加文章归档，按月份归档；​

支持 RSS 订阅，方便读者订阅；​

优化 SEO ，让文章更容易被搜索引擎收录。​

​

​

​

​

50%

​

​

​

​

50%

​

​

​

​

​

​

50%

​

​

​

​

50%

​

​