必须先定义后端api契约再生成前端代码，否则ai会随意生成不匹配接口或缺失数据结构；需用codex init --mode=backend建模，编译验证后生成openapi文档，再基于校验后的dto和yaml生成vue3前端，最后通过进程感知实现精准联调排查。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
用Codex开发前后端分离项目时，必须明确功能模块的依赖关系和交付节奏，否则AI会随意生成不匹配的接口或缺失数据结构。
先定义后端API契约，再生成前端调用
打开终端，进入项目根目录，执行：codex init --mode=backend。这一步强制Codex以服务端为起点建模，它会自动扫描src/main/java下的包结构并识别Spring Boot版本。
输入提示词：“你是资深Spring Boot架构师。基于Spring Boot 3.2+和MyBatis-Plus 3.5.x，为‘个人工作台’设计RESTful风格的待办事项模块API，包含增删改查、状态切换、分页查询，返回JSON格式，字段命名用camelCase。”
Codex生成TodoController.java、TodoService.java和TodoMapper.xml后，【必须立即运行mvn compile验证编译通过】。若报错，说明AI生成的实体类字段与Mapper SQL不一致，此时不能直接让AI“修一下”，而要先用codex /review命令查看diff，确认是类型不匹配还是命名冲突。
前端开发必须等后端API文档就绪
方法一：用Codex自动生成OpenAPI 3.0规范文件
在后端代码生成完成且编译通过后，执行：codex generate openapi --output docs/openapi.yaml。该命令会解析Controller注解和DTO类，输出标准YAML格式的接口文档。
通过 Codex CLI 生成图片，支持尺寸控制和批量模式。依赖：codex (npm)。代理默认启用。用 generate.sh 生成单张，batch_generate.sh 批量生成游戏 UI 素材，gen_size.sh 指定尺寸。所有输出保存至 ~/.codex/generated_images/。
方法二：人工校验关键字段再交由AI生成前端
打开TodoDTO.java，确认id、title、status、createdAt字段类型和是否可为空；把这段代码连同openapi.yaml内容一起发给Codex，指令：“用Vue3组合式API + Axios，基于以上接口定义生成待办列表页面，含加载状态、错误提示、分页器，使用Element Plus组件。”
注意：如果跳过这一步直接让Codex写前端，它大概率会按自己理解构造假数据结构，导致后续联调时Axios响应解析失败——这种错误在控制台只显示Cannot read property 'map' of undefined，排查成本远高于提前校验。
并行开发但严格对齐接口版本
第一步：在backend/pom.xml中将spring-boot-starter-web版本锁定为3.2.10，执行mvn versions:lock-snapshots。
第二步：在frontend/vite.config.ts中配置代理，指向http://localhost:8080而非mock地址。
第三步：启动后端服务：mvn spring-boot:run，保持终端常驻；再新开终端启动前端：npm run dev。
此时Codex已能感知两个进程正在运行。发送指令：“检查前端请求/api/todos是否返回200，响应体是否含content数组字段。若失败，定位是后端未暴露端点，还是前端请求路径错误。”
这一步的关键在于，Codex会主动读取curl -v http://localhost:8080/api/todos的原始响应头和body，而不是仅靠你描述来猜测问题。它甚至能发现你忘了在@RestController类上加@RequestMapping("/api")前缀——这种细节人类容易遗漏，但Codex在看到404响应后会反向追溯所有Controller类的路径声明。
