用 Vibe Coding 开发全栈应用：博客系统、问答社区与在线商城三大项目实战指南

本文是鱼皮 Vibe Coding 零基础教程「项目实战」板块的全栈应用开发篇。你将跟随一套「设计数据库 → 编写 PRD → 与 AI 对话开发后端 → 与 AI 对话开发前端」的完整流程，亲手完成个人博客系统、简易问答社区、在线商城（Mini 版）三个真实全栈项目，掌握用户认证、CRUD、点赞、积分、购物车与订单等核心业务场景的 AI 编程方法。读完本文，你将理解全栈开发的思维方式，并能够独立把任意全栈业务需求转化为可运行的 AI 提示词，真正用对话驱动前后端代码的生成。

一、全栈开发基础知识

在动手做项目之前，先建立全栈开发的基本概念。

什么是全栈应用？ 简单来说，就是既有前端界面、又有后端服务、还有数据库存储的完整应用。用户在前端操作，数据通过后端处理，最终保存到数据库中。

三者各司其职：

• 前端：负责展示数据和接收用户输入，是用户直接看到的界面；
• 后端：负责处理请求和业务逻辑，对数据进行校验与加工；
• 数据库：负责持久化存储，保证数据不丢失。

三者通过 API 接口 进行通信。举个例子：当用户在博客网站上发布一篇文章时，前端收集文章的标题、内容等信息，然后发送 HTTP 请求给后端；后端收到请求后验证数据是否合法，再调用数据库接口把文章保存到数据库中；保存成功后，后端返回成功响应给前端，前端显示「发布成功」的提示。

技术栈怎么选？

主流全栈技术栈有很多选择。对于 Vibe Coding 来说，建议使用现代化的、AI 友好的技术栈：

层次	推荐方案
前端	React 或 Vue
后端	Node.js（Express、Nest.js）或 Python（FastAPI）
数据库	MySQL、PostgreSQL 或 MongoDB

但请注意：具体用什么技术不是最重要的，重要的是理解全栈开发的思路。掌握了思路，换个技术栈也能很快上手。

用 Vibe Coding 开发全栈应用有一个巨大优势：你不需要精通前端和后端的所有细节，只需要知道要实现什么功能，AI 会帮你生成代码。比如你只需要告诉 AI：“创建一个用户注册接口，接收用户名、邮箱、密码，验证后保存到数据库。”AI 就能生成完整的后端代码，包括参数验证、密码加密、数据库操作等。这大大降低了全栈开发的门槛，让你可以专注于业务逻辑，而不是纠结于技术细节。

本文作为思路与开发流程的指导，需要你自行动手实践。如果你希望先学习一套经过验证的标准开发流程（需求研究 → PRD → 技术设计 → AGENTS.md → 实现迭代），建议先阅读《Vibe Coding 项目开发流程》，本文的三个项目正是该流程在全栈场景下的直接应用。

二、项目实战一：个人博客系统

博客系统是最经典的全栈项目之一，涉及文章发布、分类管理、评论互动等功能。通过这个项目，你可以学习如何处理 CRUD（增删改查） 操作，以及用户认证等基础功能。

项目需求

这个博客系统要支持：

• 文章的发布、编辑、删除和查看；
• 文章分类、标签；
• 用户注册、登录，发布自己的文章；
• 访客可以浏览文章，但不能发布；
• 文章支持 Markdown 格式，可以添加封面图；
• 首页显示文章列表，支持分页和搜索。

技术选型

• 前端：React + TypeScript + Vite，样式用 Tailwind CSS；
• 后端：Node.js + Express；
• 数据库：MySQL；
• 用户认证：JWT（JSON Web Token）；
• 文章编辑器：复用之前做过的 Markdown 编辑器。

开发步骤

1）设计数据库

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

以本项目为例：

• 用户表：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（分类名称）、description（分类描述）。

先设计表结构再写代码，可以让你在后续与 AI 对话时给出精确的表字段约束，避免 AI 自由发挥导致数据结构混乱。

2）写需求文档

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

# 个人博客系统 PRD

## 核心功能

### 用户功能
- 注册：用户名、邮箱、密码
- 登录：返回 JWT token
- 个人中心：查看和编辑个人信息

