这次我们来看一个面向计算机专业毕业设计的完整项目一个基于 Java Vue Spring Boot MySQL 的编程训练系统。这个项目提供了从后端到前端再到数据库和文档的完整源码旨在帮助学生快速搭建一个可运行、可演示、可二次开发的毕业设计作品。对于正在为毕设选题和实现发愁的同学来说这类“开箱即用”的项目无疑能节省大量前期搭建框架的时间。项目的核心价值在于其完整性。它不仅仅是一堆代码而是配套了数据库脚本、部署文档甚至可能包含答辩相关的材料。这意味着你拿到手后重点可以从“从零搭建”转移到“理解业务逻辑”和“个性化定制”上。本文将带你快速了解这个项目的核心功能、技术栈构成、本地运行方法并探讨如何将其转化为你自己的毕业设计。我们将重点关注几个实用问题这个系统具体实现了哪些功能本地环境如何快速搭建并运行起来前后端如何联调数据库如何初始化以及拿到开源项目后如何有效地进行二次开发以满足你自己的毕设要求如果你需要的是一个结构清晰、技术栈主流、能快速跑起来的 Java Web 项目作为基础那么这篇文章会提供清晰的指引。1. 核心能力速览能力项说明项目类型基于 B/S 架构的 Web 应用 - 编程训练/在线评测系统技术栈后端Java Spring Boot MyBatis/MyBatis-Plus前端Vue.js Element UI/Ant Design Vue数据库MySQL核心功能用户管理、题目管理、代码在线提交与评测、成绩统计等部署方式本地 IDE 运行、打包 Jar/War 部署、Docker 部署视项目提供情况启动门槛需本地安装 JDK、Maven、Node.js、MySQL 等基础开发环境适合场景计算机相关专业毕业设计、课程设计、学习 Spring Boot Vue 前后端分离开发2. 适用场景与使用边界这个编程训练系统项目主要适用于以下几类人群和场景计算机专业毕业生正在寻找毕业设计课题需要一个完整、可运行、技术栈主流的项目作为基础进行二次开发和论文撰写。在校学生希望学习 Spring Boot 和 Vue 前后端分离开发实战通过研究一个成熟项目来理解模块划分、接口设计和数据流转。培训或教学教师或培训机构可用于演示一个完整的在线评测系统Online Judge, OJ的简易实现。使用边界与注意事项学习与参考为主该项目作为毕业设计源码提供其代码质量、架构设计、安全性可能未经严格的工业级考验。核心价值在于提供思路和快速可运行的Demo用于毕设答辩和入门学习是合适的但若直接用于生产环境需进行深度重构和安全加固。二次开发必要性直接使用未经修改的源码可能无法通过查重或满足个性化的毕设要求。必须进行功能增删改、界面调整、业务逻辑重构等二次开发将其转化为体现个人工作的成果。环境依赖需要使用者具备基本的 Java、Vue 和 MySQL 环境搭建与问题排查能力。版权与合规使用开源代码需遵守其对应的开源协议如 MIT, GPL 等在论文和答辩中应声明参考了开源项目并清晰阐述自己完成的工作部分。3. 环境准备与前置条件在开始运行项目之前请确保你的本地开发环境满足以下要求。这是项目能够成功启动的基础。1. 后端环境 (Java Side):JDK: 版本 1.8 或更高推荐 JDK 8, JDK 11 或 JDK 17。Spring Boot 2.x 通常兼容 JDK 8。# 检查Java版本 java -versionMaven: 用于管理项目依赖和构建。版本 3.6 即可。# 检查Maven版本 mvn -vIDE: IntelliJ IDEA (推荐) 或 Eclipse。IDEA 对 Spring Boot 和 Maven 支持更好。2. 数据库环境:MySQL: 版本 5.7 或 8.0。确保已安装并启动 MySQL 服务。# 登录MySQL检查 mysql -u root -p数据库管理工具: Navicat, MySQL Workbench 或 IDEA 自带的数据库工具用于执行 SQL 脚本和查看数据。3. 前端环境 (Vue Side):Node.js: 版本 14.x 或 16.x 较为稳定。包含 npm 包管理器。# 检查Node.js和npm版本 node -v npm -v包管理加速: 建议配置 npm 淘宝镜像或使用 yarn、pnpm 以加速依赖安装。# 设置npm淘宝镜像 npm config set registry https://registry.npmmirror.com4. 其他工具:Git: 用于克隆项目代码。浏览器: Chrome 或 Firefox用于访问前端页面。Postman 或 ApiFox: 用于测试后端 API 接口。4. 项目结构与源码导入通常这类前后端分离的项目源码会包含两个主要目录一个后端backend或server和一个前端frontend或web。也可能是一个 Maven 多模块项目。首先我们需要理解项目结构。1. 获取源码假设你已经从开源平台如 Gitee, GitHub下载或克隆了项目。2. 典型项目结构分析programming-training-system/ ├── server/ # Spring Boot 后端项目 │ ├── src/ │ │ ├── main/ │ │ │ ├── java/com/example/ # Java 源码包 │ │ │ │ ├── controller/ # 控制器层 │ │ │ │ ├── service/ # 业务逻辑层 │ │ │ │ ├── mapper/ # 数据访问层MyBatis接口 │ │ │ │ ├── entity/ # 实体类对应数据库表 │ │ │ │ └── config/ # 配置类 │ │ │ └── resources/ │ │ │ ├── application.yml # 主配置文件数据库连接等 │ │ │ ├── mapper/ # MyBatis XML映射文件 │ │ │ └── static/ # 静态资源 │ │ └── test/ │ ├── pom.xml # Maven依赖配置文件 │ └── target/ # 编译输出目录运行后生成 ├── web/ # Vue 前端项目 │ ├── public/ # 静态资源 │ ├── src/ │ │ ├── api/ # 封装的axios请求接口 │ │ ├── assets/ # 图片、样式等资源 │ │ ├── components/ # 公共组件 │ │ ├── router/ # 路由配置 │ │ ├── store/ # Vuex状态管理如有 │ │ ├── views/ # 页面组件 │ │ └── main.js # 入口文件 │ ├── package.json # 前端依赖配置文件 │ ├── vue.config.js # Vue CLI 配置文件可配置代理 │ └── babel.config.js ├── database/ # 数据库相关 │ └── programming_training.sql # 数据库初始化SQL脚本 └── README.md # 项目说明文档3. 导入后端项目到 IDE:打开 IntelliJ IDEA选择File-Open找到并选中后端的pom.xml文件以 Maven 项目形式打开。IDEA 会自动识别并开始下载依赖Maven Reload。等待右下角进度条完成。4. 导入前端项目:前端项目是一个标准的 Vue CLI 项目不需要用 IDE 特别导入。我们主要在终端Terminal中操作它。5. 数据库初始化与配置这是让后端服务能够正常启动的关键一步。1. 创建数据库使用 MySQL 客户端连接你的 MySQL 服务创建一个新的数据库字符集建议使用utf8mb4。CREATE DATABASE programming_training DEFAULT CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;2. 执行初始化脚本找到项目中的database/programming_training.sql文件或类似名称在 MySQL 客户端中执行这个 SQL 文件。这将创建所有数据表并可能插入一些初始数据如管理员账号、示例题目。-- 在MySQL客户端中执行 USE programming_training; SOURCE /path/to/your/project/database/programming_training.sql; -- 或者直接复制SQL文件内容到客户端执行3. 配置后端数据库连接打开后端项目的src/main/resources/application.yml或application.properties文件。找到数据库配置部分修改为你本地 MySQL 的实际信息。# application.yml 示例配置 spring: datasource: driver-class-name: com.mysql.cj.jdbc.Driver url: jdbc:mysql://localhost:3306/programming_training?useUnicodetruecharacterEncodingutf8useSSLfalseserverTimezoneAsia/Shanghai username: root # 你的MySQL用户名 password: your_password # 你的MySQL密码注意如果项目使用application.properties配置格式为spring.datasource.urljdbc:mysql://...。6. 后端服务启动与验证配置好数据库后就可以启动 Spring Boot 后端服务了。1. 检查依赖与配置确保 IDEA 的 Maven 依赖都已下载成功无红色错误。检查application.yml中的配置特别是数据库连接信息。2. 找到启动类在后端项目的src/main/java目录下找到一个包含SpringBootApplication注解的类通常命名为XxxApplication例如ProgrammingTrainingApplication。这个类就是 Spring Boot 应用的入口。3. 运行启动类右键点击这个启动类选择Run ‘XxxApplication’。IDEA 会启动内嵌的 Tomcat 服务器。4. 观察控制台日志启动成功后控制台会打印出 Spring Boot 的 Banner 和一系列日志。重点关注以下几点没有出现APPLICATION FAILED TO START之类的错误。能看到Tomcat started on port(s): 8080端口号可能不同取决于配置。能看到数据源初始化成功的日志例如DataSource initialized。如果项目配置了接口文档如 Swagger/knife4j日志中会提示访问地址如http://localhost:8080/doc.html。5. 验证后端 API打开浏览器或 Postman访问一些内置的接口进行测试。常见的健康检查或登录接口可能是GET http://localhost:8080/ # 可能返回简单欢迎页 GET http://localhost:8080/api/health # 健康检查如果存在 POST http://localhost:8080/api/user/login # 登录接口需查看具体代码或文档如果配置了 Swagger直接访问http://localhost:8080/swagger-ui.html或http://localhost:8080/doc.html可以查看和测试所有接口。7. 前端项目启动与联调后端服务正常运行后接下来启动前端 Vue 项目。1. 安装前端依赖打开终端命令行进入前端项目根目录web/。cd /path/to/your/project/web npm install # 或使用 yarn yarn install # 或使用 pnpm pnpm install此命令会根据package.json安装所有依赖包。网络状况会影响安装速度建议使用镜像。2. 配置前端代理解决跨域在本地开发时前端运行在某个端口如:8081后端在另一个端口如:8080浏览器会因同源策略阻止请求。需要在 Vue 项目中配置代理。 打开vue.config.js文件如果没有则创建添加如下配置module.exports { devServer: { port: 8081, // 前端开发服务器端口 proxy: { /api: { // 拦截以 /api 开头的请求 target: http://localhost:8080, // 后端服务地址 changeOrigin: true, pathRewrite: { ^/api: // 重写路径去掉 /api 前缀根据后端实际接口路径调整 } } } } }注意pathRewrite的配置需要根据后端接口的实际前缀来调整。如果后端接口本身就是/api/xxx则可能不需要重写。3. 启动前端开发服务器在终端中执行npm run serve # 或 yarn serve启动成功后终端会显示类似App running at: - Local: http://localhost:8081的信息。4. 访问前端页面打开浏览器访问http://localhost:8081。你应该能看到编程训练系统的登录页或主页。5. 前后端联调测试尝试使用初始化的账号通常在 SQL 脚本或项目文档中提供如 admin/123456进行登录。登录后尝试浏览题目列表、查看题目详情。核心功能测试选择一个简单的编程题如 AB Problem在代码编辑器中编写代码点击提交。观察后端是否返回评测结果如“通过”、“错误答案”、“编译错误”等。测试用户管理、题目管理如果权限允许等其他功能。8. 核心功能模块详解与二次开发切入点理解现有功能是二次开发的基础。一个典型的编程训练系统包含以下模块1. 用户管理模块功能用户注册、登录、权限控制普通用户、管理员、个人信息管理。二次开发点增加邮箱验证、手机号绑定。实现更细粒度的角色权限如教师、助教。添加用户活跃度统计、头像上传。2. 题目管理模块功能题目的增删改查、题目分类算法、数据结构、数据库等、难度设置、标签管理。二次开发点支持题目富文本描述插入图片、代码块、公式。增加测试用例的上传和批量导入功能。实现题目的版本管理或审核流程。3. 代码提交与评测模块核心功能在线代码编辑器、支持多语言Java, C, Python、提交代码、异步评测、返回结果AC, WA, TLE, MLE, CE等。二次开发点集成评测机这是最大的难点和亮点。如果原项目评测逻辑简单如直接比对输出可以尝试集成开源的评测核心如 Judge0, QDUOJ 的判题机实现沙箱安全运行和资源限制。增加代码高亮、自动补全。支持自定义输入测试在提交前运行。实现竞赛模式定时开始、排名。4. 比赛与作业模块功能创建比赛/作业、添加题目、设置时间、排名榜。二次开发点如果原项目没有此模块可以作为一个重要的新增模块来开发。5. 数据统计与可视化模块功能用户解题排行、题目通过率统计、个人成绩报告。二次开发点使用 ECharts 等库制作更丰富的可视化图表如每日提交趋势、知识点掌握雷达图等。9. 常见问题与排查方法在部署和运行过程中你可能会遇到以下问题问题现象可能原因排查方式解决方案后端启动失败报DataSource相关错误1. 数据库配置错误IP、端口、库名、用户名、密码2. MySQL 服务未启动3. 数据库驱动版本不匹配1. 检查application.yml中的spring.datasource配置2. 命令行执行mysql -u root -p测试连接3. 查看 pom.xml 中mysql-connector-java的版本1. 修正配置信息2. 启动 MySQL 服务 (net start mysql)3. 调整驱动版本与 MySQL 版本匹配前端npm install失败网络超时或包找不到1. 网络问题2. node-sass 等二进制包编译失败旧项目常见1. 检查网络使用npm config get registry查看镜像2. 查看错误日志是否提示 Python 或 C 编译环境缺失1. 切换 npm 镜像源为淘宝源2. 对于 node-sass 问题可尝试npm install --save-dev node-sass --force或升级到dart-sass(sass)前端页面能打开但所有 API 请求都 4041. 前端代理配置错误2. 后端服务未启动或端口不对3. 后端接口路径与前端的请求路径不匹配1. 检查浏览器开发者工具 Network 面板看请求发往哪个地址2. 确认后端服务是否在运行 (localhost:8080)3. 核对vue.config.js中的proxy配置和target1. 修正vue.config.js的代理配置2. 确保后端服务已启动3. 统一前后端的接口根路径如都使用/api登录失败提示用户名密码错误1. 数据库未初始化或初始账号密码不对2. 密码加密方式不匹配1. 检查数据库user表中是否有初始账号2. 查看后端登录代码的密码校验逻辑如 MD5, BCrypt1. 重新执行 SQL 脚本或手动插入一个测试用户2. 如果忘记密码可以暂时修改后端代码将登录校验逻辑注释掉直接返回成功仅用于测试完成后需还原提交代码后一直“等待评测”或报内部错误1. 评测服务Judge未启动或配置错误2. 代码运行沙箱环境问题3. 异步任务队列如 RabbitMQ, Redis未配置1. 查看后端日志寻找评测相关的错误信息2. 检查项目中关于评测机judge的配置文件和启动类1. 根据项目文档配置评测模块2. 如果评测逻辑复杂初期可简化先实现一个直接比对字符串的评测器10. 项目打包与部署本地开发调试完成后你可能需要将项目打包用于演示或部署到服务器。1. 后端打包 (Spring Boot):在后端项目根目录下执行 Maven 打包命令生成可执行的 Jar 文件。cd /path/to/server mvn clean package -DskipTests打包成功后在target/目录下会生成一个xxx-0.0.1-SNAPSHOT.jar文件。你可以使用java -jar命令直接运行它。java -jar target/programming-training-0.0.1-SNAPSHOT.jar2. 前端打包 (Vue):在前端项目根目录下执行构建命令生成静态文件。cd /path/to/web npm run build # 或 yarn build构建成功后会在项目下生成一个dist/目录里面是压缩优化后的 HTML、CSS、JS 文件。3. 生产环境部署方式一前后端分离部署将后端 Jar 包运行在服务器上使用nohup或配置为系统服务。将前端dist/目录下的文件放到 Nginx 或 Apache 等 Web 服务器中并配置反向代理将/api请求转发到后端服务。方式二前后端合并部署将前端dist/目录下的所有文件复制到 Spring Boot 项目的src/main/resources/static/目录下。然后重新打包后端。这样访问 Jar 包就直接可以访问到前端页面Spring Boot 默认将静态资源映射到/。这种方式更简单适合小型项目演示。11. 二次开发与毕业设计深化建议拿到一个可运行的项目只是起点将其转化为你的毕业设计需要进行实质性的工作。需求分析与功能重构仔细阅读代码画出系统的功能结构图和数据流图。思考哪些功能可以改进哪些需要新增。例如增加“学习路径推荐”、“代码相似度检测防抄袭”、“在线组队编程”等功能。数据库设计优化分析现有的数据库表结构思考是否可以优化以满足新功能。例如为支持比赛功能可能需要新增contest,user_contest等表。代码重构与注释对核心模块如评测逻辑、权限拦截器的代码进行深入研究添加清晰的注释。尝试重构你认为写得不够好的部分比如将硬编码的配置提取到配置文件中使用设计模式优化代码结构。界面美化与用户体验前端界面是答辩时的门面。使用 Element UI 或 Ant Design Vue 的组件进行美化调整布局、颜色、交互细节让系统看起来更专业。撰写设计文档基于你的修改和新增功能重新编写系统设计说明书、数据库设计说明书、用户手册等毕业设计文档。这是体现你工作量的关键。性能与安全考虑在论文中讨论你考虑过的性能问题如数据库索引、缓存 Redis 的使用和安全问题如 SQL 注入防护、XSS 过滤、密码加密存储。这个编程训练系统项目提供了一个非常扎实的 Spring Boot Vue 全栈开发实践样板。通过本地部署、功能测试、代码研读和二次开发这一完整流程你不仅能得到一个可以演示的毕设作品更能深入理解一个中型 Web 应用的架构与实现。建议从修复一个小 Bug 或添加一个简单功能开始逐步深入最终形成一份属于你自己的、有独特亮点的毕业设计。
Java+Vue+SpringBoot编程训练系统：毕业设计完整项目搭建与二次开发指南
这次我们来看一个面向计算机专业毕业设计的完整项目一个基于 Java Vue Spring Boot MySQL 的编程训练系统。这个项目提供了从后端到前端再到数据库和文档的完整源码旨在帮助学生快速搭建一个可运行、可演示、可二次开发的毕业设计作品。对于正在为毕设选题和实现发愁的同学来说这类“开箱即用”的项目无疑能节省大量前期搭建框架的时间。项目的核心价值在于其完整性。它不仅仅是一堆代码而是配套了数据库脚本、部署文档甚至可能包含答辩相关的材料。这意味着你拿到手后重点可以从“从零搭建”转移到“理解业务逻辑”和“个性化定制”上。本文将带你快速了解这个项目的核心功能、技术栈构成、本地运行方法并探讨如何将其转化为你自己的毕业设计。我们将重点关注几个实用问题这个系统具体实现了哪些功能本地环境如何快速搭建并运行起来前后端如何联调数据库如何初始化以及拿到开源项目后如何有效地进行二次开发以满足你自己的毕设要求如果你需要的是一个结构清晰、技术栈主流、能快速跑起来的 Java Web 项目作为基础那么这篇文章会提供清晰的指引。1. 核心能力速览能力项说明项目类型基于 B/S 架构的 Web 应用 - 编程训练/在线评测系统技术栈后端Java Spring Boot MyBatis/MyBatis-Plus前端Vue.js Element UI/Ant Design Vue数据库MySQL核心功能用户管理、题目管理、代码在线提交与评测、成绩统计等部署方式本地 IDE 运行、打包 Jar/War 部署、Docker 部署视项目提供情况启动门槛需本地安装 JDK、Maven、Node.js、MySQL 等基础开发环境适合场景计算机相关专业毕业设计、课程设计、学习 Spring Boot Vue 前后端分离开发2. 适用场景与使用边界这个编程训练系统项目主要适用于以下几类人群和场景计算机专业毕业生正在寻找毕业设计课题需要一个完整、可运行、技术栈主流的项目作为基础进行二次开发和论文撰写。在校学生希望学习 Spring Boot 和 Vue 前后端分离开发实战通过研究一个成熟项目来理解模块划分、接口设计和数据流转。培训或教学教师或培训机构可用于演示一个完整的在线评测系统Online Judge, OJ的简易实现。使用边界与注意事项学习与参考为主该项目作为毕业设计源码提供其代码质量、架构设计、安全性可能未经严格的工业级考验。核心价值在于提供思路和快速可运行的Demo用于毕设答辩和入门学习是合适的但若直接用于生产环境需进行深度重构和安全加固。二次开发必要性直接使用未经修改的源码可能无法通过查重或满足个性化的毕设要求。必须进行功能增删改、界面调整、业务逻辑重构等二次开发将其转化为体现个人工作的成果。环境依赖需要使用者具备基本的 Java、Vue 和 MySQL 环境搭建与问题排查能力。版权与合规使用开源代码需遵守其对应的开源协议如 MIT, GPL 等在论文和答辩中应声明参考了开源项目并清晰阐述自己完成的工作部分。3. 环境准备与前置条件在开始运行项目之前请确保你的本地开发环境满足以下要求。这是项目能够成功启动的基础。1. 后端环境 (Java Side):JDK: 版本 1.8 或更高推荐 JDK 8, JDK 11 或 JDK 17。Spring Boot 2.x 通常兼容 JDK 8。# 检查Java版本 java -versionMaven: 用于管理项目依赖和构建。版本 3.6 即可。# 检查Maven版本 mvn -vIDE: IntelliJ IDEA (推荐) 或 Eclipse。IDEA 对 Spring Boot 和 Maven 支持更好。2. 数据库环境:MySQL: 版本 5.7 或 8.0。确保已安装并启动 MySQL 服务。# 登录MySQL检查 mysql -u root -p数据库管理工具: Navicat, MySQL Workbench 或 IDEA 自带的数据库工具用于执行 SQL 脚本和查看数据。3. 前端环境 (Vue Side):Node.js: 版本 14.x 或 16.x 较为稳定。包含 npm 包管理器。# 检查Node.js和npm版本 node -v npm -v包管理加速: 建议配置 npm 淘宝镜像或使用 yarn、pnpm 以加速依赖安装。# 设置npm淘宝镜像 npm config set registry https://registry.npmmirror.com4. 其他工具:Git: 用于克隆项目代码。浏览器: Chrome 或 Firefox用于访问前端页面。Postman 或 ApiFox: 用于测试后端 API 接口。4. 项目结构与源码导入通常这类前后端分离的项目源码会包含两个主要目录一个后端backend或server和一个前端frontend或web。也可能是一个 Maven 多模块项目。首先我们需要理解项目结构。1. 获取源码假设你已经从开源平台如 Gitee, GitHub下载或克隆了项目。2. 典型项目结构分析programming-training-system/ ├── server/ # Spring Boot 后端项目 │ ├── src/ │ │ ├── main/ │ │ │ ├── java/com/example/ # Java 源码包 │ │ │ │ ├── controller/ # 控制器层 │ │ │ │ ├── service/ # 业务逻辑层 │ │ │ │ ├── mapper/ # 数据访问层MyBatis接口 │ │ │ │ ├── entity/ # 实体类对应数据库表 │ │ │ │ └── config/ # 配置类 │ │ │ └── resources/ │ │ │ ├── application.yml # 主配置文件数据库连接等 │ │ │ ├── mapper/ # MyBatis XML映射文件 │ │ │ └── static/ # 静态资源 │ │ └── test/ │ ├── pom.xml # Maven依赖配置文件 │ └── target/ # 编译输出目录运行后生成 ├── web/ # Vue 前端项目 │ ├── public/ # 静态资源 │ ├── src/ │ │ ├── api/ # 封装的axios请求接口 │ │ ├── assets/ # 图片、样式等资源 │ │ ├── components/ # 公共组件 │ │ ├── router/ # 路由配置 │ │ ├── store/ # Vuex状态管理如有 │ │ ├── views/ # 页面组件 │ │ └── main.js # 入口文件 │ ├── package.json # 前端依赖配置文件 │ ├── vue.config.js # Vue CLI 配置文件可配置代理 │ └── babel.config.js ├── database/ # 数据库相关 │ └── programming_training.sql # 数据库初始化SQL脚本 └── README.md # 项目说明文档3. 导入后端项目到 IDE:打开 IntelliJ IDEA选择File-Open找到并选中后端的pom.xml文件以 Maven 项目形式打开。IDEA 会自动识别并开始下载依赖Maven Reload。等待右下角进度条完成。4. 导入前端项目:前端项目是一个标准的 Vue CLI 项目不需要用 IDE 特别导入。我们主要在终端Terminal中操作它。5. 数据库初始化与配置这是让后端服务能够正常启动的关键一步。1. 创建数据库使用 MySQL 客户端连接你的 MySQL 服务创建一个新的数据库字符集建议使用utf8mb4。CREATE DATABASE programming_training DEFAULT CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;2. 执行初始化脚本找到项目中的database/programming_training.sql文件或类似名称在 MySQL 客户端中执行这个 SQL 文件。这将创建所有数据表并可能插入一些初始数据如管理员账号、示例题目。-- 在MySQL客户端中执行 USE programming_training; SOURCE /path/to/your/project/database/programming_training.sql; -- 或者直接复制SQL文件内容到客户端执行3. 配置后端数据库连接打开后端项目的src/main/resources/application.yml或application.properties文件。找到数据库配置部分修改为你本地 MySQL 的实际信息。# application.yml 示例配置 spring: datasource: driver-class-name: com.mysql.cj.jdbc.Driver url: jdbc:mysql://localhost:3306/programming_training?useUnicodetruecharacterEncodingutf8useSSLfalseserverTimezoneAsia/Shanghai username: root # 你的MySQL用户名 password: your_password # 你的MySQL密码注意如果项目使用application.properties配置格式为spring.datasource.urljdbc:mysql://...。6. 后端服务启动与验证配置好数据库后就可以启动 Spring Boot 后端服务了。1. 检查依赖与配置确保 IDEA 的 Maven 依赖都已下载成功无红色错误。检查application.yml中的配置特别是数据库连接信息。2. 找到启动类在后端项目的src/main/java目录下找到一个包含SpringBootApplication注解的类通常命名为XxxApplication例如ProgrammingTrainingApplication。这个类就是 Spring Boot 应用的入口。3. 运行启动类右键点击这个启动类选择Run ‘XxxApplication’。IDEA 会启动内嵌的 Tomcat 服务器。4. 观察控制台日志启动成功后控制台会打印出 Spring Boot 的 Banner 和一系列日志。重点关注以下几点没有出现APPLICATION FAILED TO START之类的错误。能看到Tomcat started on port(s): 8080端口号可能不同取决于配置。能看到数据源初始化成功的日志例如DataSource initialized。如果项目配置了接口文档如 Swagger/knife4j日志中会提示访问地址如http://localhost:8080/doc.html。5. 验证后端 API打开浏览器或 Postman访问一些内置的接口进行测试。常见的健康检查或登录接口可能是GET http://localhost:8080/ # 可能返回简单欢迎页 GET http://localhost:8080/api/health # 健康检查如果存在 POST http://localhost:8080/api/user/login # 登录接口需查看具体代码或文档如果配置了 Swagger直接访问http://localhost:8080/swagger-ui.html或http://localhost:8080/doc.html可以查看和测试所有接口。7. 前端项目启动与联调后端服务正常运行后接下来启动前端 Vue 项目。1. 安装前端依赖打开终端命令行进入前端项目根目录web/。cd /path/to/your/project/web npm install # 或使用 yarn yarn install # 或使用 pnpm pnpm install此命令会根据package.json安装所有依赖包。网络状况会影响安装速度建议使用镜像。2. 配置前端代理解决跨域在本地开发时前端运行在某个端口如:8081后端在另一个端口如:8080浏览器会因同源策略阻止请求。需要在 Vue 项目中配置代理。 打开vue.config.js文件如果没有则创建添加如下配置module.exports { devServer: { port: 8081, // 前端开发服务器端口 proxy: { /api: { // 拦截以 /api 开头的请求 target: http://localhost:8080, // 后端服务地址 changeOrigin: true, pathRewrite: { ^/api: // 重写路径去掉 /api 前缀根据后端实际接口路径调整 } } } } }注意pathRewrite的配置需要根据后端接口的实际前缀来调整。如果后端接口本身就是/api/xxx则可能不需要重写。3. 启动前端开发服务器在终端中执行npm run serve # 或 yarn serve启动成功后终端会显示类似App running at: - Local: http://localhost:8081的信息。4. 访问前端页面打开浏览器访问http://localhost:8081。你应该能看到编程训练系统的登录页或主页。5. 前后端联调测试尝试使用初始化的账号通常在 SQL 脚本或项目文档中提供如 admin/123456进行登录。登录后尝试浏览题目列表、查看题目详情。核心功能测试选择一个简单的编程题如 AB Problem在代码编辑器中编写代码点击提交。观察后端是否返回评测结果如“通过”、“错误答案”、“编译错误”等。测试用户管理、题目管理如果权限允许等其他功能。8. 核心功能模块详解与二次开发切入点理解现有功能是二次开发的基础。一个典型的编程训练系统包含以下模块1. 用户管理模块功能用户注册、登录、权限控制普通用户、管理员、个人信息管理。二次开发点增加邮箱验证、手机号绑定。实现更细粒度的角色权限如教师、助教。添加用户活跃度统计、头像上传。2. 题目管理模块功能题目的增删改查、题目分类算法、数据结构、数据库等、难度设置、标签管理。二次开发点支持题目富文本描述插入图片、代码块、公式。增加测试用例的上传和批量导入功能。实现题目的版本管理或审核流程。3. 代码提交与评测模块核心功能在线代码编辑器、支持多语言Java, C, Python、提交代码、异步评测、返回结果AC, WA, TLE, MLE, CE等。二次开发点集成评测机这是最大的难点和亮点。如果原项目评测逻辑简单如直接比对输出可以尝试集成开源的评测核心如 Judge0, QDUOJ 的判题机实现沙箱安全运行和资源限制。增加代码高亮、自动补全。支持自定义输入测试在提交前运行。实现竞赛模式定时开始、排名。4. 比赛与作业模块功能创建比赛/作业、添加题目、设置时间、排名榜。二次开发点如果原项目没有此模块可以作为一个重要的新增模块来开发。5. 数据统计与可视化模块功能用户解题排行、题目通过率统计、个人成绩报告。二次开发点使用 ECharts 等库制作更丰富的可视化图表如每日提交趋势、知识点掌握雷达图等。9. 常见问题与排查方法在部署和运行过程中你可能会遇到以下问题问题现象可能原因排查方式解决方案后端启动失败报DataSource相关错误1. 数据库配置错误IP、端口、库名、用户名、密码2. MySQL 服务未启动3. 数据库驱动版本不匹配1. 检查application.yml中的spring.datasource配置2. 命令行执行mysql -u root -p测试连接3. 查看 pom.xml 中mysql-connector-java的版本1. 修正配置信息2. 启动 MySQL 服务 (net start mysql)3. 调整驱动版本与 MySQL 版本匹配前端npm install失败网络超时或包找不到1. 网络问题2. node-sass 等二进制包编译失败旧项目常见1. 检查网络使用npm config get registry查看镜像2. 查看错误日志是否提示 Python 或 C 编译环境缺失1. 切换 npm 镜像源为淘宝源2. 对于 node-sass 问题可尝试npm install --save-dev node-sass --force或升级到dart-sass(sass)前端页面能打开但所有 API 请求都 4041. 前端代理配置错误2. 后端服务未启动或端口不对3. 后端接口路径与前端的请求路径不匹配1. 检查浏览器开发者工具 Network 面板看请求发往哪个地址2. 确认后端服务是否在运行 (localhost:8080)3. 核对vue.config.js中的proxy配置和target1. 修正vue.config.js的代理配置2. 确保后端服务已启动3. 统一前后端的接口根路径如都使用/api登录失败提示用户名密码错误1. 数据库未初始化或初始账号密码不对2. 密码加密方式不匹配1. 检查数据库user表中是否有初始账号2. 查看后端登录代码的密码校验逻辑如 MD5, BCrypt1. 重新执行 SQL 脚本或手动插入一个测试用户2. 如果忘记密码可以暂时修改后端代码将登录校验逻辑注释掉直接返回成功仅用于测试完成后需还原提交代码后一直“等待评测”或报内部错误1. 评测服务Judge未启动或配置错误2. 代码运行沙箱环境问题3. 异步任务队列如 RabbitMQ, Redis未配置1. 查看后端日志寻找评测相关的错误信息2. 检查项目中关于评测机judge的配置文件和启动类1. 根据项目文档配置评测模块2. 如果评测逻辑复杂初期可简化先实现一个直接比对字符串的评测器10. 项目打包与部署本地开发调试完成后你可能需要将项目打包用于演示或部署到服务器。1. 后端打包 (Spring Boot):在后端项目根目录下执行 Maven 打包命令生成可执行的 Jar 文件。cd /path/to/server mvn clean package -DskipTests打包成功后在target/目录下会生成一个xxx-0.0.1-SNAPSHOT.jar文件。你可以使用java -jar命令直接运行它。java -jar target/programming-training-0.0.1-SNAPSHOT.jar2. 前端打包 (Vue):在前端项目根目录下执行构建命令生成静态文件。cd /path/to/web npm run build # 或 yarn build构建成功后会在项目下生成一个dist/目录里面是压缩优化后的 HTML、CSS、JS 文件。3. 生产环境部署方式一前后端分离部署将后端 Jar 包运行在服务器上使用nohup或配置为系统服务。将前端dist/目录下的文件放到 Nginx 或 Apache 等 Web 服务器中并配置反向代理将/api请求转发到后端服务。方式二前后端合并部署将前端dist/目录下的所有文件复制到 Spring Boot 项目的src/main/resources/static/目录下。然后重新打包后端。这样访问 Jar 包就直接可以访问到前端页面Spring Boot 默认将静态资源映射到/。这种方式更简单适合小型项目演示。11. 二次开发与毕业设计深化建议拿到一个可运行的项目只是起点将其转化为你的毕业设计需要进行实质性的工作。需求分析与功能重构仔细阅读代码画出系统的功能结构图和数据流图。思考哪些功能可以改进哪些需要新增。例如增加“学习路径推荐”、“代码相似度检测防抄袭”、“在线组队编程”等功能。数据库设计优化分析现有的数据库表结构思考是否可以优化以满足新功能。例如为支持比赛功能可能需要新增contest,user_contest等表。代码重构与注释对核心模块如评测逻辑、权限拦截器的代码进行深入研究添加清晰的注释。尝试重构你认为写得不够好的部分比如将硬编码的配置提取到配置文件中使用设计模式优化代码结构。界面美化与用户体验前端界面是答辩时的门面。使用 Element UI 或 Ant Design Vue 的组件进行美化调整布局、颜色、交互细节让系统看起来更专业。撰写设计文档基于你的修改和新增功能重新编写系统设计说明书、数据库设计说明书、用户手册等毕业设计文档。这是体现你工作量的关键。性能与安全考虑在论文中讨论你考虑过的性能问题如数据库索引、缓存 Redis 的使用和安全问题如 SQL 注入防护、XSS 过滤、密码加密存储。这个编程训练系统项目提供了一个非常扎实的 Spring Boot Vue 全栈开发实践样板。通过本地部署、功能测试、代码研读和二次开发这一完整流程你不仅能得到一个可以演示的毕设作品更能深入理解一个中型 Web 应用的架构与实现。建议从修复一个小 Bug 或添加一个简单功能开始逐步深入最终形成一份属于你自己的、有独特亮点的毕业设计。
