Claude 驱动的全栈开发：Spring Boot + Vue 的 BS 架构实践

title: Claude 驱动的全栈开发Spring Boot Vue 的 BS 架构实践date: 2026-07-07category: AI 开发工具tags: [Claude Code, 全栈开发, Spring Boot, Vue, BS架构]Claude 驱动的全栈开发Spring Boot Vue 的 BS 架构实践从数据库建表到前端页面渲染全流程用 Claude 完成。本篇演示如何让 Claude 同时操作前后端代码实现一个完整的 CRUD 模块。前言前面 5 篇文章我们分别从前端入门、页面交互、API 联调、状态管理、多智能体协作的角度学习了 Claude Code。从今天开始我们把所有技能串起来做一个端到端的全栈实战用 Claude 从一个空项目搭建起一个完整的 BS 架构应用。假设需求是开发一个设备管理模块——设备有增删改查、状态监控、故障记录关联。前端用 Vue 3 Element Plus后端用 Spring Boot MyBatis-Plus数据库用 MySQL。一、项目初始化1.1 后端初始化用 Spring Boot 3.x MyBatis-Plus MySQL 初始化一个后端项目。 包结构com.device.server 端口8080 需要集成 Druid 数据源、Swagger 接口文档Claude 会生成pom.xmlSpring Boot 3.x、MyBatis-Plus、Druid、SpringDoc 依赖创建application.yml数据源、端口、MyBatis-Plus 配置搭建基础包结构controller、service、mapper、entity、dto创建统一响应类ApiResponseT配置 Swagger/OpenAPI1.2 前端初始化用 Vite Vue 3 TypeScript Element Plus 初始化前端项目。 配置 Axios 封装和 Vite 代理代理 /api 到 http://localhost:8080Claude 会创建完整的前端脚手架包括 HTTP 封装、路由、布局等基础结构。1.3 数据库建表设计设备管理的数据库表 - device 表id, name, code, type, status, location, departmentId, createTime, updateTime - fault_record 表id, deviceId, description, handler, solveTime, status - 设备状态枚举normal正常、warning告警、fault故障、offline离线Claude 会生成CREATETABLEdevice(idBIGINTAUTO_INCREMENTPRIMARYKEY,nameVARCHAR(100)NOTNULLCOMMENT设备名称,codeVARCHAR(50)NOTNULLUNIQUECOMMENT设备编号,typeVARCHAR(50)NOTNULLCOMMENT设备类型,statusVARCHAR(20)NOTNULLDEFAULTnormalCOMMENT状态,locationVARCHAR(200)COMMENT位置,department_idBIGINTCOMMENT所属部门,create_timeDATETIMEDEFAULTCURRENT_TIMESTAMP,update_timeDATETIMEDEFAULTCURRENT_TIMESTAMPONUPDATECURRENT_TIMESTAMP,INDEXidx_code(code),INDEXidx_status(status))COMMENT设备表;CREATETABLEfault_record(idBIGINTAUTO_INCREMENTPRIMARYKEY,device_idBIGINTNOTNULLCOMMENT设备ID,descriptionTEXTNOTNULLCOMMENT故障描述,handlerVARCHAR(100)COMMENT处理人,solve_timeDATETIMECOMMENT处理时间,statusVARCHAR(20)NOTNULLDEFAULTpendingCOMMENT处理状态,create_timeDATETIMEDEFAULTCURRENT_TIMESTAMP,FOREIGNKEY(device_id)REFERENCESdevice(id))COMMENT故障记录表;二、后端开发2.1 Entity Mapper为 device 表生成 MyBatis-Plus 的 Entity 类和 Mapper 接口。 Entity 使用 TableName 注解Mapper 继承 BaseMapper。Claude 生成DataTableName(device)publicclassDevice{TableId(typeIdType.AUTO)privateLongid;privateStringname;privateStringcode;privateStringtype;privateStringstatus;privateStringlocation;privateLongdepartmentId;TableField(fillFieldFill.INSERT)privateLocalDateTimecreateTime;TableField(fillFieldFill.INSERT_UPDATE)privateLocalDateTimeupdateTime;}MapperpublicinterfaceDeviceMapperextendsBaseMapperDevice{}2.2 Service 层实现 DeviceService包含 - 分页查询支持按名称、编号、状态筛选 - 新增设备编号唯一校验 - 更新设备 - 删除设备级联删除故障记录 - 获取设备详情含关联的故障记录列表Claude 生成DeviceServiceImplServicepublicclassDeviceServiceImplextendsServiceImplDeviceMapper,DeviceimplementsDeviceService{AutowiredprivateFaultRecordMapperfaultRecordMapper;OverridepublicPageResultDeviceVOpageQuery(DeviceQueryquery){LambdaQueryWrapperDevicewrappernewLambdaQueryWrapper();wrapper.like(StringUtils.hasText(query.getName()),Device::getName,query.getName()).like(StringUtils.hasText(query.getCode()),Device::getCode,query.getCode()).eq(StringUtils.hasText(query.getStatus()),Device::getStatus,query.getStatus()).orderByDesc(Device::getCreateTime);PageDevicepagenewPage(query.getPageNum(),query.getPageSize());PageDevicedevicePagethis.page(page,wrapper);// 转换为 VOreturnnewPageResult(devicePage.getRecords().stream().map(this::convertToVO).collect(Collectors.toList()),devicePage.getTotal());}OverrideTransactionalpublicvoiddeleteById(Longid){// 级联删除故障记录faultRecordMapper.delete(newLambdaQueryWrapperFaultRecord().eq(FaultRecord::getDeviceId,id));this.removeById(id);}privateDeviceVOconvertToVO(Devicedevice){DeviceVOvoBeanUtil.copyProperties(device,DeviceVO.class);// 查询故障记录数量longfaultCountfaultRecordMapper.selectCount(newLambdaQueryWrapperFaultRecord().eq(FaultRecord::getDeviceId,device.getId()).eq(FaultRecord::getStatus,pending));vo.setPendingFaultCount((int)faultCount);returnvo;}}2.3 Controller 层生成 DeviceController遵循 RESTful 风格。 所有接口返回 ApiResponseT 格式。 添加 Swagger 注解。Claude 生成RestControllerRequestMapping(/api/devices)Tag(name设备管理)publicclassDeviceController{AutowiredprivateDeviceServicedeviceService;GetMappingOperation(summary分页查询设备列表)publicApiResponsePageResultDeviceVOpageQuery(DeviceQueryquery){returnApiResponse.success(deviceService.pageQuery(query));}PostMappingOperation(summary创建设备)publicApiResponseLongcreate(ValidRequestBodyDeviceDTOdto){LongiddeviceService.create(dto);returnApiResponse.success(id);}PutMapping(/{id})Operation(summary更新设备)publicApiResponseVoidupdate(PathVariableLongid,ValidRequestBodyDeviceDTOdto){deviceService.update(id,dto);returnApiResponse.success();}DeleteMapping(/{id})Operation(summary删除设备)publicApiResponseVoiddelete(PathVariableLongid){deviceService.deleteById(id);returnApiResponse.success();}GetMapping(/{id})Operation(summary获取设备详情)publicApiResponseDeviceVOdetail(PathVariableLongid){returnApiResponse.success(deviceService.getDetail(id));}}2.4 全局异常处理添加全局异常处理器统一处理参数校验失败、设备不存在、编号重复等异常。 返回格式{ code: 400/404, message: 错误信息, data: null }Claude 会创建GlobalExceptionHandler用RestControllerAdvice拦截各类异常。三、前端对接3.1 API 层根据后端的 Controller 接口生成前端的 API 调用函数。 路径、参数、返回值要和后端完全一致。Claude 生成src/api/device.tsimport{get,post,put,del}from/utils/httpimporttype{Device,DeviceQuery,DeviceDTO,PageResult}from/api/typesexportfunctiongetDeviceList(params:DeviceQuery){returngetPageResultDevice(/devices,{params})}exportfunctioncreateDevice(data:DeviceDTO){returnpostnumber(/devices,data)}exportfunctionupdateDevice(id:number,data:DeviceDTO){returnputvoid(/devices/${id},data)}exportfunctiondeleteDevice(id:number){returndelvoid(/devices/${id})}exportfunctiongetDeviceDetail(id:number){returngetDevice(/devices/${id})}3.2 页面组件创建设备管理页面复用之前学过的用户管理页面的交互模式 搜索区 表格 分页 新增/编辑弹窗 删除确认 区别在于字段不同设备有编号、类型、状态带颜色标识、位置Claude 会基于之前的模式生成设备管理页面字段和交互逻辑完全一致只是数据模型变了。3.3 状态标识设备状态需要用不同颜色的 Tag 展示 - normal → 绿色正常运行 - warning → 黄色告警 - fault → 红色故障 - offline → 灰色离线Claude 会在表格列的template #default中用computed或辅助函数映射状态颜色和文字。四、全栈联调4.1 启动后端启动后端 Spring Boot 应用确认端口 8080Claude 会执行mvn spring-boot:run或类似命令确认启动成功后告诉你。4.2 启动前端启动前端开发服务器Claude 执行pnpm dev确认http://localhost:5173可访问。4.3 验证功能在浏览器中打开设备管理页面依次测试 1. 列表加载是否正常 2. 搜索是否生效 3. 新增设备能否成功 4. 编辑能否保存 5. 删除是否有确认弹窗如果任何一步出错Claude 会读取浏览器控制台和网络面板的错误信息定位到前后端的具体代码行并修复。五、扩展设备详情与故障记录设备管理做完后还需要一个子功能点击设备查看详情能看到关联的故障记录。在设备列表的操作列加一个详情按钮。 点击后跳转到 /devices/:id 页面展示设备基本信息 故障记录列表。 故障记录支持新增填写故障描述后调用 POST /api/fault-records 接口。Claude 会创建src/views/DeviceDetail/index.vue添加动态路由/:id创建故障记录的 API 和表单组件用el-tabs组织基本信息和故障记录两个面板六、这一章的核心心得Claude 能同时操作前后端——不需要你分别开两个终端一条指令搞定全栈数据库设计 → Entity → Service → Controller → API → 页面全自动——只要描述清楚字段和业务规则前后端契约自动对齐——Claude 知道后端 Controller 的接口定义生成的前端 API 调用天然匹配联调出错时 Claude 是最佳调试搭档——它同时理解前后端代码能快速定位问题在哪一层增量开发是王道——先做 CRUD 主干再逐步叠加详情、关联、统计等扩展功能七、下一步全栈开发我们已经打通了但代码写完后还有大量工作代码审查、性能优化、Bug 排查、部署上线。下一篇我们将进入工程化进阶学习如何用 Claude 做代码审查、调试和性能优化。系列目录初识 Claude Code用自然语言打造第一个 Web 页面页面级交互实战表单、弹窗与数据联动前后端联调让 Claude 帮你打通 REST API状态管理Pinia 与复杂业务逻辑深入 Claude CodeAgent 多智能体协作Claude 驱动的全栈开发Spring Boot Vue 的 BS 架构实践 ← 本篇工程化进阶代码审查、调试与性能优化待写高级玩法工作流编排与团队协作待写