### 文章功能
- 发布文章：标题、内容、分类、标签、封面
- 编辑文章：修改已发布的文章
- 删除文章：只能删除自己的文章
- 查看文章：显示文章详情，浏览次数 +1
- 文章列表：支持分页、分类筛选、搜索

### 前端页面
- 首页：文章列表
- 文章详情页
- 写文章页（需要登录）
- 个人中心页（需要登录）
- 登录/注册页

3）与 AI 对话开发后端

有了文档，就可以打开 Cursor 等 AI 编程工具，和 AI 对话开发后端了。开发过程分为四步。

第一步，初始化后端项目：

请创建一个 Node.js + Express 后端项目：
1. 初始化项目，安装 express、mysql2、jsonwebtoken、bcrypt 等依赖
2. 创建基本的项目结构：src/routes（路由）、src/controllers（控制器）、src/models（数据模型）、src/middleware（中间件）、src/config（配置）
3. 配置数据库连接

这个提示词说明了要创建什么项目、安装哪些依赖、项目结构是什么样的。其中：

• mysql2 用于连接 MySQL 数据库；
• jsonwebtoken 用于生成和验证 JWT token；
• bcrypt 用于密码加密，保证密码不以明文入库。

第二步，创建数据库表：

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

AI 会根据你的数据库设计，生成创建表的 SQL 语句，并顺带产出一个可重复执行的初始化脚本。

第三步，实现用户注册和登录：

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

注册接口（POST /api/auth/register）：
- 接收 username、email、password
- 验证参数（用户名 3-20 字符，邮箱格式正确，密码至少 6 位）
- 检查用户名和邮箱是否已存在
- 密码用 bcrypt 加密
- 保存到数据库
- 返回成功信息

登录接口（POST /api/auth/login）：
- 接收 username、password
- 验证用户是否存在
- 验证密码是否正确
- 生成 JWT token（有效期 7 天）
- 返回 token 和用户信息

这个提示词详细说明了两个接口的功能要求。AI 会实现完整的注册和登录逻辑，包括参数验证、密码加密、JWT 生成等。参数校验规则（用户名 3-20 字符、邮箱格式、密码至少 6 位）和 token 有效期（7 天）都应写清楚，让 AI 生成可预期、可测试的代码。

第四步，实现文章 CRUD：

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

创建文章（POST /api/posts）：
- 需要登录（验证 JWT token）
- 接收 title、content、category、tags、cover
- author_id 从 token 中获取
- 保存到数据库
- 返回文章信息

获取文章列表（GET /api/posts）：
- 支持分页（page、pageSize）
- 支持分类筛选（category）
- 支持搜索（keyword，搜索标题和内容）
- 返回文章列表和总数

获取文章详情（GET /api/posts/:id）：
- 返回文章详情
- 浏览次数 +1

更新文章（PUT /api/posts/:id）：
- 需要登录
- 只能更新自己的文章
- 更新指定字段

删除文章（DELETE /api/posts/:id）：
- 需要登录
- 只能删除自己的文章

这个提示词包含了文章的所有操作。AI 会实现完整的 CRUD 功能，包括权限验证、数据查询等。注意两点设计细节：author_id 从 token 中获取而非由前端传入，避免伪造作者；更新与删除均限制「只能操作自己的文章」，权限校验由后端完成。

4）与 AI 对话开发前端

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

第一步，创建前端项目：

创建 React + TypeScript + Vite 前端项目，安装 react-router-dom、axios、react-markdown 等依赖。配置路由：
- / 首页（文章列表）
- /post/:id 文章详情
- /write 写文章（需要登录）
- /profile 个人中心（需要登录）
- /login 登录
- /register 注册

第二步，实现用户认证：

实现用户认证功能：
1. 创建 AuthContext，管理登录状态和用户信息
2. Token 存储在 localStorage
3. 封装 axios，自动在请求头添加 token
4. 创建 ProtectedRoute 组件，保护需要登录的页面
5. 实现登录和注册页面

这个提示词说明了用户认证的实现方式：AuthContext 用来管理全局的登录状态，ProtectedRoute 用来保护需要登录才能访问的页面。把 token 存入 localStorage 后，刷新页面登录状态依然保留；封装 axios 拦截器自动携带 token，则所有接口请求都无需手动处理认证头。

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

