简介本资源是一套面向计算机专业本科生的Java高分毕业设计实战项目基于SpringBoot后端与Vue前端构建编程训练系统解决课程实践、毕业设计选题与工程能力落地等核心需求适用于毕设开题、中期答辩及期末综合实训。压缩包共758个文件47.62MB涵盖131个Java后端业务与控制器代码、151个JavaScript交互逻辑、38个Vue组件页面、42个CSS样式与162个SVG图标资源辅以SQL建表脚本、Bat一键部署脚本install/run/build、YML配置及MP4演示视频结构完整、模块清晰。已有149人学习下载项目经Windows 10/11环境实测可直接运行含详细部署文档与97分答辩级实现方案提供从环境搭建、功能演示到代码调试的全流程支撑显著降低毕设实施门槛。1. 项目背景与核心价值最近在整理硬盘翻出来一个压箱底的毕业设计项目是一个基于SpringBoot和Vue的编程训练系统。当时为了拿高分从需求分析、技术选型、前后端开发到部署演示几乎把能踩的坑都踩了一遍也把能优化的点都优化了。这个项目麻雀虽小五脏俱全涵盖了用户管理、题库管理、在线判题、成绩统计等核心功能非常适合作为Java全栈学习的练手项目或者直接作为毕业设计的参考模板。今天我就把这个项目的设计思路、技术实现细节、以及那些文档里不会写的“坑”和“技巧”从头到尾拆解一遍。无论你是正在为毕设发愁的在校生还是想通过一个完整项目巩固SpringBoot和Vue技术的开发者相信这篇内容都能给你带来实实在在的帮助。这个系统的核心价值在于它不是一个简单的“增删改查”Demo。它模拟了在线编程评测平台类似LeetCode、牛客的核心业务流程涉及到前后端分离架构下的实时交互、代码安全沙箱、异步任务处理等有一定复杂度的技术点。实现这样一个系统你需要考虑如何安全地执行用户提交的未知代码如何高效地比对运行结果以及如何构建一个流畅的前端交互界面。接下来我们就从技术选型开始一步步深入这个项目的肌理。2. 技术栈选型与架构设计解析为什么选择SpringBoot Vue这套组合这是项目启动时第一个要回答的问题。对于毕业设计或者中小型全栈项目技术选型的核心原则是成熟、高效、社区活跃、学习曲线相对平缓。后端技术栈SpringBoot MyBatis-Plus MySQLSpringBoot是Java后端开发的“事实标准”它极大地简化了Spring应用的初始搭建和开发过程。不用再被繁琐的XML配置折磨内嵌Tomcat服务器也让部署变得异常简单。对于毕业设计而言它能让你把精力集中在业务逻辑上而不是环境配置上。数据库操作层我选择了MyBatis-Plus。它是对MyBatis的增强在保留MyBatis灵活性的同时提供了强大的CRUD封装和条件构造器。最实用的就是它的Service和Mapper接口已经内置了绝大部分单表操作方法比如save,removeById,getById,page等开发效率提升非常明显。对于题库、用户、提交记录这些主要实体80%的操作都可以用MyBatis-Plus提供的方法快速完成剩下的复杂联表查询再用自定义的XML映射文件解决做到了效率和灵活性的平衡。数据库选用MySQL原因无他就是最普及、资料最多。表结构设计时有几个关键点需要注意用户表除了基础字段建议增加avatar头像URL、role角色如学生、教师、管理员字段。题目表这是核心。字段至少包括title标题、description描述、input_desc输入说明、output_desc输出说明、test_cases测试用例可以存JSON或拆分成另一张表、time_limit时间限制、memory_limit内存限制、difficulty难度。提交记录表这是高频且重要的表。字段包括user_id,problem_id,code提交的代码、language编程语言、status判题状态如“等待中”、“判题中”、“正确”、“错误”等、execute_time运行时间、execute_memory消耗内存、judge_info详细的判题信息如错误类型可存JSON。判题日志/消息表可选用于记录判题服务的回调结果实现更可靠的消息通信。前端技术栈Vue 3 Element Plus Axios前端选择了Vue 3的Composition API写法相比Options API逻辑组织更灵活特别是对于复杂的页面组件。UI框架用了Element Plus这是基于Vue 3的桌面端组件库封装了丰富的表单、表格、弹窗等组件能极大加快开发速度。状态管理没有用Pinia因为在这个项目中全局状态并不复杂主要是用户登录信息直接用Vue的reactive或ref在组件间传递或者利用provide/inject就能满足需求避免引入不必要的复杂度。网络请求库是Axios配合拦截器Interceptor统一处理请求头如添加Token、响应错误和加载状态是前后端分离项目的标配。整体架构前后端分离这是现代Web项目的标准架构。前端Vue应用独立运行在一个端口中如localhost:8080通过Axios调用后端SpringBoot提供的RESTful API运行在localhost:8081。两者通过HTTP/JSON进行数据交换。这种架构的好处是前后端可以并行开发、独立部署职责清晰。注意开发环境下前端请求后端API会遇到跨域问题。解决方法是在SpringBoot后端通过CrossOrigin注解或配置一个全局的WebMvcConfigurerBean来允许前端域的跨域请求。这是开发初期必遇的一个坑。项目结构示意backend/ src/main/java/com/codingtrain/ controller/ # 控制器接收HTTP请求 service/ # 业务逻辑层 mapper/ # 数据访问层MyBatis-Plus接口 entity/ # 实体类对应数据库表 config/ # 配置类如跨域、MyBatis-Plus分页 utils/ # 工具类如JWT、加密 frontend/ src/ api/ # 封装所有Axios请求接口 router/ # Vue Router路由配置 store/ # 状态管理本项目简单未用Pinia views/ # 页面组件 components/ # 可复用组件 utils/ # 前端工具函数3. 核心功能模块设计与实现细节一个编程训练系统核心功能围绕“题目”和“判题”展开。下面我挑几个最有技术含量的模块讲讲我的实现思路和代码细节。3.1 用户认证与权限管理安全是系统的基石。我采用了经典的JWTJSON Web Token方案而不是传统的Session。原因在于JWT是无状态的更适合前后端分离和潜在的横向扩展。实现流程登录用户提交用户名密码后端验证通过后使用一个密钥如your-secret-key生成一个JWT Token。这个Token中通常包含用户ID、角色和过期时间。// 示例使用jjwt库生成Token String token Jwts.builder() .setSubject(user.getId().toString()) .claim(role, user.getRole()) .setIssuedAt(new Date()) .setExpiration(new Date(System.currentTimeMillis() EXPIRATION_TIME)) .signWith(SignatureAlgorithm.HS512, SECRET_KEY) .compact();Token传递前端将Token存储在localStorage或sessionStorage中并在后续每次请求的HTTP Header中携带通常是Authorization: Bearer token。鉴权拦截后端编写一个拦截器HandlerInterceptor或过滤器Filter对需要权限的接口路径进行拦截。从Header中取出Token进行验证是否有效、是否过期并解析出用户信息存入SecurityContextHolder或Request属性中供后续业务层使用。权限控制在Controller方法上使用注解如PreAuthorize(hasRole(ADMIN))来实现方法级别的权限控制。这需要与Spring Security集成或者自己实现一个简单的注解解析器。踩坑心得JWT Token一旦签发在有效期内无法主动使其失效除非黑名单机制但这又引入了状态。对于毕业设计项目将过期时间设置得合理一些如2小时并提醒用户重新登录即可这是一个在安全性和复杂度之间的折中。3.2 题目管理与测试用例设计题目管理本身是CRUD难点在于测试用例的设计和存储。测试用例是判题的标尺。存储方案我采用了JSON格式存储在一个TEXT类型的字段中。为什么不用多张表关联对于毕业设计级别的题目数量几十到几百道JSON存储更简单直观避免了复杂的联表查询。一个题目的测试用例可能像这样[ { input: 1 2\\n, output: 3\\n, score: 10 }, { input: -5 10\\n, output: 5\\n, score: 10 } // ... 更多用例 ]每个用例包含输入、预期输出和该用例的分值。所有用例的分值总和为100分。这种结构方便后端直接解析和遍历。前端富文本编辑题目描述往往包含格式、代码块甚至图片。单纯用textarea体验很差。我集成了一个Markdown编辑器如toast-ui/vue-editor或mavon-editor让教师或管理员可以方便地编辑题目描述。存储时将Markdown格式的文本直接存入数据库前端展示时再用相应的渲染器将其转换为HTML。3.3 在线判题系统核心中的核心这是本项目技术难度最高的部分。核心问题是如何在服务器上安全、隔离地执行用户提交的、可能是恶意的代码简易方案适合毕业设计对于Java、Python这类语言一个常见的简易思路是使用Runtime.getRuntime().exec()或ProcessBuilder在系统层面启动一个子进程来执行代码。但直接这样做极其危险用户代码可以执行rm -rf /等系统命令。因此必须引入沙箱Sandbox概念。我的实现方案如下代码接收与保存后端接收到代码和语言类型后在服务器的一个独立、隔离的临时目录如/tmp/judge/唯一ID/下根据语言生成对应的源文件如Main.java。编译与执行使用ProcessBuilder启动子进程进行编译如javac Main.java和运行如java Main。安全限制权限限制在Linux系统下可以创建一个权限极低的系统用户如judgeuser让子进程以此用户身份运行通过sudo -u judgeuser实现限制其文件系统和系统调用权限。资源限制使用ulimit命令或在Java中通过ProcessBuilder设置环境变量限制子进程的最大运行时间CPU Time和最大内存占用。这是防止恶意代码耗尽服务器资源的关键。系统调用过滤高级对于更严格的环境可以使用seccomp或ptrace来限制子进程可以使用的系统调用但这在Java中实现较为复杂毕业设计项目中可以暂不深入。输入输出与比对将测试用例的输入通过子进程的标准输入Process.getOutputStream()写入。然后读取子进程的标准输出Process.getInputStream()和标准错误流。将输出与预期输出进行比对。比对时要注意去除末尾空白符但有时需要保留文中的空白符需要根据题目要求仔细处理。状态收集通过Process.waitFor()获取进程退出码结合资源监控工具如/proc/[pid]/status或ManagementFactory获取线程的CPU时间来判断是正常结束、超时、内存超限还是运行时错误。判题服务异步化判题是一个耗时操作不能阻塞用户的提交请求。我采用了异步处理模式用户提交代码后端立即将提交记录存入数据库状态设为“等待中”并返回提交ID。后端将判题任务包含提交ID、代码、题目信息放入一个消息队列如Redis的List结构或更专业的RabbitMQ。对于毕业设计使用一个内存阻塞队列如LinkedBlockingQueue也是简单可行的选择。有一个或多个独立的判题守护进程可以是一个独立的SpringBoot应用或者一个Component使用Async注解或自己管理线程池从队列中消费任务。判题进程执行上述沙箱判题流程得到结果后回调主服务的接口更新提交记录的状态、运行时间、内存等信息。这种设计解耦了提交和判题提高了系统的响应速度和吞吐量。重要提醒安全无小事。即使在沙箱中也要定期清理临时文件避免磁盘被写满。对于生产环境强烈建议使用更成熟、更安全的隔离方案如Docker容器设置资源限制和只读文件系统或专业的判题沙箱系统如isolate,nsjail。3.4 前端交互与实时状态更新用户提交代码后最关心的是判题结果。前端需要实现状态的实时或准实时更新。方案一短轮询Polling最简单的方式。前端每隔几秒如2秒主动向后端发送一次请求查询某个提交记录的状态。实现简单但不够实时且会给服务器带来不必要的压力。方案二WebSocket全双工通信最理想的实时方案。建立WebSocket长连接后端判题结果一出立即主动推送给前端。实时性最高但需要额外的连接管理和心跳维护复杂度稍高。方案三长轮询Long Polling介于两者之间。前端发起一个请求后端如果判题未完成就“挂起”这个请求不立即返回直到判题完成或超时。实现比WebSocket简单比短轮询实时。我的选择考虑到毕业设计的复杂度和实时性要求我选择了方案一短轮询的优化版。因为判题过程本身也需要时间几秒到十几秒设置一个3-5秒的轮询间隔是可以接受的。为了优化体验我做了两点状态提示在轮询期间前端界面显示“判题中...”的动画提示让用户感知到进程。智能停止一旦轮询到状态变为“判题结束”无论是成功还是各种错误就立即停止轮询。前端代码片段示例Vue 3 Composition APIimport { ref, onUnmounted } from vue; import { getSubmissionStatus } from /api/judge; const submissionStatus ref(等待中); const pollingTimer ref(null); const startPolling (submissionId) { stopPolling(); // 先停止之前的轮询 pollingTimer.value setInterval(async () { try { const res await getSubmissionStatus(submissionId); submissionStatus.value res.data.status; // 如果状态不是“等待中”或“判题中”则停止轮询 if (![等待中, 判题中].includes(submissionStatus.value)) { stopPolling(); // 可以在这里触发一个通知或者更新结果展示区域 } } catch (error) { console.error(轮询请求失败, error); stopPolling(); } }, 3000); // 每3秒轮询一次 }; const stopPolling () { if (pollingTimer.value) { clearInterval(pollingTimer.value); pollingTimer.value null; } }; // 组件卸载时清理定时器 onUnmounted(() { stopPolling(); });4. 数据库设计与关键SQL优化数据库设计直接影响到系统的性能和扩展性。除了前面提到的核心表这里再补充一些细节和优化点。索引策略提交记录表submission这是查询最频繁的表。必须对user_id、problem_id、status、create_time建立索引。常见的查询场景有“查询某个用户的所有提交”需要user_id索引。“查询某道题目的提交排行”需要problem_id和status筛选正确的提交的复合索引。“按时间排序查看提交”需要create_time索引。 可以考虑建立(user_id, problem_id)、(problem_id, status)这样的复合索引来覆盖查询。题目表problem对difficulty、create_time建立索引方便按难度筛选和排序。分页查询优化前端表格展示提交记录、题目列表时一定要做分页。MyBatis-Plus提供了非常方便的分页插件。但要注意深度分页如limit 100000, 20效率很低。优化方法使用where id [上一页最后一条ID] limit 20的方式即“游标分页”但需要前端配合。对于必须传统分页的场景确保order by的字段上有索引。JSON字段查询测试用例以JSON格式存储如果我们需要根据某些元信息比如题目标签查询直接在JSON字段上查询效率不高。一个实用的做法是将需要查询的元信息冗余存储到单独的VARCHAR字段如tags或关联表中建立索引。JSON字段主要用于存储和读取完整的测试用例数据。连接查询优化在查询提交记录时通常需要关联用户表获取用户名和题目表获取题目标题。要避免SELECT *而是只选择需要的字段。MyBatis-Plus的QueryWrapper可以方便地指定select字段。对于复杂的联表查询如果性能成为瓶颈可以考虑使用数据库的物化视图Materialized View如果数据库支持或者在业务层做缓存。5. 项目部署与运维注意事项开发完成只是第一步让项目稳定跑起来才是终点。毕业设计答辩时一个能在线访问的演示系统比本地运行截图有说服力得多。后端部署SpringBoot项目打包成可执行的JAR文件mvn clean package。部署到Linux服务器上最基本的命令是java -jar your-project.jar。但这不够健壮进程挂了就停了。推荐使用系统服务管理Systemd推荐创建一个服务文件如/etc/systemd/system/coding-train.service。[Unit] DescriptionCoding Train Backend Service Afternetwork.target [Service] Typesimple Userappuser # 建议用非root用户运行 WorkingDirectory/opt/coding-train/backend ExecStart/usr/bin/java -Xms256m -Xmx512m -jar coding-train-backend.jar Restarton-failure RestartSec10 [Install] WantedBymulti-user.target然后使用sudo systemctl start coding-train启动sudo systemctl enable coding-train设置开机自启。这种方式管理起来非常方便。Docker容器化编写Dockerfile将应用和其依赖打包成镜像。部署时拉取镜像运行即可。这能保证环境一致性是更现代的做法。但对于资源有限的个人服务器或毕业设计演示Systemd服务更轻量。前端部署执行npm run build生成静态文件在dist目录。这些文件需要被一个HTTP服务器托管。Nginx托管推荐将dist目录下的文件上传到服务器如/var/www/coding-train-frontend/。配置Nginx将请求指向这个目录并将所有非静态文件的请求反向代理到后端SpringBoot服务。server { listen 80; server_name your-domain.com; # 或服务器IP location / { root /var/www/coding-train-frontend; try_files $uri $uri/ /index.html; # 支持Vue Router的history模式 } location /api/ { # 将所有以/api/开头的请求代理到后端 proxy_pass http://localhost:8081; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; } }SpringBoot内嵌静态资源也可以将dist目录的内容拷贝到SpringBoot项目的src/main/resources/static/目录下打包后一起发布。这样只需要一个JAR包。但这样前后端耦合不利于独立更新。数据库部署与备份MySQL建议也通过Docker部署或者直接使用云数据库服务如阿里云RDS。定期备份数据库是必须的可以写一个简单的Shell脚本用mysqldump命令备份然后通过crontab定时执行。监控与日志日志确保SpringBoot的日志配置得当将日志输出到文件如logs/application.log并使用logback或log4j2配置按天滚动归档。出问题时查看日志是第一步。健康检查Spring Boot Actuator提供了/actuator/health端点可以方便地检查应用状态。在Nginx或监控系统中可以配置定期检查这个端点。资源监控使用htop,df,free等命令定期查看服务器CPU、内存、磁盘使用情况。判题服务是资源消耗大户要特别关注。6. 演示视频制作与答辩准备要点一份出色的演示视频和清晰的答辩思路能为你的毕业设计加分不少。演示视频制作脚本先行不要想到哪录到哪。先写一个简短的脚本规划好演示路径。例如系统首页介绍 - 用户注册登录 - 浏览题库 - 选择题目并查看详情 - 编写并提交代码 - 查看判题结果和提交历史 - 管理员后台管理题目和用户。工具选择使用OBS Studio免费开源进行录屏功能强大。Windows自带的Xbox Game BarWinG或macOS的QuickTime Player也能满足基本需求。讲解与字幕录制时同步讲解你的操作和系统功能。如果对自己的普通话不自信或者环境嘈杂可以后期配音。视频剪辑软件如剪映、必剪可以很方便地添加字幕、背景音乐和转场。控制时长浓缩精华控制在5-10分钟内。评委时间有限要展示最核心、最亮点的功能。开头与结尾视频开头用几秒钟展示项目名称和你的信息。结尾可以放上项目GitHub地址如果有和致谢。答辩准备讲清楚架构图准备一张清晰的系统架构图前后端分离、模块划分、数据流这是你技术能力的直观体现。突出重点与难点不要平铺直叙所有功能。重点介绍技术选型理由、判题沙箱的安全设计与实现、异步判题队列、实时状态更新这些体现你思考深度和技术复杂度的部分。准备QA提前想好评委可能会问的问题并准备好答案。常见问题包括“为什么选SpringBoot和Vue”“如何保证用户代码执行的安全”“如果大量用户同时提交系统如何应对”可以谈队列削峰、判题服务扩展“数据库设计时考虑了哪些索引为什么”“你这个项目和现有的在线判题系统如LeetCode比优缺点是什么”演示环境备份答辩现场的网络和电脑环境不可控。务必在本地准备好完整可运行的环境Docker Compose是很好的选择并准备一个录好的演示视频作为备用以防现场演示翻车。7. 源码结构与使用指南为了方便大家理解和复用这里简要梳理一下项目源码的关键部分和运行步骤。后端启动步骤导入项目到IDE如IntelliJ IDEA。修改application.yml或application.properties中的数据库连接配置URL、用户名、密码。在MySQL中创建对应的数据库并执行项目sql/目录下的初始化脚本如果有。找到主启动类通常叫Application或CodingTrainApplication直接运行即可。SpringBoot会启动内嵌的Tomcat服务器。前端启动步骤确保已安装Node.js建议版本16和npm。在frontend目录下运行npm install安装所有依赖。运行npm run serve启动开发服务器。通常访问http://localhost:8080。注意前端开发服务器的请求会代理到后端通过vue.config.js中的devServer.proxy配置解决开发环境跨域问题。关键配置文件说明backend/src/main/resources/application.yml: 后端核心配置数据库、Redis如果用了、JWT密钥、文件上传路径等都在这里。frontend/.env.development和.env.production: 前端环境变量配置可以设置不同的后端API基础地址。frontend/vue.config.js: Vue CLI项目配置可以设置代理、打包输出目录等。判题沙箱配置这是项目的核心机密。在backend/src/main/java/com/codingtrain/judge/sandbox/目录下你会找到本地命令执行沙箱的实现类。请务必根据注释修改沙箱工作目录、编译执行命令路径如javac,java,python3的绝对路径以及资源限制参数时间、内存。在Windows和Linux/macOS下路径和命令可能有差异需要适配。运行这个项目你不仅是在运行一个程序更是在体验一个完整的产品从设计到上线的全过程。遇到问题多查看日志善用搜索引擎和开源社区这是程序员最重要的能力之一。本文还有配套的精品资源点击获取 SpringBoot+Vue编程训练系统全栈实战：从判题沙箱到异步队列
简介本资源是一套面向计算机专业本科生的Java高分毕业设计实战项目基于SpringBoot后端与Vue前端构建编程训练系统解决课程实践、毕业设计选题与工程能力落地等核心需求适用于毕设开题、中期答辩及期末综合实训。压缩包共758个文件47.62MB涵盖131个Java后端业务与控制器代码、151个JavaScript交互逻辑、38个Vue组件页面、42个CSS样式与162个SVG图标资源辅以SQL建表脚本、Bat一键部署脚本install/run/build、YML配置及MP4演示视频结构完整、模块清晰。已有149人学习下载项目经Windows 10/11环境实测可直接运行含详细部署文档与97分答辩级实现方案提供从环境搭建、功能演示到代码调试的全流程支撑显著降低毕设实施门槛。1. 项目背景与核心价值最近在整理硬盘翻出来一个压箱底的毕业设计项目是一个基于SpringBoot和Vue的编程训练系统。当时为了拿高分从需求分析、技术选型、前后端开发到部署演示几乎把能踩的坑都踩了一遍也把能优化的点都优化了。这个项目麻雀虽小五脏俱全涵盖了用户管理、题库管理、在线判题、成绩统计等核心功能非常适合作为Java全栈学习的练手项目或者直接作为毕业设计的参考模板。今天我就把这个项目的设计思路、技术实现细节、以及那些文档里不会写的“坑”和“技巧”从头到尾拆解一遍。无论你是正在为毕设发愁的在校生还是想通过一个完整项目巩固SpringBoot和Vue技术的开发者相信这篇内容都能给你带来实实在在的帮助。这个系统的核心价值在于它不是一个简单的“增删改查”Demo。它模拟了在线编程评测平台类似LeetCode、牛客的核心业务流程涉及到前后端分离架构下的实时交互、代码安全沙箱、异步任务处理等有一定复杂度的技术点。实现这样一个系统你需要考虑如何安全地执行用户提交的未知代码如何高效地比对运行结果以及如何构建一个流畅的前端交互界面。接下来我们就从技术选型开始一步步深入这个项目的肌理。2. 技术栈选型与架构设计解析为什么选择SpringBoot Vue这套组合这是项目启动时第一个要回答的问题。对于毕业设计或者中小型全栈项目技术选型的核心原则是成熟、高效、社区活跃、学习曲线相对平缓。后端技术栈SpringBoot MyBatis-Plus MySQLSpringBoot是Java后端开发的“事实标准”它极大地简化了Spring应用的初始搭建和开发过程。不用再被繁琐的XML配置折磨内嵌Tomcat服务器也让部署变得异常简单。对于毕业设计而言它能让你把精力集中在业务逻辑上而不是环境配置上。数据库操作层我选择了MyBatis-Plus。它是对MyBatis的增强在保留MyBatis灵活性的同时提供了强大的CRUD封装和条件构造器。最实用的就是它的Service和Mapper接口已经内置了绝大部分单表操作方法比如save,removeById,getById,page等开发效率提升非常明显。对于题库、用户、提交记录这些主要实体80%的操作都可以用MyBatis-Plus提供的方法快速完成剩下的复杂联表查询再用自定义的XML映射文件解决做到了效率和灵活性的平衡。数据库选用MySQL原因无他就是最普及、资料最多。表结构设计时有几个关键点需要注意用户表除了基础字段建议增加avatar头像URL、role角色如学生、教师、管理员字段。题目表这是核心。字段至少包括title标题、description描述、input_desc输入说明、output_desc输出说明、test_cases测试用例可以存JSON或拆分成另一张表、time_limit时间限制、memory_limit内存限制、difficulty难度。提交记录表这是高频且重要的表。字段包括user_id,problem_id,code提交的代码、language编程语言、status判题状态如“等待中”、“判题中”、“正确”、“错误”等、execute_time运行时间、execute_memory消耗内存、judge_info详细的判题信息如错误类型可存JSON。判题日志/消息表可选用于记录判题服务的回调结果实现更可靠的消息通信。前端技术栈Vue 3 Element Plus Axios前端选择了Vue 3的Composition API写法相比Options API逻辑组织更灵活特别是对于复杂的页面组件。UI框架用了Element Plus这是基于Vue 3的桌面端组件库封装了丰富的表单、表格、弹窗等组件能极大加快开发速度。状态管理没有用Pinia因为在这个项目中全局状态并不复杂主要是用户登录信息直接用Vue的reactive或ref在组件间传递或者利用provide/inject就能满足需求避免引入不必要的复杂度。网络请求库是Axios配合拦截器Interceptor统一处理请求头如添加Token、响应错误和加载状态是前后端分离项目的标配。整体架构前后端分离这是现代Web项目的标准架构。前端Vue应用独立运行在一个端口中如localhost:8080通过Axios调用后端SpringBoot提供的RESTful API运行在localhost:8081。两者通过HTTP/JSON进行数据交换。这种架构的好处是前后端可以并行开发、独立部署职责清晰。注意开发环境下前端请求后端API会遇到跨域问题。解决方法是在SpringBoot后端通过CrossOrigin注解或配置一个全局的WebMvcConfigurerBean来允许前端域的跨域请求。这是开发初期必遇的一个坑。项目结构示意backend/ src/main/java/com/codingtrain/ controller/ # 控制器接收HTTP请求 service/ # 业务逻辑层 mapper/ # 数据访问层MyBatis-Plus接口 entity/ # 实体类对应数据库表 config/ # 配置类如跨域、MyBatis-Plus分页 utils/ # 工具类如JWT、加密 frontend/ src/ api/ # 封装所有Axios请求接口 router/ # Vue Router路由配置 store/ # 状态管理本项目简单未用Pinia views/ # 页面组件 components/ # 可复用组件 utils/ # 前端工具函数3. 核心功能模块设计与实现细节一个编程训练系统核心功能围绕“题目”和“判题”展开。下面我挑几个最有技术含量的模块讲讲我的实现思路和代码细节。3.1 用户认证与权限管理安全是系统的基石。我采用了经典的JWTJSON Web Token方案而不是传统的Session。原因在于JWT是无状态的更适合前后端分离和潜在的横向扩展。实现流程登录用户提交用户名密码后端验证通过后使用一个密钥如your-secret-key生成一个JWT Token。这个Token中通常包含用户ID、角色和过期时间。// 示例使用jjwt库生成Token String token Jwts.builder() .setSubject(user.getId().toString()) .claim(role, user.getRole()) .setIssuedAt(new Date()) .setExpiration(new Date(System.currentTimeMillis() EXPIRATION_TIME)) .signWith(SignatureAlgorithm.HS512, SECRET_KEY) .compact();Token传递前端将Token存储在localStorage或sessionStorage中并在后续每次请求的HTTP Header中携带通常是Authorization: Bearer token。鉴权拦截后端编写一个拦截器HandlerInterceptor或过滤器Filter对需要权限的接口路径进行拦截。从Header中取出Token进行验证是否有效、是否过期并解析出用户信息存入SecurityContextHolder或Request属性中供后续业务层使用。权限控制在Controller方法上使用注解如PreAuthorize(hasRole(ADMIN))来实现方法级别的权限控制。这需要与Spring Security集成或者自己实现一个简单的注解解析器。踩坑心得JWT Token一旦签发在有效期内无法主动使其失效除非黑名单机制但这又引入了状态。对于毕业设计项目将过期时间设置得合理一些如2小时并提醒用户重新登录即可这是一个在安全性和复杂度之间的折中。3.2 题目管理与测试用例设计题目管理本身是CRUD难点在于测试用例的设计和存储。测试用例是判题的标尺。存储方案我采用了JSON格式存储在一个TEXT类型的字段中。为什么不用多张表关联对于毕业设计级别的题目数量几十到几百道JSON存储更简单直观避免了复杂的联表查询。一个题目的测试用例可能像这样[ { input: 1 2\\n, output: 3\\n, score: 10 }, { input: -5 10\\n, output: 5\\n, score: 10 } // ... 更多用例 ]每个用例包含输入、预期输出和该用例的分值。所有用例的分值总和为100分。这种结构方便后端直接解析和遍历。前端富文本编辑题目描述往往包含格式、代码块甚至图片。单纯用textarea体验很差。我集成了一个Markdown编辑器如toast-ui/vue-editor或mavon-editor让教师或管理员可以方便地编辑题目描述。存储时将Markdown格式的文本直接存入数据库前端展示时再用相应的渲染器将其转换为HTML。3.3 在线判题系统核心中的核心这是本项目技术难度最高的部分。核心问题是如何在服务器上安全、隔离地执行用户提交的、可能是恶意的代码简易方案适合毕业设计对于Java、Python这类语言一个常见的简易思路是使用Runtime.getRuntime().exec()或ProcessBuilder在系统层面启动一个子进程来执行代码。但直接这样做极其危险用户代码可以执行rm -rf /等系统命令。因此必须引入沙箱Sandbox概念。我的实现方案如下代码接收与保存后端接收到代码和语言类型后在服务器的一个独立、隔离的临时目录如/tmp/judge/唯一ID/下根据语言生成对应的源文件如Main.java。编译与执行使用ProcessBuilder启动子进程进行编译如javac Main.java和运行如java Main。安全限制权限限制在Linux系统下可以创建一个权限极低的系统用户如judgeuser让子进程以此用户身份运行通过sudo -u judgeuser实现限制其文件系统和系统调用权限。资源限制使用ulimit命令或在Java中通过ProcessBuilder设置环境变量限制子进程的最大运行时间CPU Time和最大内存占用。这是防止恶意代码耗尽服务器资源的关键。系统调用过滤高级对于更严格的环境可以使用seccomp或ptrace来限制子进程可以使用的系统调用但这在Java中实现较为复杂毕业设计项目中可以暂不深入。输入输出与比对将测试用例的输入通过子进程的标准输入Process.getOutputStream()写入。然后读取子进程的标准输出Process.getInputStream()和标准错误流。将输出与预期输出进行比对。比对时要注意去除末尾空白符但有时需要保留文中的空白符需要根据题目要求仔细处理。状态收集通过Process.waitFor()获取进程退出码结合资源监控工具如/proc/[pid]/status或ManagementFactory获取线程的CPU时间来判断是正常结束、超时、内存超限还是运行时错误。判题服务异步化判题是一个耗时操作不能阻塞用户的提交请求。我采用了异步处理模式用户提交代码后端立即将提交记录存入数据库状态设为“等待中”并返回提交ID。后端将判题任务包含提交ID、代码、题目信息放入一个消息队列如Redis的List结构或更专业的RabbitMQ。对于毕业设计使用一个内存阻塞队列如LinkedBlockingQueue也是简单可行的选择。有一个或多个独立的判题守护进程可以是一个独立的SpringBoot应用或者一个Component使用Async注解或自己管理线程池从队列中消费任务。判题进程执行上述沙箱判题流程得到结果后回调主服务的接口更新提交记录的状态、运行时间、内存等信息。这种设计解耦了提交和判题提高了系统的响应速度和吞吐量。重要提醒安全无小事。即使在沙箱中也要定期清理临时文件避免磁盘被写满。对于生产环境强烈建议使用更成熟、更安全的隔离方案如Docker容器设置资源限制和只读文件系统或专业的判题沙箱系统如isolate,nsjail。3.4 前端交互与实时状态更新用户提交代码后最关心的是判题结果。前端需要实现状态的实时或准实时更新。方案一短轮询Polling最简单的方式。前端每隔几秒如2秒主动向后端发送一次请求查询某个提交记录的状态。实现简单但不够实时且会给服务器带来不必要的压力。方案二WebSocket全双工通信最理想的实时方案。建立WebSocket长连接后端判题结果一出立即主动推送给前端。实时性最高但需要额外的连接管理和心跳维护复杂度稍高。方案三长轮询Long Polling介于两者之间。前端发起一个请求后端如果判题未完成就“挂起”这个请求不立即返回直到判题完成或超时。实现比WebSocket简单比短轮询实时。我的选择考虑到毕业设计的复杂度和实时性要求我选择了方案一短轮询的优化版。因为判题过程本身也需要时间几秒到十几秒设置一个3-5秒的轮询间隔是可以接受的。为了优化体验我做了两点状态提示在轮询期间前端界面显示“判题中...”的动画提示让用户感知到进程。智能停止一旦轮询到状态变为“判题结束”无论是成功还是各种错误就立即停止轮询。前端代码片段示例Vue 3 Composition APIimport { ref, onUnmounted } from vue; import { getSubmissionStatus } from /api/judge; const submissionStatus ref(等待中); const pollingTimer ref(null); const startPolling (submissionId) { stopPolling(); // 先停止之前的轮询 pollingTimer.value setInterval(async () { try { const res await getSubmissionStatus(submissionId); submissionStatus.value res.data.status; // 如果状态不是“等待中”或“判题中”则停止轮询 if (![等待中, 判题中].includes(submissionStatus.value)) { stopPolling(); // 可以在这里触发一个通知或者更新结果展示区域 } } catch (error) { console.error(轮询请求失败, error); stopPolling(); } }, 3000); // 每3秒轮询一次 }; const stopPolling () { if (pollingTimer.value) { clearInterval(pollingTimer.value); pollingTimer.value null; } }; // 组件卸载时清理定时器 onUnmounted(() { stopPolling(); });4. 数据库设计与关键SQL优化数据库设计直接影响到系统的性能和扩展性。除了前面提到的核心表这里再补充一些细节和优化点。索引策略提交记录表submission这是查询最频繁的表。必须对user_id、problem_id、status、create_time建立索引。常见的查询场景有“查询某个用户的所有提交”需要user_id索引。“查询某道题目的提交排行”需要problem_id和status筛选正确的提交的复合索引。“按时间排序查看提交”需要create_time索引。 可以考虑建立(user_id, problem_id)、(problem_id, status)这样的复合索引来覆盖查询。题目表problem对difficulty、create_time建立索引方便按难度筛选和排序。分页查询优化前端表格展示提交记录、题目列表时一定要做分页。MyBatis-Plus提供了非常方便的分页插件。但要注意深度分页如limit 100000, 20效率很低。优化方法使用where id [上一页最后一条ID] limit 20的方式即“游标分页”但需要前端配合。对于必须传统分页的场景确保order by的字段上有索引。JSON字段查询测试用例以JSON格式存储如果我们需要根据某些元信息比如题目标签查询直接在JSON字段上查询效率不高。一个实用的做法是将需要查询的元信息冗余存储到单独的VARCHAR字段如tags或关联表中建立索引。JSON字段主要用于存储和读取完整的测试用例数据。连接查询优化在查询提交记录时通常需要关联用户表获取用户名和题目表获取题目标题。要避免SELECT *而是只选择需要的字段。MyBatis-Plus的QueryWrapper可以方便地指定select字段。对于复杂的联表查询如果性能成为瓶颈可以考虑使用数据库的物化视图Materialized View如果数据库支持或者在业务层做缓存。5. 项目部署与运维注意事项开发完成只是第一步让项目稳定跑起来才是终点。毕业设计答辩时一个能在线访问的演示系统比本地运行截图有说服力得多。后端部署SpringBoot项目打包成可执行的JAR文件mvn clean package。部署到Linux服务器上最基本的命令是java -jar your-project.jar。但这不够健壮进程挂了就停了。推荐使用系统服务管理Systemd推荐创建一个服务文件如/etc/systemd/system/coding-train.service。[Unit] DescriptionCoding Train Backend Service Afternetwork.target [Service] Typesimple Userappuser # 建议用非root用户运行 WorkingDirectory/opt/coding-train/backend ExecStart/usr/bin/java -Xms256m -Xmx512m -jar coding-train-backend.jar Restarton-failure RestartSec10 [Install] WantedBymulti-user.target然后使用sudo systemctl start coding-train启动sudo systemctl enable coding-train设置开机自启。这种方式管理起来非常方便。Docker容器化编写Dockerfile将应用和其依赖打包成镜像。部署时拉取镜像运行即可。这能保证环境一致性是更现代的做法。但对于资源有限的个人服务器或毕业设计演示Systemd服务更轻量。前端部署执行npm run build生成静态文件在dist目录。这些文件需要被一个HTTP服务器托管。Nginx托管推荐将dist目录下的文件上传到服务器如/var/www/coding-train-frontend/。配置Nginx将请求指向这个目录并将所有非静态文件的请求反向代理到后端SpringBoot服务。server { listen 80; server_name your-domain.com; # 或服务器IP location / { root /var/www/coding-train-frontend; try_files $uri $uri/ /index.html; # 支持Vue Router的history模式 } location /api/ { # 将所有以/api/开头的请求代理到后端 proxy_pass http://localhost:8081; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; } }SpringBoot内嵌静态资源也可以将dist目录的内容拷贝到SpringBoot项目的src/main/resources/static/目录下打包后一起发布。这样只需要一个JAR包。但这样前后端耦合不利于独立更新。数据库部署与备份MySQL建议也通过Docker部署或者直接使用云数据库服务如阿里云RDS。定期备份数据库是必须的可以写一个简单的Shell脚本用mysqldump命令备份然后通过crontab定时执行。监控与日志日志确保SpringBoot的日志配置得当将日志输出到文件如logs/application.log并使用logback或log4j2配置按天滚动归档。出问题时查看日志是第一步。健康检查Spring Boot Actuator提供了/actuator/health端点可以方便地检查应用状态。在Nginx或监控系统中可以配置定期检查这个端点。资源监控使用htop,df,free等命令定期查看服务器CPU、内存、磁盘使用情况。判题服务是资源消耗大户要特别关注。6. 演示视频制作与答辩准备要点一份出色的演示视频和清晰的答辩思路能为你的毕业设计加分不少。演示视频制作脚本先行不要想到哪录到哪。先写一个简短的脚本规划好演示路径。例如系统首页介绍 - 用户注册登录 - 浏览题库 - 选择题目并查看详情 - 编写并提交代码 - 查看判题结果和提交历史 - 管理员后台管理题目和用户。工具选择使用OBS Studio免费开源进行录屏功能强大。Windows自带的Xbox Game BarWinG或macOS的QuickTime Player也能满足基本需求。讲解与字幕录制时同步讲解你的操作和系统功能。如果对自己的普通话不自信或者环境嘈杂可以后期配音。视频剪辑软件如剪映、必剪可以很方便地添加字幕、背景音乐和转场。控制时长浓缩精华控制在5-10分钟内。评委时间有限要展示最核心、最亮点的功能。开头与结尾视频开头用几秒钟展示项目名称和你的信息。结尾可以放上项目GitHub地址如果有和致谢。答辩准备讲清楚架构图准备一张清晰的系统架构图前后端分离、模块划分、数据流这是你技术能力的直观体现。突出重点与难点不要平铺直叙所有功能。重点介绍技术选型理由、判题沙箱的安全设计与实现、异步判题队列、实时状态更新这些体现你思考深度和技术复杂度的部分。准备QA提前想好评委可能会问的问题并准备好答案。常见问题包括“为什么选SpringBoot和Vue”“如何保证用户代码执行的安全”“如果大量用户同时提交系统如何应对”可以谈队列削峰、判题服务扩展“数据库设计时考虑了哪些索引为什么”“你这个项目和现有的在线判题系统如LeetCode比优缺点是什么”演示环境备份答辩现场的网络和电脑环境不可控。务必在本地准备好完整可运行的环境Docker Compose是很好的选择并准备一个录好的演示视频作为备用以防现场演示翻车。7. 源码结构与使用指南为了方便大家理解和复用这里简要梳理一下项目源码的关键部分和运行步骤。后端启动步骤导入项目到IDE如IntelliJ IDEA。修改application.yml或application.properties中的数据库连接配置URL、用户名、密码。在MySQL中创建对应的数据库并执行项目sql/目录下的初始化脚本如果有。找到主启动类通常叫Application或CodingTrainApplication直接运行即可。SpringBoot会启动内嵌的Tomcat服务器。前端启动步骤确保已安装Node.js建议版本16和npm。在frontend目录下运行npm install安装所有依赖。运行npm run serve启动开发服务器。通常访问http://localhost:8080。注意前端开发服务器的请求会代理到后端通过vue.config.js中的devServer.proxy配置解决开发环境跨域问题。关键配置文件说明backend/src/main/resources/application.yml: 后端核心配置数据库、Redis如果用了、JWT密钥、文件上传路径等都在这里。frontend/.env.development和.env.production: 前端环境变量配置可以设置不同的后端API基础地址。frontend/vue.config.js: Vue CLI项目配置可以设置代理、打包输出目录等。判题沙箱配置这是项目的核心机密。在backend/src/main/java/com/codingtrain/judge/sandbox/目录下你会找到本地命令执行沙箱的实现类。请务必根据注释修改沙箱工作目录、编译执行命令路径如javac,java,python3的绝对路径以及资源限制参数时间、内存。在Windows和Linux/macOS下路径和命令可能有差异需要适配。运行这个项目你不仅是在运行一个程序更是在体验一个完整的产品从设计到上线的全过程。遇到问题多查看日志善用搜索引擎和开源社区这是程序员最重要的能力之一。本文还有配套的精品资源点击获取