必须用角色分工+结构化接口清单+跨IDE协同驱动双Codex：云哥（前端）生成页面及标准接口清单，团哥（后端）据此一键产出Spring Boot全栈代码，并通过VSCode多根工作区实现联合调试。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
要在同一个开发周期内让Codex同步产出可联调的前端页面和后端接口，必须打破“先写完前端再丢给后端”的线性习惯，用角色分工+结构化接口清单+跨IDE协同的方式驱动两个AI实例各司其职、精准对接。
给两个Codex实例明确命名与职责
打开VSCode，确保已安装Codex插件 → 在左下角状态栏点击Codex图标 → 选择“New Chat” → 在新对话顶部输入：“云哥，你是前端Codex，专注Vue/React/HTML/CSS/JS，只生成页面代码和标准接口请求清单。”
打开IntelliJ IDEA，同样新建Codex对话 → 输入：“团哥，你是后端Codex，专注Java/Spring Boot，只根据前端接口清单生成Controller、DTO、VO、Service、Mapper及SQL。”
这一步不能跳过。【未明确定义角色时，Codex会默认按单任务模式响应，无法触发后续的接口清单自动追加和反向解析逻辑】。
云哥生成前端页面并强制输出接口清单
在VSCode中对云哥发出完整指令，例如：
“帮我写一个用户权限配置页面，含角色列表、权限树形勾选、批量保存按钮。请在页面末尾自动生成一份前端接口请求清单，包含：接口地址、请求方式、入参字段、出参字段、字段类型。”
云哥会先输出完整页面代码（如Vue组件），然后换行，紧接着输出结构清晰的接口清单，格式类似：
【接口清单】
GET /api/roles
入参：无
出参：[{id:Long, name:String, code:String}]
POST /api/roles/assign
入参：roleId:Long, permissionIds:Long[]
出参：success:Boolean, message:String
注意：必须带“请在页面末尾自动生成……”这句话，否则云哥大概率不输出清单——这是触发机制的关键开关。
团哥接收清单并一键生成后端全套代码
全选云哥输出内容（含页面代码+接口清单）→ 复制 → 切换到IDEA中团哥对话窗口 → 粘贴 → 紧接着输入：
“根据以上接口清单，生成符合Spring Boot 3.3规范的后端代码：1.Controller类（含@RestController和@RequestMapping）；2.RequestDTO（含Lombok注解）；3.ResponseVO；4.Service接口与Impl实现；5.MyBatis Plus Mapper接口；6.建表SQL（含id、created_time等通用字段）。”
团哥将立即生成全部文件代码块，每个类都带完整包路径、注释和校验逻辑。它不会问你用不用MyBatis，也不会猜测字段是否为非空——因为接口清单里已明确定义了字段名和类型。
这一步操作起来很简单，直接把复制的内容粘贴过去就行。但要注意：如果清单里写了“入参：token:String”，团哥会自动在Controller方法参数里加@RequestHeader("Authorization") String token，并做JWT解析；如果没写，它就不会加，也不会擅自补。
前后端项目绑定为多根工作区实现联合调试
第一步：打开VSCode → 按Ctrl+Shift+P → 输入“Add Folder to Workspace…” → 选择你的前端项目（如my-vue-app）→ 再次执行该命令 → 选择后端项目（如my-spring-boot-api）。
第二步：点击菜单栏“文件”→“将工作区另存为…”→ 命名为fullstack.code-workspace并保存至D:\projects\。
第三步：在工作区根目录下创建.vscode/launch.json，填入compound配置，关键字段必须使用${workspaceFolder:my-spring-boot-api}和${workspaceFolder:my-vue-app}动态引用，不能写死绝对路径。
第四步：启动前端开发服务器（npm run dev）→ 启动后端调试（Debug Backend）→ 在前端代码里打一个断点，F5运行，刷新页面，断点能同时在Vue组件和Spring Controller里命中，说明跨项目调试通了。
这一步失败最常见的原因是：两个文件夹名称里有空格或中文，导致${workspaceFolder:xxx}解析失败。建议全部用英文小写字母命名。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
