摘要随着教育信息化的发展传统的线下考试模式在组织效率、阅卷准确性和数据分析能力上逐渐显露出不足。本文旨在设计并实现一套基于B/S架构的在线考试系统。系统采用前后端分离模式后端基于Spring Boot框架整合Spring Security进行权限控制前端使用Vue.js和Element UI构建用户界面数据库采用MySQL存储数据。该系统实现了用户管理、题库管理、在线考试、自动阅卷、成绩分析等核心功能。经过功能测试和性能测试系统运行稳定能够有效减轻教师工作负担提高考试组织效率并支持学生随时随地进行在线练习与考核。关键词在线考试Spring BootVue.js前后端分离自动阅卷第一章 绪论1.1 研究背景在互联网技术飞速发展的今天传统纸质考试面临着出题繁琐、监考成本高、阅卷周期长、试卷分析困难等问题。尤其是在疫情期间线上教学与考核的需求激增开发一套稳定、高效、易用的在线考试系统具有重要的现实意义。1.2 研究意义提高效率系统自动批改客观题单选、多选、判断极大减轻教师负担。资源节约实现无纸化考试节约纸张资源符合绿色环保理念。数据分析系统能够自动生成成绩分布、知识点掌握度分析为教学改进提供数据支持。灵活便捷支持错题重做、模拟考试打破时间与空间的限制。1.3 国内外研究现状目前国外成熟的在线考试平台如ExamSoft、ProctorU等功能强大但费用较高国内如超星学习通、雨课堂等虽然功能完善但在特定高校或企业内部的个性化定制需求上仍存在不足。因此针对特定场景开发轻量级、定制化的在线考试系统仍是毕业设计的热点方向。第二章 系统相关技术介绍2.1 后端技术栈Spring Boot作为当前Java领域主流的微服务开发框架其“约定优于配置”的特性大大简化了项目搭建和开发过程。Spring Security提供强大的认证和授权机制结合JWTJson Web Token实现无状态的RESTful API安全控制。MyBatis-PlusMyBatis的增强工具简化了CRUD操作提供了强大的条件构造器和分页插件。MySQL开源的关系型数据库用于存储用户、试卷、题目等结构化数据。2.2 前端技术栈Vue.js渐进式JavaScript框架采用组件化开发模式提高了代码复用率和开发效率。Element UI基于Vue的桌面端组件库提供了丰富的UI组件能够快速搭建出美观的后台管理界面。Axios基于Promise的HTTP客户端用于与后端API进行交互。2.3 开发环境与工具IDEIntelliJ IDEA 后端 Visual Studio Code 前端版本控制Git GitHub/Gitee接口测试Postman构建工具Maven 后端 NPM 前端第三章 系统需求分析3.1 系统角色分析系统主要分为三种角色管理员拥有最高权限负责系统初始化、用户管理、年级班级管理、公告发布。教师负责题库管理增删改查、试卷组卷手动/自动、考试安排、阅卷针对主观题、成绩导出。学生参与考试、查看成绩、查看错题、模拟练习。3.2 功能性需求登录与权限模块支持用户名密码登录不同角色登录后显示不同菜单使用JWT进行身份校验。题库管理模块支持单选、多选、判断、简答等多种题型支持Excel批量导入导出题目支持按知识点、难度筛选。考试管理模块组卷支持手动选题组卷和随机组卷。发布设置考试时间、时长、参考班级、考试次数限制。在线考试模块学生进入考试后自动计时支持断点续考意外退出后重新进入保留答案防作弊检测切屏警告、禁止复制粘贴。自动阅卷模块客观题系统自动判分主观题教师后台手动打分。成绩分析模块展示成绩排行榜、成绩分布饼图、个人成绩趋势图。3.3 非功能性需求响应时间页面加载时间 2秒并发考试提交响应时间 3秒。安全性密码加密存储BCrypt防止SQL注入关键操作需权限校验。并发性支持至少200人同时在线考试。第四章 系统设计4.1 系统总体架构系统采用B/S架构前后端完全分离。前端通过HTTP请求访问后端暴露的RESTful API后端处理业务逻辑后返回JSON数据。此处可插入系统架构图浏览器 - Nginx - Vue静态资源API请求 - Spring Boot - MySQL/Redis4.2 数据库设计数据库命名为exam_system核心表设计如下用户表 (user)字段id,username,password加密,real_name,role管理员/教师/学生,class_id外键等。题目表 (question)字段id,subject学科,type题型,content,optionsJSON格式存储选项,answer,analysis解析,difficulty难度系数等。试卷表 (exam_paper)字段id,name,duration时长,total_score,start_time,end_time,status未开始/进行中/已结束等。考试记录表 (exam_record)字段id,user_id,paper_id,score,answer_content学生答案JSON,correct_count,submit_time等。题目关联表 (paper_question)用于记录试卷包含的具体题目及其分值。数据库设计需要满足第三范式并建立合理的索引优化查询4.3 接口设计API遵循RESTful风格设计接口例如功能模块请求方式URL描述用户模块POST/api/user/login用户登录返回token用户模块GET/api/user/info获取当前用户信息需携带token题库模块POST/api/question添加题目题库模块GET/api/question/list分页获取题目列表考试模块GET/api/exam/paper/{id}获取试卷详情考试时考试模块POST/api/exam/submit提交试卷触发自动阅卷第五章 系统核心功能实现5.1 前后端分离与跨域解决前端运行在localhost:8080后端运行在localhost:8081。为了解决跨域问题后端使用CORS跨域资源共享配置javaConfiguration public class CorsConfig implements WebMvcConfigurer { Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping(/**) .allowedOrigins(http://localhost:8080) .allowedMethods(GET, POST, PUT, DELETE) .allowCredentials(true) .maxAge(3600); } }5.2 权限控制实现引入Spring Security和JWT。用户登录成功后后端生成JWT并返回。前端将Token存入LocalStorage并在后续请求的Header中携带javascript// 前端 Axios 请求拦截器 axios.interceptors.request.use(config { if (localStorage.getItem(token)) { config.headers.Authorization localStorage.getItem(token); } return config; });后端通过自定义JwtAuthenticationTokenFilter拦截请求解析Token并加载用户权限存入SecurityContextHolder。5.3 自动阅卷算法对于客观题系统需要根据预设答案进行匹配。这里采用了JSON格式存储学生答案和标准答案通过后端逻辑进行比对主要逻辑如下获取试卷关联的所有题目列表。获取学生提交的答案JSON。遍历题目如果是单选题/判断题比较studentAnswer standardAnswer。如果是多选题判断学生的答案集合是否与标准答案集合完全一致通常采用拆分为字符串数组后排序比较或者使用位运算。如果正确累加该题分值。将总分、每题得分情况存入数据库。5.4 前端考试计时与防切屏利用setInterval实现倒计时当时间归零时自动提交试卷。利用浏览器visibilitychange事件监听页面隐藏行为javascriptdocument.addEventListener(visibilitychange, () { if (document.hidden) { // 记录切屏次数如果超过设定次数则强制交卷或警告 this.violationCount; if(this.violationCount 3) { this.submitExam(); // 强制交卷 this.$message.error(检测到多次切屏考试终止); } else { this.$message.warning(请勿切屏考试将记录您的行为); } } });第六章 系统测试6.1 测试环境硬件Intel i5处理器16GB内存软件Windows 10, Chrome浏览器, MySQL 8.06.2 功能测试用例测试模块测试用例预期结果实际结果登录输入正确的用户名/密码跳转至对应角色主页返回token通过登录输入错误的密码提示“用户名或密码错误”通过组卷教师手动添加5道题目至试卷试卷详情显示5道题通过考试学生提交试卷试卷包含客观题系统自动计算分数并展示通过防作弊考试过程中切换浏览器标签弹出警告框记录切屏次数通过6.3 性能测试使用JMeter模拟100个线程同时访问考试列表接口和提交试卷接口。平均响应时间考试列表接口 120ms提交试卷接口包含计算 450ms。错误率0%。CPU占用率测试期间服务器CPU占用率峰值约35%内存占用稳定。第七章 总结与展望7.1 总结本次毕业设计成功实现了一套基于Spring Boot和Vue的在线考试系统。系统涵盖了从需求分析、数据库设计、后端架构搭建、前端页面开发到系统测试的完整软件生命周期。通过本项目的开发我深入掌握了Java后端开发的主流框架理解了前后端分离架构的优势同时对数据库优化、接口安全设计有了更深刻的体会。7.2 不足之处功能缺陷目前系统对于主观题简答题仍依赖人工阅卷未能接入NLP自然语言处理进行智能语义评分。并发瓶颈在高并发场景下如全校统一考试如果题库中包含大量图片数据库I/O和带宽可能成为瓶颈。部署复杂目前仅支持本地部署未实现Docker容器化一键部署。7.3 改进方向引入Redis将考试中的试卷数据、Token存入Redis减少数据库压力提升并发能力。接入AI尝试调用ChatGPT API或训练简单的文本相似度模型辅助批改主观题。容器化编写Dockerfile和docker-compose.yml实现一键启动前后端环境。参考文献[1] 王松. Spring BootVue全栈开发实战[M]. 清华大学出版社 2019.[2] 李刚. 轻量级Java EE企业应用实战[M]. 电子工业出版社 2020.[3] 尤雨溪. Vue.js官方文档[EB/OL]. https//cn.vuejs.org/ 2024.[4] 陈钊. 基于Spring Boot的在线考试系统设计与实现[D]. 华中科技大学 2021.附录附录A 核心代码结构textexam-system-backend ├── src/main/java/com/exam │ ├── controller // 控制层 │ ├── service // 业务层 │ ├── mapper // 数据访问层 │ ├── entity // 实体类 │ ├── config // 配置类Security, Redis等 │ └── utils // 工具类 └── src/main/resources ├── application.yml // 配置文件 └── mapper // MyBatis XML文件附录B 部分界面截图此处可插入系统登录页、考试页面、后台管理页面的截图结语这篇博客文章涵盖了毕业设计从选题到实现的完整思路。如果你在实际撰写时需要将其替换为你的具体项目只需要将“在线考试系统”替换为你的题目并调整第三章的功能点以及第四章的表结构即可。祝你毕业设计顺利通过