作品九：mini在线商城
在线商城是最复杂的全栈项目之一，涉及商品管理 、购物车 、订单处理等功能
这个 Mini 版商城要实现基本的电商功能
•
商品展示（ 列表和详情）
•
购物车 （ 添加 、删除 、修改数量）
•
订单管理（创建订单 、查看订单）
•
用户地址管理
•
不用实现支付功能，订单创建后显示为待支付状态即可
这样可以降低开发难度，专注于核心业务流程。
50%
50%
💚
技术栈和前面的项目类似，前端用 React + TypeScript + Vite ，后端用 Node.js + Express ，数据库用MySQL
开发步骤
1）设计数据库
开发的第一步是设计数据库。创建 database.md 文件：
代码块
Python
# 在线商城数据库设计
## 用户表（ users）
- id、username、email、password、avatar
- created_at
## 商品表（products）
- id、name、description、price、stock（ 库存）
- images: 图片 URL（JSON 数组）
- category: 分类
- created_at、updated_at
2）与 AI 对话开发
设计好数据库后，就可以和 AI 对话开发了 。开发流程和前面的项目类似，但要注意几个关键点。第一个关键点是购物车功能：
代码块
Markdown
实现购物车功能：
添加到购物车 （ POST /api/cart）：
- 接收 product_id、quantity
- 如果购物车已有该商品，数量累加
- 如果是新商品，创建新记录
- 检查库存是否充足
获取购物车 （ GET /api/cart）：
- 返回购物车商品列表
- 包含商品详情（ 名称 、价格 、图片等）
- 计算总价
更新数量（ PUT /api/cart/:id）：
- 更新指定商品的数量
- 检查库存
删除商品（ DELETE /api/cart/:id）：
- 从购物车删除指定商品
购物车功能要处理好商品数量的累加，还要检查库存，避免加入超过库存的数量。第二个关键点是订单功能：
代码块
Plain Text
这个提示词包含了订单的所有操作 。创建订单是最复杂的，涉及多个表的操作，要使用数据库事务确保数据一致性。
第三个关键点是地址管理：
代码块
Bash
实现地址管理功能：
添加地址（ POST /api/addresses）：
- 接收收货人信息
- 如果设置为默认地址，将其他地址的 is_default 设为 false
获取地址列表（ GET /api/addresses）：
开发技巧
在开发电商系统时，有几个关键点需要特别注意 。首先是库存管理，创建订单时要检查库存，扣减库存时要使用数据库事务，确保不会出现超卖的情况 。可以让 AI 帮你实现乐观锁或悲观锁来处理并发问题。
其次是订单号的生成 。订单号要唯一 ，可以用时间戳加随机数，或者用雪花算法 。可以让 AI 帮你实现一个订单号生成函数。
另外，购物车和订单的关系要处理好 。创建订单时，要把购物车中的商品信息复制到订单商品表，而不是直接引用购物车 。因为商品价格可能会变化，订单要保存下单时的价格，这样才能保证订单金额不会因为商品价格变化而变化。
最后，要做好数据校验 。比如数量不能为负数，价格不能为负数，库存不能为负数等 。可以让 AI 帮你在后端添加完整的参数校验，避免脏数据进入数据库。
扩展思路
基础版完成后，可以继续扩展功能 。比如添加商品搜索和筛选，按价格 、分类 、销量等筛选；添加商品评
价，用户可以评价购买的商品；实现优惠券系统，支持满减 、折扣等优惠；集成支付功能，接入支付宝或微信支付；添加订单物流跟踪，查看物流信息；开发商家后台管理，管理商品和订单；实现商品推荐算法，根据用户喜好推荐商品。
写在最后
通过这 3 个全栈项目 ，你已经学习了完整的 Web 应用开发流程：从简单的博客系统，到复杂的问答社区，再到涉及交易流程的在线商城 。每个项目都让你掌握了不同的业务场景和技术点。
全栈开发看起来很复杂，但用 Vibe Coding 的方式，你会发现其实并没有想象中那么难 。关键是要理解业务逻辑，知道要实现什么功能，然后让 AI 帮你生成代码 。如果你想学习更多的全栈开发技巧和最佳实践，可以参考本教程的经验技巧板块。