30款热门AI模型一站整合DeepSeek/GLM/Qwen 随心用限时 5 折。 点击领海量免费额度上周帮一个学弟改期末项目他拿来的代码让我哭笑不得——前端 Vue3 组件里写满了 SQL 语句后端 SpringBoot 控制器里塞着 HTML 拼接美其名曰“前后端分离”。这大概是很多同学在赶课设、期末作业时的真实写照时间紧、任务重网上找个“健身管理系统”模板七拼八凑能跑起来就行至于架构清晰、代码规范、可维护性那都是“下次一定”。但问题恰恰出在这里。一个能“跑起来”的系统和一个能“拿得出手”、“讲得清楚”、“经得起问”的项目中间隔着一条巨大的鸿沟。这条鸿沟不是靠堆砌功能就能填平的它关乎你对现代 Web 开发核心工作流的理解——也就是真正的“前后端分离”到底在分离什么。今天我们就以这个经典的“SpringBoot Vue3 DeepSeek 健身管理系统”为蓝本抛开那些华而不实的标题深入聊聊如何用一小时不是仅仅搭出一个壳子而是搭建起一个理解清晰、边界明确、易于扩展的现代全栈开发骨架。这才是你应对课设、期末作业乃至未来面试的“救星”。1. 先拆解“前后端分离”它到底在分离什么很多人对“前后端分离”的理解停留在“前端一个文件夹后端一个文件夹”的物理层面。这没错但太浅了。真正的分离是职责的分离、通信协议的约定和开发流程的解耦。1.1 职责分离谁该干什么必须清清楚楚后端 (SpringBoot)它的核心职责是业务逻辑、数据持久化和 API 供给。具体到健身管理系统业务逻辑验证会员卡是否过期、计算课程预约冲突、统计教练课时等。数据持久化通过 MyBatis-Plus 或 JPA 与 MySQL 数据库交互完成“增删改查”。API 供给提供一组规范的 RESTful API 接口例如GET /api/members(获取会员列表)POST /api/members(新增会员)并返回 JSON 格式的数据。它不应该关心数据最终以何种样式列表、卡片展示也不该拼接任何 HTML 片段。前端 (Vue3)它的核心职责是数据呈现、用户交互和路由管理。数据呈现通过 Axios 调用后端 API 获取 JSON 数据利用 Vue 的响应式系统ref,reactive绑定到模板渲染成表格、表单等界面。用户交互处理按钮点击、表单提交、数据校验如前端校验手机号格式然后将用户操作转化为对后端 API 的调用。路由管理使用 Vue Router 管理不同页面如会员管理、课程管理的切换。它不应该直接操作数据库如写 SQL也不该包含任何业务逻辑判断如判断会员等级这应由后端API返回或前端根据后端返回的数据计算。一个简单的判断标准如果你的 Vue 组件里出现了jdbc、MyBatis的Mapper类或者你的 SpringBootController里返回了String类型的 HTML 代码那么你的分离就是失败的。1.2 通信约定API 是前后端唯一的“合同”前后端通过 API 接口进行通信这份“合同”必须清晰、稳定。定义清晰的请求与响应使用 JSON 作为数据交换格式。后端应提供明确的 API 文档或至少是清晰的代码注释说明每个接口的 URL、方法GET/POST/PUT/DELETE、请求参数、请求体格式以及成功的响应格式和错误码。统一的响应封装不要直接返回数据库实体对象或裸列表。封装一个统一的Result或Response类。// 后端 SpringBoot 示例统一响应体 Data public class ResultT { private Integer code; // 状态码如 200成功500服务器错误 private String msg; // 提示信息 private T data; // 实际数据 public static T ResultT success(T data) { ResultT result new Result(); result.setCode(200); result.setMsg(操作成功); result.setData(data); return result; } public static T ResultT error(String msg) { ResultT result new Result(); result.setCode(500); result.setMsg(msg); return result; } }这样前端无论收到什么响应都可以通过code字段判断成功与否通过data获取数据通过msg获取提示异常处理会变得非常规范。1.3 开发流程解耦并行开发与 Mock 数据职责分离后前后端开发者可以并行工作。前端在界面未完成时可以使用工具如 Apifox、Postman或编写 Mock 服务来模拟后端 API 返回的数据而不必等待后端接口真正写好。这极大地提升了开发效率。小结搭建这个健身管理系统的第一步不是在 IDE 里点“新建项目”而是在脑子里画好这条分界线。后端只提供 JSON API前端只消费 JSON API。这是所有后续工作的基石。2. 一小时快速搭建骨架重于血肉很多教程会让你一上来就创建数据库所有表、写完所有实体类、Mapper、Service、Controller 和 Vue 组件。这对于一个期末项目来说不仅时间紧张而且容易让你迷失在细节中。我们的策略是先用最小核心功能打通全链路。2.1 后端 (SpringBoot) 30分钟一个完整的“会员”增删改查环境与项目初始化 (5分钟)使用 Spring Initializr 或 IDEA 内置工具创建项目。依赖选择Spring Web,Lombok,MyBatis Framework,MySQL Driver。对于快速开发强烈推荐使用MyBatis-Plus替代原生的MyBatis它能极大减少样板代码。在pom.xml中手动添加 MyBatis-Plus 依赖。dependency groupIdcom.baomidou/groupId artifactIdmybatis-plus-boot-starter/artifactId version最新版本/version /dependency核心配置与数据库 (5分钟)application.yml中配置数据库连接。spring: datasource: url: jdbc:mysql://localhost:3306/fitness_db?useSSLfalseserverTimezoneUTC username: root password: yourpassword driver-class-name: com.mysql.cj.jdbc.Driver mybatis-plus: configuration: log-impl: org.apache.ibatis.logging.stdout.StdOutImpl # 控制台输出SQL调试用 global-config: db-config: logic-delete-field: deleted # 全局逻辑删除字段如果用到 logic-delete-value: 1 logic-not-delete-value: 0创建数据库fitness_db和一张最核心的表例如member会员表。CREATE TABLE member ( id bigint NOT NULL AUTO_INCREMENT COMMENT 主键, name varchar(50) DEFAULT NULL COMMENT 姓名, phone varchar(20) DEFAULT NULL COMMENT 手机号, card_type varchar(20) DEFAULT NULL COMMENT 会员卡类型, expire_date date DEFAULT NULL COMMENT 到期日期, create_time datetime DEFAULT CURRENT_TIMESTAMP COMMENT 创建时间, update_time datetime DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP COMMENT 更新时间, PRIMARY KEY (id) ) ENGINEInnoDB DEFAULT CHARSETutf8mb4;编写代码 (20分钟)实体类Member.java使用 LombokData注解。Data TableName(member) // MyBatis-Plus 表名映射 public class Member { TableId(type IdType.AUTO) // 主键自增 private Long id; private String name; private String phone; private String cardType; private LocalDate expireDate; private LocalDateTime createTime; private LocalDateTime updateTime; }Mapper 接口MemberMapper.java继承 MyBatis-Plus 的BaseMapper无需写 XML。Mapper public interface MemberMapper extends BaseMapperMember { }Service 层MemberService.java继承IService快速获得通用方法。public interface MemberService extends IServiceMember { } Service public class MemberServiceImpl extends ServiceImplMemberMapper, Member implements MemberService { }Controller 层MemberController.java提供 RESTful API。RestController RequestMapping(/api/members) public class MemberController { Autowired private MemberService memberService; GetMapping public ResultListMember list() { ListMember list memberService.list(); return Result.success(list); } PostMapping public ResultMember add(RequestBody Member member) { // 简单校验 if (member.getName() null || member.getName().trim().isEmpty()) { return Result.error(姓名不能为空); } memberService.save(member); return Result.success(member); } PutMapping(/{id}) public ResultMember update(PathVariable Long id, RequestBody Member member) { member.setId(id); memberService.updateById(member); return Result.success(member); } DeleteMapping(/{id}) public ResultString delete(PathVariable Long id) { memberService.removeById(id); return Result.success(删除成功); } }解决跨域问题在 Controller 类或配置类上添加CrossOrigin注解或使用全局配置。到这一步一个具备完整增删改查 API 的后端服务就完成了。你可以用 Postman 测试GET http://localhost:8080/api/members等接口是否正常工作。2.2 前端 (Vue3) 30分钟一个能调用后端的管理界面项目初始化 (5分钟)使用 Vite 快速创建 Vue3 项目npm create vuelatest按提示选择 TypeScript、Router、Pinia状态管理等。安装必要依赖npm install axios用于HTTP请求element-plusUI组件库可选但能极大提速。核心页面与组件 (25分钟)配置 Axios 和 API 层在src/utils/request.ts中创建 Axios 实例配置基地址、拦截器用于统一处理错误。import axios from axios; const request axios.create({ baseURL: http://localhost:8080/api, // 后端地址 timeout: 5000, }); // 响应拦截器统一处理错误 request.interceptors.response.use( (response) { const res response.data; if (res.code 200) { return res.data; // 直接返回后端 Result 里的 data 字段 } else { // 弹出错误提示 ElMessage.error(res.msg || 请求失败); return Promise.reject(new Error(res.msg || Error)); } }, (error) { ElMessage.error(error.message || 网络错误); return Promise.reject(error); } ); export default request;创建会员管理页面src/views/member/MemberView.vuetemplate div h1会员管理/h1 !-- 搜索和新增按钮 -- el-button typeprimary clickhandleAdd新增会员/el-button !-- 数据表格 -- el-table :datamemberList stylewidth: 100% el-table-column propname label姓名 / el-table-column propphone label手机号 / el-table-column propcardType label卡类型 / el-table-column propexpireDate label到期日 / el-table-column label操作 template #defaultscope el-button sizesmall clickhandleEdit(scope.row)编辑/el-button el-button sizesmall typedanger clickhandleDelete(scope.row.id)删除/el-button /template /el-table-column /el-table !-- 新增/编辑对话框 -- el-dialog v-modeldialogVisible :titledialogTitle el-form :modelform label-width80px el-form-item label姓名 el-input v-modelform.name / /el-form-item !-- 其他字段... -- /el-form template #footer el-button clickdialogVisible false取消/el-button el-button typeprimary clicksubmitForm确认/el-button /template /el-dialog /div /template script setup langts import { ref, onMounted } from vue; import request from /utils/request; import { ElMessage, ElMessageBox } from element-plus; interface Member { id?: number; name: string; phone: string; cardType: string; expireDate: string; } const memberList refMember[]([]); const dialogVisible ref(false); const dialogTitle ref(); const form refMember({ name: , phone: , cardType: , expireDate: }); // 加载会员列表 const loadMembers async () { try { const data await request.get(/members); memberList.value data; } catch (error) { console.error(加载失败, error); } }; // 新增 const handleAdd () { dialogTitle.value 新增会员; form.value { name: , phone: , cardType: , expireDate: }; dialogVisible.value true; }; // 编辑 const handleEdit (row: Member) { dialogTitle.value 编辑会员; form.value { ...row }; dialogVisible.value true; }; // 提交新增或更新 const submitForm async () { const url form.value.id ? /members/${form.value.id} : /members; const method form.value.id ? put : post; try { await request({ url, method, data: form.value }); ElMessage.success(操作成功); dialogVisible.value false; loadMembers(); // 刷新列表 } catch (error) { // 错误已在拦截器中统一处理 } }; // 删除 const handleDelete async (id: number) { try { await ElMessageBox.confirm(确认删除, 提示, { type: warning }); await request.delete(/members/${id}); ElMessage.success(删除成功); loadMembers(); } catch (error) { // 用户取消或删除失败 } }; onMounted(() { loadMembers(); }); /script配置路由在src/router/index.ts中将/members路径指向这个页面。至此一个前后端完全分离、具备会员管理基础增删改查功能的健身管理系统骨架就搭建完毕了。前端通过 Axios 调用后端 RESTful API后端处理业务并返回统一格式的 JSON。整个过程前后端没有一丝一毫的越界。3. 从“能跑”到“能看”填充血肉与引入 DeepSeek骨架搭好了但一个期末项目不能只有骨架。接下来我们需要让它更丰满、更有亮点。3.1 完善基础功能模块以健身管理系统为例在会员管理的基础上可以快速复制模式创建其他模块课程管理(course)课程名称、教练、时间、容量。教练管理(trainer)教练信息、专长、排班。预约管理(booking)关联会员、课程、预约时间。这里涉及更复杂的业务逻辑如检查课程容量、会员卡是否有效正是体现后端价值的地方。仪表盘使用 ECharts 等库展示会员增长、课程热度等统计图表。后端需要提供相应的统计查询 API。关键技巧使用 MyBatis-Plus 的代码生成器mybatis-plus-generator可以一键根据数据库表生成实体类、Mapper、Service、Controller 的代码极大提升开发效率。你只需要专注于编写特殊的业务逻辑即可。3.2 引入 DeepSeek打造差异化亮点“健身管理系统”太常见如何脱颖而出集成一个 AI 助手如 DeepSeek来提供智能健身咨询是一个绝佳的亮点。这展示了你将外部 API 集成到自有系统的能力。理解 DeepSeek APIDeepSeek 提供了类似 OpenAI 的 Chat Completion API。你需要去其平台注册获取 API Key。后端集成在application.yml中配置 DeepSeek 的 API 地址和你的 Key注意安全不要提交到 Git。创建一个AiService使用 Spring 的RestTemplate或WebClient调用 DeepSeek API。创建一个AiController接收前端传来的用户问题如“帮我制定一份减脂计划”调用AiService获取 DeepSeek 的回复再返回给前端。PostMapping(/chat) public ResultString chatWithAI(RequestBody MapString, String request) { String userQuestion request.get(question); // 1. 构造符合 DeepSeek API 格式的请求体 // 2. 使用 RestTemplate 发送 POST 请求带上 API Key 在 Header 中 // 3. 解析 DeepSeek 的响应提取回复文本 // 4. 返回给前端 String aiResponse aiService.chat(userQuestion); return Result.success(aiResponse); }重要安全提示API Key 必须放在后端绝不能暴露在前端代码中。所有 AI 调用必须经由你的后端服务器转发以保护密钥安全并便于你做次数限制、内容过滤等管理。前端集成在管理界面中增加一个“智能助手”页面或侧边栏浮窗。设计一个简单的聊天界面输入框、发送按钮、消息展示区域。前端调用你刚写的/api/ai/chat接口将用户输入发送到后端并展示返回的 AI 回复。这个功能的加入瞬间让你的项目从“又一个增删改查系统”变成了“具备 AI 能力的智能健身管理平台”技术深度和项目亮点都有了。4. 避坑指南与项目升华从作业到作品最后这部分是区分“及格”和“优秀”的关键。很多同学的项目在这里栽跟头。4.1 常见坑点与排查思路前端跨域 (CORS) 错误浏览器控制台报错Access-Control-Allow-Origin。原因前端运行在localhost:5173后端在localhost:8080端口不同浏览器出于安全策略阻止。解决在后端配置 CORS。可以使用CrossOrigin注解针对单个 Controller或编写全局配置类。Configuration public class WebConfig implements WebMvcConfigurer { Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping(/api/**) // 针对所有/api开头的接口 .allowedOrigins(http://localhost:5173) // 允许前端地址 .allowedMethods(GET, POST, PUT, DELETE, OPTIONS) .allowCredentials(true); } }后端接口 404 或 500 错误404检查请求 URL 是否正确注意上下文路径server.servlet.context-path配置检查 Controller 的RequestMapping和方法上的GetMapping等注解路径。500查看后端控制台日志这是最重要的排错信息。常见原因数据库连接失败、SQL 语法错误、空指针异常、JSON 序列化/反序列化失败如日期格式问题。前端调用成功但数据不显示检查浏览器开发者工具的Network标签看 API 请求是否真的返回了数据数据格式是否符合预期是否是{code:200, msg:“”, data: [...]}的结构。检查 Vue 组件中ref或reactive定义的数据变量名是否正确模板中绑定的属性名是否一致。MyBatis-Plus 查询不到数据或插入失败检查实体类字段名与数据库列名是否匹配驼峰转下划线默认开启。检查TableName、TableId注解是否正确。检查数据库连接配置、用户名密码。4.2 如何将项目“讲”得出彩应对答辩一个优秀的项目代码只占一半另一半是你的阐述。清晰的技术栈介绍不要只说“用了 SpringBoot 和 Vue”。要说出为什么选它们SpringBoot 简化配置、生态丰富Vue3 组合式 API 更灵活、响应式系统高效以及它们是如何协作的前后端分离架构图。突出架构设计重点讲解你的“前后端分离”是如何实现的。画一张简单的架构图浏览器 - Vue 前端 - Nginx可选- SpringBoot API - MySQL。明确各层职责。详解核心业务流程挑一个最复杂的流程讲透比如“会员预约课程”。前端用户选择课程 - 点击预约 - 发送POST /api/bookings。后端BookingController接收请求 -BookingService校验会员卡有效课程有余位- 调用BookingMapper插入数据 - 返回成功/失败结果。这体现了你的业务逻辑处理能力。展示亮点功能重点演示“DeepSeek AI 健身咨询”功能。说明你是如何集成第三方 API、如何保证 API Key 安全、如何处理网络请求异步性的。谈论遇到的问题与解决方案主动提及你遇到的坑如跨域、日期格式、复杂查询并说明你是怎么排查和解决的。这体现了你的实战能力和解决问题的能力远比平铺直叙更有说服力。记住你的项目不仅仅是一堆能运行的代码更是你技术思考、架构理解和解决问题能力的载体。用一小时搭好骨架再用数小时填充内容、解决 bug、准备讲稿你交出的就不会是一个仓促的作业而是一个值得展示的作品。从这个清晰的骨架出发你可以轻松地将它扩展成任何你需要的管理系统这才是“期末救星”的真正含义。 30款热门AI模型一站整合DeepSeek/GLM/Qwen 随心用限时 5 折。 点击领海量免费额度
一小时搭建SpringBoot+Vue3健身管理系统：从零到一掌握前后端分离核心
发布时间：2026/7/6 11:42:13
30款热门AI模型一站整合DeepSeek/GLM/Qwen 随心用限时 5 折。 点击领海量免费额度上周帮一个学弟改期末项目他拿来的代码让我哭笑不得——前端 Vue3 组件里写满了 SQL 语句后端 SpringBoot 控制器里塞着 HTML 拼接美其名曰“前后端分离”。这大概是很多同学在赶课设、期末作业时的真实写照时间紧、任务重网上找个“健身管理系统”模板七拼八凑能跑起来就行至于架构清晰、代码规范、可维护性那都是“下次一定”。但问题恰恰出在这里。一个能“跑起来”的系统和一个能“拿得出手”、“讲得清楚”、“经得起问”的项目中间隔着一条巨大的鸿沟。这条鸿沟不是靠堆砌功能就能填平的它关乎你对现代 Web 开发核心工作流的理解——也就是真正的“前后端分离”到底在分离什么。今天我们就以这个经典的“SpringBoot Vue3 DeepSeek 健身管理系统”为蓝本抛开那些华而不实的标题深入聊聊如何用一小时不是仅仅搭出一个壳子而是搭建起一个理解清晰、边界明确、易于扩展的现代全栈开发骨架。这才是你应对课设、期末作业乃至未来面试的“救星”。1. 先拆解“前后端分离”它到底在分离什么很多人对“前后端分离”的理解停留在“前端一个文件夹后端一个文件夹”的物理层面。这没错但太浅了。真正的分离是职责的分离、通信协议的约定和开发流程的解耦。1.1 职责分离谁该干什么必须清清楚楚后端 (SpringBoot)它的核心职责是业务逻辑、数据持久化和 API 供给。具体到健身管理系统业务逻辑验证会员卡是否过期、计算课程预约冲突、统计教练课时等。数据持久化通过 MyBatis-Plus 或 JPA 与 MySQL 数据库交互完成“增删改查”。API 供给提供一组规范的 RESTful API 接口例如GET /api/members(获取会员列表)POST /api/members(新增会员)并返回 JSON 格式的数据。它不应该关心数据最终以何种样式列表、卡片展示也不该拼接任何 HTML 片段。前端 (Vue3)它的核心职责是数据呈现、用户交互和路由管理。数据呈现通过 Axios 调用后端 API 获取 JSON 数据利用 Vue 的响应式系统ref,reactive绑定到模板渲染成表格、表单等界面。用户交互处理按钮点击、表单提交、数据校验如前端校验手机号格式然后将用户操作转化为对后端 API 的调用。路由管理使用 Vue Router 管理不同页面如会员管理、课程管理的切换。它不应该直接操作数据库如写 SQL也不该包含任何业务逻辑判断如判断会员等级这应由后端API返回或前端根据后端返回的数据计算。一个简单的判断标准如果你的 Vue 组件里出现了jdbc、MyBatis的Mapper类或者你的 SpringBootController里返回了String类型的 HTML 代码那么你的分离就是失败的。1.2 通信约定API 是前后端唯一的“合同”前后端通过 API 接口进行通信这份“合同”必须清晰、稳定。定义清晰的请求与响应使用 JSON 作为数据交换格式。后端应提供明确的 API 文档或至少是清晰的代码注释说明每个接口的 URL、方法GET/POST/PUT/DELETE、请求参数、请求体格式以及成功的响应格式和错误码。统一的响应封装不要直接返回数据库实体对象或裸列表。封装一个统一的Result或Response类。// 后端 SpringBoot 示例统一响应体 Data public class ResultT { private Integer code; // 状态码如 200成功500服务器错误 private String msg; // 提示信息 private T data; // 实际数据 public static T ResultT success(T data) { ResultT result new Result(); result.setCode(200); result.setMsg(操作成功); result.setData(data); return result; } public static T ResultT error(String msg) { ResultT result new Result(); result.setCode(500); result.setMsg(msg); return result; } }这样前端无论收到什么响应都可以通过code字段判断成功与否通过data获取数据通过msg获取提示异常处理会变得非常规范。1.3 开发流程解耦并行开发与 Mock 数据职责分离后前后端开发者可以并行工作。前端在界面未完成时可以使用工具如 Apifox、Postman或编写 Mock 服务来模拟后端 API 返回的数据而不必等待后端接口真正写好。这极大地提升了开发效率。小结搭建这个健身管理系统的第一步不是在 IDE 里点“新建项目”而是在脑子里画好这条分界线。后端只提供 JSON API前端只消费 JSON API。这是所有后续工作的基石。2. 一小时快速搭建骨架重于血肉很多教程会让你一上来就创建数据库所有表、写完所有实体类、Mapper、Service、Controller 和 Vue 组件。这对于一个期末项目来说不仅时间紧张而且容易让你迷失在细节中。我们的策略是先用最小核心功能打通全链路。2.1 后端 (SpringBoot) 30分钟一个完整的“会员”增删改查环境与项目初始化 (5分钟)使用 Spring Initializr 或 IDEA 内置工具创建项目。依赖选择Spring Web,Lombok,MyBatis Framework,MySQL Driver。对于快速开发强烈推荐使用MyBatis-Plus替代原生的MyBatis它能极大减少样板代码。在pom.xml中手动添加 MyBatis-Plus 依赖。dependency groupIdcom.baomidou/groupId artifactIdmybatis-plus-boot-starter/artifactId version最新版本/version /dependency核心配置与数据库 (5分钟)application.yml中配置数据库连接。spring: datasource: url: jdbc:mysql://localhost:3306/fitness_db?useSSLfalseserverTimezoneUTC username: root password: yourpassword driver-class-name: com.mysql.cj.jdbc.Driver mybatis-plus: configuration: log-impl: org.apache.ibatis.logging.stdout.StdOutImpl # 控制台输出SQL调试用 global-config: db-config: logic-delete-field: deleted # 全局逻辑删除字段如果用到 logic-delete-value: 1 logic-not-delete-value: 0创建数据库fitness_db和一张最核心的表例如member会员表。CREATE TABLE member ( id bigint NOT NULL AUTO_INCREMENT COMMENT 主键, name varchar(50) DEFAULT NULL COMMENT 姓名, phone varchar(20) DEFAULT NULL COMMENT 手机号, card_type varchar(20) DEFAULT NULL COMMENT 会员卡类型, expire_date date DEFAULT NULL COMMENT 到期日期, create_time datetime DEFAULT CURRENT_TIMESTAMP COMMENT 创建时间, update_time datetime DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP COMMENT 更新时间, PRIMARY KEY (id) ) ENGINEInnoDB DEFAULT CHARSETutf8mb4;编写代码 (20分钟)实体类Member.java使用 LombokData注解。Data TableName(member) // MyBatis-Plus 表名映射 public class Member { TableId(type IdType.AUTO) // 主键自增 private Long id; private String name; private String phone; private String cardType; private LocalDate expireDate; private LocalDateTime createTime; private LocalDateTime updateTime; }Mapper 接口MemberMapper.java继承 MyBatis-Plus 的BaseMapper无需写 XML。Mapper public interface MemberMapper extends BaseMapperMember { }Service 层MemberService.java继承IService快速获得通用方法。public interface MemberService extends IServiceMember { } Service public class MemberServiceImpl extends ServiceImplMemberMapper, Member implements MemberService { }Controller 层MemberController.java提供 RESTful API。RestController RequestMapping(/api/members) public class MemberController { Autowired private MemberService memberService; GetMapping public ResultListMember list() { ListMember list memberService.list(); return Result.success(list); } PostMapping public ResultMember add(RequestBody Member member) { // 简单校验 if (member.getName() null || member.getName().trim().isEmpty()) { return Result.error(姓名不能为空); } memberService.save(member); return Result.success(member); } PutMapping(/{id}) public ResultMember update(PathVariable Long id, RequestBody Member member) { member.setId(id); memberService.updateById(member); return Result.success(member); } DeleteMapping(/{id}) public ResultString delete(PathVariable Long id) { memberService.removeById(id); return Result.success(删除成功); } }解决跨域问题在 Controller 类或配置类上添加CrossOrigin注解或使用全局配置。到这一步一个具备完整增删改查 API 的后端服务就完成了。你可以用 Postman 测试GET http://localhost:8080/api/members等接口是否正常工作。2.2 前端 (Vue3) 30分钟一个能调用后端的管理界面项目初始化 (5分钟)使用 Vite 快速创建 Vue3 项目npm create vuelatest按提示选择 TypeScript、Router、Pinia状态管理等。安装必要依赖npm install axios用于HTTP请求element-plusUI组件库可选但能极大提速。核心页面与组件 (25分钟)配置 Axios 和 API 层在src/utils/request.ts中创建 Axios 实例配置基地址、拦截器用于统一处理错误。import axios from axios; const request axios.create({ baseURL: http://localhost:8080/api, // 后端地址 timeout: 5000, }); // 响应拦截器统一处理错误 request.interceptors.response.use( (response) { const res response.data; if (res.code 200) { return res.data; // 直接返回后端 Result 里的 data 字段 } else { // 弹出错误提示 ElMessage.error(res.msg || 请求失败); return Promise.reject(new Error(res.msg || Error)); } }, (error) { ElMessage.error(error.message || 网络错误); return Promise.reject(error); } ); export default request;创建会员管理页面src/views/member/MemberView.vuetemplate div h1会员管理/h1 !-- 搜索和新增按钮 -- el-button typeprimary clickhandleAdd新增会员/el-button !-- 数据表格 -- el-table :datamemberList stylewidth: 100% el-table-column propname label姓名 / el-table-column propphone label手机号 / el-table-column propcardType label卡类型 / el-table-column propexpireDate label到期日 / el-table-column label操作 template #defaultscope el-button sizesmall clickhandleEdit(scope.row)编辑/el-button el-button sizesmall typedanger clickhandleDelete(scope.row.id)删除/el-button /template /el-table-column /el-table !-- 新增/编辑对话框 -- el-dialog v-modeldialogVisible :titledialogTitle el-form :modelform label-width80px el-form-item label姓名 el-input v-modelform.name / /el-form-item !-- 其他字段... -- /el-form template #footer el-button clickdialogVisible false取消/el-button el-button typeprimary clicksubmitForm确认/el-button /template /el-dialog /div /template script setup langts import { ref, onMounted } from vue; import request from /utils/request; import { ElMessage, ElMessageBox } from element-plus; interface Member { id?: number; name: string; phone: string; cardType: string; expireDate: string; } const memberList refMember[]([]); const dialogVisible ref(false); const dialogTitle ref(); const form refMember({ name: , phone: , cardType: , expireDate: }); // 加载会员列表 const loadMembers async () { try { const data await request.get(/members); memberList.value data; } catch (error) { console.error(加载失败, error); } }; // 新增 const handleAdd () { dialogTitle.value 新增会员; form.value { name: , phone: , cardType: , expireDate: }; dialogVisible.value true; }; // 编辑 const handleEdit (row: Member) { dialogTitle.value 编辑会员; form.value { ...row }; dialogVisible.value true; }; // 提交新增或更新 const submitForm async () { const url form.value.id ? /members/${form.value.id} : /members; const method form.value.id ? put : post; try { await request({ url, method, data: form.value }); ElMessage.success(操作成功); dialogVisible.value false; loadMembers(); // 刷新列表 } catch (error) { // 错误已在拦截器中统一处理 } }; // 删除 const handleDelete async (id: number) { try { await ElMessageBox.confirm(确认删除, 提示, { type: warning }); await request.delete(/members/${id}); ElMessage.success(删除成功); loadMembers(); } catch (error) { // 用户取消或删除失败 } }; onMounted(() { loadMembers(); }); /script配置路由在src/router/index.ts中将/members路径指向这个页面。至此一个前后端完全分离、具备会员管理基础增删改查功能的健身管理系统骨架就搭建完毕了。前端通过 Axios 调用后端 RESTful API后端处理业务并返回统一格式的 JSON。整个过程前后端没有一丝一毫的越界。3. 从“能跑”到“能看”填充血肉与引入 DeepSeek骨架搭好了但一个期末项目不能只有骨架。接下来我们需要让它更丰满、更有亮点。3.1 完善基础功能模块以健身管理系统为例在会员管理的基础上可以快速复制模式创建其他模块课程管理(course)课程名称、教练、时间、容量。教练管理(trainer)教练信息、专长、排班。预约管理(booking)关联会员、课程、预约时间。这里涉及更复杂的业务逻辑如检查课程容量、会员卡是否有效正是体现后端价值的地方。仪表盘使用 ECharts 等库展示会员增长、课程热度等统计图表。后端需要提供相应的统计查询 API。关键技巧使用 MyBatis-Plus 的代码生成器mybatis-plus-generator可以一键根据数据库表生成实体类、Mapper、Service、Controller 的代码极大提升开发效率。你只需要专注于编写特殊的业务逻辑即可。3.2 引入 DeepSeek打造差异化亮点“健身管理系统”太常见如何脱颖而出集成一个 AI 助手如 DeepSeek来提供智能健身咨询是一个绝佳的亮点。这展示了你将外部 API 集成到自有系统的能力。理解 DeepSeek APIDeepSeek 提供了类似 OpenAI 的 Chat Completion API。你需要去其平台注册获取 API Key。后端集成在application.yml中配置 DeepSeek 的 API 地址和你的 Key注意安全不要提交到 Git。创建一个AiService使用 Spring 的RestTemplate或WebClient调用 DeepSeek API。创建一个AiController接收前端传来的用户问题如“帮我制定一份减脂计划”调用AiService获取 DeepSeek 的回复再返回给前端。PostMapping(/chat) public ResultString chatWithAI(RequestBody MapString, String request) { String userQuestion request.get(question); // 1. 构造符合 DeepSeek API 格式的请求体 // 2. 使用 RestTemplate 发送 POST 请求带上 API Key 在 Header 中 // 3. 解析 DeepSeek 的响应提取回复文本 // 4. 返回给前端 String aiResponse aiService.chat(userQuestion); return Result.success(aiResponse); }重要安全提示API Key 必须放在后端绝不能暴露在前端代码中。所有 AI 调用必须经由你的后端服务器转发以保护密钥安全并便于你做次数限制、内容过滤等管理。前端集成在管理界面中增加一个“智能助手”页面或侧边栏浮窗。设计一个简单的聊天界面输入框、发送按钮、消息展示区域。前端调用你刚写的/api/ai/chat接口将用户输入发送到后端并展示返回的 AI 回复。这个功能的加入瞬间让你的项目从“又一个增删改查系统”变成了“具备 AI 能力的智能健身管理平台”技术深度和项目亮点都有了。4. 避坑指南与项目升华从作业到作品最后这部分是区分“及格”和“优秀”的关键。很多同学的项目在这里栽跟头。4.1 常见坑点与排查思路前端跨域 (CORS) 错误浏览器控制台报错Access-Control-Allow-Origin。原因前端运行在localhost:5173后端在localhost:8080端口不同浏览器出于安全策略阻止。解决在后端配置 CORS。可以使用CrossOrigin注解针对单个 Controller或编写全局配置类。Configuration public class WebConfig implements WebMvcConfigurer { Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping(/api/**) // 针对所有/api开头的接口 .allowedOrigins(http://localhost:5173) // 允许前端地址 .allowedMethods(GET, POST, PUT, DELETE, OPTIONS) .allowCredentials(true); } }后端接口 404 或 500 错误404检查请求 URL 是否正确注意上下文路径server.servlet.context-path配置检查 Controller 的RequestMapping和方法上的GetMapping等注解路径。500查看后端控制台日志这是最重要的排错信息。常见原因数据库连接失败、SQL 语法错误、空指针异常、JSON 序列化/反序列化失败如日期格式问题。前端调用成功但数据不显示检查浏览器开发者工具的Network标签看 API 请求是否真的返回了数据数据格式是否符合预期是否是{code:200, msg:“”, data: [...]}的结构。检查 Vue 组件中ref或reactive定义的数据变量名是否正确模板中绑定的属性名是否一致。MyBatis-Plus 查询不到数据或插入失败检查实体类字段名与数据库列名是否匹配驼峰转下划线默认开启。检查TableName、TableId注解是否正确。检查数据库连接配置、用户名密码。4.2 如何将项目“讲”得出彩应对答辩一个优秀的项目代码只占一半另一半是你的阐述。清晰的技术栈介绍不要只说“用了 SpringBoot 和 Vue”。要说出为什么选它们SpringBoot 简化配置、生态丰富Vue3 组合式 API 更灵活、响应式系统高效以及它们是如何协作的前后端分离架构图。突出架构设计重点讲解你的“前后端分离”是如何实现的。画一张简单的架构图浏览器 - Vue 前端 - Nginx可选- SpringBoot API - MySQL。明确各层职责。详解核心业务流程挑一个最复杂的流程讲透比如“会员预约课程”。前端用户选择课程 - 点击预约 - 发送POST /api/bookings。后端BookingController接收请求 -BookingService校验会员卡有效课程有余位- 调用BookingMapper插入数据 - 返回成功/失败结果。这体现了你的业务逻辑处理能力。展示亮点功能重点演示“DeepSeek AI 健身咨询”功能。说明你是如何集成第三方 API、如何保证 API Key 安全、如何处理网络请求异步性的。谈论遇到的问题与解决方案主动提及你遇到的坑如跨域、日期格式、复杂查询并说明你是怎么排查和解决的。这体现了你的实战能力和解决问题的能力远比平铺直叙更有说服力。记住你的项目不仅仅是一堆能运行的代码更是你技术思考、架构理解和解决问题能力的载体。用一小时搭好骨架再用数小时填充内容、解决 bug、准备讲稿你交出的就不会是一个仓促的作业而是一个值得展示的作品。从这个清晰的骨架出发你可以轻松地将它扩展成任何你需要的管理系统这才是“期末救星”的真正含义。 30款热门AI模型一站整合DeepSeek/GLM/Qwen 随心用限时 5 折。 点击领海量免费额度
相关文章
C# WinForm 连接 MySQL 8.0：从ADO.NET到EF Core 7的3步迁移实战
C# WinForm 连接 MySQL 8.0：从ADO.NET到EF Core 7的3步迁移实战对于长期维护WinForm项目的开发者来说，ADO.NET虽然稳定可靠，但在开发效率和代码可维护性上已逐渐显现出局限性。Entity Framework Core 7作为微软最新的ORM框架，不仅…
LinkSwift：八大网盘直链下载终极解决方案，简单快速获取高速下载地址
LinkSwift：八大网盘直链下载终极解决方案，简单快速获取高速下载地址 【免费下载链接】Online-disk-direct-link-download-assistant 一个基于 JavaScript 的网盘文件下载地址获取工具。基于【网盘直链下载助手】修改 ，支持 百度网盘 / 阿里云…
从CRUD到业务闭环：JavaWeb实战项目深度解析与工程化实践
🚀 30款热门AI模型一站整合，DeepSeek/GLM/Qwen 随心用，限时 5 折。 👉 点击领海量免费额度 上周帮一个学弟看他的毕业设计，项目名字挺唬人，叫“汽车4S店管理系统”。他兴致勃勃地给我演示，登…
STM32L4与74HC32实现低功耗多键盘管理方案
1. 为什么选择74HC32与STM32L4A6RG组合？在嵌入式系统中管理多个按键时，传统矩阵键盘方案需要占用大量GPIO引脚。以2x2键盘为例，直接扫描需要4个GPIO（2行2列），当系统需要管理多组键盘时，引脚资源…
DHCP场景防止用户私自配置IP地址造成网络冲突
应用场景： IP Source Guard可以实现防止用户私设IP地址及防止用户变化源IP的扫描行为，要求用户必须动态DHCP方式获取IP，否则将无法使用网络； IP Source Guard配合ARP-check功能使用可以有效预防ARP欺骗，具体配置参考"典型场景配置--》IP Source Guard + ARP-Ch…
攻防网络平台实战指南：从漏洞管理到安全能力体系化建设
1. 项目概述：从“攻防演练”到“实战能力”的跃迁在网络安全这个没有硝烟的战场上，“攻防演练”早已不是一个新鲜词。无论是大型企业、关键信息基础设施单位，还是金融、能源等重点行业，定期组织红蓝对抗，检验自身防御体…
AI项目交付完就结束了？不，真正值钱的是后面的事
AI项目交付完就结束了？不，真正值钱的是后面的事 AI系统跟传统软件正好相反：传统软件交付那天是巅峰，之后慢慢过时；AI系统交付那天只是起点，持续喂数据、修正错误案例，准确率会从上线时的90%左右…
【VTG】T2SGrid: Temporal-to-Spatial Gridification for VTG
note T2SGrid 的最大贡献在于范式创新：它没有直接设计复杂的时间模块，而是巧妙地借用了视觉大模型原生的空间注意力机制，将时间流转化为空间网格。把视频多帧拼成一张网格图（把视频 clip 拼成网格图），让普…
高效复盘会议必备，智能拆解内容生成多维思维导图
最近职场圈悄悄流行起一套从夯到拉的办公工具分级梗，这套体系把所有办公工具按实际使用体验划分为五个层级，从天花板级别的全场景适配，到完全没法用的地板避雷款，用最直白的方式帮大家快速筛掉无效工具。我自己常年泡在各类会议、…
Windows任务栏终极清理指南：用RBTray一键隐藏窗口到系统托盘
Windows任务栏终极清理指南：用RBTray一键隐藏窗口到系统托盘 【免费下载链接】rbtray A fork of RBTray from http://sourceforge.net/p/rbtray/code/. 项目地址: https://gitcode.com/gh_mirrors/rb/rbtray 你是否厌倦了Windows任务栏上密密麻麻的图标&…
多协议远程连接管理工具mRemoteNG：告别混乱，统一你的远程桌面管理
多协议远程连接管理工具mRemoteNG：告别混乱，统一你的远程桌面管理 【免费下载链接】mRemoteNG mRemoteNG is the next generation of mRemote, open source, tabbed, multi-protocol, remote connections manager. 项目地址: https://gitcode.com/gh_m…
私有云管理平台登录绕过漏洞：从客户端信任模型到安全防御实践
1. 项目概述：一次典型的私有云管理平台登录绕过漏洞复现最近在整理内部安全测试案例库时，翻到了一个挺有意思的旧案例，是关于一个私有云管理平台的登录绕过漏洞。这个漏洞的利用方式非常“经典”，属于那种在特定开发框架或编码习惯…
3步彻底解决Windows右键菜单混乱问题：ContextMenuManager使用全攻略
3步彻底解决Windows右键菜单混乱问题：ContextMenuManager使用全攻略 【免费下载链接】ContextMenuManager 🖱️ 纯粹的Windows右键菜单管理程序 项目地址: https://gitcode.com/gh_mirrors/co/ContextMenuManager 你是否曾为Windows右键菜单中那些…
从GitHub安全案例解析常见漏洞与防护实践
1. 项目概述：从GitHub Trending看安全实战 最近在GitHub Trending上看到一个项目，叫 skills4/skills ，它因为一些安全漏洞案例被大家讨论。这其实是一个挺典型的场景：一个旨在展示或教授某种技能的仓库，本身却成了安…
MLT 2026启示：因果推理与概率建模驱动下一代LLM应用
# MLT 2026启示：因果推理与概率建模驱动下一代LLM应用## 一、背景与挑战：从“黑箱预测”到“可信推理”2026年6月，第7届机器学习与趋势国际会议（MLT 2026）将在悉尼召开。会议议程中，“因果与可解释机器学习…
FAE放射组学分析工具：医学影像特征探索的完整解决方案
FAE放射组学分析工具：医学影像特征探索的完整解决方案 【免费下载链接】FAE FeAture Explorer 项目地址: https://gitcode.com/gh_mirrors/fae/FAE 你是否曾经面对海量医学影像数据感到无从下手？想要从CT、MRI等影像中提取有价值的定量特征&#…
0.69B参数实现中文多模态AI：揭秘Qwen3-SmVL模型融合技术的完整实战指南
0.69B参数实现中文多模态AI：揭秘Qwen3-SmVL模型融合技术的完整实战指南 【免费下载链接】happy-llm 📚 从零开始构建大模型 项目地址: https://gitcode.com/GitHub_Trending/ha/happy-llm 还在为大型多模态模型动辄数十亿参数、显存占用高而烦恼&…
解锁AMD Ryzen处理器性能潜力的SMU调试神器：从新手到专家的完整指南
解锁AMD Ryzen处理器性能潜力的SMU调试神器：从新手到专家的完整指南 【免费下载链接】SMUDebugTool A dedicated tool to help write/read various parameters of Ryzen-based systems, such as manual overclock, SMU, PCI, CPUID, MSR and Power Table. 项目地址…