企业官网建设流程全解析

简介：一份适合Java毕业设计或前后端分离学习者的个人健康管理系统源码，基于Vue+SpringBoot+MySQL构建。系统涵盖健康档案、体检档案、健康咨询三大业务模块，并内置用户管理、部门管理、角色管理、菜单管理、日志管理、数据字典等基础功能，采用基于角色的访问控制，支持将权限精确到按钮级别，便于自定义角色与分配权限。资源包共300个文件，以151个Java后端、66个Vue前端、35个JavaScript脚本为主，辅以SQL、YML等配置，压缩包整体仅1.12MB，便于快速下载部署。附带项目录屏与讨论帖入口，可帮助读者理解系统设计思路、权限模型及完整开发流程。已有995人学习下载，适合需要快速搭建健康管理类毕业设计或练习权限控制开发的在校学生与开发者。

1. JAV毕业设计“个人健康管理系统”为什么值得照着做：功能、选型与答辩说服力

又到毕业设计选题的时候，许多题目要么是旧管理系统换皮，要么概念很大但落地苍白。JAVA毕业设计 个人健康管理系统 Vue+SpringBoot+MySQL 看起来普通，却是答辩时特别好讲的一档：功能点明确，健康档案、体检指标、运动饮食记录都能做成可见页面；技术栈主流，Vue管页面交互、SpringBoot管后端接口、MySQL管数据存储，整套前后端链路正好是 Java 岗位面试常问的组合。这篇笔记我会把数据库表、后端接口、前端调用一步步给到可抄的代码，再把启动和交付阶段的高频踩坑一次说透。新手能照着复现，熟手能直接改造成自己的题目，从开题到演示都能拿出实际东西。

2. 搭出前后端骨架：SpringBoot三层结构、Vue路由与跨域配置怎么一次到位

2.1 启动类与三层结构：别把Controller写成万能入口

我见过不少毕业设计代码，Controller 里又写 SQL 又算业务，看着也能跑，但后面每加一个“计算BMI”的小功能就要改一大片，答辩时老师追问“你这个模块怎么拆分”也答不顺。个人健康管理系统规模不大，Controller、Service、Mapper 三层足够，职责各管一段：Controller 只接收请求和返回结果，Service 写业务规则，Mapper 只做表操作。这样设计不是为了炫技，而是让每个改动都有确定位置。

先把后端启动类建出来。用 IDEA 新建 SpringBoot 项目时，选中 Web、MySQL Driver、Lombok 这三个依赖即可，启动类长这样：

package com.example.health; import org.springframework.boot.SpringApplication; import org.springframework.boot.autoconfigure.SpringBootApplication; @SpringBootApplication public class HealthApplication { public static void main(String[] args) { SpringApplication.run(HealthApplication.class, args); } }

@SpringBootApplication背后是@SpringBootConfiguration、@EnableAutoConfiguration和@ComponentScan的组合，它把数据源、内嵌 Web 容器、Jackson 序列化都自动配置好。个人健康管理系统不需要拆多模块，一个启动类加几个包就够。需要注意@SpringBootApplication默认扫描它所在包及其子包，Controller、Service、Mapper 要放在com.example.health下面，否则扫描不到，这是新手最常见的“明明写了注解但接口 404”的原因。

接着写一个最简单的接口验证后端通了：

@RestController @RequestMapping("/api/health") public class HealthController { @GetMapping("/ping") public String ping() { return "ok"; } }

统一加/api前缀是个人健康管理系统这类前后端分离项目的常见做法。后续前端所有请求都走/api开头，后端做统一拦截、统一返回结构时只要匹配这一个前缀就行，不用管具体业务路径。先启动起来，浏览器访问http://localhost:8080/api/health/ping能返回ok，说明骨架没塌。

2.2 Vue项目结构与路由：先让页面能跳转起来