实现首页文章列表：
1. 获取文章列表，显示标题、封面、分类、作者、时间
2. 支持分页，每页 10 条
3. 支持分类筛选（顶部分类标签）
4. 支持搜索（搜索框）
5. 点击文章跳转到详情页

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

实现文章详情页：
1. 根据 ID 获取文章详情
2. 使用 react-markdown 渲染文章内容
3. 显示作者信息、发布时间、浏览次数
4. 如果是自己的文章，显示编辑和删除按钮

第五步，实现写文章页：

实现写文章页：
1. 使用之前做的 Markdown 编辑器
2. 输入标题、选择分类、添加标签、上传封面
3. 左侧编辑，右侧实时预览
4. 保存按钮，调用创建文章接口
5. 如果是编辑模式，加载已有文章数据

开发技巧

开发全栈应用时，有几个技巧可以显著提高效率：

1. 使用环境变量管理配置。数据库连接信息、JWT 密钥等敏感信息不要硬编码在代码里，创建 .env 文件存放配置，然后在代码中通过 process.env 读取。这样既避免密钥泄露，也方便在不同环境（开发/测试/生产）间切换。
2. 做好错误处理。API 调用可能失败，数据库操作可能出错，要捕获这些错误并返回友好的提示。可以让 AI 帮你创建一个统一的错误处理中间件，避免每个接口重复编写错误捕获逻辑。
3. 启用热更新。开发时使用 nodemon 自动重启后端服务，使用 Vite 的热更新功能自动刷新前端页面，修改代码后无需手动重启，大大提高开发效率。

扩展思路

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

• 添加评论系统，用户可以评论文章；
• 添加点赞功能，给喜欢的文章点赞；
• 支持文章草稿，保存未发布的文章；
• 集成图片上传，上传到云存储；
• 添加文章归档，按月份归档；
• 支持 RSS 订阅，方便读者订阅；
• 优化 SEO，让文章更容易被搜索引擎收录。

三、项目实战二：问答社区

完成了博客系统后，来挑战一个更复杂的项目——问答社区。问答社区比博客系统更复杂，涉及问题、回答、点赞、采纳等互动功能。通过这个项目，你可以学习如何处理更复杂的数据关系和用户交互。

项目需求

这个问答社区要支持：

• 用户发布问题，其他用户回答问题；
• 问题和回答都支持点赞；
• 提问者可以采纳最佳答案；
• 首页显示问题列表，支持按热度、最新、未解决排序；
• 每个问题有标签，可以按标签筛选；
• 用户有积分系统，提问、回答、被采纳都会获得积分。

技术选型

与博客系统类似：前端用 React + TypeScript + Vite，后端用 Node.js + Express，数据库用 MySQL。

开发步骤

1）设计数据库

开发的第一步仍然是设计数据库。创建 database.md 文件：

# 问答社区数据库设计

## 用户表（users）
- id、username、email、password、avatar
- points: 积分
- created_at

## 问题表（questions）
- id、title、content（Markdown）
- tags: 标签（JSON 数组）
- author_id: 提问者 ID
- views: 浏览次数
- answers_count: 回答数
- votes: 点赞数
- is_solved: 是否已解决
- created_at、updated_at

## 回答表（answers）
- id、content（Markdown）
- question_id: 问题 ID
- author_id: 回答者 ID
- votes: 点赞数
- is_accepted: 是否被采纳
- created_at、updated_at

## 点赞表（votes）
- id、user_id、target_type（question/answer）
- target_id: 目标 ID
- created_at

注意 votes 表的设计：通过 target_type 字段区分点赞对象是问题还是回答，配合 target_id 指向具体目标，user_id 记录点赞人——这样一张表就能记录两种对象的点赞关系，同时天然防止同一用户重复点赞。

2）与 AI 对话开发

设计好数据库后，就可以和 AI 对话开发了。开发流程和博客系统类似，但有四个关键点需要特别注意。

第一个关键点是积分系统：

实现积分系统：
- 发布问题：-5 积分
- 回答问题：+10 积分
- 回答被采纳：+30 积分
- 问题被点赞：+5 积分
- 回答被点赞：+10 积分

在相应的操作中自动更新用户积分。

这个提示词说明了积分的规则。AI 会在实现功能时自动处理积分变化，比如用户回答问题后，自动给用户加 10 积分。

第二个关键点是点赞功能：

