title: Claude Code 前后端联调实战让 Claude 帮你打通 REST APIdate: 2026-07-07category: AI 开发工具tags: [Claude Code, REST API, 前后端联调, Axios, 跨域]Claude Code 前后端联调实战让 Claude 帮你打通 REST API前端页面写得再漂亮连不上后端就是一张空壳。本篇教你如何用 Claude 同时搞定前端请求和后端接口让前后端联调变得像填空一样简单。前言BS 架构开发中最折磨人的环节往往是前后端联调前端传的字段名和后端接收的不一致分页参数前端叫pageNum后端叫page日期格式前端传的是时间戳后端要的是yyyy-MM-dd跨域报错、CORS 配置不对、Token 传递方式不一致如果前后端都是你一个人开发Claude Code 可以帮你一把梭——同时操作前端和后端代码确保接口契约完全对齐。一、先定义 API 契约1.1 让 Claude 生成接口文档在动手写代码之前先让 Claude 帮你梳理接口。对 Claude 说我们是一个用户管理系统需要以下功能 - 用户 CRUD增删改查 分页 搜索 - 角色管理列表 权限分配 - 部门管理树形结构 增删改 请帮我整理一份 RESTful API 清单包含路径、方法、请求参数、响应格式。Claude 会输出一份结构化的接口清单功能方法路径请求体响应用户列表GET/api/userspageNum,pageSize,keyword,status{ code, message, data: { list, total } }创建用户POST/api/usersusername,name,email,role,status{ code, message, data: userId }更新用户PUT/api/users/{id}name,email,role,status{ code, message }删除用户DELETE/api/users/{id}无{ code, message }切换状态PATCH/api/users/{id}/statusstatus{ code, message }部门树GET/api/departments/tree无{ code, message, data: Dept[] }关键这份清单就是前后端的合同。双方都按照这个契约开发联调时几乎不会出问题。1.2 让 Claude 生成 TypeScript 类型基于上面的 API 清单生成对应的 TypeScript 接口定义Claude 会生成src/api/types.ts// 请求参数类型exportinterfaceUserListQuery{pageNum:numberpageSize:numberkeyword?:stringstatus?:active|inactive}exportinterfaceCreateUserPayload{username:stringname:stringemail:stringrole:admin|editor|viewerstatus:active|inactive}exportinterfaceUpdateUserPayload{name?:stringemail?:stringrole?:admin|editor|viewerstatus?:active|inactive}// 响应类型exportinterfaceUser{id:numberusername:stringname:stringemail:stringrole:admin|editor|viewerstatus:active|inactivedepartmentId:numbercreateTime:stringupdateTime:string}exportinterfaceDeptNode{id:numbername:stringchildren?:DeptNode[]}二、用 Claude 搭建 API 模块不要直接在组件里写get(/api/users)。让 Claude 帮你创建一个专门的 API 层在 src/api/ 目录下创建一个 user.ts封装所有用户相关的 API 调用。 使用前面定义的 http 模块的 get/post/put/delete 方法。 每个函数都要有完整的 TypeScript 类型注解。生成的src/api/user.tsimport{get,post,put,del}from/utils/httpimporttype{User,UserListQuery,PageResult,CreateUserPayload,UpdateUserPayload}from/api/types/** * 获取用户列表 */exportfunctiongetUserList(params:UserListQuery){returngetPageResultUser(/users,{params})}/** * 创建用户 */exportfunctioncreateUser(data:CreateUserPayload){returnpostnumber(/users,data)}/** * 更新用户 */exportfunctionupdateUser(id:number,data:UpdateUserPayload){returnputvoid(/users/${id},data)}/** * 删除用户 */exportfunctiondeleteUser(id:number){returndelvoid(/users/${id})}/** * 切换用户状态 */exportfunctiontoggleUserStatus(id:number,status:active|inactive){returnpatchvoid(/users/${id}/status,{status})}好处组件里只需要import { getUserList } from /api/user业务逻辑和 API 调用完全分离。三、Vite 代理配置解决跨域开发环境中前端运行在localhost:5173后端运行在localhost:8080跨域是必然的。让 Claude 帮你配置 Vite 代理配置 Vite 开发服务器将所有 /api 开头的请求代理到 http://localhost:8080 需要修改请求头中的 Host并且去掉 URL 中的 /api 前缀。Claude 会修改vite.config.tsimport{defineConfig}fromviteimportvuefromvitejs/plugin-vueimport{resolve}frompathexportdefaultdefineConfig({plugins:[vue()],resolve:{alias:{:resolve(__dirname,src),},},server:{port:5173,proxy:{/api:{target:http://localhost:8080,changeOrigin:true,rewrite:(path)path.replace(/^\/api/,),},},},})原理请求GET /api/users?pageNum1→ Vite 代理 →GET http://localhost:8080/users?pageNum1。对浏览器来说没有跨域对后端来说请求直接来自本地。四、联调时的常见问题与 Claude 的解决方案4.1 字段名不一致现象前端传pageNum后端收不到。排查让 Claude 检查前后端的参数定义。检查一下前端的分页参数和后端 Controller 的RequestParam 是否一致Claude 会对比前端UserListQuery类型和后端 Controller 方法签名发现后端用的是RequestParam(defaultValue 1) Integer page而前端传的是pageNum。修复统一改为pageNum或者在前端映射层做转换。4.2 日期格式问题现象前端传的日期是2026-07-07T03:30:00.000Z后端期望2026-07-07。解决在 Axios 请求拦截器中把所有日期类型的参数统一格式化为 yyyy-MM-ddClaude 会在http.ts的请求拦截器中添加日期格式化逻辑或者在 API 调用层做预处理。4.3 Token 传递方式不一致现象后端期望Authorization: Bearer token前端传的是token: token。解决确认前后端的 Token 传递方式确保前端请求头中使用 Authorization: Bearer xxxClaude 会检查前端拦截器和后端拦截器的配置确保一致。4.4 分页数据结构不一致现象前端期望{ list: [...], total: 100 }后端返回{ records: [...], total: 100 }。解决后端返回的分页数据结构是 { records, total }前端期望的是 { list, total } 在前端响应拦截器中做字段映射把 records 改为 listClaude 会在响应拦截器中添加字段转换逻辑。4.5 文件上传/下载现象导出功能返回的文件流被解析成了 JSON报解析错误。解决导出接口需要返回文件流而不是 JSON在请求中设置 responseType: blobClaude 会在getUserList之外新建exportUsers函数单独设置responseType: blob并在组件中用BlobURL.createObjectURL触发下载。五、Mock 数据——后端还没写好怎么办实际开发中前后端经常不是同步完成的。让 Claude 帮你生成 Mock 数据后端还没准备好先用 Mock 数据让前端跑起来。 在 src/mock/ 目录下创建一个 userMock.js用 Mock.js 模拟用户列表 API。 返回 50 条随机用户数据分页结构符合 PageResult 类型。Claude 会生成完整的 Mock 模块前端先连 Mock后端就绪后只需改一行 import 即可切换。六、用 Claude 做接口测试联调完成后让 Claude 帮你写接口测试用例确保每个接口都能正常工作为 user API 写一组 Postman / curl 测试用例覆盖正常请求和异常场景 - 正常获取列表 - 搜索过滤 - 创建用户含参数校验失败 - 更新不存在的用户 - Token 过期Claude 会生成一组可直接在终端执行的 curl 命令或者一个 Postman Collection JSON 文件。七、这一章的核心心得先契约后开发——让 Claude 先生成接口清单和类型定义前后端照着契约各自开发API 层与组件层分离——所有 HTTP 调用集中在src/api/目录组件只管业务逻辑Vite 代理是跨域的最优解——开发环境用 proxy生产环境由 Nginx 反向代理解决联调出错时让 Claude 做翻译官——它能在前后端代码间快速定位不一致的地方Mock 数据保证开发不等待——后端没好Claude 帮你造数据先跑起来八、下一步API 联调打通后页面数据已经能正常显示了。但对于复杂业务——比如用户和角色的多对多关系、部门树的展开收起、多 Tab 页面的状态共享——单纯靠组件内的ref/reactive已经不够用了。下一篇我们将学习用 Pinia 做全局状态管理让 Claude 帮你搭建可维护的状态架构。系列目录初识 Claude Code用自然语言打造第一个 Web 页面← 上一篇页面级交互实战表单、弹窗与数据联动← 上一篇前后端联调让 Claude 帮你打通 REST API ← 本篇状态管理Pinia 与复杂业务逻辑待写深入 Claude CodeAgent 多智能体协作待写Claude 驱动的后端开发Spring Boot 数据库待写工程化进阶代码审查、调试与性能优化待写高级玩法工作流编排与团队协作待写