三亩地 三亩地SAN MU DI · CODE DIARY
交流投稿
ARTICLE DETAIL

日记详情

真实记录编程学习的某一天，欢迎挑你感兴趣的翻一翻。

首页/学习日记/日记详情

SpringBoot+Vue3+DeepSeek健身管理系统全栈实战指南

发布时间：2026/8/10 15:03:07 三亩地 编程学习日记
SpringBoot+Vue3+DeepSeek健身管理系统全栈实战指南

1. 先搞清楚这个项目能帮你解决什么实际问题

如果你正在为毕业设计、课程设计或者想给自己的简历增加一个像样的实战项目而发愁，这个“SpringBoot+Vue3+DeepSeek健身管理系统”就是一个非常典型的、可以直接上手的全栈练手项目。它解决的核心问题，是让你在一个相对完整的业务场景里，把前后端分离、AI能力集成、数据库设计这些概念串起来，而不是停留在零散的“Hello World”阶段。

这个项目最直接的价值，是提供了一个可运行、可修改、可扩展的代码骨架。你拿到源码后，重点不是去研究它实现了多少复杂的健身业务逻辑，而是要看懂它如何用SpringBoot提供后端API，如何用Vue3构建前端界面，以及如何将DeepSeek这样的AI模型能力（比如用于生成健身建议、分析训练数据）以服务的形式接入到系统中。这对于想找Java后端或前端开发工作的同学来说，是一个能写进简历、并能讲清楚技术选型和架构设计的实际案例。

我建议你先别被“1小时搭建”这种说法带偏。对于新手，从零开始理解项目结构、配置环境、解决依赖冲突到最终跑起来，花上大半天甚至一天都是正常的。关键在于，通过这个过程，你能摸清一个现代Web应用从本地开发到部署上线的完整链路。下面，我就按实际落地的顺序，带你拆解一遍。

2. 环境准备：别在第一步就卡住

在动手敲任何代码之前，先把环境理顺。很多项目跑不起来，问题都出在环境配置上，而不是代码本身。

2.1 硬件与基础软件环境

  • 操作系统：Windows 10/11， macOS 或 Linux（如Ubuntu）均可。项目本身是跨平台的，但部分依赖的安装命令可能略有不同。
  • 内存：建议8GB及以上。因为你需要同时运行IDE、后端服务、前端开发服务器、数据库，可能还有Node.js，内存吃紧会非常卡顿。
  • 网络：需要稳定的网络环境，用于下载Maven依赖、Node.js包以及可能的AI模型依赖（如果涉及从仓库拉取）。

2.2 核心开发工具与运行时

你需要安装以下软件，并确保版本不要太旧：

  1. Java开发套件 (JDK)：

    • 要求：JDK 8 或以上，推荐 JDK 11 或 JDK 17（长期支持版本）。
    • 验证：打开终端或命令提示符，输入java -version和javac -version，确认版本号并确保JAVA_HOME环境变量已正确设置。

  2. 项目管理与构建工具 (Maven)：

    • 作用：SpringBoot项目通常使用Maven来管理依赖、编译和打包。
    • 验证：在终端输入mvn -v，确认已安装并能显示版本信息。

  3. Node.js与包管理器 (npm/yarn/pnpm)：

    • 作用：Vue3前端项目依赖于Node.js环境，并使用npm或yarn等工具来安装第三方库。
    • 要求：安装Node.js（建议LTS版本，如18.x, 20.x），它会自带npm。你也可以选择安装yarn或pnpm，速度可能更快。
    • 验证：终端输入node -v和npm -v。

  4. 数据库 (MySQL)：

    • 作用：项目极大概率使用MySQL作为持久化数据库，存储用户、课程、记录等信息。
    • 准备：本地安装MySQL（5.7或8.0版本），记住你设置的root密码。创建一个新的数据库，例如fitness_db，字符集建议用utf8mb4。

  5. 集成开发环境 (IDE)：

    • 后端：IntelliJ IDEA（社区版或旗舰版）或 Eclipse（需安装Spring插件）。IDEA对SpringBoot的支持更友好。
    • 前端：Visual Studio Code (VSCode) 是当前最流行的前端开发工具，轻量且插件丰富。当然，你也可以用IDEA或WebStorm。

