简介本资源是一套面向计算机专业本科生的毕业设计级实战项目聚焦校园竞赛全流程数字化管理适用于Java后端与Vue前端全栈学习者开展课设、大作业或毕业设计。系统基于Spring Boot构建后端服务Vue实现响应式前端界面MySQL支撑数据存储完整覆盖用户管理、竞赛发布、在线报名、成绩录入与统计分析等核心模块解决高校竞赛组织效率低、信息同步滞后、成绩管理手工化等实际问题。压缩包为RAR格式大小27.36MB包含可直接运行的源代码、配套SQL建表与初始化脚本、结构清晰的前后端工程目录及一份完整的毕业论文参考文档代码逻辑严谨、注释充分、数据库设计规范便于二次开发与功能拓展。目前已有54人下载学习适合零基础入门Spring BootVue整合开发也适合作为理解MVC分层架构、RESTful接口设计与前后端联调流程的典型范例。1. 为什么校园竞赛管理系统成了 SpringBoot Vue 毕业设计的“稳态选择”它真能跑通、改得动、交得上不是所有毕业设计都叫“校园竞赛管理系统”但几乎所有计算机/软件工程专业学生在开题前刷完 GitHub、CSDN 和知网后都会在 SpringBoot Vue 组合里撞见它——不是因为多前沿而是因为它刚好卡在「业务够真实、技术够典型、工作量够饱满、答辩够安全」的黄金交点上。它要处理学生报名、赛事发布、团队组队、作品提交、评委打分、结果公示、数据导出等完整闭环既避不开 SpringBoot 的 RESTful 接口设计、MyBatis-Plus 多表关联、JWT 权限控制、文件上传PDF/ZIP/视频、定时任务截止提醒也绕不开 Vue 的动态路由不同角色看到不同菜单、表单校验报名信息强约束、富文本编辑赛事说明支持图文、Excel 导入导出批量录入选手、ECharts 图表成绩分布可视化。更重要的是它不依赖外部 SaaS 服务、不涉及支付/短信等合规雷区、数据库结构清晰可画 ER 图、SQL 脚本可独立执行、前后端分离明确便于分工——这意味着你能在 68 周内从零搭起一个能演示、能调试、能截图、能写进论文“系统实现”章节的完整体。如果你正被导师催着定题、被答辩组问“你这个系统和教务系统有啥区别”或者刚 clone 下来一个 .rar 却发现pom.xml报红、npm run serve启不动、MySQL 表建不全——这篇笔记就是为你写的它不讲 SpringBoot 是什么只告诉你怎么让这个系统在你本地电脑上真正跑起来、改得明白、交得踏实。2. 从 .rar 解压到 localhost:8080 可访问SpringBoot Vue 双端启动的最小可行路径2.1 解压后第一眼该盯哪几个关键目录别急着mvn clean install拿到校园竞赛管理系统.rar解压后先别急着打开 IDE。用命令行或资源管理器快速扫三处backend/或server/或直接根目录下有pom.xml→ 这是 SpringBoot 后端模块frontend/或client/或vue/目录下有package.json→ 这是 Vue 前端模块sql/或doc/或根目录下有.sql文件如competition_db.sql→ 这是数据库脚本提示90% 的翻车发生在第一步——误把整个压缩包当做一个 Maven 工程导入 IDEA。正确做法是分别打开backend作为 Maven 项目和frontend作为普通文件夹用 VS Code 或 WebStorm 打开。常见目录结构示例以主流结构为准competition-system/ ├── backend/ # SpringBoot 后端 │ ├── pom.xml │ └── src/main/java/com/example/competition/... ├── frontend/ # Vue 前端 │ ├── package.json │ └── src/views/... ├── sql/ │ └── competition_init.sql └── README.md2.2 后端启动SpringBoot 版本、JDK、MySQL 驱动三件套必须对齐SpringBoot 毕业设计项目最常卡在版本兼容性上。.rar包里pom.xml的parent或spring-boot.version决定了你的 JDK 和 MySQL 驱动版本下限。我们按「保守可用」原则操作!-- backend/pom.xml 片段 -- parent groupIdorg.springframework.boot/groupId artifactIdspring-boot-starter-parent/artifactId version2.7.18/version !-- 注意这是 SpringBoot 2.x 最终维护版兼容 JDK 8/11 -- /parent对应环境要求JDK必须用 JDK 8 或 JDK 11JDK 17 在 2.7.x 会报java.lang.NoClassDefFoundError: javax/xml/bind/JAXBExceptionMySQL建议5.7 或 8.0.28 以下避免caching_sha2_password认证插件问题MySQL 驱动mysql:mysql-connector-java:8.0.28若用 MySQL 5.7请降为5.1.47启动前检查application.yml# backend/src/main/resources/application.yml spring: datasource: url: jdbc:mysql://localhost:3306/competition_db?useUnicodetruecharacterEncodingUTF-8serverTimezoneAsia/Shanghai username: root password: 123456 # ← 这里务必改成你本地 MySQL 实际密码 driver-class-name: com.mysql.cj.jdbc.Driver # MySQL 8 用此5.7 用 com.mysql.jdbc.Driver然后终端进入backend/目录执行mvn clean compile -Dmaven.test.skiptrue mvn spring-boot:run✅ 成功标志控制台输出Tomcat started on port(s): 8080 (http)且无Failed to configure a DataSource报错。2.3 前端启动Vue 版本与依赖安装的“静默陷阱”Vue 项目通常基于 Vue CLI 3/4 构建极少数用 Vite。先确认package.json中vue和vue-cli-service版本dependencies: { vue: ^2.6.14, // ← Vue 2 主流毕业设计版本 axios: ^0.21.4 }, devDependencies: { vue/cli-service: ^4.5.15 // ← Vue CLI 4.x 对应 Node.js 12~16 }对应 Node.js 版本强烈建议用 Node.js 14.21.3 LTSNode 16 在某些老 CLI 插件下会报ERR_OSSL_PEM_NO_START_LINE。安装依赖时务必加--legacy-peer-depscd frontend/ npm install --legacy-peer-deps npm run serve⚠️ 若报Cannot find module vue-template-compiler说明 Vue 版本与vue-template-compiler不匹配手动安装npm install vue-template-compiler2.6.14 --save-dev✅ 成功标志浏览器打开http://localhost:8080出现登录页非白屏、无Uncaught ReferenceError。2.4 数据库初始化SQL 脚本执行顺序与字符集硬坑别直接双击.sql文件用 Navicat 执行——90% 的乱码、插入失败、中文字段为空都源于字符集未显式声明。正确步骤以 MySQL 5.7 为例新建数据库显式指定字符集CREATE DATABASE competition_db CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;切换到该库USE competition_db;将competition_init.sql文件内容全选复制粘贴到 MySQL 客户端执行不要用“执行 SQL 文件”功能它常忽略SET NAMES utf8mb4检查关键表是否建好SHOW TABLES; -- 应含 student, competition, team, submission, score 等 SELECT * FROM user LIMIT 1; -- 查看是否有默认管理员账号如 admin/123456注意若 SQL 脚本开头无SET NAMES utf8mb4;请手动在第一行加上。否则INSERT INTO competition(name) VALUES(程序设计大赛);会存成??????。3. 登录进不去、列表空、提交报 400前后端联调必查的 5 个断点3.1 前端请求地址没配对proxy代理失效的三种表现Vue 开发服务器npm run serve默认端口是8080SpringBoot 默认也是8080——这会导致跨域但更致命的是端口冲突。实际开发中前端必须代理 API 请求到后端。检查frontend/vue.config.js// frontend/vue.config.js module.exports { devServer: { port: 8081, // ← 前端改用 8081避开后端 8080 proxy: { /api: { target: http://localhost:8080, // ← 必须指向 SpringBoot 端口 changeOrigin: true, pathRewrite: { ^/api: // ← 把 /api/students → 代理成 /students } } } } }验证方法打开浏览器开发者工具 → Network 标签 → 登录时看POST /api/login请求是否发出、状态码是否200、Preview 是否返回{code:200, data:{token:...}}。❌ 若请求地址变成http://localhost:8081/api/login且状态504→ 代理未生效检查vue.config.js是否在frontend/目录下、是否重启了npm run serve。3.2 JWT Token 未携带或过期登录成功却跳回登录页的真相SpringBoot 后端通常用AuthenticationPrincipal或自定义拦截器校验 JWT。前端登录成功后必须把 token 存入 localStorage 并在后续请求 header 中带上。检查frontend/src/utils/request.js或api/request.js// 确保 axios 请求拦截器存在 service.interceptors.request.use( config { const token localStorage.getItem(token) if (token) { config.headers.Authorization Bearer token // ← 关键header 名必须是 Authorization值是 Bearer 空格 token } return config }, error Promise.reject(error) )验证登录后打开 Application → Local Storage → 查看是否有token字段再刷新页面Network 中任意请求的 Request Headers 是否含Authorization: Bearer eyJhbGciOiJIUzI1NiIsInR5c...。3.3 MyBatis-Plus 分页失效列表为空但后端日志无 SQL 打印很多毕业设计用PageT但忘了配置分页插件。检查backend/src/main/java/com/example/config/MybatisPlusConfig.javaConfiguration public class MybatisPlusConfig { Bean public MybatisPlusInterceptor mybatisPlusInterceptor() { MybatisPlusInterceptor interceptor new MybatisPlusInterceptor(); interceptor.addInnerInterceptor(new PaginationInnerInterceptor(DbType.MYSQL)); // ← 必须有这一行 return interceptor; } }若缺失page(pageNum, pageSize)会退化为全表扫描且不报错——前端收不到数据后端日志也不打印 SQL。补上后重启即可。3.4 文件上传路径权限提交作品 ZIP 后提示 “上传失败” 的磁盘真相SpringBoot 默认上传路径是System.getProperty(user.home) /uploads但 Windows 用户目录含空格如C:\Users\张三\uploadsJava IO 易出错Linux 下若部署在/home但未赋权也会 500。解决方案二选一改路径在application.yml中显式指定绝对路径推荐competition: upload-path: D:/competition_uploads/ # Windows # competition.upload-path: /home/uploads/ # Linux加权限Linux 下执行sudo chmod -R 755 /home/uploadsWindows 下确保该目录存在且用户有写入权。并在 Controller 中使用PostMapping(/submit) public Result submit(RequestParam(file) MultipartFile file) { String uploadDir D:/competition_uploads/; // ← 与 yml 一致 File dest new File(uploadDir file.getOriginalFilename()); file.transferTo(dest); // ← 此处不再用相对路径 return Result.success(); }3.5 Vue 路由守卫未放行角色权限导致菜单空白或 403系统通常有student、teacher、admin三角色。前端路由通过meta.roles控制显示但若后端/api/profile返回的role字段名不一致比如返回userRole而非role守卫就会误判。检查frontend/src/router/index.js中的路由守卫router.beforeEach((to, from, next) { const role store.getters.role // ← 看这里取的是哪个 getter if (to.meta.roles !to.meta.roles.includes(role)) { next({ path: /403 }) } else { next() } })再检查store/modules/user.js中rolegettergetters: { role: state state.user.role || student // ← 确保 state.user 里真有 role 字段 }验证登录后 F12 → Console 输入store.state.user看返回对象是否含role: admin。若为userRole: admin则需修改 getter 为state.user.userRole。4. 毕业论文里的“系统实现”章节怎么写才不露怯代码片段、截图、流程图的硬核搭配法4.1 论文截图必须带“可验证时间戳”三类截图的生存指南答辩老师一眼就能看出截图是现 P 的还是真跑出来的。所有截图必须包含可验证的时间/状态信息截图类型必含元素为什么重要替代方案若无法截图登录成功页浏览器地址栏http://localhost:8081 右上角用户头像/姓名 时间右下角系统时间证明前端已启动、路由正常、用户已认证用curl -v http://localhost:8080/api/profile截 Terminal 输出赛事列表页表格左上角“共 12 条” 每行有“报名”按钮 当前时间在“截止时间”列可见证明后端分页、数据已入库、时间字段渲染正常截SELECT COUNT(*) FROM competition;结果作品提交页文件选择框显示demo.zip 上传进度条 100% 提交按钮变灰 控制台 Network 中POST /api/submission状态200证明文件上传链路完整截D:/competition_uploads/demo.zip文件属性创建时间血泪经验千万别用 PS 加“正在加载…”文字——答辩老师会当场让你现场打开系统。我见过三次学生因截图里时间是 2023 年 1 月而答辩在 2024 年 5 月被质疑真实性。4.2 代码片段只截“有业务逻辑的 8 行”拒绝整段RestController论文里贴代码不是为了凑字数而是证明你“真写了、懂原理、能解释”。每段代码必须满足✅ 有明确上下文如“图 3-5 学生报名接口核心校验逻辑”✅ 含 1 处关键注释如// 校验同一赛事下不可重复报名✅ 不超过 8 行超长用省略号...✅ 避开import和Override等模板代码反例整段 ControllerRestController RequestMapping(/api/student) public class StudentController { Autowired private StudentService studentService; PostMapping(/enroll) public Result enroll(RequestBody EnrollDTO dto) { ... } }正例聚焦业务// 图 3-5 学生报名防重逻辑StudentService.java public Result enroll(EnrollDTO dto) { LambdaQueryWrapperEnrollment wrapper new LambdaQueryWrapper(); wrapper.eq(Enrollment::getStudentId, dto.getStudentId()) .eq(Enrollment::getCompetitionId, dto.getCompetitionId()); if (enrollmentMapper.selectCount(wrapper) 0) { return Result.fail(您已报名该赛事不可重复提交); // ← 关键业务判断 } ... }4.3 流程图不用 VisioPlantUML 一行命令生成可复现图表Visio 图易失真、难修改、答辩时换电脑打不开。用 PlantUML 写文本导出 PNG全程可复现startuml title 学生报名流程 actor 学生 participant 前端 Vue as fe participant 后端 SpringBoot as be participant MySQL as db 学生 - fe: 点击【报名】 fe - be: POST /api/enroll {compId, teamName} be - db: 查询 enrollment 表 db -- be: 返回 count0 be - be: 创建 enrollment 记录 be -- fe: {code:200, msg:报名成功} fe -- 学生: 弹窗提示 enduml保存为enroll.pu用 VS Code 安装 PlantUML 插件右键 →Preview Current Diagram即实时渲染。导出 PNG 后插入论文答辩时可现场改文本重生成——比拖拽 Visio 强十倍。4.4 数据库 ER 图用 MySQL Workbench 反向工程拒绝手绘手绘 ER 图是答辩高危行为关系线画错、基数标反、主外键漏标。正确姿势在 MySQL Workbench 中连接本地competition_dbSchema →competition_db→ 右键 →Reverse Engineer...全选表 → Next → Finish自动生成的 EER Diagram 中右键 →Export as PNG重点检查student与enrollment间是一对多1:N线上标1和Ncompetition与submission间是“赛事可有多个作品”但submission表中competition_id是外键 → 关系线从submission指向competition所有主键字段id在图中带钥匙图标后悔药如果原 SQL 没建外键只靠应用层保证Workbench 反向工程会画成独立表。此时必须在 Workbench 中手动添加 Foreign Key再导出——否则论文里“参照完整性”描述不成立。5. 源代码交付前最后 3 分钟打包、校验、防删库的 Checklist5.1 打包前必须删除的 4 类敏感文件否则答辩翻车毕业设计源码交付 ≠ 把整个文件夹 zip 发给导师。以下文件必须人工删除或替换文件路径为什么必须删安全替代方案backend/src/main/resources/application.yml中的spring.datasource.password明文密码泄露风险改为password: ${DB_PASSWORD:root}并告知导师运行时加-DDB_PASSWORDxxxfrontend/.env.development中的VUE_APP_BASE_API暴露本地 IP/端口改为VUE_APP_BASE_API/api走代理或注释掉sql/competition_init.sql中的INSERT INTO user VALUES (1,admin,e10adc3949ba59abbe56e057f20f883e,admin);MD5 密码明文可破解改为INSERT INTO user VALUES (1,admin,$2a$10$QXqZ...,admin);用 BCrypt 加密123456backend/target/和frontend/dist/目录占用空间大、含编译产物、易被误认为“已部署”全删只留源码提示用 VS Code 全局搜索123456、root、localhost、password逐个确认是否在可交付文件中。5.2 交付包结构标准化让导师 30 秒定位关键内容导师不会解压后逐个点开看。交付.zip必须按此结构组织competition-system-delivery/ ├── 【必读】交付说明.txt # 3 行① 后端端口 8080前端 8081② 数据库名 competition_db③ 默认账号 admin/123456 ├── 源代码/ │ ├── backend/ # 仅含 src/、pom.xml、application.yml已脱敏 │ └── frontend/ # 仅含 src/、package.json、vue.config.js已脱敏 ├── 数据库/ │ └── competition_init.sql # 已含 SET NAMES utf8mb4;建库语句已删 ├── 论文/ │ └── 校园竞赛管理系统设计与实现.docx # 封面含学号、姓名、日期 └── 截图/ ├── 登录页.png ├── 赛事列表.png └── 作品提交.png禁止行为把target/、node_modules/、.idea/、.git/打包进去用“最新版”、“最终版”、“V2.0”等模糊命名在README.md里写“请自行配置环境”——导师没义务帮你配5.3 防删库终极验证用 Docker 一键还原环境附可抄命令最硬核的交付验证是让导师在自己电脑上 3 分钟跑起来。提供docker-compose.yml无需安装 Docker DesktopWin10/11 自带 WSL2# docker-compose.yml version: 3.8 services: mysql: image: mysql:5.7 environment: MYSQL_ROOT_PASSWORD: root MYSQL_DATABASE: competition_db ports: - 3306:3306 volumes: - ./sql:/docker-entrypoint-initdb.d # 自动执行 .sql backend: build: ./backend ports: - 8080:8080 environment: SPRING_PROFILES_ACTIVE: docker depends_on: - mysql frontend: build: ./frontend ports: - 8081:8080 depends_on: - backend配套backend/DockerfileFROM openjdk:11-jre-slim COPY target/competition-backend.jar app.jar ENTRYPOINT [java,-jar,/app.jar]交付时附一句“导师只需将docker-compose.yml与sql/放同级终端执行docker-compose up -d5 分钟后访问http://localhost:8081即可”。这是我带过的 17 届毕设里唯一让导师主动说“这届学生准备得最扎实”的交付方式——不是因为你代码多炫而是因为你把“他能不能顺利跑起来”这件事提前想到了、写清楚了、验证过了。希望帮到你。本文还有配套的精品资源点击获取