VibeCoding 实战：用 Qoder 从零开发 Java Spring Boot WMS 系统（五）
第4章 工程脚手架：搭好能跑起来的项目骨架
本章目标：用 Qoder 的 Agent 模式，依据第3章的设计文档，一次性生成后端 Spring Boot 工程骨架（含统一返回体、全局异常、MyBatis-Plus 配置、逻辑删除、参数校验）和前端 Vue3 管理端骨架，并真正跑起来。本章结束你会看到一个能登录的空壳后台。
学习目标
- 会用 Agent 模式让 AI 生成整个工程骨架并自动建文件、装依赖
- 能把后端服务启动、连上数据库、跑通健康检查
- 能生成并启动前端脚手架，打通"前端调后端"的第一条链路
- 完成登录鉴权（JWT）模块，拿到 token 并访问受保护接口
- 初始化 Git 仓库，学会"每完成一个可运行节点就提交"
4.1 开工三件事
在让 AI 动手前，先确认：
- 第3章的
db/schema.sql已成功导入 MySQL（库mini_wms存在且有数据表） - 工作区里有
docs/系统设计.md、docs/api.md、项目规则文件 - 当前终端能用
java -version/node -v（第1章装好的）
然后打开一个新的 Agent 会话，把上下文喂给它：
# 引用 docs/系统设计.md
# 引用 docs/api.md
# 引用项目规则文件（.qoder/rules.md 或 docs/开发规范.md）
💡 Agent 模式的关键差异：它不只回答，还会创建文件、执行命令。所以你要像给同事派活一样，说清"目标 + 约束 + 验收"，然后让它自己干，中途你可以看它每一步、随时打断纠偏。
4.2 生成后端工程骨架
提示词
你是资深 Spring Boot 工程师。请依据 #docs/系统设计.md 和 #项目规则，
在工作区里创建后端工程 wms-server（Spring Boot 3 + Java 17 + MyBatis-Plus + MySQL8 + JWT + Lombok + Maven）。
要求本次只搭"骨架 + 公共基础设施"，暂不写具体业务模块，包含：
1. Maven pom.xml：引入 spring-boot-starter-web、mybatis-plus-spring-boot3-starter、
mysql-connector-j、lombok、jjwt（0.12.x）、spring-boot-starter-validation；
配置 spring-boot-maven-plugin；使用 Maven Wrapper（mvnw）。
2. 启动类 MiniWmsApplication，包名 com.yjoffer.miniwms。
3. application.yml：数据源连本地 mini_wms 库（用户名 root，密码用占位符 ${DB_PASSWORD:你的密码} 并注明我稍后改）、
MyBatis-Plus 逻辑删除与驼峰映射、日志、server.port=8080、jwt secret 与过期时间配置。
4. common 包：
- Result<T> 统一返回体（code/message/data，含 success()/error() 静态方法）
- 全局异常处理 @RestControllerAdvice，捕获业务异常、参数校验异常，返回 Result
- 自定义 BusinessException
- MyMetaObjectHandler 自动填充 create_time/update_time
- MyBatisPlusConfig 分页插件
5. 各业务模块先建空 package 目录（auth/basedata/inbound/outbound/inventory/stocktake）。
创建完成后，执行 mvnw compile 确认能编译通过；如报错，请自行定位并修复直到编译成功，
然后把编译结果贴给我。
预期结果
- 工作区出现
wms-server/目录，含pom.xml、mvnw、src/main/java/...完整包结构 - AI 会真的执行
mvnw compile（首次会下载依赖，稍等），最终输出 BUILD SUCCESS
注意事项
- ⚠️ 首次编译下载依赖可能因网络失败。如果卡在下载，检查第1章配的阿里云 Maven 镜像；或让 AI："把镜像配置写进项目，或改用可访问的仓库。"
- ⚠️ 数据库密码一定要自己改：AI 用的是占位符。打开
application.yml把${DB_PASSWORD:你的密码}的默认值改成你本机 root 真实密码。 - 💡 MyBatis-Plus 在 Spring Boot 3 下要用
mybatis-plus-spring-boot3-starter，不是老的mybatis-plus-boot-starter。若 AI 引错了，纠正它。
4.3 启动后端并验证
提示词
后端骨架编译已通过。请：
1. 用 mvnw spring-boot:run 启动服务（后台运行，观察日志）
2. 新增一个健康检查接口 GET /api/health，返回 Result.success("ok")，用于验证服务与统一返回体
3. 启动成功后，用 curl 访问 http://localhost:8080/api/health，把返回结果贴给我
如果启动报错（常见是数据库连不上、端口占用、Bean 创建失败），请把报错原文分析并修复后重试，直到服务成功启动。
预期结果
{ "code": 0, "message": "success", "data": "ok" }
看到服务启动日志（Started MiniWmsApplication）+ 健康检查返回上面 JSON，说明后端骨架 OK。
常见问题排查（也可直接丢给 AI）
Communications link failure→ 数据库没启动或密码错，检查 MySQL 服务与application.yml。Port 8080 was already in use→ 端口占用，改端口或杀掉占用进程。Table 'mini_wms.xxx' doesn't exist→ 第3章 SQL 没导入成功，回去补导入。
💡 把这些报错原样贴回给 Qoder 让它修，是本章要你练习的核心动作之一：VibeCoding 里"会报错给 AI"比"自己瞎猜改"高效得多。
4.4 完成登录鉴权模块（JWT）
登录是第一个"真实业务"，也是后面所有接口的门禁。我们让它一次做完后端登录 + 一个简单登录页。
提示词（后端）
在 #项目规则 约束下，实现 auth 登录模块（后端）：
1. wms_user 表已存在，实体 User、Mapper、Service。
2. 接口：
- POST /api/auth/login：入参 username/password，校验通过生成 JWT（含 userId、role）返回 token
- GET /api/auth/me：需携带 token，返回当前登录用户信息（用于前端校验登录态）
3. 密码用 BCrypt 加密存储：提供 tools 或初始化脚本，把 admin 用户密码更新为 "123456" 的 BCrypt 值；
登录时用 BCrypt 比对，绝不明文比较。
4. JWT 过滤器/拦截器：除 /api/auth/login、/api/health 外的接口需校验 header Authorization: Bearer <token>，
失败返回 401（统一 Result 结构）。
5. 完成后 mvnw compile，并用 curl 演示：先登录拿 token，再带 token 调 /api/auth/me，贴出两次响应。
预期结果
- 登录返回 token；带 token 能访问
/api/auth/me；不带 token 返回 401 - 数据库里 admin 密码已是 BCrypt 密文（不是明文）
注意事项
- ⚠️ 密码安全是红线：一定确认它用了 BCrypt（或 Argon2），而不是把密码明文存库或明文比较。没做就要求返工。
- ⚠️ JWT secret 生产环境不能写死在 yml 明文。教学项目可先放配置，本章结束我会提醒你在第9章部署时改用环境变量。
前端骨架 + 登录页
提示词（前端）
依据 #docs/系统设计.md 前端约定，在工作区创建前端工程 wms-web（Vue3 + Vite + Element Plus + TypeScript + Pinia + vue-router + axios）：
1. 脚手架：路由、Pinia、Element Plus 按需引入、axios 封装（baseURL=/api，请求拦截器自动带 token，
响应拦截器统一处理 Result 与 401 跳登录）。
2. 一个登录页（用户名密码 + 调 /api/auth/login，成功存 token 到 Pinia+localStorage 跳首页）。
3. 一个后台布局（左侧菜单占位：基础数据/入库/出库/库存/盘点，顶部显示当前用户名，来自 /api/auth/me）。
4. 配置 Vite 开发代理，把 /api 代理到 http://localhost:8080。
完成后：npm install，然后 npm run dev 启动，把访问地址和控制台是否有报错告诉我。
如 install 或启动报错，请自行分析修复直到能启动。
预期结果
- 浏览器打开 Vite 给出的地址（通常
http://localhost:5173）出现登录页 - 输入 admin / 123456 能登录并进入后台布局页
注意事项
- ⚠️ 前后端联调跨域：本方案用 Vite 代理规避 CORS，不要图省事在后端全局放开
*。若仍 404/跨域，检查代理前缀与后端 context-path 是否一致。 - 💡
npm install慢或失败，回到第1章配的淘宝镜像registry.npmmirror.com。
4.5 初始化 Git，提交第一个里程碑
一个"能登录的骨架"就是值得记录的可运行节点。学会这个习惯：
提示词
请在后端 wms-server、前端 wms-web 及工作区根目录初始化 Git 仓库（若已初始化则跳过）：
1. 生成合适的 .gitignore（忽略 target/、node_modules/、dist/、.env、IDE 配置等）
2. git add、提交一条信息："chore: WMS 脚手架 + 登录模块（可运行）"
3. 告诉我当前 git log --oneline 的结果
为什么重要
VibeCoding 迭代快，没有 Git 兜底的 AI 改动是危险的：它可能一次重构把你之前能跑的东西改崩。养成"每个可运行节点一提交"的习惯，崩了随时 git checkout 回滚。第5~8章每章结尾我们都会提交一次。
本章检查清单
- [ ] 后端
mvnw compile通过、服务能启动 - [ ]
GET /api/health返回统一 Result 结构 - [ ] 登录接口用 BCrypt 校验、返回 JWT；
/api/auth/me受保护 - [ ] 前端能启动，admin/123456 能登录进入后台布局
- [ ]
/api经 Vite 代理联调成功，401 能跳回登录 - [ ] Git 已初始化并完成第一次提交
脚手架就绪，进入 第5章 基础数据模块，开始按模块"填肉"。
常见问题
Q：AI 一口气生成了几十个文件，我要一个个看吗？ A：不用逐个读代码，但要逐个验证结果：能不能编译、能不能启动、接口通不通。VibeCoding 的验收看"行为"不看"行数"。想理解某段代码，选中它问 AI"解释这段"即可。
Q：让它一次把骨架和所有业务模块都生成了不行吗？ A：不建议。一次性生成太多，出错时难以定位是哪一步崩的。本教程刻意"骨架先行、模块逐个"，就是为了每步都可验证、可回滚——这正是可控 VibeCoding 的精髓。
Q：前端我不会，出问题怎么办？ A：本教程前端全部由 AI 生成，你只需保证它能启动、能登录。遇到前端报错，把浏览器控制台或终端报错原文贴回给 AI 修。你的精力应放在后端业务与设计评审上。