第86篇：用AI辅助前后端联调——接口对不齐不再扯皮

前端说”后端没给数据”，后端说”我明明给了”，一下午没了。

如果你参与过哪怕一次多人开发，一定见过这个场景：

前端： 接口是不是挂了？我这边拿不到数据。 后端： 没挂啊，我本地测了是好的。 前端： 那我这边为什么是空的？ 后端： 你参数传对了吗？ 前端： 我按文档传的啊。

——（三小时后）

后端： 哦，字段名是 user_name，你写的 userName。

三个小时，就因为一根下划线。

这一篇讲清楚：联调用 AI 怎么把这类问题从三小时压成三分钟。一个人做全栈也用得上——自己跟自己联调，一样会对不齐。

一、先想明白：扯皮的根源是什么

联调扯皮，从来不是谁水平差，而是”没有唯一的事实来源”。

前端心里一个样、后端心里一个样，代码各写各的。到了联调谁也说服不了谁——因为双方都按自己的理解写对了。

一句话：联调不是在调代码，是在补一份当初没写清楚的约定。

解法很朴素：把约定提前白纸黑字写下来，双方都认。这份东西叫接口契约。

契约根源

二、联调三段：约、假、对

把联调拆成三段，记三个字：约、假、对。

段	干什么	什么时候做
约	定契约——接口长什么样，白纸黑字	写代码之前
假	造假数据——各自用假数据先跑通	写代码的过程中
对	真接——换成真接口，一起对	两边都写完之后

大多数团队的问题是：跳过”约”和”假”，直接冲到”对”。 结果所有问题都堆在最后一天集中爆发。

第一段：约 —— 先把契约写出来

契约里要有什么？还记得第83篇的”五件事”吗——址、入、出、错、例。

址：接口地址 + 请求方式
入：请求参数，每个字段的名字、类型、是否必填
出：返回内容，每个字段的名字、类型、含义
错：可能返回哪些错误，分别什么意思
例：一个完整的请求示例 + 一个完整的返回示例

这份东西不用手写，把需求给 AI，十几秒就能生成。

两个关键点：

① 契约要在写代码之前定，哪怕 10 分钟也比利后扯皮三小时划算；
② 定完双方各花 3 分钟确认——前端看”字段够我用吗”、后端看”数据我拿得到吗”。

这 6 分钟能省掉后面 3 小时。

第二段：假 —— 用假数据先跑

契约定好，前端不用等后端。让 AI 按契约生成假数据（行话叫 Mock），前端拿着就能把页面做出来；后端也能先把接口”壳子”搭起来返回固定假数据，把流程跑通。

新手 100% 会踩的坑：假数据只造”一切正常”那一种。 结果本地漂漂亮亮，一接真接口全炸——真实世界还有：

空列表（一条数据没有）
超长文本（名字 30 字，布局撑爆）
缺失字段（null，或干脆没这字段）
错误返回（没登录、没权限、参数错）

铁律：假数据必须含异常，至少 4 组——正常、空、极端、报错。让 AI 一次性生成，多 30 秒。

四组假数据

第三段：对 —— 真接口一接，问题现形

前两段做扎实，这步通常十几分钟完事。真出问题，往下看——99% 逃不出四种。

三、对不齐四元凶：名、型、层、空

联调”数据接不上”，几乎永远是这四个之一。记住这四个字，排查速度翻倍。

名：字段名对不上。userName vs user_name、phone vs phoneNumber、id vs ID。肉眼看两份 JSON 看十遍都看不出，字段一多直接失焦。
型：类型对不上。字符串 "0" vs 数字 0；布尔 1/0 vs true/false；时间戳 1735660800 vs "2026-01-01"。特别提醒：字符串 "0" 常被当”有值”、数字 0 被当”没值”，这一个差别能调半天。
层：嵌套层级对不上。前端找 data.list，后端放在 data.data.list；前端找 result，后端返回顶层就是数组。典型症状：看得见数据，代码取不到。
空：空值处理不一致。可能是 null、空串 ""、数字 0、或字段不存在。四种在代码里表现完全不同，契约没写清”没有值返回什么”，双方必按各自习惯来。

契约里必须为每个可能空的字段写明：没有值时返回什么。一句话的事，省掉一整类 Bug。

对不齐四元凶

四、核心用法：让 AI 当裁判

前面都是预防。最值钱的一招：出问题别用眼睛比对，让 AI 比。

把三份材料一起丢给 AI：

材料	具体是什么
① 文档	接口契约（约定应该长什么样）
② 真实返回	后端实际返回的完整内容（浏览器 F12 里能复制）
③ 报错原文	前端的完整报错信息，或”哪里显示不出来”

然后一句：”请对比这三份材料，指出实际返回和文档约定之间所有差异，按严重程度排序。”

AI 做字符级比对，比眼睛快百倍且不会漏。 下划线、大小写、多一层嵌套、类型不一致——一次全列出来。

怎么拿”真实返回”（新手第一道坎，其实很简单），一步步来：

浏览器开页面
按 F12
切 Network
刷新或点触发按钮
列表里找接口点开
Response 里就是返回
右键 Copy → Copy response 粘给 AI

这套操作值得练熟，是所有前后端排查的起点。

AI当裁判

五、甩锅终结器：这样说话不得罪人

联调群里最易吵的一句：

“接口有问题。”

默认把锅甩给对方，对方本能防守，于是互相证明”不是我的问题”。