注意：不要一次性安装所有东西。装好一个，验证一个。比如先装好JDK和Maven，确保java和mvn命令能用，再继续下一步。

2.3 项目源码与文档

  • 源码获取：从提供的链接下载项目源码压缩包。解压后，你通常会看到两个主要文件夹：一个以项目名命名的后端文件夹（如fitness-backend），和一个前端文件夹（如fitness-frontend）。
  • 文档阅读：务必先看附带的README.md或项目文档。里面通常会包含：
    • 项目简介和技术栈。
    • 最重要的：数据库初始化脚本（通常是.sql文件）。你需要先在MySQL中执行这个脚本，创建表结构和初始数据。
    • 后端和前端各自的配置说明。

3. 后端启动：从配置到第一个API

后端是系统的核心，负责业务逻辑、数据存取和提供API接口。

3.1 导入项目与依赖下载

  1. 用IDEA打开后端项目文件夹。
  2. IDEA会自动识别为Maven项目，并开始下载pom.xml文件中声明的所有依赖（SpringBoot、MyBatis、数据库驱动等）。这个过程取决于网速，请耐心等待控制台的下载进度完成。
  3. 常见坑点：如果下载缓慢或失败，通常是Maven仓库镜像问题。可以检查或修改Maven安装目录下conf/settings.xml文件中的镜像配置，替换为国内镜像源（如阿里云镜像）。

3.2 数据库与核心配置修改

几乎100%的SpringBoot项目都需要你修改配置文件，以连接你自己的数据库。

  1. 找到配置文件，通常是src/main/resources/application.yml或application.properties。
  2. 修改数据库连接信息：
    # application.yml 示例 spring: datasource: url: jdbc:mysql://localhost:3306/fitness_db?useUnicode=true&characterEncoding=utf-8&useSSL=false&serverTimezone=Asia/Shanghai username: root # 你的数据库用户名 password: your_password # 你的数据库密码 driver-class-name: com.mysql.cj.jdbc.Driver
  3. 检查其他配置：如服务器端口（server.port，默认可能是8080）、Redis配置（如果用到）、文件上传路径等。根据你的本地环境调整。

3.3 启动后端服务

  1. 找到主启动类：通常是一个带有@SpringBootApplication注解的类，名字类似Application,FitnessApplication。
  2. 右键点击这个类，选择Run ‘Application’。
  3. 观察控制台日志。成功的标志是看到类似以下的日志，并且没有持续的错误堆栈信息：
    Started Application in 5.678 seconds (JVM running for 6.789) Tomcat started on port(s): 8080 (http)
  4. 验证API：启动后，打开浏览器，访问http://localhost:8080（或你配置的端口）。如果项目配置了简单的欢迎页或健康检查端点（如/actuator/health），能正常访问即说明后端服务基本正常。

4. 前端启动：让界面跑起来

前端负责展示和用户交互，通过调用后端API获取和提交数据。

4.1 安装前端依赖

  1. 用VSCode打开前端项目文件夹。
  2. 打开终端（Terminal），确保路径在前端项目根目录下。
  3. 运行依赖安装命令。根据项目使用的包管理器，可能是以下之一：
    npm install # 或 yarn install # 或 pnpm install
    这个命令会读取package.json文件，下载所有需要的Vue、Element Plus、Axios等库到node_modules文件夹。

4.2 配置API代理

前端在开发环境下，通常运行在独立的端口（如localhost:5173），而后端在另一个端口（如localhost:8080）。直接调用会产生跨域问题。项目一般会配置开发服务器代理来解决。

  1. 找到前端项目的配置文件，可能是vite.config.js或vue.config.js。
  2. 检查里面的proxy配置，确保它指向你正在运行的后端地址和端口。
    // vite.config.js 示例 (Vite) export default defineConfig({ server: { proxy: { '/api': { target: 'http://localhost:8080', // 你的后端地址 changeOrigin: true, // rewrite: (path) => path.replace(/^\/api/, '') // 根据实际情况看是否需要重写路径 } } } })
    这意味着，前端发往/api的请求，都会被转发到http://localhost:8080。

4.3 启动前端开发服务器

在终端（仍在项目根目录）运行启动命令：

npm run dev # 或 yarn dev # 或 pnpm dev

