需按五步完成前端对接真实接口：①云哥生成带契约的接口清单；②确认后端服务可访问；③团哥生成最小可行接口；④前端注入Axios真实请求；⑤用Network或Postman验证契约咬合。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
让前端页面接上真实接口，不是把云哥生成的 HTML 直接扔进项目就完事——它会立刻报 404、undefined、或跨域错误。真实接口需要路径匹配、参数结构对齐、请求头合规、响应体可解析，缺一不可。
第一步：让云哥输出带契约的接口清单
在 VS Code 中唤出 Codex（云哥），输入完整需求，末尾必须加固定指令：
帮我写一个用户权限配置页面，含角色列表、权限树、批量分配功能。请在页面末尾自动生成一份前端接口请求清单，包含：接口地址、请求方式、入参字段名与类型、出参字段名与类型、是否需鉴权。
这一步不能省略。没有该指令，云哥默认只输出页面代码，不会构造契约；而手工补写清单极易漏字段、错类型、混淆 GET/POST 场景。清单必须由 AI 基于页面交互逻辑反推生成，才能保证字段动因真实存在。
立即学习“前端免费学习笔记（深入）”；
第二步：确认后端服务已就位并可访问
打开终端，执行 curl 测试基础连通性：
curl -I http://localhost:8080/v3/api-docs
看到 HTTP/1.1 200 OK 且响应头含 Content-Type: application/json，说明 SpringDoc 或类似文档服务已启动。若返回 Connection refused，检查后端是否运行、端口是否被占用、防火墙是否拦截。不要跳过这步直接写前端调用——【前端永远无法修复一个根本不存在的后端】。
如果后端尚未开发，跳转至「第三步：用团哥快速生成最小可行接口」。
第三步：用团哥生成最小可行接口
将云哥输出的完整内容（含页面代码 + 接口清单）全选复制 → 粘贴到 IDEA 中 → 对团哥说：
根据下面的前端接口清单，一次性生成：1. Controller 类（@RestController）；2. RequestDTO 和 ResponseVO；3. Service 接口及默认实现；4. MyBatis Plus 的 Entity 与 Mapper；5. H2 内存数据库建表 SQL（含注释）。要求所有字段类型与清单严格一致，URL 路径按 /api/v1/{resource} 格式统一前缀。
团哥生成后，立即在 IDEA 中右键运行 Spring Boot 启动类。观察控制台日志，确认类似 Mapped "{POST [/api/v1/roles/assign]}" 的日志行出现——这是接口真正挂载成功的唯一证据。
前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。
第四步：前端注入真实请求逻辑
① 打开云哥生成的 Vue 页面，定位到提交按钮的 click 回调函数；
② 删除原有 mock 请求（如 console.log("mock submit")），替换为 Axios 调用：
await axios.post("/api/v1/roles/assign", { userId: this.userId, roleIds: this.selectedRoleIds });
③ 在页面 script 标签顶部添加 import：import axios from "axios";；
④ 确保项目根目录下存在 src/plugins/axios.js，且已配置 base URL 为 http://localhost:8080；
注意：不要在组件内硬编码完整 URL，否则上线后需全局替换。base URL 必须抽离到统一插件中，这是跨环境部署的前提。
第五步：验证接口契约是否咬合
方法一：用浏览器开发者工具 Network 面板发起请求
打开页面 → 填好表单 → 点击提交 → 切换到 Network → 找到对应请求 → 点击 → 查看 Headers 是否含 Content-Type: application/json，Preview 是否显示后端返回的 JSON 数据（非 HTML 错误页）。
方法二：用 Postman 手动构造相同 payload 发起请求
新建 POST 请求 → URL 填 http://localhost:8080/api/v1/roles/assign → Body 选 raw → JSON → 粘贴云哥清单里的示例入参 → Send。成功返回 200 + 正确字段即为咬合。
若返回 400，检查 DTO 字段名是否与 JSON key 完全一致（包括大小写）；若返回 401，确认请求头是否携带 Authorization: Bearer xxx；若返回 500，查看后端控制台堆栈——此时问题已在服务端，前端无需再改。