实现点赞功能：
- 用户可以点赞问题和回答
- 每个用户对同一个目标只能点赞一次
- 点赞后目标的 votes 数量 +1
- 取消点赞后 votes 数量 -1
- 返回用户是否已点赞的状态

点赞功能要防止重复点赞，所以需要记录用户的点赞行为。返回数据时要告诉前端用户是否已点赞，这样前端才能正确显示点赞按钮的状态。

第三个关键点是采纳答案：

实现采纳答案功能：
- 只有提问者可以采纳答案
- 每个问题只能采纳一个答案
- 采纳后问题状态变为已解决
- 回答者获得积分奖励

这个逻辑要在后端实现，确保权限控制正确，不能由前端自由调用。

第四个关键点是问题列表排序：

实现问题列表的多种排序：
- 最新：按创建时间倒序
- 热门：按点赞数倒序
- 未解决：筛选 is_solved = false 的问题
支持按标签筛选。

开发技巧

开发问答社区时，有几个地方需要特别注意：

1. 数据一致性。比如点赞时，要同时更新点赞表和目标的 votes 数量，这两个操作要么都成功、要么都失败。可以让 AI 帮你实现数据库事务，确保数据一致性。
2. 性能优化。问题列表可能有很多数据，要做好分页。可以让 AI 帮你实现分页查询，每次只返回一页数据，避免一次性加载太多数据导致页面卡顿。
3. 点赞状态的判断。在返回问题或回答列表时，要告诉前端当前用户是否已点赞，这样前端才能正确显示点赞按钮的状态（已点赞显示红色，未点赞显示灰色）。

扩展思路

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

• 添加评论功能，对回答进行评论；
• 添加关注功能，关注感兴趣的问题或用户；
• 实现通知系统，有新回答时通知提问者；
• 优化搜索功能，使用全文搜索提高搜索质量；
• 添加排行榜，展示积分排名；
• 实现徽章系统，完成成就获得徽章。

四、项目实战三：在线商城

掌握了用户互动和积分系统后，来做一个涉及交易流程的项目。在线商城是最复杂的全栈项目之一，涉及商品管理、购物车、订单处理等功能。通过这个项目，你可以学习如何处理电商业务逻辑。

项目需求

这个 Mini 版商城要实现基本的电商功能：

• 商品展示（列表和详情）；
• 购物车（添加、删除、修改数量）；
• 订单管理（创建订单、查看订单）；
• 用户地址管理。

不需要实现支付功能，订单创建后显示为「待支付」状态即可，这样可以降低开发难度，专注于核心业务流程。

技术选型

与前面的项目类似：前端用 React + TypeScript + Vite，后端用 Node.js + Express，数据库用 MySQL。

开发步骤

1）设计数据库

开发的第一步是设计数据库。创建 database.md 文件：

# 在线商城数据库设计

## 用户表（users）
- id、username、email、password、avatar
- created_at

## 商品表（products）
- id、name、description、price、stock（库存）
- images: 图片 URL（JSON 数组）
- category: 分类
- created_at、updated_at

## 购物车表（cart_items）
- id、user_id、product_id、quantity（数量）
- created_at

## 地址表（addresses）
- id、user_id、name（收货人）、phone、province、city、district、detail
- is_default: 是否默认地址
- created_at

## 订单表（orders）
- id、order_no（订单号）、user_id、address_id
- total_price: 总价
- status: 状态（待支付、已支付、已发货、已完成、已取消）
- created_at、updated_at

## 订单商品表（order_items）
- id、order_id、product_id、quantity、price（下单时的价格）

这套设计体现了电商系统的核心关系：用户与购物车、地址是一对多；订单与订单商品是主从关系（一个订单包含多件商品）；order_items 单独保存下单时的价格，这是电商数据模型的关键设计，具体原因见下文「开发技巧」。

2）与 AI 对话开发

设计好数据库后，就可以和 AI 对话开发了。开发流程和前面的项目类似，但有三个关键点需要注意。

第一个关键点是购物车功能：

实现购物车功能：

添加到购物车（POST /api/cart）：
- 接收 product_id、quantity
- 如果购物车已有该商品，数量累加
- 如果是新商品，创建新记录
- 检查库存是否充足

获取购物车（GET /api/cart）：
- 返回购物车商品列表
- 包含商品详情（名称、价格、图片等）
- 计算总价