前端部分我一般先用npm create vue或vue create health-web初始化一个 Vue 项目，装完依赖后目录里会有src/views、src/router、src/api这几个关键目录。新手容易在 vue 安装及环境配置这一步卡住，最常见的是npm install中断后直接关窗口，依赖残缺，后面启动全是报错。装依赖时尽量不要中断，等它跑完；网络不好就换淘宝镜像源，也不要混着多个源一起用。

路由是页面跳转的骨架。个人健康管理系统至少要有登录页、首页仪表盘、健康档案页、体检记录页。用 Vue3 时路由配置这样写：

// router/index.js import { createRouter, createWebHistory } from 'vue-router' const routes = [ { path: '/', redirect: '/login' }, { path: '/login', name: 'Login', component: () => import('@/views/Login.vue') }, { path: '/dashboard', name: 'Dashboard', component: () => import('@/views/Dashboard.vue') }, { path: '/record', name: 'Record', component: () => import('@/views/RecordForm.vue') } ] const router = createRouter({ history: createWebHistory(), routes }) export default router

component: () => import(...)是路由懒加载，页面在访问时才加载对应文件，首屏更快；name字段在后端返回数据、前端做跳转时可以用router.push({ name: 'Record' })代替路径字符串，避免写死路径。如果用的是 Vue2，路由写法换成new VueRouter({ routes })，路径和组件的对应逻辑完全一致。先跑一个只有两个空页面的项目，前端骨架稳定后再填业务。

2.3 application.yml与跨域配置：让前端能拿到后端数据

后端配置都集中在src/main/resources/application.yml。个人健康管理系统最核心的是数据源配置，注意 MySQL 8.0 和 MySQL 5.7 的驱动写法不同，8.0 必须用com.mysql.cj.jdbc.Driver，配置里还要带时区参数，否则连接会报时区错误。标准配置如下：

server: port: 8080 spring: datasource: url: jdbc:mysql://localhost:3306/health_db?useUnicode=true&characterEncoding=utf8&serverTimezone=Asia/Shanghai username: root password: root driver-class-name: com.mysql.cj.jdbc.Driver mybatis-plus: configuration: map-underscore-to-camel-case: true global-config: db-config: logic-delete-field: deleted

serverTimezone=Asia/Shanghai解决日期读写偏移问题；map-underscore-to-camel-case开启后，数据库字段create_time能自动映射到 Java 属性createTime，实体类不用写一行映射代码。MyBatis-Plus 的逻辑删除配置先留在这里，等后面建表时给需要逻辑删除的表加一个deleted字段就行。

跨域是前后端分离项目绕不开的坎。前端开发服务器跑在 8081，后端接口在 8080，浏览器会因为“跨域”拦截请求。我一般不在前端做转发配置，而是在后端直接加一个全局跨域配置类，简单直接：

package com.example.health.config; import org.springframework.context.annotation.Configuration; import org.springframework.web.servlet.config.annotation.CorsRegistry; import org.springframework.web.servlet.config.annotation.WebMvcConfigurer; @Configuration public class CorsConfig implements WebMvcConfigurer { @Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping("/api/**") .allowedOrigins("http://localhost:8081") .allowedMethods("GET", "POST", "PUT", "DELETE") .allowCredentials(true); } }

allowedOrigins要写前端开发服务器的实际地址，allowCredentials(true)表示允许携带 Cookie，但它不能和allowedOrigins("*")一起用，这是浏览器安全策略的硬限制。如果后续要走登录 Token，这个配置能保证请求和响应都不被浏览器拦掉。到这里，前后端两个工程已经能互相通信，可以开始设计数据表了。

3. 把健康数据落进MySQL：四张核心表、MyBatis-Plus实体映射与排序分页

3.1 四张核心表：用户、健康档案、体检记录、活动记录怎么拆

建表之前先想清楚个人健康管理系统有哪些主体。一套可演示的毕业设计不需要二十张表，四张核心表足够覆盖主要功能，也能在论文里把关系讲清楚：

