简介这是一套面向高校计算机相关专业学生与课程设计、毕业设计开发者的完整项目方案基于Spring Boot、Vue.js与MySQL构建大学生体质测试管理系统帮助解决体测数据分散、统计困难、权限混乱等实际问题。压缩包共960个文件约19.03MB涵盖121个Java后端源码、46个Vue组件、153个JavaScript脚本、44个CSS与44个HTML页面以及SQL建库脚本、XML配置、图片图标与字体资源并附设计文档、部署指南与操作演示视频。已有48人学习下载。系统包含学生档案管理、测试项目配置、成绩登记、多维度统计图表、Excel数据导入导出、历史记录追溯与管理员/学生分级权限控制等模块前端界面清晰易上手。读者可获得可直接运行的完整源码、数据库脚本与部署说明便于快速搭建环境、理解前后端交互逻辑并在此基础上完成二次开发或论文撰写。1. 从一份能跑通的体测系统源码说起它到底解决了谁的痛点每年毕业季计算机专业的学生都会面临同一个灵魂拷问毕业设计做什么课程设计交什么如果你正好抽到了大学生体质测试管理系统这个题目恭喜你这是一个业务逻辑清晰、技术栈主流、答辩时老师也挑不出大毛病的选题。但问题在于网上能找到的同类源码要么跑不起来要么缺文档要么代码结构一团乱麻改都不知道从哪下手。这份基于 Spring Boot Vue MySQL 的大学生体质测试管理系统核心解决的就是能跑通、能看懂、能改这三件事。它覆盖了学生信息管理、体测项目配置、成绩录入与查询、数据统计导出等体测场景的完整闭环。适合正在做毕业设计或课程设计的同学也适合想拿一个完整前后端分离项目练手的初级开发者。你拿到的不只是一堆代码文件而是一套从数据库建表到前端页面渲染的完整方案。2. 技术选型拆解为什么是 Spring Boot Vue MySQL 这套组合2.1 后端选 Spring Boot 而不是 SSM 的理由很多老教程还在用 SSMSpring SpringMVC MyBatis作为教学案例但实际开发中Spring Boot 已经成了事实上的标准。原因很直接SSM 需要手动配置 web.xml、spring.xml、springmvc.xml、mybatis.xml 等一堆 XML 文件光是环境搭建就能劝退一半人。Spring Boot 通过自动配置和起步依赖把这些问题全部干掉。具体到这个体测系统后端需要提供的接口包括学生登录认证、体测项目增删改查、成绩批量导入、统计报表生成。用 Spring Boot 实现的话一个RestController加几个GetMapping、PostMapping就能搞定配合 MyBatis-Plus 连 SQL 都不用写太多。!-- pom.xml 核心依赖 -- dependencies !-- Web 场景启动器自带 Tomcat 和内嵌容器 -- dependency groupIdorg.springframework.boot/groupId artifactIdspring-boot-starter-web/artifactId /dependency !-- MyBatis-Plus比原生 MyBatis 少写一半配置 -- dependency groupIdcom.baomidou/groupId artifactIdmybatis-plus-boot-starter/artifactId version3.5.3.1/version /dependency !-- MySQL 驱动 -- dependency groupIdcom.mysql/groupId artifactIdmysql-connector-j/artifactId scoperuntime/scope /dependency !-- Lombok省掉 getter/setter -- dependency groupIdorg.projectlombok/groupId artifactIdlombok/artifactId optionaltrue/optional /dependency /dependencies这段依赖配置里spring-boot-starter-web是核心它把 SpringMVC、Jackson、Tomcat 全部打包进来了。MyBatis-Plus 的版本选择 3.5.3.1 是因为它对 Spring Boot 3.x 的兼容性比较稳如果你用的是 Spring Boot 2.7.x换成 3.5.2 也行。MySQL 驱动从 8.0 开始改成了com.mysql.cj.jdbc.Driver这个在application.yml里要写对不然启动直接报错。常见做法是后端接口统一返回一个Result封装类包含code、msg、data三个字段。这样前端处理响应时逻辑统一不用每个接口单独判断。2.2 前端选 Vue 而不是 Thymeleaf 的考量有人会问Spring Boot 不是自带 Thymeleaf 模板引擎吗为什么还要前后端分离答案在于体测系统的实际使用场景。体测成绩录入通常是在 PC 端批量操作但学生查询成绩可能在手机上进行。前后端分离后后端只提供 JSON 接口前端可以是 Vue 的 Web 页面也可以是小程序或 App扩展性完全不一样。Vue 3 的 Composition API 在这个项目里主要用在成绩录入表单和统计图表页面。成绩录入涉及多个体测项目身高体重、肺活量、50米跑、立定跳远等用reactive管理表单状态比 Options API 的data更清晰。// 成绩录入表单的状态管理Vue 3 Composition API import { reactive, ref } from vue const formData reactive({ studentId: , height: null, // 身高 cm weight: null, // 体重 kg vitalCapacity: null, // 肺活量 ml fiftyRun: null, // 50米跑 秒 standingJump: null // 立定跳远 cm }) const rules { studentId: [{ required: true, message: 学号不能为空, trigger: blur }], height: [{ type: number, min: 100, max: 250, message: 身高范围 100-250cm }] } const submitting ref(false) async function handleSubmit() { submitting.value true try { // 调用后端 /api/score/add 接口 await axios.post(/api/score/add, formData) } finally { submitting.value false } }这里用reactive而不是ref是因为表单是一个对象结构reactive可以直接绑定到v-model上。submitting用ref是因为它只是一个布尔值不需要深层响应。参数校验规则里身高范围设 100-250cm 是体测数据的合理区间超出这个范围大概率是录入错误。2.3 MySQL 表结构设计的几个关键决策体测系统的数据库设计有几个容易翻车的地方。第一个是学生表和成绩表的关系。常见做法是把学生基本信息放在student表体测成绩放在score表通过student_id关联。但体测项目是动态的今年测 50 米跑明年可能加引体向上所以成绩表不能把每个项目做成一个字段。-- 学生表 CREATE TABLE student ( id bigint NOT NULL AUTO_INCREMENT, student_no varchar(20) NOT NULL COMMENT 学号, name varchar(50) NOT NULL COMMENT 姓名, gender tinyint DEFAULT 1 COMMENT 1男 2女, class_name varchar(50) DEFAULT NULL COMMENT 班级, PRIMARY KEY (id), UNIQUE KEY uk_student_no (student_no) ) ENGINEInnoDB DEFAULT CHARSETutf8mb4; -- 体测项目表可动态扩展 CREATE TABLE test_item ( id bigint NOT NULL AUTO_INCREMENT, item_name varchar(50) NOT NULL COMMENT 项目名称, unit varchar(10) DEFAULT NULL COMMENT 计量单位, sort_order int DEFAULT 0 COMMENT 排序, PRIMARY KEY (id) ) ENGINEInnoDB DEFAULT CHARSETutf8mb4; -- 成绩表学生 项目 成绩值 CREATE TABLE score ( id bigint NOT NULL AUTO_INCREMENT, student_id bigint NOT NULL, item_id bigint NOT NULL, score_value decimal(6,2) DEFAULT NULL COMMENT 成绩值, test_date date DEFAULT NULL COMMENT 测试日期, PRIMARY KEY (id), KEY idx_student (student_id), KEY idx_item (item_id) ) ENGINEInnoDB DEFAULT CHARSETutf8mb4;这个设计里score表用student_id item_id的组合来定位一条成绩记录而不是把每个项目做成列。好处是新增体测项目只需要往test_item表插一条数据不用改表结构。score_value用decimal(6,2)是因为体测成绩可能有小数比如 50 米跑 7.85 秒用float会有精度问题。字符集统一用utf8mb4避免学生姓名里有生僻字导致乱码。注意student_no加了唯一索引批量导入学生数据时如果学号重复会直接报错建议在导入前先做去重检查。3. 从零跑起来环境配置、数据库初始化和前后端联调3.1 开发环境版本对齐拿到源码后第一件事不是急着npm install而是先把版本对齐。这个项目对版本比较敏感版本不对会出现各种玄学问题。我一般会先看pom.xml里的 Spring Boot 版本和package.json里的 Vue 版本然后对照下表检查本地环境。组件推荐版本说明JDK17Spring Boot 3.x 最低要求 JDK 17Maven3.83.6 也能用但依赖下载可能慢MySQL8.05.7 也能跑但驱动类名不同Node.js18 LTSVue 3 Vite 需要 Node 16npm9.x随 Node 18 自带如果你本地装的是 MySQL 5.7连接配置里的驱动类要改成com.mysql.jdbc.DriverURL 里的时区参数也要调整。MySQL 8.0 的 URL 一般写成jdbc:mysql://localhost:3306/fitness_test?useUnicodetruecharacterEncodingutf8serverTimezoneAsia/Shanghai少了serverTimezone会报时区错误。3.2 数据库初始化和后端启动数据库初始化分两步建库和导数据。源码包里一般会有一个sql目录里面是建表语句和初始数据。# 登录 MySQLWindows 下如果没配环境变量用完整路径 mysql -u root -p # 创建数据库字符集必须指定 utf8mb4 CREATE DATABASE fitness_test DEFAULT CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci; # 切换到该数据库 USE fitness_test; # 导入建表脚本假设脚本在当前目录的 sql 文件夹下 source ./sql/schema.sql; # 导入初始数据管理员账号、体测项目等 source ./sql/data.sql;导入完成后用SHOW TABLES;确认表都建好了。常见问题是source命令的路径不对Windows 下路径分隔符要用/或者双反斜杠。如果导入时报ERROR 1366 (HY000): Incorrect string value说明数据库字符集不是utf8mb4需要重新建库。后端启动前要改application.yml里的数据库连接信息spring: datasource: driver-class-name: com.mysql.cj.jdbc.Driver url: jdbc:mysql://localhost:3306/fitness_test?useUnicodetruecharacterEncodingutf8serverTimezoneAsia/Shanghai username: root password: 你的密码 # 文件上传大小限制体测数据导入可能用到 servlet: multipart: max-file-size: 10MB max-request-size: 10MB server: port: 8080 # 如果 8080 被占用改成 8081 或其他改完后在项目根目录执行mvn spring-boot:run看到Started Application in x.x seconds就说明后端起来了。如果报Access denied for user rootlocalhost检查密码有没有写错如果报Unknown database fitness_test说明数据库没建成功。3.3 前端安装依赖和联调配置前端部分进入vue或frontend目录取决于源码包结构先装依赖再启动。# 进入前端目录 cd frontend # 安装依赖建议用 npm ci 而不是 npm install # npm ci 严格按照 package-lock.json 安装版本不会漂移 npm ci # 启动开发服务器 npm run devVite 启动后默认在http://localhost:5173但后端接口在8080直接请求会跨域。常见做法是在vite.config.js里配代理// vite.config.js import { defineConfig } from vite import vue from vitejs/plugin-vue export default defineConfig({ plugins: [vue()], server: { port: 5173, proxy: { // 所有 /api 开头的请求转发到后端 /api: { target: http://localhost:8080, changeOrigin: true // 如果后端接口本身不带 /api 前缀需要 rewrite // rewrite: (path) path.replace(/^\/api/, ) } } } })changeOrigin: true的作用是让后端收到的请求头里的 Host 变成localhost:8080有些后端框架会校验这个。如果后端接口路径本身不含/api比如是/student/list那前端请求时要么加/api前缀让代理转发要么在代理里配rewrite去掉前缀。这个细节不搞清楚联调时会一直 404。提示前后端都启动后先用浏览器访问http://localhost:8080/student/list确认后端接口正常返回 JSON再打开前端页面测试。这样能把问题范围缩小到前端或后端其中一侧。4. 核心功能模块的实现细节与参数配置4.1 体测成绩批量导入的 Excel 解析体测系统最实用的功能之一是批量导入成绩。一个班几十号人一个个手动录入不现实。常见做法是用 EasyExcel 或 Apache POI 解析 Excel 文件。EasyExcel 的优势是内存占用低适合大文件但体测数据一般就几百行用哪个都行。// 使用 EasyExcel 读取成绩 Excel PostMapping(/import) public Result importScores(RequestParam(file) MultipartFile file) { try { // headRowNumber(1) 表示第一行是表头从第二行开始读数据 ListScoreImportDTO list EasyExcel.read(file.getInputStream()) .head(ScoreImportDTO.class) .sheet() .headRowNumber(1) .doReadSync(); // 校验学号是否存在成绩值是否在合理范围 ListString errors new ArrayList(); for (int i 0; i list.size(); i) { ScoreImportDTO dto list.get(i); if (dto.getStudentNo() null || dto.getStudentNo().isBlank()) { errors.add(第 (i 2) 行学号为空); continue; } // 检查学号是否在 student 表中存在 Long count studentMapper.selectCount( new LambdaQueryWrapperStudent().eq(Student::getStudentNo, dto.getStudentNo()) ); if (count 0) { errors.add(第 (i 2) 行学号 dto.getStudentNo() 不存在); } } if (!errors.isEmpty()) { return Result.fail(导入失败 String.join(, errors)); } // 批量插入每批 500 条 for (int i 0; i list.size(); i 500) { ListScoreImportDTO batch list.subList(i, Math.min(i 500, list.size())); scoreService.batchInsert(batch); } return Result.success(成功导入 list.size() 条成绩); } catch (IOException e) { return Result.fail(文件读取失败 e.getMessage()); } }这段代码里headRowNumber(1)指定表头占一行doReadSync()是同步读取适合数据量不大的场景。校验部分先检查学号是否为空再查数据库确认学号存在最后才批量插入。批量插入时每 500 条一批是因为 MySQL 的max_allowed_packet默认是 4MB一次插入太多可能超限。ScoreImportDTO类需要用ExcelProperty注解把 Excel 列名和字段对应起来比如ExcelProperty(学号)对应studentNo字段。4.2 统计报表的 SQL 聚合查询体测数据录入后老师最关心的是统计结果各项目的平均值、及格率、优秀率。这些用 SQL 聚合查询直接算比在 Java 里循环快得多。-- 各体测项目的平均分、最高分、最低分、及格率 SELECT ti.item_name AS 项目名称, ti.unit AS 单位, COUNT(s.id) AS 测试人数, ROUND(AVG(s.score_value), 2) AS 平均分, MAX(s.score_value) AS 最高分, MIN(s.score_value) AS 最低分, -- 及格率假设男生 50 米跑 9.1 秒及格女生 10.3 秒 ROUND( SUM(CASE WHEN ti.item_name 50米跑 AND st.gender 1 AND s.score_value 9.1 THEN 1 WHEN ti.item_name 50米跑 AND st.gender 2 AND s.score_value 10.3 THEN 1 ELSE 0 END) / COUNT(s.id) * 100, 1 ) AS 及格率 FROM score s JOIN student st ON s.student_id st.id JOIN test_item ti ON s.item_id ti.id WHERE s.test_date 2024-01-01 GROUP BY ti.id, ti.item_name, ti.unit ORDER BY ti.sort_order;这个查询里CASE WHEN用来处理不同性别、不同项目的及格标准差异。实际体测标准里每个项目的及格线都不一样而且男女有别。如果要把所有项目的及格率都算出来SQL 会变得很长常见做法是把及格标准配置在test_item表里加两个字段pass_rule_male和pass_rule_female存 JSON 格式的规则然后在 Java 层解析。这样 SQL 只需要做基础聚合及格率在 Service 层计算。4.3 前端路由和权限控制的配合体测系统一般有两种角色管理员老师和学生。管理员能录入成绩、管理学生信息学生只能查自己的成绩。前端路由需要根据角色动态控制。// router/index.js import { createRouter, createWebHistory } from vue-router const routes [ { path: /login, component: () import(/views/Login.vue) }, { path: /admin, component: () import(/views/AdminLayout.vue), meta: { requiresAuth: true, role: admin }, children: [ { path: students, component: () import(/views/StudentList.vue) }, { path: scores, component: () import(/views/ScoreEntry.vue) }, { path: report, component: () import(/views/Report.vue) } ] }, { path: /student, component: () import(/views/StudentLayout.vue), meta: { requiresAuth: true, role: student }, children: [ { path: my-scores, component: () import(/views/MyScores.vue) } ] } ] const router createRouter({ history: createWebHistory(), routes }) // 全局前置守卫 router.beforeEach((to, from, next) { const token localStorage.getItem(token) const role localStorage.getItem(role) if (to.meta.requiresAuth !token) { next(/login) } else if (to.meta.role to.meta.role ! role) { // 角色不匹配跳转到对应首页 next(role admin ? /admin/students : /student/my-scores) } else { next() } })路由守卫里to.meta.requiresAuth判断是否需要登录to.meta.role判断角色是否匹配。localStorage存 token 和 role 是最简单的做法但安全性不高生产环境建议用httpOnly的 Cookie 存 token。不过毕业设计级别的项目用localStorage完全够用老师也不会在这个点上为难你。注意前端路由守卫只是防君子不防小人真正的权限控制必须在后端接口层做。每个接口都要校验当前用户的角色不能只靠前端隐藏菜单。5. 避坑指南部署和运行中最容易翻车的五个地方5.1 跨域问题代理配了还是 403现象前端配了 Vite 代理但请求后端接口还是报 403 或 CORS 错误。原因Vite 代理只在开发环境生效如果前端打包后放到 Nginx 或 Spring Boot 的static目录下代理配置就失效了。另外有些后端配了 Spring Security默认会拦截所有请求需要在 Security 配置里放行/api/**。解决开发环境用 Vite 代理生产环境要么用 Nginx 反向代理要么在后端加CrossOrigin注解。如果用了 Spring Security在SecurityFilterChain里配置.requestMatchers(/api/**).permitAll()。5.2 MySQL 8.0 时区错误serverTimezone必须写现象后端启动时报The server time zone value йʱ is unrecognized。原因MySQL 8.0 的驱动要求 URL 里必须指定serverTimezone不指定就会用系统默认时区中文系统下会乱码。解决在 JDBC URL 里加上serverTimezoneAsia/Shanghai。如果用的是 MySQL 5.7驱动类名要改成com.mysql.jdbc.DriverURL 里不需要serverTimezone。5.3 前端打包后刷新 404history 模式的路由问题现象npm run build后把dist目录放到 Spring Boot 的static下访问首页正常但刷新子页面如/admin/students报 404。原因Vue Router 的createWebHistory模式依赖服务器配置服务器不认识/admin/students这个路径以为是在找静态文件。解决在 Spring Boot 里加一个配置把所有非静态资源请求转发到index.htmlConfiguration public class WebConfig implements WebMvcConfigurer { Override public void addResourceHandlers(ResourceHandlerRegistry registry) { registry.addResourceHandler(/**) .addResourceLocations(classpath:/static/); } // 关键把 /admin/** 和 /student/** 的请求转发到 index.html Override public void addViewControllers(ViewControllerRegistry registry) { registry.addViewController(/admin/**).setViewName(forward:/index.html); registry.addViewController(/student/**).setViewName(forward:/index.html); } }或者更简单的方式在 Nginx 里配try_files $uri $uri/ /index.html;。5.4 批量导入 Excel 时日期格式解析失败现象导入成绩 Excel 时报Cannot parse date或日期变成了一串数字如 45123。原因Excel 里的日期在底层是数字EasyExcel 默认按字符串读遇到日期格式就解析不了。解决在 DTO 的日期字段上加DateTimeFormat(yyyy-MM-dd)注解或者用ExcelProperty的converter属性指定日期转换器。如果 Excel 里日期格式不统一建议在导入模板里强制规定日期格式并在导入前做格式校验。5.5 端口占用8080 被其他程序占了现象启动后端时报Port 8080 was already in use。原因本机有其他程序比如另一个 Spring Boot 项目、Tomcat、或者某些开发工具占用了 8080 端口。解决改application.yml里的server.port为 8081 或其他空闲端口。如果不知道哪个端口被占了Windows 下用netstat -ano | findstr :8080查 PID然后taskkill /PID xxx /F杀掉进程。Mac 或 Linux 用lsof -i :8080。6. 进阶技巧把体测数据导出成可视化报表基础功能跑通后如果想让答辩时多一个亮点可以加一个数据导出和可视化功能。体测数据的可视化不需要搞得太复杂用 ECharts 画几个柱状图和饼图就够了。// 在 Report.vue 里用 ECharts 画各项目平均分柱状图 import * as echarts from echarts import { onMounted, ref } from vue import axios from axios const chartRef ref(null) let chartInstance null onMounted(async () { // 从后端获取统计数据 const { data } await axios.get(/api/report/summary) // data 格式[{ itemName: 50米跑, avgScore: 8.2 }, ...] chartInstance echarts.init(chartRef.value) chartInstance.setOption({ title: { text: 各体测项目平均分 }, tooltip: { trigger: axis }, xAxis: { type: category, data: data.map(item item.itemName), axisLabel: { rotate: 30 } // 项目名太长时倾斜显示 }, yAxis: { type: value, name: 平均分 }, series: [{ type: bar, data: data.map(item item.avgScore), itemStyle: { color: #5470c6 }, label: { show: true, position: top } }] }) // 窗口大小变化时自适应 window.addEventListener(resize, () chartInstance?.resize()) })这段代码里echarts.init绑定到chartRef对应的 DOM 元素上setOption里配置了标题、提示框、X 轴、Y 轴和柱状图系列。axisLabel.rotate设为 30 度是为了防止项目名太长导致重叠。window.addEventListener(resize)让图表在窗口大小变化时自动调整不加这行的话浏览器窗口缩放后图表会变形。导出 Excel 的功能可以用 EasyExcel 的写功能实现把统计结果写到一个新的 Excel 文件里返回给前端下载。关键点是设置响应头GetMapping(/export) public void exportReport(HttpServletResponse response) throws IOException { response.setContentType(application/vnd.openxmlformats-officedocument.spreadsheetml.sheet); response.setCharacterEncoding(utf-8); // 文件名用 URLEncoder 编码防止中文乱码 String fileName URLEncoder.encode(体测统计报表, UTF-8).replaceAll(\\, %20); response.setHeader(Content-Disposition, attachment;filename*utf-8 fileName .xlsx); ListReportVO list reportService.getSummary(); EasyExcel.write(response.getOutputStream(), ReportVO.class) .sheet(统计报表) .doWrite(list); }Content-Disposition里的filename*utf-8是 RFC 5987 规定的编码方式比直接写filename更兼容中文文件名。URLEncoder.encode之后要把替换成%20因为 URL 编码里代表空格但文件名里的空格应该用%20。从那以后我每次拿到一个前后端分离的源码包都会先确认三件事数据库字符集是不是utf8mb4、JDBC URL 有没有带serverTimezone、前端路由是不是 history 模式。这三件事确认完80% 的启动问题都能提前避开。希望帮到你。本文还有配套的精品资源点击获取