更新数量（PUT /api/cart/:id）：
- 更新指定商品的数量
- 检查库存

删除商品（DELETE /api/cart/:id）：
- 从购物车删除指定商品

购物车功能要处理好商品数量的累加，还要检查库存，避免加入超过库存的数量。

第二个关键点是订单功能：

实现订单功能：

创建订单（POST /api/orders）：
- 接收 address_id 和购物车商品 ID 列表
- 检查库存是否充足
- 计算总价
- 生成订单号（时间戳 + 随机数）
- 创建订单和订单商品记录
- 扣减库存
- 清空购物车中已下单的商品
- 使用数据库事务确保数据一致性

获取订单列表（GET /api/orders）：
- 返回用户的订单列表
- 支持按状态筛选
- 包含订单商品详情

获取订单详情（GET /api/orders/:id）：
- 返回订单详情
- 包含收货地址、订单商品列表

取消订单（PUT /api/orders/:id/cancel）：
- 只能取消待支付的订单
- 恢复库存
- 更新订单状态为已取消

这个提示词包含了订单的所有操作。创建订单是最复杂的，涉及多个表的操作，要使用数据库事务确保数据一致性。

第三个关键点是地址管理：

实现地址管理功能：

添加地址（POST /api/addresses）：
- 接收收货人信息
- 如果设置为默认地址，将其他地址的 is_default 设为 false

获取地址列表（GET /api/addresses）：
- 返回用户的地址列表
- 默认地址排在前面

更新地址（PUT /api/addresses/:id）：
- 更新指定地址

删除地址（DELETE /api/addresses/:id）：
- 删除指定地址
- 如果删除的是默认地址，将第一个地址设为默认

开发技巧

在开发电商系统时，有几个关键点需要特别注意：

1. 库存管理。创建订单时要检查库存，扣减库存时要使用数据库事务，确保不会出现超卖的情况。可以让 AI 帮你实现乐观锁或悲观锁来处理并发问题。
2. 订单号的生成。订单号要唯一，可以用时间戳加随机数，或者用雪花算法。可以让 AI 帮你实现一个订单号生成函数。
3. 购物车和订单的关系。创建订单时，要把购物车中的商品信息复制到订单商品表，而不是直接引用购物车。因为商品价格可能会变化，订单要保存下单时的价格，这样才能保证订单金额不会因为商品价格变化而变化。
4. 数据校验。数量不能为负数、价格不能为负数、库存不能为负数等。可以让 AI 帮你在后端添加完整的参数校验，避免脏数据进入数据库。

扩展思路

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

• 添加商品搜索和筛选，按价格、分类、销量等筛选；
• 添加商品评价，用户可以评价购买的商品；
• 实现优惠券系统，支持满减、折扣等优惠；
• 集成支付功能，接入支付宝或微信支付；
• 添加订单物流跟踪，查看物流信息；
• 开发商家后台管理，管理商品和订单；
• 实现商品推荐算法，根据用户喜好推荐商品。

五、写在最后

通过这 3 个全栈项目，你已经学习了完整的 Web 应用开发流程：从简单的博客系统，到复杂的问答社区，再到涉及交易流程的在线商城。每个项目都让你掌握了不同的业务场景和技术点：

• 博客系统：CRUD 操作、JWT 用户认证、前后端接口联调；
• 问答社区：多表关联、点赞防重复、积分规则、数据库事务；
• 在线商城：库存与并发、订单号生成、下单价格快照、参数校验。

全栈开发看起来很复杂，但用 Vibe Coding 的方式，你会发现其实并没有想象中那么难。关键是要理解业务逻辑，知道要实现什么功能，然后让 AI 帮你生成代码。如果你需要温习支撑这套实战的开发方法论，可以回顾仓库中的《Vibe Coding 项目开发流程》（需求研究、PRD、技术设计、AGENTS.md、实现迭代的五步工作流）；项目做完后，可以参考《项目部署上线教程》把全栈项目部署上线；想继续深造，可以学习《Vibe Coding 经验技巧总览》中关于对话工程、上下文管理、代码质量保障的进阶方法，也可以从鱼皮的原创项目实战中选择感兴趣的完整项目案例进行模仿练习。

掌握了全栈应用开发后，下一站可以挑战微信小程序开发，让你的应用可以在微信中运行、触达更多用户。