成功启动后，终端会输出本地访问地址，通常是http://localhost:5173或http://localhost:3000。用浏览器打开这个地址。

4.4 前后端联调验证

  1. 打开浏览器开发者工具（F12），切换到Network（网络）标签页。
  2. 在前端页面进行登录、查询等操作。
  3. 观察网络请求，你应该能看到前端向http://localhost:5173/api/xxx发起的请求，并且状态码是200（成功），返回了后端的数据。这证明前后端通信正常。

5. DeepSeek集成：理解AI能力如何接入

这是本项目区别于普通CRUD管理系统的亮点。你需要理解的是，AI模型（如DeepSeek）并非直接运行在你的SpringBoot项目里，而是作为一种外部服务被调用。

5.1 常见的集成模式

  1. API调用模式（最可能）：

    • 原理：DeepSeek提供云端API。你的后端服务（SpringBoot）中，会有一个专门的Service或Controller，使用HTTP客户端（如RestTemplate、Feign或OkHttp）向DeepSeek的API端点发送请求（携带你的API Key和问题），并将返回的结果（如生成的健身计划文本）处理后返回给前端。
    • 你需要做的：在项目的配置文件中，找到类似deepseek.api-key,deepseek.endpoint的配置项，替换成你自己申请的（或项目提供的测试）API Key和地址。注意保管API Key，不要提交到公开仓库。

  2. 本地模型部署模式（较少见，更复杂）：

    • 原理：在服务器本地部署一个DeepSeek模型（或其兼容接口，如通过Ollama、vLLM等框架）。后端通过本地网络（如localhost:11434）调用这个模型服务。
    • 挑战：这对机器资源（GPU/显存）有要求，且部署步骤复杂。对于毕设/课设项目，采用第一种API模式更现实。

5.2 在项目中定位AI功能

  1. 找入口：在前端页面找找有没有“智能生成计划”、“训练分析”、“饮食建议”等按钮。
  2. 追踪调用：
    • 前端：点击按钮，在浏览器开发者工具的Network里，看它调用了后端的哪个API（例如POST /api/ai/generate-plan）。
    • 后端：根据这个API路径，在后端代码中找到对应的Controller和方法。查看这个方法内部，是如何构建请求、调用DeepSeek服务、处理响应的。
  3. 模拟测试：你可以尝试在Postman或IDEA的HTTP Client中，直接调用这个后端API，看是否能返回预期的AI生成内容。

关键点：作为学习者，你不需要深究模型原理。重点是理解“前端触发 -> 后端接收 -> 后端调用外部AI服务 -> 后端处理结果并返回 -> 前端展示”这个完整的调用链。这是微服务架构和系统集成思想的体现。

6. 功能梳理与二次开发：让你的简历有话说

项目跑起来只是第一步。要让它成为你简历上的亮点，你需要吃透它，并能基于它进行修改和扩展。

6.1 理解现有功能模块

登录系统，逐一体验各个菜单，理解每个功能对应的前后端代码是如何组织的：

  • 用户管理：CRUD操作，权限控制（Spring Security或Shiro）。
  • 健身课程/计划管理：数据的增删改查，关联查询。
  • 会员记录/预约管理：业务逻辑，状态流转。
  • 数据统计：图表展示，后端数据聚合（ECharts等）。
  • AI智能模块：如上所述，外部服务集成。

6.2 尝试简单的二次开发

这是证明你理解项目的最佳方式。可以从以下任选一两个着手：

  1. 增加一个字段：例如，在“会员表”里增加一个“紧急联系人电话”字段。
    • 后端：修改实体类（Entity）、数据库映射（Mapper XML或注解）、Service和DTO。
    • 数据库：执行ALTER TABLE语句修改表结构。
    • 前端：修改表单页面（添加输入框）、列表页面（添加列），并调整对应的API调用。
  2. 增加一个统计接口：例如，统计“本月新增会员数”。
    • 后端：新建一个Controller方法，在Service层编写SQL查询（使用MyBatis或JPA），返回统计数字。
    • 前端：在某个页面（如仪表盘）调用这个新API，并将数字展示出来。
  3. 修改AI提示词：找到调用DeepSeek API的地方，修改发送的prompt（提示文本），观察生成的建议内容有何变化。这能体现你对AI应用层的理解。

