SpringBoot+Vue3+AI全栈实战：健身管理系统开发指南 这次我们来看一个面向学生和初学者的实战项目一个基于 SpringBoot Vue3 DeepSeek 的健身管理系统。这个项目最大的特点是“全栈”和“实用”它不是一个简单的增删改查CRUD演示而是整合了当前主流的技术栈并引入了 AI 能力非常适合作为课程设计、毕业设计或期末大作业的参考模板。项目核心解决的是如何快速搭建一个具备现代前后端分离架构、完整业务逻辑和智能交互功能的管理系统。对于很多同学来说从零开始整合 SpringBoot、Vue3 和数据库已经是个挑战再加入 AI 接口调用就更复杂了。这个项目提供了一个可直接运行的“脚手架”让你在1小时左右就能看到完整效果理解数据如何从前端流转到后端再与 AI 服务交互。本文将带你从零开始完成这个健身管理系统的环境搭建、项目启动、功能测试和核心代码解读。你会看到如何配置数据库、实现员工信息的增删改查、集成 DeepSeek API 实现智能聊天助手并最终打包部署。无论你是想快速完成作业还是希望深入学习前后端分离开发这篇文章都能提供一条清晰的路径。1. 核心能力速览在动手之前我们先快速了解这个项目能做什么以及你需要准备什么。能力项说明项目类型前后端分离的 Web 管理系统健身场景技术栈后端SpringBoot, MyBatis-Plus, MySQL前端Vue3, Element Plus, AxiosAI 集成DeepSeek API核心功能1. 用户登录与会话管理2. 员工信息管理增、删、改、查、分页3. 集成 DeepSeek 的智能聊天助手硬件/环境门槛普通开发电脑即可无需高性能 GPU。需要安装 JDK、Node.js、MySQL 和 Maven。启动方式后端通过 IDE 运行或mvn spring-boot:run命令启动前端npm run dev启动开发服务器是否支持 API是。后端提供 RESTful API前端通过 Axios 调用。同时项目集成了调用第三方 DeepSeek API 的能力。是否支持“批量任务”此处“批量任务”可理解为数据的批量操作如导入导出项目具备基础的 CRUD 和分页查询扩展批量功能容易。适合场景Java/Web 全栈学习、SpringBootVue3 实战入门、课程设计/毕业设计参考、快速原型开发。2. 适用场景与使用边界这个项目最适合以下几类人在校学生面临 Java Web、软件工程等课程设计或期末大作业需要快速产出一个有亮点的、架构完整的项目。全栈初学者已经学过 SpringBoot 和 Vue 的基础语法但不知道如何将两者有效连接并融入一个实际的业务场景中。面试求职者需要准备一个能体现前后端分离、REST API 设计和第三方 API 集成能力的项目作为作品集。它能帮你解决的问题非常具体理解前后端分离协作流程从 Vue 组件发送请求到 SpringBoot 控制器接收、服务层处理、数据层操作数据库最后返回 JSON 数据的全过程。掌握 CRUD 的工程化实现不仅仅是 SQL 语句而是包括实体类、Mapper 接口、Service 逻辑、Controller 接口以及前端表格、表单、弹窗的联动。学习如何集成第三方 API以 DeepSeek 为例演示如何在后端服务中安全地调用外部 AI 接口并处理异步响应。获得一个可扩展的基底健身管理是一个典型场景你可以很容易地将其改造成图书管理、商品管理、客户关系管理等任何需要后台管理的系统。需要注意的使用边界非生产级项目该项目侧重于教学和演示在安全性如更细致的权限控制、SQL 注入防护、性能优化如缓存、数据库连接池调优和异常处理方面可能需要根据生产环境要求进行加强。DeepSeek API 调用需要你自己申请 DeepSeek 的 API Key并注意其调用频率限制和费用。本项目演示的是集成方法实际使用需遵守 DeepSeek 的平台规则。版权与数据项目源码可用于学习。如果用于作业或设计请理解代码并加入自己的思考避免直接抄袭。系统中使用的任何测试数据应避免使用真实个人信息。3. 环境准备与前置条件开始编码前请确保你的开发环境已经就绪。以下是必需的软件和工具清单Java 开发环境JDK版本 8 或 11推荐 11。安装后配置JAVA_HOME环境变量。Maven版本 3.6。用于管理项目依赖和构建。安装后配置MAVEN_HOME并将bin目录加入PATH。IDEIntelliJ IDEA推荐或 Eclipse。IDEA 对 SpringBoot 和 Maven 的支持更友好。前端开发环境Node.js版本 16推荐 18 LTS。安装包自带 npm。包管理器npm 或 yarn本项目示例使用 npm。数据库MySQL版本 5.7 或 8.0。确保已安装并启动 MySQL 服务。数据库管理工具Navicat、DBeaver 或 MySQL Workbench用于执行 SQL 脚本。网络与 API稳定的网络连接用于下载依赖和调用 DeepSeek API。一个有效的DeepSeek API Key。你需要前往 DeepSeek 官方平台注册并获取。项目源码从提供的链接下载完整的项目源码包包含后端springboot-backend和前端vue3-frontend两个目录。验证环境 打开终端或命令提示符分别执行以下命令确认安装成功# 检查 Java 和 Maven java -version mvn -v # 检查 Node.js 和 npm node -v npm -v # 检查 MySQL 连接将 root 和 yourpassword 替换为你的凭据 mysql -u root -p4. 项目结构与初始化配置拿到源码后我们先理清结构并进行必要的配置。后端项目结构 (springboot-backend)src/main/java/com/fitness/ ├── controller/ # 控制层接收HTTP请求 │ ├── EmployeeController.java │ └── ChatController.java ├── service/ # 业务逻辑层 │ └── impl/ ├── mapper/ # 数据访问层MyBatis-Plus ├── entity/ # 实体类对应数据库表 ├── config/ # 配置类如跨域配置 └── Application.java # 主启动类 resources/ ├── application.yml # 主配置文件数据库、端口、DeepSeek Key └── sql/ # 数据库初始化脚本前端项目结构 (vue3-frontend)src/ ├── api/ # 封装所有后端API请求 ├── views/ # 页面组件 │ ├── Login.vue │ ├── Employee.vue │ └── Chat.vue ├── components/ # 可复用组件 ├── router/ # 路由配置 ├── store/ # 状态管理Pinia/Vuex └── App.vue关键配置步骤数据库初始化使用工具连接你的 MySQL。创建一个新的数据库例如fitness_db。执行项目resources/sql/目录下的.sql脚本创建employee等表结构并插入初始测试数据。后端配置修改 打开springboot-backend/src/main/resources/application.yml。spring: datasource: driver-class-name: com.mysql.cj.jdbc.Driver url: jdbc:mysql://localhost:3306/fitness_db?useUnicodetruecharacterEncodingutf-8serverTimezoneAsia/Shanghai username: root # 改为你的数据库用户名 password: yourpassword # 改为你的数据库密码 server: port: 8080 # 后端服务启动端口 # DeepSeek API 配置 deepseek: api-key: sk-your-deepseek-api-key-here # 替换为你的真实 API Key api-url: https://api.deepseek.com/v1/chat/completions主要修改datasource下的username、password和deepseek.api-key。前端配置检查 前端通常通过axios发起请求需要确保请求的基地址BaseURL指向正确的后端服务。检查vue3-frontend/src/api/request.js或类似文件import axios from axios; const service axios.create({ baseURL: http://localhost:8080, // 确保与后端 server.port 一致 timeout: 10000 });5. 启动项目与首次访问配置完成后我们分别启动后端和前端服务。第一步启动后端 SpringBoot 服务使用 IntelliJ IDEA 打开springboot-backend文件夹。IDEA 会自动识别为 Maven 项目并下载依赖观察右下角进度条。找到主启动类Application.java右键点击Run Application.main()。观察控制台日志看到类似以下信息表示启动成功Started Application in 5.123 seconds (JVM running for 6.456) Tomcat started on port(s): 8080 (http)或者你也可以在项目根目录下使用命令行启动cd springboot-backend mvn clean spring-boot:run第二步启动前端 Vue3 服务打开一个新的终端或命令行窗口。进入前端项目目录安装依赖并启动cd vue3-frontend npm install # 首次运行需要安装依赖只需一次 npm run dev # 启动开发服务器控制台会输出本地访问地址通常是http://localhost:5173Vite 默认端口。第三步访问系统打开浏览器访问前端地址http://localhost:5173。你应该能看到登录页面。使用源码或 SQL 脚本中提供的默认账号如 admin/123456登录。登录成功后进入系统主界面通常包含菜单栏可以访问“员工管理”和“智能聊天”等功能模块。至此一个完整的全栈应用已经在你的本地运行起来了。6. 核心功能测试与效果验证项目跑起来是第一步接下来我们逐一测试其核心功能并理解背后的代码逻辑。6.1 员工信息管理增删改查这是最经典的业务功能也是检验前后端联调是否成功的关键。测试目的验证前端表格展示、分页查询、新增、编辑、删除员工信息的功能是否正常以及前后端数据交互是否准确。操作步骤与验证查询与分页点击进入“员工管理”页面。页面应自动加载员工列表并以表格形式展示。尝试点击表格底部的分页按钮或改变每页显示条数观察数据是否按预期刷新。后端对应查看EmployeeController中的list方法它处理了带分页参数的 GET 请求调用EmployeeService查询数据。新增员工点击“新增”按钮应弹出表单对话框。填写员工姓名、职位、电话等信息点击提交。提交后对话框关闭表格数据应刷新新员工出现在列表末尾或第一页。后端对应EmployeeController的add方法处理 POST 请求接收 JSON 格式的员工数据并调用save方法插入数据库。编辑员工在表格的“操作”列点击某条记录的“编辑”按钮。弹出的表单应自动填充该员工的现有信息。修改某些字段点击提交。表格中对应行的数据应立即更新。后端对应EmployeeController的update方法处理 PUT 请求根据员工ID更新数据库记录。删除员工点击某条记录的“删除”按钮通常会有一个确认弹窗。确认后该行数据应从表格中消失。后端对应EmployeeController的delete方法处理 DELETE 请求根据员工ID执行物理或逻辑删除。关键代码片段后端 ControllerRestController RequestMapping(/employee) public class EmployeeController { Autowired private EmployeeService employeeService; // 分页查询 GetMapping(/list) public Result list(RequestParam(defaultValue 1) Integer pageNum, RequestParam(defaultValue 10) Integer pageSize, RequestParam(required false) String name) { PageEmployee page employeeService.findPage(new Page(pageNum, pageSize), name); return Result.success(page); } // 新增 PostMapping public Result add(RequestBody Employee employee) { boolean saved employeeService.save(employee); return saved ? Result.success() : Result.error(新增失败); } // 编辑 PutMapping public Result update(RequestBody Employee employee) { boolean updated employeeService.updateById(employee); return updated ? Result.success() : Result.error(更新失败); } // 删除 DeleteMapping(/{id}) public Result delete(PathVariable Integer id) { boolean removed employeeService.removeById(id); return removed ? Result.success() : Result.error(删除失败); } }6.2 DeepSeek 智能聊天集成这是项目的亮点功能演示了如何在业务系统中接入大语言模型LLM。测试目的验证系统能否成功调用 DeepSeek API实现多轮对话并将结果流畅地展示在前端聊天界面。操作步骤与验证点击进入“智能聊天”或类似命名的页面。在页面下方的输入框中输入一个问题例如“请为我制定一份初级健身者的每周训练计划。”点击发送。前端界面应显示“正在思考...”之类的加载状态。稍等片刻取决于网络和 DeepSeek 响应速度聊天区域应显示 DeepSeek 返回的详细回答。继续基于回答进行追问测试多轮对话能力。后端实现剖析 查看ChatController它接收前端发送的用户消息然后调用一个ChatService去处理与 DeepSeek API 的通信。Service public class ChatServiceImpl implements ChatService { Value(${deepseek.api-key}) private String apiKey; Value(${deepseek.api-url}) private String apiUrl; Override public String chatWithDeepSeek(String userMessage, ListMapString, String history) { // 1. 构建请求体符合 DeepSeek API 格式 MapString, Object requestBody new HashMap(); requestBody.put(model, deepseek-chat); // 指定模型 // 构建消息列表包含历史对话和当前问题 ListMapString, String messages new ArrayList(); if (history ! null) { messages.addAll(history); } messages.add(Map.of(role, user, content, userMessage)); requestBody.put(messages, messages); requestBody.put(stream, false); // 2. 设置 HTTP 请求头认证 HttpHeaders headers new HttpHeaders(); headers.setContentType(MediaType.APPLICATION_JSON); headers.setBearerAuth(apiKey); // 使用配置的 API Key HttpEntityMapString, Object requestEntity new HttpEntity(requestBody, headers); // 3. 使用 RestTemplate 发送 POST 请求 RestTemplate restTemplate new RestTemplate(); ResponseEntityMap responseEntity; try { responseEntity restTemplate.postForEntity(apiUrl, requestEntity, Map.class); } catch (Exception e) { throw new RuntimeException(调用 DeepSeek API 失败, e); } // 4. 解析响应提取 AI 回复文本 MapString, Object responseBody responseEntity.getBody(); if (responseBody ! null responseBody.containsKey(choices)) { ListMapString, Object choices (ListMapString, Object) responseBody.get(choices); if (!choices.isEmpty()) { MapString, Object firstChoice choices.get(0); MapString, String message (MapString, String) firstChoice.get(message); return message.get(content); } } return 抱歉AI 没有返回有效结果。; } }关键点API Key 安全Key 存储在application.yml中不应提交到代码仓库。生产环境应使用环境变量或配置中心。网络超时调用外部 API 必须设置合理的超时时间避免前端长时间等待。错误处理代码中应有完善的异常捕获和友好的错误信息返回给前端。7. 接口 API 设计与调用分析本项目采用了典型的前后端分离架构后端提供 RESTful API前端通过 AjaxAxios调用。理解这套通信机制至关重要。后端 API 设计概览统一返回格式通常定义一个Result类包含code状态码、msg消息、data数据字段便于前端统一处理。RESTful 风格GET /employee/list查询列表POST /employee新增PUT /employee更新DELETE /employee/{id}删除POST /chat发送聊天消息跨域处理由于前端服务localhost:5173和后端服务localhost:8080端口不同存在跨域问题。需要在后端通过CrossOrigin注解或全局配置类解决。前端 API 调用封装 前端通常会创建一个request.js文件来封装 Axios 实例并设置拦截器。// src/api/request.js import axios from axios; import { ElMessage } from element-plus; import router from /router; const service axios.create({ baseURL: import.meta.env.VITE_APP_BASE_API, // 从环境变量读取 timeout: 10000 }); // 请求拦截器可以在这里统一添加 token service.interceptors.request.use( config { const token localStorage.getItem(token); if (token) { config.headers[Authorization] Bearer ${token}; } return config; }, error { return Promise.reject(error); } ); // 响应拦截器统一处理错误 service.interceptors.response.use( response { const res response.data; // 假设成功返回的 code 为 200 if (res.code 200) { return res.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 service;具体功能 API 调用示例员工查询// src/api/employee.js import request from ./request; export function getEmployeeList(params) { // params 包含 pageNum, pageSize, name 等 return request({ url: /employee/list, method: get, params }); } // 在 Vue 组件中使用 import { getEmployeeList } from /api/employee; import { ref, onMounted } from vue; const tableData ref([]); const loading ref(false); const fetchData async () { loading.value true; try { const res await getEmployeeList({ pageNum: 1, pageSize: 10 }); tableData.value res.records; // 假设返回数据在 records 字段 } catch (error) { console.error(error); } finally { loading.value false; } }; onMounted(() { fetchData(); });8. 数据库设计与关键业务表理解数据库设计是理解业务逻辑的基础。本项目核心表是employee表。employee表结构示例CREATE TABLE employee ( id int NOT NULL AUTO_INCREMENT COMMENT 主键ID, name varchar(50) NOT NULL COMMENT 员工姓名, username varchar(50) NOT NULL COMMENT 登录用户名, password varchar(255) NOT NULL COMMENT 密码加密存储, phone varchar(20) DEFAULT NULL COMMENT 手机号, gender varchar(10) DEFAULT NULL COMMENT 性别, id_number varchar(18) DEFAULT NULL COMMENT 身份证号, status int DEFAULT 1 COMMENT 状态 0:禁用1:启用, create_time datetime DEFAULT CURRENT_TIMESTAMP COMMENT 创建时间, update_time datetime DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP COMMENT 更新时间, PRIMARY KEY (id), UNIQUE KEY idx_username (username) ) ENGINEInnoDB DEFAULT CHARSETutf8mb4 COMMENT员工表;MyBatis-Plus 的使用 本项目使用 MyBatis-PlusMP极大简化了数据库操作。实体类映射Employee.java中的字段通过TableName(“employee”)和TableField注解与数据库表对应。通用 MapperEmployeeMapper.java接口只需继承BaseMapperEmployee即可获得selectList,insert,updateById,deleteById等全套 CRUD 方法无需编写 XML。Service 层封装EmployeeService接口继承IServiceEmployee其实现类EmployeeServiceImpl继承ServiceImplEmployeeMapper, Employee进一步简化了服务层代码。9. 常见问题与排查方法在搭建和运行过程中你可能会遇到以下问题。这里提供排查思路。问题现象可能原因排查方式解决方案前端页面无法访问localhost:5173打不开1. 前端服务未启动成功。2. 端口被占用。1. 检查运行npm run dev的终端是否有错误。2. 查看是否输出了正确的访问 URL。1. 根据终端错误信息解决常见于依赖安装失败。2. 在vite.config.js中修改server.port。前端能打开但登录/请求数据失败控制台报跨域CORS错误后端未正确配置跨域。查看浏览器开发者工具F12Network 标签请求状态为CORS error。在后端Application.java同级目录创建配置类添加CrossOrigin注解或使用WebMvcConfigurer全局配置。后端启动失败报数据库连接错误1.application.yml中数据库配置错误。2. MySQL 服务未启动。3. 数据库或表不存在。1. 检查application.yml的url,username,password。2. 确认 MySQL 服务状态。3. 登录 MySQL 查看fitness_db和employee表是否存在。1. 修正配置文件。2. 启动 MySQL 服务。3. 执行提供的 SQL 脚本创建数据库和表。调用 DeepSeek 聊天功能失败前端显示“服务异常”1.application.yml中未配置或错误配置deepseek.api-key。2. 网络问题无法访问 DeepSeek API。3. API Key 无效或余额不足。1. 检查后端控制台日志看是否有关于 API 调用的异常信息。2. 尝试在 Postman 中直接用该 Key 调用 DeepSeek API 测试。1. 确保api-key配置正确且已替换为有效 Key。2. 检查网络连接。3. 前往 DeepSeek 平台验证 Key 状态和余额。新增或修改员工信息后页面不刷新1. 前端提交成功但未主动刷新列表。2. 后端操作成功但返回了错误的状态码或信息。1. 查看浏览器开发者工具 Network 标签确认请求是否成功状态码 200。2. 查看后端控制台是否有业务逻辑报错。1. 确保前端在提交成功的回调函数中重新调用fetchData()方法获取最新数据。2. 检查后端Controller方法是否正确返回了Result.success()。项目打包失败mvn clean package报错1. Maven 依赖下载不完整或冲突。2. 测试用例失败。3. 资源文件编码问题。1. 查看具体的错误信息。2. 尝试mvn clean compile先编译。1. 删除本地 Maven 仓库~/.m2/repository中相关依赖重新下载。2. 跳过测试mvn clean package -DskipTests。3. 在pom.xml中配置编码属性。10. 项目扩展与优化建议当你成功运行基础版本后可以考虑从以下几个方向进行扩展和深化这会让你的项目更具竞争力。功能扩展会员管理增加会员表实现会员注册、课程预约、消费记录等功能。课程与教练管理关联员工表中的教练管理健身课程排期。数据可视化使用 ECharts 等库在仪表盘展示会员增长、课程热度等统计图表。文件上传实现员工头像、健身计划文档的上传与存储功能。技术深化权限控制引入 Spring Security 或 Sa-Token实现基于角色的菜单权限和接口访问控制RBAC。数据校验在实体类中使用NotNull,Pattern等注解进行后端校验前端使用 Element Plus 的 Form 规则进行双重校验。全局异常处理创建全局异常处理器ControllerAdvice统一处理业务异常、参数校验异常等返回结构化的错误信息。接口文档集成 Swagger 或 Knife4j自动生成后端 API 文档方便前后端协作。单元测试为 Service 层关键方法编写 JUnit 单元测试提高代码健壮性。部署上线前端打包运行npm run build将 Vue 项目编译成静态文件。后端打包运行mvn clean package生成可执行的jar文件。部署方式可以将前端静态文件放入后端resources/static/目录然后只部署一个jar包或者使用 Nginx 代理前端反向代理到后端 SpringBoot 服务。数据库迁移考虑在生产环境使用更可靠的数据库并规划数据迁移脚本。这个 SpringBoot Vue3 DeepSeek 的健身管理系统项目提供了一个非常清晰的全栈开发学习路径。它从环境搭建、配置、编码到调试覆盖了现代 Web 开发的核心环节。最大的价值在于它把看似分散的技术点SpringBoot CRUD、Vue3 组件通信、Axios 异步请求、第三方 API 集成串联成了一个可运行、可感知的完整应用。建议你在成功运行项目后不要停留在表面。尝试去修改它增加一个字段、换一种表格组件、集成另一个 AI 服务如文心一言、通义千问或者按照优化建议去实现其中一个功能。在这个过程中遇到的问题和解决方案才是你真正的收获。项目源码和课件是学习的起点动手改造和思考才能让你从“会用”到“理解”最终到“创造”。