换一种说法，永远不吵架：

“我请求了 X，期望 Y，实际拿到 Z。”

只陈述三个事实，不做任何判断。 对方看到具体信息会自然去查，而不是先自卫。

❌ “登录接口有问题，返回不对。”

✅ “调 /api/login，传了 {手机号: 138xxxx, 密码: xxx}，文档写返回 token，实际只有 access_token，麻烦看下是文档改还是接口改？”

第二种已把问题定位好，对方只做个决定，三十秒解决。

还有一条铁律：以文档为准。文档错了，先改文档再改代码。

别”这次先按实际改代码，文档回头说”——回头就是永远不会，下个人接手又是三小时。

六、顺带说说跨域（新手必撞的墙）

联调极大概率撞上这个报错：

has been blocked by CORS policy...

看到 CORS 就对了，中文叫跨域：前端页面和后端接口在不同地址，浏览器出于安全默认不让它们通信——除非后端明确允许。

划重点：跨域是后端配置（或开发代理）问题，前端代码本身改不了它。 碰到了，把完整报错 + 前后端地址贴给 AI，让它告诉你后端该加什么配置。

七、提示词模板盒子

模板 1 · 生成接口契约（联调前用）

我要做【功能描述，例如：用户登录】的接口，请生成一份接口契约文档。

背景：
- 前端需要展示：【页面要显示的信息】
- 用户要提交：【用户要填的内容】
- 特殊规则：【如：手机号必填、密码至少8位、失败提示剩余次数】

请按五项输出，Markdown 表格：
1. 址：接口地址 + 请求方式
2. 入：请求参数（字段名 / 类型 / 是否必填 / 说明）
3. 出：返回字段（字段名 / 类型 / 说明）
4. 错：错误码（码 / 什么情况 / 前端怎么处理）
5. 例：一个完整请求示例 + 一个完整成功返回示例

要求：
- 字段命名风格统一用【驼峰 userName / 下划线 user_name】，全篇一致
- 每个可能为空的字段，必须写明"没有值时返回什么"（null / 空串 / 空数组）

模板 2 · 生成四组假数据（写代码时用）

根据下面这份接口契约，生成 4 组假数据（JSON），分别：
1. 正常：3 条完整数据
2. 空：一条数据都没有
3. 极端：超长文本、超大数字、特殊符号和 emoji
4. 错误：未登录、无权限、系统异常各一份

【粘贴接口契约】

每组前用注释说明是哪种情况，方便直接复制。

模板 3 · AI 当裁判（核心，出问题时用）

前后端联调对不上，请你当裁判，找差异。

【材料一：接口契约】
（粘贴文档）
【材料二：后端实际返回（F12 Network 复制）】
（粘贴 JSON）
【材料三：前端报错 / 现象】
（粘贴报错原文，或描述"哪里显示不出来"）

请做三件事：
1. 逐字比对材料一和材料二，列出所有差异，重点查：字段名（大小写/下划线）、类型、嵌套层级、空值表示
2. 按严重程度排序，标出最可能是当前问题原因的那条
3. 针对第一条，告诉我是改文档、改后端还是改前端，为什么

不要猜测材料之外的信息。

模板 4 · 甩锅终结器（写沟通消息用）

帮我把下面这个联调问题，写成一条发群里的消息。

情况：【问题描述】
接口：【接口地址】
我传的：【请求参数】
文档说返回：【文档写的】
实际返回：【真实拿到的】

要求：
- 只陈述事实，不做责任判断，不带情绪
- 按"我请求了X / 期望Y / 实际Z"结构写
- 结尾问"是文档改还是接口改"，把决定权交给对方
- 5 行以内

模板 5 · 跨域报错求助

联调遇到跨域报错，完整报错如下：
【粘贴完整报错】

我的情况：
- 前端页面地址：【如 http://localhost:3000】
- 后端接口地址：【如 http://localhost:8080】
- 后端框架：【不知道写"不清楚"】

请告诉我：
1. 大白话解释这个报错
2. 前端问题还是后端问题
3. 在哪里加什么配置，给完整配置代码
4. 开发环境和正式上线配置有何不同（安全注意什么）

模板 6 · 联调后回写文档

刚才联调，接口和原文档有以下变动：
【如：token 改名为 access_token、新增 expires_in 字段】

请输出更新后的完整接口契约（还是五件事格式：址入出错例），我要整段替换旧文档。
同时列一份"本次变更清单"，注明哪些改动会影响已写好的前端代码。

八、这一篇的四个记忆点

联调三段 = 约、假、对。 跳过前两段，问题堆在最后一天爆发。
假数据四组 = 正常、空、极端、报错。 只造第一种，上线必炸。
对不齐四元凶 = 名、型、层、空。 99% 的”接口对不上”逃不出这四字。
AI 当裁判三份材料 = 契约 + 真实返回 + 报错原文。 别用眼睛比对 JSON。

两条沟通铁律：说”我请求了X，期望Y，实际Z”，不说”接口有问题”；以文档为准，文档错了先改文档再改代码。

下篇预告

接口通了、数据对上了，然后你会发现新问题：页面打开要转五秒圈——根子在数据库，一条查询扫了几十万行。

下一篇《第87篇：用AI写SQL与优化查询》聊：不会写 SQL 也能查数据、慢查询三板斧、删改数据前永远先做的那件事。我们下篇见。

VF的部落格