接口联调流程

一、联调前的准备清单

1. 数据库：mall 库建好，seed 数据可查（第 7 部分）。
2. 后端：mvn spring-boot:run 启动，localhost:8080 可访问，带 token 后能调用购物车接口。
3. 前端：Vue（5173）和 React（5174）任一启动。

二、启动配置核对

Vite 代理把 /api 转发到 localhost:8080：

// vite.config.ts（Vue/React 相同）
server: {
  proxy: {
    '/api': { target: 'http://localhost:8080', changeOrigin: true },
  },
}

后端 CORS 已允许跨域（第 6 部分 WebConfig）。两边都在 localhost，代理 + CORS 双保险，浏览器控制台不应有 CORS 报错。

三、典型联调链路（跟着走一遍）

1. 注册 + 登录

POST /api/auth/register  {"username":"zhangsan","password":"123456"}
→ 409? 不，应返回 code=0（注意业务码，而不是 HTTP 4xx）

POST /api/auth/login {"username":"zhangsan","password":"123456"}
→ 返回 {"code":0,"data":{"token":"eyJ...","nickname":"zhangsan"}}

前端登录页拿到 token，存 localStorage，刷新页面 —— token 仍在（因为存了 localStorage + 请求拦截器带上了）。

2. 商品列表

GET /api/product/list?keyword=&page=1&size=10
→ {"code":0,"data":{"records":[...],"total":4,...}}

前端 ProductPage.records 渲染网格。如果图片裂开：检查 seed 数据的图片 URL 是相对路径 /images/product/xxx.png，需放到前端 public/images/ 或配置后端静态资源。

3. 加购（需要 token）

POST /api/cart {"productId":1,"count":2}   （Authorization: Bearer token）
→ code=0

GET /api/cart
→ 返回带商品信息（名称/价格/库存）的条目

常见坑：忘带 token → 401 → 前端拦截器弹出"登录已过期"。检查请求头是否真的有 Authorization: Bearer eyJ...。

4. 下单（事务 + 扣库存）

POST /api/order {"cartIds":[1,2],"address":"北京市朝阳区"}
→ code=0，返回订单

GET /api/order/list
→ 订单 + 明细都在，购物车被清空，库存减少

用 Navicat/命令行检查三个表：order、order_item、product.stock。数据一致，就是联调通过。

四、联调排错顺序（重要）

遇到问题，按这个顺序排查，别乱猜：

1. 看浏览器 Console 控制台      → 前端报错？
2. 看 Network 面板的请求        → URL、方法、请求体对不对？
3. 看响应状态码                 → 4xx 参数问题 | 5xx 后端问题
4. 看后端控制台日志             → 后端异常堆栈（有 log-impl 会打印 SQL）
5. 看数据库实际数据             → 数据没写进去 / 条件不对

常用的 90% 场景对照：

现象	大概率原因	处理
CORS 报错	没走代理 / 后端没配 CORS	确认用 /api 前缀
401	token 过期或没带	重新登录，检查拦截器
400	参数缺失/格式错	对照接口文档和 DTO 校验
404	URL 拼错/方法不匹配	对照 Controller 的 Mapping
500 且日志有异常	后端代码 bug	读堆栈第一行
接口通但数据不对	SQL 条件/分页参数	看 MP 打印的 SQL

五、用 Postman / Apifox 做"半自动化"联调

1. 建环境变量：baseUrl=http://localhost:8080/api。
2. 登录接口后设置全局变量：pm.globals.set("token", pm.response.json().data.token)。
3. 其他接口请求头引用 token 变量（Apifox/Postman 会自动替换）。

好处：登录一次，后续所有接口自动带 token，联调和测试效率翻倍。这也是企业接口测试的日常用法。

六、本章验收

• [ ] 注册 → 登录 → 商品 → 加购 → 下单 → 订单，全流程在浏览器跑通
• [ ] 购物车加购后购物车 Badge 数量正确
• [ ] 下单后库存减少、购物车清空、订单明细完整
• [ ] 任意一步出问题时，能用四步排查定位到原因

双前端联调

同一套后端，Vue 和 React 前端都跑一遍同样的流程。若 Vue 通而 React 不通，问题在前端写法；若两边都不通，问题在后端或数据库。