第 12 章 · 场景案例三：前后端联调字段对不上
本章目标：跟练 联调最常见故障——接口有 JSON、页面空白或字段 undefined；学会 收集证据（Network + 前端代码）；写死改前端或改后端；用 SRX 做 契约对齐。
学时建议：3～3.5 小时（含 1.5 小时实操）
前置：srx-v7 ch11（分页 API）；ch07 契约优先；ch05 影响面清单。
12.1 场景背景
| 项目 | 内容 |
|---|---|
| 现象 | 订单列表页空白，Network 里 GET /api/orders/ 200 + 有 body |
| 怀疑 | 前端读 res.data.list，后端返回 results |
| 目标 | 对齐字段，列表正常展示 |
| 原则 | 只改一端——任务里写死，避免 AI 两边乱改 |
为什么接在 ch11 后：分页 API 已通，但 字段嵌套/命名 不一致时，联调阶段最高发。
12.2 学完你能
| 能力 | 验收 |
|---|---|
| 取证 | F12 Network + 前端读字段对照表 |
| 决策 | 改前端 vs 改后端（Ask 辅助） |
| SRX | 证据贴进任务 + @ 单端文件 |
| 控场 | AI 改后端时 Ctrl+Enter 拉回 |
| 验收 | 页面有数据、F12 无红错、分页仍正常 |
12.3 收集证据（先人工 5 分钟，必做）
步骤 1 — Network
- 浏览器 F12 → 网络，刷新列表页
- 点
orders请求 → 响应 标签，复制 JSON（可脱敏）
步骤 2 — 前端代码
- 打开 JS/模板，搜
fetch/axios/ 渲染列表处 - 看读取路径，如
res.data.list、response.results
步骤 3 — 对照表（贴进 SRX 任务）
| 后端实际返回 | 前端期望 |
|---|---|
results | data.list |
count | data.total |
你应该看到：至少一处 undefined 导致 .map is not a function 或空白。
12.4 决策：改前端还是改后端？
| 情况 | 建议 |
|---|---|
| 后端已被 App/其他页使用 | 只改前端 适配 |
| 后端刚写、无其他调用方 | 可 改后端 统一团队规范 |
| 不确定 | Ask：「只改前端 vs 改后端，哪边影响面更小？」 |
本案例主线：假设 后端已被多处使用 → 只改前端。
变体 12.8：必须改后端时走另一模板。
12.5 跟练 A：SRX 只改前端（主线）
分支：
git checkout -b fix/order-list-field-mappingSRX 任务：
【目标】修复订单列表页不显示数据
【范围】仅 @static/js/order-list.js（或你项目实际路径，用 @ 钉死）
【现象】
- 接口实际返回：{ "results": [...], "count": 100, "page": 1, ... }
- 前端当前读取：res.data.list、res.data.total → undefined，列表空白
【约束】
- 不要修改任何后端 API 或 handler
- 不要改其他页面脚本
- 保留 ch11 分页 query 参数逻辑
【验收】
- 列表页展示订单行
- total/翻页显示正确
- F12 控制台无红色报错执行中：
- AI 改
views.go/handlers→ Ctrl+Enter：「只改前端，后端不动」 - 结构化修复清单（JS 语法）→ 等结束仍审逻辑（ch06）
审阅：
- 只动前端文件 ✓
- 映射：
results→列表，count→total - 无多余
console.log（或接受后删）
验收 → commit：
git commit -m "fix: 订单列表前端字段与 API 对齐"