6.3 项目部署准备（了解即可）

对于毕设答辩或简历，通常不需要公网部署，但你应该知道基本流程：

  1. 后端打包：在后台项目根目录运行mvn clean package，会在target文件夹生成一个.jar文件。
  2. 前端构建：在前端项目根目录运行npm run build，会生成静态文件在dist目录。
  3. 部署：
    • 后端：将.jar文件放到服务器，用java -jar your-app.jar运行。生产环境会用nohup或配置为系统服务。
    • 前端：将dist文件夹内的所有文件，放到Nginx或Apache等Web服务器目录下，并配置路由，将非静态文件请求代理到后端.jar运行的端口。

7. 避坑指南与排查清单

结合常见问题，我总结了一份排查清单。当项目跑不起来时，按顺序检查：

7.1 后端启动失败

现象优先检查点
端口冲突检查application.yml中的server.port，默认8080是否被其他程序占用。
数据库连接失败1. 数据库服务是否启动。
2.application.yml中的数据库URL、用户名、密码是否正确。
3. 数据库驱动版本与MySQL版本是否匹配（如MySQL 8.0需用com.mysql.cj.jdbc.Driver）。
依赖下载失败/冲突1. 检查网络，尝试更换Maven镜像源。
2. 在IDEA中尝试Maven -> Reload Project。
3. 查看pom.xml中依赖版本是否有明显冲突。
实体类与表结构不符1. 是否执行了项目提供的初始SQL脚本？
2. 实体类字段名、类型是否与数据库表字段匹配。

7.2 前端启动失败或白屏

现象优先检查点
npm install失败1. 网络问题，可尝试使用淘宝镜像：npm config set registry https://registry.npmmirror.com
2. Node.js版本是否过旧或过新，尝试使用LTS版本。
npm run dev失败1. 查看终端报错信息，通常是某个依赖缺失或版本问题。
2. 删除node_modules文件夹和package-lock.json，重新npm install。
页面能打开但接口报错（跨域）1. 确认后端服务是否已启动。
2. 检查前端vite.config.js中的proxy配置，目标地址是否正确指向后端。
3. 浏览器Network里查看请求URL是否正确被代理。
页面样式错乱1. 检查是否成功引入了UI组件库（如Element Plus）的样式文件。
2. 查看浏览器控制台是否有CSS/JS加载失败的报错。

7.3 前后端通信正常但功能异常

现象优先检查点
登录失败1. 检查数据库用户表中是否存在对应的账号密码（密码可能是加密的）。
2. 查看后端登录接口的日志，看密码校验是否通过。
3. 检查Spring Security等权限框架的配置。
列表数据为空1. 数据库对应表中是否有数据。
2. 后端查询接口的SQL是否正确，是否带了不必要的过滤条件。
3. 前端调用API后，是否正确解析了响应数据。
AI功能无返回1.最重要：检查DeepSeek API Key配置是否正确、是否过期、是否有余额。
2. 查看后端调用AI服务的日志，看请求是否成功发出，外部API返回了什么错误信息。
3. 网络是否能正常访问外部AI服务。

7.4 项目理解与扩展建议

  1. 不要只关注界面：多花时间看后端代码，理解Controller、Service、Mapper（DAO）之间的调用关系，这是SpringBoot的核心。
  2. 调试是最好老师：在IDEA和VSCode中学会使用断点调试。在前端点击按钮时，跟踪后端代码的执行流程，能极大加深理解。
  3. 先模仿，再创造：想新增功能时，先找一个类似的功能模块，照着它的代码结构“抄”一遍，再修改成自己需要的逻辑。
  4. 文档和注释：如果项目原有注释不多，自己可以在关键代码处添加中文注释，这既是学习的过程，也方便后续回顾。

这个项目就像一个功能齐全的“毛坯房”，你拿到手后，通过配置环境让它“通水通电”（能运行），再通过阅读代码和简单修改来“装修布置”（理解与定制），最终让它成为能体现你个人能力的作品。整个过程遇到的每一个错误，都是你理解这个技术栈的宝贵机会。别怕报错，耐心看日志，按上面的清单一步步排查，你一定能把它跑起来，并从中收获远超一个简单Demo的实战经验。

编程学习 学习日记 实战经验
← 返回列表