SSM+Vue在线考试系统毕业设计实战指南

📅 发布时间:2026/10/16 11:20:51
SSM+Vue在线考试系统毕业设计实战指南
简介本资源是一套完整的Java在线考试系统毕业设计解决方案面向计算机专业本科生及Java初学者解决课程设计与毕业设计中系统开发、数据库建模与前后端联调的实际需求。项目采用主流SSMSpringSpringMVCMyBatis后端框架与Vue.js前端技术栈实现考生考试、成绩查询、通知查看及管理员试题/试卷/用户全生命周期管理等核心功能适配JDK 1.8、Tomcat 7–9及MySQL 5.7/8.0环境开箱即用。压缩包共534个文件涵盖95个Java业务逻辑类、43个Vue组件页面、34个XML配置与映射文件、19个JS交互脚本及3个SQL建表与初始化脚本辅以bat一键部署脚本和SVG图标资源结构清晰、模块解耦便于理解MVC分层与前后端分离实践。资源包大小15.54MB目前已有159人学习下载提供源码、数据库、完整论文三件套可直接用于答辩或二次开发显著降低毕设实施门槛。1. 这不是又一个“SSMVue 考试系统模板”它是一套能过答辩、能跑通、能改出新意的毕业设计闭环资源你是不是也搜过“Java在线考试系统 毕业设计”点开十个项目八份是空壳前端假数据数据库字段名都拼错的 SQL 文件答辩老师一问“并发下怎么防重复提交”、“题目乱序逻辑在哪实现”、“成绩导出 Excel 的分页内存溢出怎么处理”当场哑火——不是你不会是给的源码压根没碰过真实场景。这份资源不是“能跑就行”的玩具工程而是某高校计算机专业连续三年被导师推荐的可交付型毕业设计基线包它用 SSMSpring SpringMVC MyBatis做后端骨架Vue 2.6 Element UI 做管理前台MySQL 5.7 存题库与成绩配套完整论文含查重通过版框架、建库脚本、接口文档、部署说明。重点在于——所有模块都留了可扩展钩子题型支持自定义扩展不止单选多选判断、考试策略可配置限时/不限时/闯关模式、成绩分析带基础统计图表。适合真正想花 23 周把毕设做扎实、不靠“玄学答辩话术”过关的同学。2. 从零启动环境准备、代码拉取与数据库初始化三步落地2.1 环境清单与版本对齐为什么必须卡死 JDK 8 和 MySQL 5.7这不是兼容性妥协而是 SSM 生态在毕业设计场景下的事实标准。项目中pom.xml显式依赖spring-framework 5.0.12.RELEASE该版本在 JDK 11 下会触发java.lang.NoClassDefFoundError: javax/xml/bind/JAXBExceptionJAXB 在 JDK 9 被移除。MySQL 方面建库脚本exam_db.sql使用了ENGINEInnoDB DEFAULT CHARSETutf8mb4 COLLATEutf8mb4_unicode_ci若用 MySQL 8.0 默认的caching_sha2_password认证插件MyBatis 连接会直接报Client does not support authentication protocol。所以请严格按以下配置JDKOracle JDK 8u202非 OpenJDK避免部分字节码差异MySQL5.7.32官方社区版禁用 8.0Maven3.6.3pom.xml中maven-compiler-plugin设为 1.8Node.js12.22.12Vue CLI 3.x 兼容最佳提示不要试图用 JDK 17 或 MySQL 8 强行运行——这不是“升级”是主动给自己埋答辩雷。我见过太多同学因环境错配在答辩前夜还在重装系统。2.2 拉取源码与目录结构解剖看清哪些文件真有用项目压缩包解压后是典型前后端分离结构exam-system/ ├── exam-backend/ # SSM 后端模块Spring Boot 2.0.6.RELEASE 封装 │ ├── src/main/java/com/exam/ │ │ ├── controller/ # REST 接口/api/exam, /api/question │ │ ├── service/ # 业务逻辑ExamService.java 含防刷卷逻辑 │ │ ├── mapper/ # MyBatis XML 映射QuestionMapper.xml 有动态 SQL 分页 │ │ └── entity/ # 实体类ExamPaper.java 关联题目列表 │ ├── src/main/resources/ │ │ ├── application.yml # 数据库连接、Redis 开关默认关闭 │ │ └── mybatis-config.xml # 开启二级缓存注意高并发下需评估 │ └── pom.xml ├── exam-frontend/ # Vue 2.6 管理后台 │ ├── src/ │ │ ├── api/ # 封装 axios 请求exam.js 含考试开始/交卷接口 │ │ ├── views/ # 核心页面ExamPaper.vue 是答题页含倒计时 JS │ │ └── router/index.js # 路由守卫未登录跳 login考试中禁止返回 │ └── package.json ├── doc/ │ ├── 论文终稿.docx # 含摘要、系统架构图、ER 图、核心代码截图可直接替换为你的内容 │ └── 数据库设计说明书.md # 字段注释、索引说明exam_paper 表有 composite index on (status, start_time) └── exam_db.sql # 完整建库脚本含 5 张表user, question, exam_paper, exam_record, answer_detail关键动作不要直接mvn install后端先检查exam-backend/src/main/resources/application.yml中的数据库配置spring: datasource: url: jdbc:mysql://localhost:3306/exam_db?useUnicodetruecharacterEncodingUTF-8serverTimezoneAsia/Shanghai username: root password: 123456 # 注意这是默认密码务必在 MySQL 中确认 root 密码一致若 MySQL root 密码非123456请同步修改此处。2.3 数据库初始化执行 SQL 脚本的三个致命细节exam_db.sql不是简单CREATE DATABASE它包含数据填充如管理员账号、样例题目执行时必须注意字符集必须显式指定在 MySQL 客户端执行前先运行SET NAMES utf8mb4;否则中文题目会变???时间戳字段要校准脚本中exam_paper表的start_time字段插入的是2023-05-01 09:00:00若你本地 MySQL 时区非Asia/Shanghai会导致考试时间错乱。执行前加SET time_zone 08:00;外键约束顺序脚本按user → question → exam_paper → exam_record顺序建表若手动分段执行必须严格按此顺序否则exam_record表创建会失败因外键引用exam_paper.id。执行命令Linux/macOS 终端mysql -u root -p123456 -e SET NAMES utf8mb4; SET time_zone 08:00; SOURCE /path/to/exam_db.sql;Windows 用户请用 MySQL Workbench 打开脚本顶部菜单Query → Execute Current Statement并确保右下角字符集选utf8mb4。3. 后端启动与接口验证绕过常见启动失败的五个检查点3.1 启动exam-backend的标准流程与日志定位进入exam-backend目录执行mvn clean compile -Dmaven.test.skiptrue mvn spring-boot:run成功启动标志控制台末尾出现Started ExamApplication in X.XXX seconds (JVM running for Y.YYY)且无ERROR红字。若失败请按以下顺序排查检查点现象原因解决方案JDBC 驱动缺失java.lang.ClassNotFoundException: com.mysql.cj.jdbc.Driverpom.xml中 MySQL 驱动版本为8.0.11但项目实际要求5.1.47适配 MySQL 5.7修改pom.xml将artifactIdmysql-connector-java/artifactId的version改为5.1.47再mvn clean compileMyBatis Mapper 扫描失败Caused by: org.apache.ibatis.binding.BindingException: Invalid bound statement (not found): com.exam.mapper.QuestionMapper.selectListapplication.yml中mybatis.mapper-locations路径写错或QuestionMapper.xml文件名与QuestionMapper.java不匹配检查application.ymlmybatis.mapper-locations: classpath:mapper/*.xml确认src/main/resources/mapper/QuestionMapper.xml存在且首行namespacecom.exam.mapper.QuestionMapper与 Java 接口全路径一致Redis 连接超时Cannot get Jedis connection; nested exception is redis.clients.jedis.exceptions.JedisConnectionException: java.net.ConnectException: Connection refusedapplication.yml中redis.enabled: true但本地未启动 Redis将application.yml中redis.enabled改为false毕业设计无需缓存关掉更稳端口被占用Web server failed to start. Port 8080 was already in useIDEA 或其他程序占用了 8080修改application.ymlserver.port: 8081重启Lombok 未生效java: cannot find symbol: variable id在 Entity 类中IDEA 未安装 Lombok 插件或未启用 annotation processing安装 Lombok 插件 →Settings → Build → Annotation Processors → Enable annotation processing→ 重启 IDEA3.2 用 curl 验证核心接口不依赖前端也能确认后端健康后端启动后用终端验证最关键的三个接口避免前端 Vue 报错干扰判断# 1. 测试登录接口管理员账号 curl -X POST http://localhost:8080/api/login \ -H Content-Type: application/json \ -d {username:admin,password:123456} # 2. 获取题目列表需登录后 token # 先从上一步响应中提取 token形如 eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9... TOKENyour_token_here curl -X GET http://localhost:8080/api/question/list?pageNum1pageSize10 \ -H Authorization: Bearer $TOKEN # 3. 创建一场考试模拟教师操作 curl -X POST http://localhost:8080/api/exam/create \ -H Content-Type: application/json \ -H Authorization: Bearer $TOKEN \ -d {title:Java基础测试,duration:60,questionIds:[1,2,3]}预期响应登录接口返回{code:200,msg:登录成功,data:{token:xxx}}题目列表返回{code:200,data:{list:[...],pageNum:1,pageSize:10,total:15}}创建考试返回{code:200,msg:考试创建成功,data:{id:101}}。若任一接口返回code:500立即看后端控制台 ERROR 日志——90% 是数据库字段类型不匹配如question.type在 SQL 中是TINYINT但 Java 实体类写成String。4. 前端启动与功能走查Vue 项目里那些“看起来正常实则崩坏”的坑4.1exam-frontend启动前必做的三处代码修正Vue 项目不是npm install npm run serve就能跑通。打开exam-frontend/src/api/request.js找到 axios 默认配置// exam-frontend/src/api/request.js 第 12 行左右 const service axios.create({ baseURL: http://localhost:8080/api, // ← 这里必须和后端端口一致 timeout: 5000 })若你后端改了端口如8081此处必须同步改为http://localhost:8081/api否则所有请求 404。第二处exam-frontend/src/router/index.js中的路由守卫检查登录状态// exam-frontend/src/router/index.js 第 35 行 if (store.getters.token) { next() // 已登录放行 } else { next(/login?redirect${to.path}) // 未登录跳转登录页 }问题在于store.getters.token读取的是 Vuex store 中的 token但登录成功后src/store/modules/user.js的loginaction 中// exam-frontend/src/store/modules/user.js 第 42 行 commit(SET_TOKEN, res.data.data.token) // ← 此处 res.data.data.token 必须存在若后端登录接口返回结构是{code:200,data:{token:xxx}}当前项目是则 OK但若你修改了后端返回格式如改成{token:xxx}此处就会res.data.data.token为 undefined导致永远跳转登录页。血泪经验每次改后端返回 JSON 结构必须同步检查前端user.js中的commit参数路径。第三处exam-frontend/src/views/ExamPaper.vue中的倒计时逻辑// exam-frontend/src/views/ExamPaper.vue 第 188 行 this.timer setInterval(() { if (this.remainingTime 0) { this.remainingTime-- } else { this.submitExam() // 时间到自动交卷 } }, 1000)这里remainingTime初始值来自后端exam/start接口返回的duration单位分钟但前端每秒减 1单位不一致正确做法是后端返回durationSeconds秒数或前端将duration * 60赋值给remainingTime。当前项目后端返回的是分钟所以必须在created()钩子中修正// exam-frontend/src/views/ExamPaper.vue 第 65 行created() 内 this.remainingTime this.exam.duration * 60 // ← 关键修正4.2 功能走查清单答辩前必须亲手操作的七个动作别只信“演示视频”这七个动作必须你亲手点一遍因为它们暴露了系统真实健壮性添加一道编程题进入题库管理 → 新增题目题型选“编程题”输入代码框textarea保存后检查数据库question.content字段是否完整存入含换行符\n设置考试时间策略创建考试时勾选“限时考试”输入45分钟启动考试后看前端倒计时是否从45:00开始递减学生端交卷后查看成绩用学生账号如student1/123456登录 → 进入考试 → 答题 → 点击“交卷”跳转到成绩页确认显示得分85/100且答案解析可展开教师端导出成绩单教师登录 →考试管理 → 成绩统计→ 点击“导出 Excel”检查生成的exam_result_20230501.xlsx是否包含学号、姓名、得分、用时四列删除题目级联验证在题库中删除一道被某场考试引用的题目如 ID5后端应返回{code:400,msg:该题目已被考试使用无法删除}而非直接删库并发提交防重用两个浏览器标签页同时打开同一场考试答完第一题后快速在两页都点“下一题”观察后端answer_detail表是否只插入一条记录防重复提交已启用修改试卷题目后重新发布编辑一场已发布的考试增加一道题保存后已进入考试的学生页面是否自动刷新题目列表当前项目未实现 WebSocket 推送应提示“试卷已更新请刷新页面”。注意第 7 项是加分项非必须。若你答辩被问“如何实现实时试卷更新”可答“当前采用轮询机制setInterval每 30 秒 GET /api/exam/status若需强实时可集成 WebSocket服务端推送exam_updated事件”。这比说“没做”高明得多。5. 毕业论文撰写与系统定制把源码变成你自己的作品5.1 论文框架复用指南从“抄结构”到“显能力”的三步转化doc/论文终稿.docx是标准本科毕设论文结构摘要、绪论、需求分析、系统设计、系统实现、系统测试、总结。但直接替换文字是低效的正确做法是第一步用 Visio 重画所有图。原文档中的系统架构图、ER 图、用例图都是 PNG答辩老师一眼看出是盗图。下载 draw.io 免费在线按以下要素重绘架构图标清Vue 前端 ↔ Nginx静态资源↔ Spring Boot8080↔ MySQL3306箭头旁注明协议HTTP/HTTPS、JDBCER 图user表主键idexam_paper表外键teacher_id指向user.idexam_record表外键paper_id指向exam_paper.id所有关系线必须标注基数1..*用例图ActorStudent与Teacher用例Take Exam、Grade Paper、Export Report用include关系连接Login。第二步代码截图必须带上下文。不要只截ExamController.java中一行PostMapping(/create)。正确截图是IDE 截图IntelliJ IDEA显示左侧 Project 面板路径exam-backend/src/main/java/com/exam/controller/ExamController.java代码区域包含PostMapping(/create)方法签名、RequestBody ExamPaper paper参数、service.createExam(paper)调用、return Result.success(...)返回右下角显示行号IDEA 设置Settings → Editor → General → Appearance → Show line numbers。第三步测试章节写真实数据。原文档的“系统测试”可能是虚构的。你必须做用 Postman 对POST /api/exam/create发送 100 次请求Runner功能记录平均响应时间 350ms用 JMeter 模拟 50 并发用户同时登录监控 MySQLThreads_connected是否稳定在50±5截图exam_record表中submit_time字段证明时间戳精确到秒非毫秒符合 MySQLDATETIME类型。5.2 系统定制实战三个低成本高价值的改造点让系统从“模板”变成“你的作品”选一个改造点深入即可改造点一增加“错题本”功能后端 3 文件 前端 2 页面后端entity/WrongQuestion.javaid,userId,questionId,wrongTimemapper/WrongQuestionMapper.javainsertSelective(),selectByUserId()service/WrongQuestionService.java在AnswerService.submitAnswer()中若isCorrectfalse调用wrongQuestionMapper.insert(new WrongQuestion(userId, questionId))。前端新增路由/wrong-questions页面WrongQuestions.vue调用GET /api/wrong-question/list?userId123在ExamPaper.vue答题页每道题下方加按钮el-button clickaddToWrongBook(question.id)加入错题本/el-button。改造点二考试结果页增加柱状图纯前端不碰后端exam-frontend/src/views/ResultDetail.vue中!-- 引入 ECharts -- script srchttps://cdn.jsdelivr.net/npm/echarts5.4.3/dist/echarts.min.js/script div idchart stylewidth: 600px;height:400px;/div// mounted() 中初始化 mounted() { const chartDom document.getElementById(chart); const myChart echarts.init(chartDom); const option { title: { text: 各题型得分率 }, tooltip: {}, xAxis: { data: [单选, 多选, 判断] }, yAxis: {}, series: [{ name: 得分率, type: bar, data: [this.scoreRate.single, this.scoreRate.multiple, this.scoreRate.judge] }] }; myChart.setOption(option); }this.scoreRate从后端GET /api/result/detail?id101接口返回的 JSON 中解析。改造点三数据库敏感字段加密毕业设计安全加分项修改user表增加password_encrypted字段VARCHAR(128)删除原password字段。后端UserService.login()中// 使用 BCrypt 加密引入 dependency: org.springframework.security:spring-security-crypto String encryptedPassword new BCryptPasswordEncoder().encode(rawPassword); // 存库时user.setPasswordEncrypted(encryptedPassword); // 登录时BCryptPasswordEncoder.matches(rawInput, dbEncrypted)前端登录页密码输入框保持不变加密完全在后端透明完成。从那以后我每次接手毕业设计资源第一件事就是打开pom.xml和package.json锁死版本第二件事是执行exam_db.sql前先SET NAMES utf8mb4第三件事是curl验证三个核心接口——这三步做完剩下的就是把别人的代码变成你答辩时能讲清楚每一行为什么这么写的底气。希望帮到你。本文还有配套的精品资源点击获取