用户表只负责登录和基本身份信息，健康档案单独拆一张表放不常变的属性（过敏史、既往病史），体检记录和活动记录是高频增长的数据，和用户是一对多关系。这样拆的好处是：health_record查询时不会把用户简介等大字段带出来，后续做趋势统计也更干净。建表 SQL 我用 MySQL 8.0 的写法，utf8mb4 字符集避免中文乱码：

CREATE TABLE sys_user ( id BIGINT PRIMARY KEY AUTO_INCREMENT, username VARCHAR(50) NOT NULL COMMENT '登录名', password VARCHAR(100) NOT NULL COMMENT '密码', nickname VARCHAR(50) DEFAULT NULL COMMENT '昵称', gender TINYINT DEFAULT 0 COMMENT '0未知 1男 2女', birthday DATE DEFAULT NULL, phone VARCHAR(20) DEFAULT NULL, create_time DATETIME DEFAULT CURRENT_TIMESTAMP, UNIQUE KEY uk_username (username) ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='用户表'; CREATE TABLE health_record ( id BIGINT PRIMARY KEY AUTO_INCREMENT, user_id BIGINT NOT NULL COMMENT '关联用户ID', record_date DATE NOT NULL COMMENT '体检日期', height_cm DECIMAL(5,1) DEFAULT NULL COMMENT '身高cm', weight_kg DECIMAL(5,1) DEFAULT NULL COMMENT '体重kg', heart_rate INT DEFAULT NULL COMMENT '静息心率', bmi DECIMAL(4,2) DEFAULT NULL COMMENT 'BMI', blood_pressure VARCHAR(20) DEFAULT NULL COMMENT '收缩压/舒张压', notes VARCHAR(500) DEFAULT NULL COMMENT '备注', create_time DATETIME DEFAULT CURRENT_TIMESTAMP, KEY idx_user_date (user_id, record_date) ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='体检记录表';

身高体重用DECIMAL而不用FLOAT，因为浮点数在比较和累加时容易出精度问题，健康数据要的是准确值。bmi字段实际可以通过身高体重实时计算，但因为它是答辩时的核心指标，单独存一份能简化统计查询。我一般不在表之间加物理外键约束，而是只在 Java 代码里通过user_id关联，理由写在论文里：毕业设计数据量小，物理外键会在插入、删除时多一次完整性检查，对性能的影响无关紧要，但删除测试数据时常常因为外键约束删不掉，反而拖慢进度。

3.2 实体类与MyBatis-Plus映射：建表SQL和Java字段对齐

很多人在搜索“MyBatis-Plus根据Java实体类生成建表SQL”——这里先说明白：MyBatis-Plus 并不提供根据实体类反向生成建表 SQL 的能力。常见做法是先用 SQL 建表，再用代码生成器从表结构生成实体类；手写实体类时，用注解把 Java 字段和表字段对齐即可。对照上面的health_record表，实体类这样写：

package com.example.health.entity; import com.baomidou.mybatisplus.annotation.*; import lombok.Data; import java.math.BigDecimal; import java.time.LocalDate; import java.time.LocalDateTime; @Data @TableName("health_record") public class HealthRecord { @TableId(type = IdType.AUTO) private Long id; private Long userId; private LocalDate recordDate; private BigDecimal heightCm; private BigDecimal weightKg; private Integer heartRate; private BigDecimal bmi; private String bloodPressure; private String notes; @TableField(fill = FieldFill.INSERT) private LocalDateTime createTime; }

@TableName("health_record")是MyBatis-Plus映射表名的关键。我见过不少查询报Table doesn't exist的案例，就是实体类默认把HealthRecord转成了health_record，但实际表名多了前缀，比如t_health_record，加了这个注解就能指定真实表名。@TableId(type = IdType.AUTO)对应数据库自增主键，插入后实体类的id会被自动填回。createTime用@TableField(fill = FieldFill.INSERT)标记后，需要配合一个自动填充处理器，否则这个字段插入时为 null：

@Component public class MyMetaObjectHandler implements MetaObjectHandler { @Override public void insertFill(MetaObject metaObject) { this.strictInsertFill(metaObject, "createTime", LocalDateTime.class, LocalDateTime.now()); } @Override public void updateFill(MetaObject metaObject) { // 记录更新时间，按需补 } }

这样插入数据时就不用手动 setcreateTime，数据库建表 SQL 里也不用再依赖DEFAULT CURRENT_TIMESTAMP，两套逻辑统一走应用层处理。时间字段的类型选择有讲究：java.time.LocalDate对应数据库DATE，只存年月日，适合体检日期；LocalDateTime对应DATETIME，适合记录创建时间。如果实体类用java.util.Date，配合 Jackson 序列化时很容易输出一串时间戳数字，前端还要再转格式。

3.3 时间字段、索引与排序分页：别等数据量大了再后悔

个人健康管理系统在答辩演示时数据量不大，但老师可能会问“记录多了怎么保证查询性能”。三个点讲清楚就能加分：时间字段统一用datetime，不用timestamp，因为datetime没有 2038 年问题，存储上也更直观；组合索引要符合查询条件，health_record上建(user_id, record_date)索引，正好覆盖“查某个用户最近几次体检”这种高频查询；排序用ORDER BY record_date DESC，索引能直接倒序扫描，避免文件排序。

MyBatis-Plus 的分页查询先配置一个分页插件，拦截器会在执行前自动拼LIMIT：

@Configuration public class MybatisPlusConfig { @Bean public MybatisPlusInterceptor mybatisPlusInterceptor() { MybatisPlusInterceptor interceptor = new MybatisPlusInterceptor(); interceptor.addInnerInterceptor(new PaginationInnerInterceptor(DbType.MYSQL)); return interceptor; } }

然后写查询：

Page<HealthRecord> page = new Page<>(current, size); LambdaQueryWrapper<HealthRecord> wrapper = new LambdaQueryWrapper<>(); wrapper.eq(HealthRecord::getUserId, userId) .orderByDesc(HealthRecord::getRecordDate); healthRecordMapper.selectPage(page, wrapper);

Page的第一个参数是页码，从 1 开始；第二个参数是每页条数。LambdaQueryWrapper用方法引用HealthRecord::getUserId代替字符串列名，编译期就能发现字段拼写错误，比QueryWrapper安全得多。orderByDesc(HealthRecord::getRecordDate)对应ORDER BY record_date DESC，实现了按最近一次体检排序的需求。

关于排序的坑，我提一个经常被忽略的细节：如果体检日期相同，排序结果不稳定，第二次查询可能和第一次顺序不一致。建议在orderByDesc(recordDate)之后再补一个orderByDesc(HealthRecord::getId)，用自增主键做次级排序，保证相同日期的数据也按插入顺序固定下来。分页查询在数据量不大的系统里看不出差别，但答辩时能讲出“为什么这样设计”，就已经和大部分直接全表查的学生拉开差距。

还有一个小点：单机毕业设计不用去讨论 MySQL 锁的分类，分布式锁更是纯概念。更新数据时在 Service 方法上加@Transactional，事务和锁交给数据库自己处理，答辩时如实说“用事务保证多表操作一致性”就够了。把设计边界讲清楚，比堆砌一堆没用上的技术名词更能让老师信服。

4. 跑通登录与体检记录录入：SpringBoot接口和Vue表单的完整调用链

4.1 登录接口：Controller、Service、Mapper怎么串起来

个人健康管理系统的入口是登录。毕业设计可以把登录做成最直观的“用户名+密码查表匹配”，但代码结构不能省。先建一个统一返回结果的类，让前端拿到固定格式，这一步很值得做：

package com.example.health.common; import lombok.Data; @Data public class Result<T> { private Integer code; private String message; private T data; public static <T> Result<T> success(T data) { Result<T> r = new Result<>(); r.code = 200; r.message = "ok"; r.data = data; return r; } public static <T> Result<T> error(String message) { Result<T> r = new Result<>(); r.code = 500; r.message = message; return r; } }

code=200表示成功，500表示业务失败。前端拦截器只认这个结构，不管后端内部怎么异常，最终都归一到两种返回。接下来定义登录接口的入参对象：

package com.example.health.dto; import lombok.Data; @Data public class LoginDTO { private String username; private String password; }

Controller 层只做接收参数、调用 Service、包装返回这三件事：

package com.example.health.controller; import com.example.health.common.Result; import com.example.health.dto.LoginDTO; import com.example.health.entity.User; import com.example.health.service.UserService; import jakarta.annotation.Resource; import org.springframework.web.bind.annotation.*; @RestController @RequestMapping("/api/user") public class UserController { @Resource private UserService userService; @PostMapping("/login") public Result<User> login(@RequestBody LoginDTO dto) { if (dto.getUsername() == null || dto.getPassword() == null) { return Result.error("用户名和密码不能为空"); } User user = userService.login(dto.getUsername(), dto.getPassword()); if (user == null) { return Result.error("用户名或密码错误"); } return Result.success(user); } }

@RequestBody把前端传来的 JSON 字符串反序列化成LoginDTO对象。Service 实现里做真正的查询匹配。个人健康管理系统的密码存储我不建议用明文，至少用 BCrypt 加密，Spring Security 里自带BCryptPasswordEncoder，单独引一个即可。如果时间实在紧张，先在论文里写明“演示版简化处理”，也比裸明文好。Service 里我用 MyBatis-Plus 的LambdaQueryWrapper写查询：

public User login(String username, String password) { LambdaQueryWrapper<User> wrapper = new LambdaQueryWrapper<>(); wrapper.eq(User::getUsername, username) .eq(User::getPassword, password) .last("limit 1"); return this.getOne(wrapper); }

last("limit 1")是因为getOne在查到多条时会抛异常，登录场景按唯一用户名查询理论只有一条，加上limit 1是双保险。如果有哪怕一点时间，建议用BCryptPasswordEncoder.matches校验密码，这样数据库里存的是哈希串，演示时打开数据库也不会尴尬。

4.2 体检记录录入：BMI计算与保存接口实现

体检记录录入是个人健康管理系统的核心业务，也是答辩时演示最多的功能。前端填一个表单，提交身高、体重、心率、血压，后端自动计算 BMI 并保存。先定义保存接口：

package com.example.health.controller; import com.example.health.common.Result; import com.example.health.entity.HealthRecord; import com.example.health.service.HealthRecordService; import jakarta.annotation.Resource; import org.springframework.web.bind.annotation.*; import java.math.BigDecimal; import java.math.RoundingMode; @RestController @RequestMapping("/api/healthRecord") public class HealthRecordController { @Resource private HealthRecordService healthRecordService; @PostMapping("/save") public Result<Long> save(@RequestBody HealthRecord record) { if (record.getUserId() == null) { return Result.error("缺少用户ID"); } if (record.getRecordDate() == null) { return Result.error("缺少体检日期"); } record.setBmi(calcBmi(record)); healthRecordService.save(record); return Result.success(record.getId()); } private BigDecimal calcBmi(HealthRecord record) { if (record.getHeightCm() == null || record.getWeightKg() == null) { return null; } BigDecimal heightM = record.getHeightCm().divide(new BigDecimal("100"), 2, RoundingMode.HALF_UP); return record.getWeightKg().divide(heightM.multiply(heightM), 2, RoundingMode.HALF_UP); } }

BigDecimal.divide必须显式指定精度和舍入模式，否则遇到除不尽的小数会直接抛ArithmeticException。身高 175cm 换算成 1.75m，BMI 就是体重除以身高的平方，保留两位小数，四舍五入用RoundingMode.HALF_UP。healthRecordService.save(record)是 MyBatis-PlusIService提供的通用方法，实际执行的是INSERT，插入后主键自动回填到record.getId()，所以接口能直接返回新记录 id，前端可以拿着它做后续跳转或刷新列表。

Service 实现类继承ServiceImpl，这是 MyBatis-Plus 省事的核心：

package com.example.health.service.impl; import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl; import com.example.health.entity.HealthRecord; import com.example.health.mapper.HealthRecordMapper; import com.example.health.service.HealthRecordService; import org.springframework.stereotype.Service; @Service public class HealthRecordServiceImpl extends ServiceImpl<HealthRecordMapper, HealthRecord> implements HealthRecordService { }

这里没有任何业务代码，但healthRecordService.save()、list()、getOne()、page()这些通用方法已经全都有了。如果后续要加“最近 7 次体检记录”这种查询，就在这个类里自己写方法，然后通过this.baseMapper拿到底层 Mapper 执行自定义 SQL。一开始我在 Service 里还纠结过是暴露接口还是直接用实现类，后来统一用接口注入，因为答辩被问到依赖注入时，面向接口的说法更容易讲清楚。

4.3 前端Axios封装与表单提交：统一处理返回结构

后端接口就绪，前端要把页面填起来了。先在src/api下统一封装 Axios，所有接口共用一套baseURL和拦截器：

// src/api/index.js import axios from 'axios' const api = axios.create({ baseURL: 'http://localhost:8080/api', timeout: 10000 }) api.interceptors.response.use( response => { const res = response.data if (res.code !== 200) { alert(res.message) return Promise.reject(new Error(res.message)) } return res.data }, error => { alert('网络异常，请确认后端已启动') return Promise.reject(error) } ) export default api

重点看拦截器的第二个参数error：后端没启动、接口路径写错、网络超时都会走到这里。如果不统一拦截，每个页面方法都要自己写一遍catch，代码会重复得像一锅粥。拦截器的返回值是处理过后的res.data，也就是后端返回的data部分，页面代码里拿到的直接是用户对象或记录 id，不用再层层剥 JSON 壳。

登录页的脚本核心部分是这样：

<script setup> import { ref } from 'vue' import { useRouter } from 'vue-router' import api from '@/api/index.js' const router = useRouter() const username = ref('') const password = ref('') async function handleLogin() { const data = await api.post('/user/login', { username: username.value, password: password.value }) localStorage.setItem('userId', data.id) router.push({ name: 'Dashboard' }) } </script>

api.post('/user/login', ...)会拼成http://localhost:8080/api/user/login，和后端@RequestMapping("/api/user")正好对应。登录成功后把userId存到localStorage，后续体检记录表单提交时直接带着它，比每次登录都弹窗询问“当前用户是谁”体验好得多。这里藏着一个血泪经验：localStorage存任何东西都得先确认它是真实存在的值，一旦data为null，后面data.id当场报错，页面白屏还找不到原因。正式提交前先console.log打印一下返回结构。

5. 避坑与常见问题：毕业设计启动到交付的五个高频翻车现场

个人健康管理系统跑不起来的原因，多数不是业务逻辑有问题，而是环境和配置层面翻车。我整理五个高频问题，每个都按“现象、原因、解决”讲透，照着排查能省下半天时间。

5.1 端口被占用导致启动失败，控制台一片红色

现象：后端启动时控制台报Web server failed to start. Port 8080 was already in use，SpringBoot 进程闪退。

原因：8080 端口被本机其他程序占用。很多开发工具会把 8080 当默认端口，比如另一个 SpringBoot 实例、某个前端调试服务，甚至之前崩掉的 java 进程没退出。

解决：先确认占用者再处理。Windows 上用netstat -ano | findstr 8080查 PID，再用taskkill /F /PID 编号杀掉；macOS 或 Linux 用lsof -i:8080查进程。如果 8080 是刻意留给别的服务的，改自己的端口最省事，在application.yml里把server.port改成 8081，同时改前端api/index.js的baseURL，两边对齐就行。这个坑我在第一次整合前后端时踩过，当时以为是代码问题，查了半小时才发现是端口没换。

5.2 MySQL连接报Communications link failure，数据库一直连不上

现象：后端启动时抛Communications link failure或The last packet sent successfully to the server was 0 milliseconds ago，跟着一堆 driver 和 socket 相关的异常。

原因：我见过三个实际来源。第一，MySQL 服务没启动，本地装完 MySQL 后没在系统服务里启动mysqld；第二，驱动类写成了老版的com.mysql.jdbc.Driver，而本地装的是 MySQL 8.0，驱动和服务器握手协议对不上；第三，URL 里缺serverTimezone参数，时区校准失败。

解决：先确认driver-class-name是否用了com.mysql.cj.jdbc.Driver。MySQL 5.7 和 8.0 的安装差异主要就在这里：5.7 可以用旧驱动，8.0 必须用新驱动，URL 也要带serverTimezone=Asia/Shanghai。然后确认 MySQL 服务确实在跑，Windows 服务列表里找 MySQL 开头的服务并启动。如果你本来想用 Docker 快速跑一个 MySQL 实例，结果镜像拉不下来、端口映射冲突，那更建议直接用本机安装包，少绕弯子。数据库连不上这个问题，80% 都是这三件事没凑齐，日志里把最上面的异常读完再动手，别盯着后面的堆栈猛看。

5.3 SpringBoot版本太高导致依赖冲突，项目根本起不来

现象：新建项目时顺手选了 SpringBoot 最新版本，启动后各种依赖报ClassNotFoundException或BeanCreationException，换了引入的第三方库版本也不管用。

原因：SpringBoot 版本和本地 JDK、依赖库版本不匹配。SpringBoot 3.x 要求 JDK 17 以上，如果本机装的是 JDK 8，项目直接无法编译；另外某些教程用的第三方 starter 还在适配 2.x，硬拿到 3.x 项目里就冲突。最典型的场景是网上找的 MyBatis-Plus 示例依赖版本很老，和 SpringBoot 3.x 的自动配置机制对不上。

解决：毕业设计优先选稳定靠谱的版本组合。如果本机 JDK 是 8，就把 SpringBoot 固定在 2.7.x；如果本机是 JDK 17，用 3.x 也顺手。MyBatis-Plus 的版本要和 SpringBoot 主版本对齐，不要混着用。定位依赖冲突时，在 IDEA 右上角打开 Maven 面板，看Dependencies里的红色波浪线，或者运行mvn dependency:tree看重复依赖，先删掉显式声明的多余版本，把版本控制交给 SpringBoot 的 BOM。spring-boot-starter-parent里统一管理了大多数常用库版本，自己手动指定的越少，踩坑越少。

5.4 MyBatis-Plus查询报Table doesn't exist，SQL却看着没问题

现象：运行healthRecordService.list()时控制台报Table 'health_db.health_record' doesn't exist，但查数据库表确实存在，SQL 看着也正常。

原因：实体类默认的表名映射规则和实际表名对不上。MyBatis-Plus 默认把HealthRecord转成全小写health_record，如果你的表叫t_health_record或者带了其他前缀，就找不到。另外，如果数据库名都不同，也会出现“表明明在但报不存在”的错觉，先看日志里的完整表名和库名。

解决：在实体类上加@TableName("实际表名")显式指定。同理，字段名对不上时用@TableField("实际字段名")或开启map-underscore-to-camel-case。我建议所有核心实体的表名都明确写出来，不要依赖默认转换，因为改表名成本高，加一个注解只需要一行。定位这类问题时，打开 MyBatis-Plus 的 SQL 日志，在application.yml加logging.level.com.example.health.mapper: debug，就能看到实际执行的 SQL 和参数，比对着日志瞎猜有效得多。MyBatis-Plus 这个“黑匣子”其实没有想象中那么玄，把 SQL 打出来自然就明白了。

5.5 npm run serve后页面一片白，接口也在报错

现象：前端npm run serve启动成功，浏览器控制台没有明显报错，但页面显示空白，Network 面板里接口请求全是红色。

原因：vue 安装依赖时没装完整，或者 Node 版本和项目依赖不匹配。常见的是node_modules目录残缺、版本冲突，导致 Vue 组件编译出来的代码根本没执行；另一类是本地 Node 版本太高，某些依赖在编译阶段直接出错。接口报错则往往是因为baseURL写死成了 8080，但后端的端口改了，请求自然全部走不通。

解决：先把node_modules整个删掉，重新执行npm install，安装过程不要中断，看到added xxx packages才算完。Node 版本建议用 LTS 版本，不要在开发环境追最新版。如果项目用 Vue3，也建议直接用 Vite 创建项目，启动速度和依赖管理都比旧版 Vue CLI 省心。接口部分的排查顺序是：先看 Network 面板的状态码，再看后端控制台有没有收到请求，最后确认baseURL和application.yml的端口是否一致。很多所谓“前端玄学白屏”，最后都是依赖没装干净或端口不一致。

6. 进阶一步：体检趋势统计与前后端打包部署的实战技巧

6.1 用ECharts做BMI趋势图：先走后端统计接口再画图

健康管理系统如果只做表格录入，答辩效果会差不少。加一个趋势图，把用户最近几次体检的 BMI 变化展示出来，数据说服力立刻不一样。趋势图前端我用 ECharts，它支持 Vue3 的组件化引入，npm install echarts装好即可。但图形不能写死数据，要让后端给一个专门统计接口：

@GetMapping("/trend") public Result<List<HealthRecord>> trend(@RequestParam Long userId) { LambdaQueryWrapper<HealthRecord> wrapper = new LambdaQueryWrapper<>(); wrapper.eq(HealthRecord::getUserId, userId) .orderByAsc(HealthRecord::getRecordDate) .last("limit 10"); return Result.success(healthRecordService.list(wrapper)); }

按日期升序返回最近 10 条体检记录，前端拿到后取出recordDate作为横轴、bmi作为纵轴，代码不复杂：

import * as echarts from 'echarts' const chart = echarts.init(this.$refs.trendChart) chart.setOption({ xAxis: { type: 'category', data: dates }, yAxis: { type: 'value', name: 'BMI' }, series: [{ type: 'line', smooth: true, data: bmis }] })

画图时最容易翻车的是容器高度：ECharts 初始化时，如果容器高度为 0，图表会显示空白。在 HTML 里给容器一个固定的height: 300px，或者单位用百分比但父容器必须定高，不要依赖内容撑开。echarts.init也只在组件挂载后执行一次，在onMounted里调用，组件销毁时记得chart.dispose()，否则切页面会弹出“实例已存在”的告警。若出现样式不准的情况，先检查容器尺寸，再考虑初始化时机，基本都能解掉。

6.2 后端打jar包、前端出dist目录：一套能交付的部署路径

毕业设计交付时，不能只给一堆源码让别人自己配环境。标准动作是后端打成 jar 包，前端构建成静态文件，然后在本地把整条链路跑通一遍。后端打包用 Maven：

mvn clean package -DskipTests

跳过测试能让打包更快，也避免测试类没配环境导致失败。打包完成后在target目录下得到health-system.jar。前端打包：

npm run build

执行后生成dist目录，里面是index.html、assets等静态文件。这时候把dist里的所有内容复制到后端的src/main/resources/static目录下，再次执行mvn clean package -DskipTests。这样前端静态文件被包进 jar 包，访问http://localhost:8080就能直接打开页面，前后端同源，之前 Dev 环境里的跨域配置在打包后也不需要了，因为浏览器和接口在同一个端口下。

验证方法是跑一次全新环境：先把数据库按第 3 章的 SQL 建好，然后java -jar health-system.jar启动后端，浏览器访问打包后的首页，依次走一遍登录和录入流程，打开 F12 确认每个接口返回的 JSON 都是{ code: 200, message: "ok", data: ... }结构。我第一次交付这类项目时，只丢了个源码包给对方，结果对方不会配 Node 环境，后面被反复追问“怎么跑不起来”。后来我每次都把 jar 包完整跑通一遍，再把源码和打包步骤说明一起发过去，再也没有因为这个被问过。先跑通交付路径再调功能，这个顺序能省下后面一大半沟通成本，希望帮到你。

本文还有配套的精品资源，点击获取