13.2 简易电商后台

项目概述

构建一个简易电商后台管理系统：商品管理、购物车、模拟支付。

这个项目比前一个复杂，因为它涉及到数据持久化（数据库）、用户交互状态（购物车）、业务流程（下单→支付）。这也是大多数实际 Web 应用的通用结构。你学会这个模式后，可以做博客系统、工单管理、预约平台——只要涉及"增删改查 + 流程"，结构都一样。

推荐技术栈

• 全栈框架：Next.js v14（前后端一体，API Routes 做后端）
• 数据库：SQLite（嵌入数据库，无需额外安装）
• ORM：Prisma（AI 最熟悉的 Node.js ORM）
• 样式：Tailwind CSS
• 部署：Vercel

选择 SQLite 的原因很简单——零配置。不需要安装 MySQL 或 PostgreSQL，不需要配置连接字符串。Prisma + SQLite 的模版代码 AI 已经写过几百万次了，几乎不会出错。

分步 Vibe 流程

第 1 步：初始化 Next.js + Prisma

创建一个 Next.js 项目，使用 Prisma ORM + SQLite 数据库。
数据模型包含：Product（名称、描述、价格、库存、图片URL）、Order（用户信息、总价、状态、创建时间）。

AI 会运行 npx create-next-app、安装 Prisma、定义数据模型、运行迁移。一条指令完成所有初始化工作。

这个阶段可能遇到的问题： AI 运行 npx create-next-app 时会询问几个配置选项（TypeScript、ESLint、Tailwind 等）。AI 会帮你回答这些问题，但你可能会看到终端中有交互提示。如果 AI 卡住了，你看一下终端，手动输入回车确认默认选项。这是少数几个需要你干预的环节。

第 2 步：构建商品管理 CRUD

在 /api/products 路径下创建 RESTful API：
- GET /api/products：获取所有商品（支持分页和按名称搜索）
- POST /api/products：新增商品
- PUT /api/products/[id]：修改商品信息
- DELETE /api/products/[id]：删除商品
同时生成一个简单的管理页面，以表格形式列出所有商品，支持增删改操作。

CRUD（Create, Read, Update, Delete）是电商系统最基础的功能。你不需要理解 RESTful API 是什么——AI 会为每个操作创建对应的 API 路径。你只需要验证：能不能添加商品、能不能修改、能不能删除。

验证 CRUD 的简单方法： 启动开发服务器（npm run dev），在浏览器中打开管理页面。试着添加一个商品——填名称、价格、库存，点击保存。刷新页面——数据还在。再试着修改或删除。如果任何一步不工作，把现象告诉 AI。

第 3 步：构建前端商店页面

创建一个商品展示页面，网格布局，每张卡片显示商品图片、名称、价格。
点击"加入购物车"按钮将商品添加到购物车。
购物车在侧边栏中显示，可调整数量或删除商品。

这一步把数据从"管理后台"带到"用户前端"。AI 需要从同一份数据源（数据库）中读取商品数据，但在前端展示为漂亮的商品卡片而不是表格。

"管理页面"和"商店页面"的区别： 管理页面是表格视图（适合批量操作，一页显示几十条），商店页面是卡片视图（适合浏览，视觉上更好看）。两种视图使用同一个数据源，只是展示方式不同。这个模式在很多系统中都会用到——不同的用户角色看到不同的界面。

第 4 步：实现购物车与下单

购物车功能：
- 使用 React Context 管理购物车状态
- 支持增加/减少数量、删除商品
- 计算总价（含税，税率 13%）
- 下单时创建 Order 记录并清空购物车

购物车的核心是"状态管理"——用户选了什么商品、每个多少件、总价多少。React Context 是 AI 最常用的轻量级状态管理方案。

关于 React Context： 你可能听说过 Redux、Zustand 等更复杂的状态管理工具。但在这个规模的项目中，React Context 完全够用。AI 通常会优先选择"够用"的方案，而不是"最强大"的方案。这是 AI 的一个好习惯——它不会为你不需要的复杂度买单。

第 5 步：模拟支付流程

创建一个模拟支付页面：
- 显示订单摘要（商品列表、数量、总价）
- 表单收集：姓名、邮箱、地址、信用卡后四位
- 点击"提交订单"后模拟 2 秒支付处理
- 支付成功后显示订单号，并发送确认邮件（模拟）

模拟支付是整个电商流程的收尾——从浏览商品到完成支付。虽然这里是模拟的，但业务流程和真实支付完全一致。如果你以后要接入真实的 Stripe 或支付宝，只需要替换"模拟 2 秒处理"这部分为真实 API 调用。

模拟支付的实现原理： AI 会创建一个"假支付处理器"——你点提交按钮后，显示一个"处理中…"的加载动画（2 秒），然后显示"支付成功！订单号：ORD-xxxx"。看起来像真的一样，但没有涉及任何真实资金。这是学习阶段的最佳选择——体验完整流程，零风险。

扩展方向

方向一：添加用户认证。

添加登录注册功能。用户注册后才能下单，订单和用户关联。
使用 NextAuth.js 实现。

方向二：管理员订单管理。

在管理后台添加订单管理页面：查看所有订单、标记订单状态（待发货/已发货/已完成/已取消）。

方向三：商品搜索和分类。

添加商品分类（Category）模型：一个分类下有多个商品。在首页添加分类导航和搜索框。

关键决策点

决策点	可选方案	说明
数据库	SQLite / PostgreSQL	本地开发用 SQLite 最简单，线上用 PostgreSQL
购物车存储	内存 / localStorage / 数据库	未登录用户用 localStorage，登录用户存数据库
支付集成	模拟 / Stripe / 支付宝	学习目的先做模拟支付，再考虑集成真实支付
认证	NextAuth / 无认证 / 简单密码	电商后台建议至少加一个登录页
图片存储	本地 / 云存储（S3）	本地原型用 /public 目录，正式用云存储

常见问题与 AI 修复

问题 1：Prisma 迁移失败。

"Prisma 迁移报错了，说 SQLite 不支持某些字段类型。"

AI 会将 enum 类型改为 String，并在应用层做校验。SQLite 功能有限，AI 会自动适配。

问题 2：删除商品时数据冲突。

"删除商品时，如果该商品已经在某个订单中，应该禁止删除。"

AI 会在 Prisma schema 中设置级联关系，并在 API 层添加关联检查逻辑。

问题 3：购物车状态丢失。

"刷新页面后购物车内容清空了。"

AI 会将购物车数据同步到 localStorage，页面加载时从 localStorage 恢复。

你：Prisma 迁移报错了，说 SQLite 不支持某些字段类型。

AI：SQLite 不支持 enum 类型。已将 Order 状态字段从 enum 改为 String，并在应用层做校验。

你：删除商品时，如果该商品已经在某个订单中，应该禁止删除。

AI：在 Prisma schema 中设置了级联关系，并在 API 层添加了关联检查逻辑。

你：刷新页面后购物车内容丢了。

AI：已将购物车数据保存到 localStorage，页面加载时自动恢复。同时处理了 localStorage 中可能存在的过期数据。