尧图网页设计 
简介这是一套面向高校计算机专业毕业设计或课程实训的完整在线考试系统实现方案基于SpringBoot后端框架、MySQL关系型数据库与Vue前端技术栈构建解决传统纸质考试组织难、阅卷慢、数据难追溯等实际问题。资源包共216个文件包含80个Java后端业务逻辑与控制器代码、57个Vue组件及路由页面、16个JavaScript工具脚本、14个XML配置文件、23张PNG界面截图及1份SQL建表脚本辅以论文文档.docx、系统设计说明.md与安全配置类WebSecurityConfig.java整体压缩包仅6.3MB轻量易部署。已有9242人学习下载涵盖前后端分离开发全流程从用户角色权限管理、题库维护、随机组卷、限时作答到自动评分与成绩统计结构清晰、注释完整适合作为Java Web全栈开发入门到进阶的实践范例。1. 项目定位与整体设计思路1.1 这个系统解决的是什么问题做在线考试系统这个选题的人我猜十有八九是计算机相关专业的毕业生或者正在做课设的学生。这个题目的出现频率之高几乎和学生管理系统图书管理系统并列原因很简单它不是一个纯CRUD的玩具项目有完整的业务闭环建题库→组卷→答题→判分→统计分析但又没有复杂到让人望而却步的程度正好处在能写清楚又不会太难的甜点区。但市面上流传的所谓源码质量参差不齐。有的连数据库脚本都没给全有的前端用的是老掉牙的JSP还有的跑起来直接白屏报错。这套基于SpringBootMySQLVue的在线考试系统说实话是同类毕设里比较规范的一套技术栈比较新前后端分离的结构也符合目前企业招聘时的主流要求。它解决的问题很明确让老师/管理员可以高效管理题库、组卷、批阅让考生可以随时随地在网页上完成考试系统自动判分、自动统计成绩省去人工收发试卷和批改的重复劳动。这个项目适合谁三类人一是正在做毕业设计、需要一套可信参考源码的学生二是想快速上手SpringBootVue全栈开发、但不想从零开始搭框架的Java学习者三是企业里需要给内部员工做培训考核、想低成本搭一套考试系统的人。它的核心价值在于技术选型主流、业务逻辑完整、代码结构清晰你可以直接运行它也可以按自己的需求改造它。1.2 为什么是 SpringBoot MySQL Vue 这个组合先说SpringBoot。它最核心的价值是约定优于配置。以前用SSHStrutsSpringHibernate那套光配置XML文件就能折腾一整天各种bean引用、事务配置、aop切面新手直接在配置阶段就劝退了。而SpringBoot通过自动配置机制把大部分工作都省了。你只要在pom.xml里加一个spring-boot-starter-web依赖一个注解SpringBootApplication就能起一个web服务。对于我们做毕设或者小规模项目来说这就是最优解——把时间花在业务逻辑上而不是配置文件里。更重要的是SpringBoot是目前国内中小型公司后端的主流框架学会它实习面试时至少不会被当成什么都不会的小白。再说MySQL。虽然现在PostgreSQL也挺流行但MySQL在国内的普及度依然是最高的。大学课程教的是它公司的生产环境大概率也是它网上遇到问题一搜就能找到答案。就这个在线考试系统来说数据量根本不会大到需要分库分表的程度MySQL单库完全扛得住。而且MySQL在事务支持、数据一致性方面做得够用考试场景最重要的就是成绩不能算错用InnoDB引擎的ACID特性就能保证交卷时答题记录和成绩计算的一致性。选择MySQL是综合考虑学习成本、稳定性、生态成熟度之后的务实决定。最后说Vue。Vue在国内前端圈的地位不用多说了它的上手曲线比React平缓得多。模板语法很直观v-if/v-for/v-model这些指令几乎是一看就懂。在线考试系统这个场景典型的交互是登录、列表页、答题页、结果页这些都是典型的数据驱动视图需求Vue的响应式机制刚好正中靶心。再说Vue的路由、状态管理、组件化这些概念搞懂之后你就掌握了前端开发的通用思维以后换React也很快。这套系统用Vue做单页面应用SPA配合Element UI这样的组件库都不用自己写CSS几个标签一套页面就挺像样了。1.3 系统功能结构与数据表设计思路这套系统的角色权限设计比较标准三个角色管理员、教师出题人、学生考生。管理员负责系统管理、账号管理教师负责题库维护、试卷创建、考试成绩查看学生登录后可以参加考试、查看自己的成绩和错题。功能模块拆开来看系统管理用户管理对学生/教师账号的增删改查、角色权限分配、系统日志题库管理选择题、判断题、多选题等题型维护按科目/章节分类支持批量导入试卷管理创建试卷、配置题目手动选题或随机抽题、设置考试时间、总分和及格线在线考试考试倒计时、答题、自动保存、交卷、切屏警告、防作弊成绩与统计自动判分、成绩列表、导出Excel、按题目统计正确率、可视化图表数据表这块是重中之重表设计好不好直接决定后面写代码是省心还是崩溃。核心表大致有用户表user、科目表subject、题库表question、试卷表exam_paper、试卷题目关联表exam_paper_question、考试记录表exam_record、答题明细表exam_record_answer。用户表里用一个role字段区分三种角色就行不用分三个表存这是很多新手容易犯的错——没必要把账号体系拆得太碎权限控制靠Spring Security或者拦截器来做比表结构硬拆要优雅得多。题库表是这套系统的核心资产字段至少要包含题型、难度、题干、选项用JSON格式存方便扩展、正确答案、所属科目、创建人。试卷表和题目表是多对多关系必须拆一张关联表存题目在该试卷中的分值、序号。考试记录表和用户表关联答题明细表和考试记录表关联。这套关系理清楚了后面的业务逻辑其实就是对这几张表的增删改查加一些统计查询。2. 开发环境搭建与工程初始化2.1 开发环境准备JDK、Maven、MySQL、Node.js老规矩先把环境搞定。这套系统我调试时用的环境配置如下你如果版本略有差异问题也不大但要注意Java版本和SpringBoot版本的兼容性。JDK 1.8 或 JDK 11推荐JDK 8稳定性最高很多公司生产环境还在用Maven 3.6用IDE内置的也行但建议自己装一个方便命令行操作MySQL 5.7 或 8.08.0要注意时区问题后面会细说Node.js 1416也行Vue CLI和Vite都有要求太老的版本跑不起来前端包管理器npmNode.js自带或yarn这里有个非常常见的坑好多同学卡在MySQL安装这一步。如果你装的是MySQL 8.0安装过程中会让你设置root密码一定要记住安装完打开命令行输入mysql -u root -p能进说明装好了。对于SpringBoot连接MySQL 8.0需要特别注意驱动配置driver-class-name要写com.mysql.cj.jdbc.Driver连接URL要加上serverTimezoneAsia/Shanghai不然后端启动时会报时区错误。这个坑在热搜词里的mysql安装教程mysql安装配置教程springboot配置里反复出现确实非常典型。Maven方面如果你用IDEA的话其实不用额外下载IDEA自带Maven但最好改一下镜像源。在maven的settings.xml里配置阿里云镜像不然下载依赖的速度能让你怀疑人生。改完镜像源后SpringBoot依赖的下载速度至少提升十倍。这一步对于能顺利跑起项目来说极其重要很多同学卡在pom.xml报红其实就是依赖下载超时导致的。Node.js的安装相对省心去官网下载安装包一路下一步就行。装完之后打开终端验证node -v和npm -v能输出版本号就OK。Vue CLI可以全局安装也可以直接用npx去调用我个人的习惯是全局装一个npm install -g vue/cli后面创建项目方便。2.2 后端工程搭建与核心配置后端工程推荐直接用Spring Initializr创建去Spring官网的start.spring.io页面填好项目基本信息groupId、artifactId选上需要的依赖Spring Web、MySQL Driver、MyBatis或MyBatis-Plus、Lombok生成后解压用IDEA打开就行。pom.xml里最核心的依赖大概长这样dependencies !-- Web 启动器 -- dependency groupIdorg.springframework.boot/groupId artifactIdspring-boot-starter-web/artifactId /dependency !-- MyBatis 启动器如果用MyBatis-Plus就换掉 -- dependency groupIdorg.mybatis.spring.boot/groupId artifactIdmybatis-spring-boot-starter/artifactId version2.3.1/version /dependency !-- MySQL 驱动 -- dependency groupIdmysql/groupId artifactIdmysql-connector-java/artifactId scoperuntime/scope /dependency !-- Lombok减少getter/setter样板代码 -- dependency groupIdorg.projectlombok/groupId artifactIdlombok/artifactId optionaltrue/optional /dependency /dependencies如果你用MyBatis-Plus那就不需要单独配mybatis的老配置了因为MyBatis-Plus自带增强功能单表CRUD连SQL都不用写非常省事。对于在线考试系统这种以单表操作为主、少量复杂统计查询的项目MyBatis-Plus确实能提高不少开发效率。然后是application.yml配置文件这是SpringBoot项目的命门所有环境相关的参数都在这里。核心配置如下server: port: 8081 spring: datasource: url: jdbc:mysql://localhost:3306/exam?useUnicodetruecharacterEncodingutf8serverTimezoneAsia/Shanghai username: root password: 你的数据库密码 driver-class-name: com.mysql.cj.jdbc.Driver mybatis-plus: mapper-locations: classpath:mapper/*.xml configuration: log-impl: org.apache.ibatis.logging.stdout.StdOutImpl map-underscore-to-camel-case: true这里有两个要点。第一个是characterEncodingutf8这个不加的话存中文会乱码第二个是serverTimezoneAsia/Shanghai不加的话MySQL 8.0启动报错。map-underscore-to-camel-case这个配置也建议打开这样数据库里的下划线字段名create_time实体类里的createTime字段能自动映射。工程结构上我推荐按controller/service/mapper/entity四层分包。新手容易犯的错误是把所有代码都塞Controller里看着是写完了但后面维护和写论文都痛苦。分层的好处是Controller只负责接收参数和返回结果Service负责业务逻辑Mapper负责和数据库打交道。代码结构清楚了论文的系统设计章节也就好写了——直接把分层架构图画出来你都不用绞尽脑汁去想措辞。2.3 前端工程搭建从Vue CLI到页面骨架前端我用的Vue 2 Element UI这套组合在国内使用最广、资料最多踩坑的时候网上一搜就有答案。如果你用Vue 3对应组件库是Element Plus语法差异也不大但有些第三方插件可能不支持Vue 3需要确认好兼容性。创建项目vue create exam-ui选择Router和Vuex或PiniaCSS预处理器建议选Less或Sass项目初始化之后先安装Element UInpm install element-ui npm install axios然后在main.js里引入import Vue from vue import App from ./App.vue import ElementUI from element-ui import element-ui/lib/theme-chalk/index.css import router from ./router import store from ./store Vue.use(ElementUI) Vue.config.productionTip false new Vue({ router, store, render: h h(App) }).$mount(#app)前端路由的配置是另一个高频踩坑点。Vue Router有hash模式和history模式两种。开发时候用hash模式最省心URL里带个#号虽然丑点但不出幺蛾子但如果部署上线想要漂亮一点的URL就用history模式。用history模式一旦部署后刷新某个路由页面就会出现404这个不是路由本身配置错了是服务器需要做转发配置——把所有请求都转发到index.html上。这个坑在热搜词vue路由下被反复问我会在后面的部署章节详细说。axios请求的封装也是必要一步。考试系统里请求要统一带上token响应要统一处理错误码比如token过期就跳到登录页。不封装的话每个页面都要写一遍请求头配置代码重复又难看。我在项目里一般这样封装import axios from axios import { Message } from element-ui import router from ../router const service axios.create({ baseURL: /api, timeout: 10000 }) service.interceptors.request.use(config { const token localStorage.getItem(token) if (token) { config.headers[Authorization] token } return config }) service.interceptors.response.use( response { const res response.data if (res.code ! 200) { Message.error(res.message || 请求失败) return Promise.reject(new Error(res.message)) } return res }, error { if (error.response error.response.status 401) { router.push(/login) } Message.error(网络异常请稍后重试) return Promise.reject(error) } ) export default service前端页面按角色拆分布局登录页独立登录后进入主框架侧边栏顶栏内容区。管理员和教师共用一套布局只是菜单项不同——这里用路由的meta信息配合导航守卫来做权限控制比在页面里写一堆v-if要清爽得多。比如路由配置上写meta: { roles: [admin, teacher] }然后在router.beforeEach里检查当前用户角色不匹配就直接跳登录页。3. 核心功能实现拆解与关键代码思路3.1 登录认证与权限控制为什么选择JWT在线考试系统作为前后端分离架构多端登录考生端、教师端、管理员端传统的Session方式有几个硬伤Session存在服务器内存里扩展性差前后端分离时处理跨域与会话共享都很别扭。相比之下JWTJSON Web Token这种无状态认证方案就特别适合。登录成功后服务端签发一个包含用户ID和角色的token字符串返回给前端前端存在localStorage里之后每次请求都带上它。服务端拿token一解析就知道你是谁、有什么权限不需要在服务端存任何会话信息。JWT的使用流程三步走登录接口校验账号密码→生成token返回给前端→维护一个拦截器解析token并存入当前线程上下文。后端关键代码如下// 登录接口 PostMapping(/login) public Result login(RequestBody LoginDTO loginDTO) { User user userService.login(loginDTO.getUsername(), loginDTO.getPassword()); if (user null) { return Result.error(用户名或密码错误); } String token JwtUtil.createToken(user.getId(), user.getUsername(), user.getRole()); return Result.success(token); }// JWT工具类核心方法 public class JwtUtil { private static final String SECRET your-secret-key; private static final long EXPIRE_TIME 7 * 24 * 60 * 60 * 1000; public static String createToken(Long userId, String username, String role) { return Jwts.builder() .claim(userId, userId) .claim(username, username) .claim(role, role) .setExpiration(new Date(System.currentTimeMillis() EXPIRE_TIME)) .signWith(SignatureAlgorithm.HS256, SECRET) .compact(); } public static Claims parseToken(String token) { return Jwts.parser().setSigningKey(SECRET).parseClaimsJws(token).getBody(); } }身份认证解决了权限控制就好办了。定义一个拦截器在preHandle方法里从请求头里取token解析成功就放行失败就返回401。然后针对角色控制开一个接口上有不同的权限要求时在方法上加一个自定义注解RequireRole(admin)拦截器解析出来再比对一下这样权限控制非常灵活。考试系统中学生只有访问考试相关接口的权限教师可以管理题库和试卷管理员所有接口都能访问——用这个方案角色和接口权限的映射关系一目了然。3.2 题库管理与组卷策略随机组卷的算法细节题库管理本身不难就是普通的增删改查。但有几个细节值得注意第一选项用JSON格式存。很多新手在数据库里设计四个字段optionA、optionB、optionC、optionD这个设计是能跑但扩展性极差——多选题怎么办判断题只有对错怎么办把选项统一存成JSON字符串查询出来用fastjson或Jackson解析成数组这样任何题型都能适配。第二批量导入功能强烈建议做。如果题库里几千道题让老师一道一道在网页上录入那这个系统离被抛弃就不远了。用EasyExcel或POI解析Excel提供标准模板下载老师填好表格传上去后台批量插入数据库。这个功能写起来大概几十行代码但实际使用体验的提升是质变级的。组卷策略是考试系统的核心算法常见的有两种手动选题和随机抽题。手动选题就是教师在题库里勾选题目设置每道题的分值然后生成试卷。这个实现最简单一份试卷对应多道题目用中间表存关联关系就行。随机抽题则更有技术含量。比如试卷要求单选题20道每题3分多选题5道每题4分判断题10道每题1分。随机抽题算法需要考虑知识点覆盖和难度均衡。我的实现思路是先按题型分类在每种题型内按难度系数分组再从各组随机抽取指定数量的题目。具体的算法流程从请求参数中获取组卷规则题型、数量、难度分布对每个题型按难度分组查询符合条件的题目ID列表在每个难度分组内用随机数从题目ID列表中抽取指定数量汇总所有抽中的题目如果某个分组数量不够返回提示题库中题目数量不足核心代码public ListQuestion generatePaper(ExamPaper paper) { ListPaperRule rules paper.getRules(); // 组卷规则列表 ListQuestion selectedQuestions new ArrayList(); for (PaperRule rule : rules) { // 按题型难度查询可用的题目 QueryWrapperQuestion wrapper new QueryWrapper(); wrapper.eq(question_type, rule.getQuestionType()) .eq(difficulty, rule.getDifficulty()) .eq(subject_id, paper.getSubjectId()) .eq(status, 1); ListQuestion candidates questionMapper.selectList(wrapper); // 随机抽取 Collections.shuffle(candidates); int count Math.min(rule.getCount(), candidates.size()); selectedQuestions.addAll(candidates.subList(0, count)); // 校验数量是否满足 if (count rule.getCount()) { throw new BizException(题型 rule.getQuestionType() 的题目数量不足); } } return selectedQuestions; }这里有个容易被忽略的点对每组题目抽完后要保存哪道题对应多少分这个信息所以中间表exam_paper_question里除了paper_id和question_id还必须有score字段和sort_order字段题目序号。很多粗制滥造的源码只存了个关联关系没有分值字段导致整个试卷只支持统一分值改卷时非常不灵活。3.3 在线答题流程计时、切屏检测与自动判分的实现在线考试和纸质考试最大的区别就是防作弊的手段。这套系统实现了基础的在线考试流程整体的状态机是这样的进入考试→读取试卷→倒计时→答题→切屏警告→交卷→系统判分→展示成绩。进入考试时前端要做两件事第一是从后端拿到该考生的试卷题目第二是启动倒计时。倒计时的实现要注意一点不要只在前端做倒计时因为用户刷新页面或关闭浏览器重新打开前端计时器就会丢失。正确的做法是后端在考试记录表里记录考试开始时间前端每次请求时拿到剩余秒数。前端倒计时只做展示后端才是计时仲裁者。这样即使刷新页面重新请求一次就能拿到正确的剩余时间。答题过程中的自动保存也有讲究。不能等考生把全部题答完才提交万一中间断网或浏览器闪退就前功尽弃了。我的做法是每5秒检查一次答题区是否有变化有变化就调用一次保存接口把当前题目的答案写到exam_record_answer表里。这样断点续考也容易实现——进入考试时从exam_record_answer里读取已经保存的答案回填到页面上。切屏检测是防作弊的关键。实现思路是监听浏览器的visibilitychange事件和window.blur事件。一旦发现页面不可见就记录一次切屏记录并警告。最简单的做法document.addEventListener(visibilitychange, () { if (document.hidden) { // 调用后端接口记录切屏行为 saveScreenSwitchLog() this.$message.warning(检测到切屏行为系统已记录) } })可以再加一个限制切屏超过3次就自动交卷。这个其实就是给后端接口传递一个切屏次数参数后端判断超出阈值后把考试记录状态改为已交卷违纪。这种设计在毕业论文的系统测试章节里写上系统能够有效检测切屏并自动交卷是一个很不错的亮点。自动判分逻辑在服务端来做不要在前端做——虽然前端也可以判分但服务端判分才是可信的。核心逻辑是遍历答题明细表比对考生答案与题库表里的正确答案public ExamResult autoGrade(Long examRecordId) { ListExamRecordAnswer answers examRecordAnswerMapper.selectByExamRecordId(examRecordId); ExamRecord record examRecordMapper.selectById(examRecordId); int totalScore 0; int correctCount 0; for (ExamRecordAnswer answer : answers) { Question question questionMapper.selectById(answer.getQuestionId()); if (question.getAnswer().equals(answer.getUserAnswer())) { totalScore answer.getScore(); correctCount; answer.setIsCorrect(1); } else { answer.setIsCorrect(0); } examRecordAnswerMapper.updateById(answer); } record.setScore(totalScore); record.setStatus(2); // 已完成 examRecordMapper.updateById(record); return new ExamResult(totalScore, correctCount); }这里容易踩坑的是多选题的判分策略完全匹配才得分还是少选得一半分两种策略都有场景如果你做的是从业资格类考试一般要求完全匹配如果是学校平时测验老师可能希望少选得半分。这个策略建议做成试卷级别的配置字段让老师在创建试卷的时候自己选。3.4 成绩统计与可视化试卷分析怎么做考试成绩算出来只是第一步一个完整的在线考试系统还要提供成绩分析和试卷分析这部分在毕业论文里也是浓墨重彩的一笔。成绩分析主要展示在教师端的考试成绩页面查看某场考试的平均分、最高分、最低分、及格率、分数段分布。用SQL做聚合查询GROUP BY 条件统计就能搞定SELECT COUNT(*) AS totalCount, AVG(score) AS avgScore, MAX(score) AS maxScore, MIN(score) AS minScore, SUM(CASE WHEN score 60 THEN 1 ELSE 0 END) AS passCount FROM exam_record WHERE exam_paper_id #{paperId}分数段分布可以用一条GROUP BY CASE WHEN实现SELECT CASE WHEN score 90 THEN 90-100 WHEN score 80 THEN 80-89 WHEN score 70 THEN 70-79 WHEN score 60 THEN 60-69 ELSE 60以下 END AS scoreRange, COUNT(*) AS count FROM exam_record WHERE exam_paper_id #{paperId} GROUP BY scoreRange前端可视化我用的是ECharts。分数段分布用柱状图或饼图展示按科目统计平均分用柱状图学生个人历次成绩走势用折线图。ECharts的引入很简单npm安装echarts然后按需引入图表组件就行。这里有一个经验之谈ECharts图表的标题和提示框里的文字一定要改成中文并且跟论文里的截图保持一致这样答辩老师看着也舒服。4. 部署发布、论文撰写与高频问题排查4.1 前后端分离项目的打包部署项目做完要跑起来有两种方式一种就是本机直接启动后端IDE里点运行前端npm run serve这种方式自己调试没问题但要做成能交付的成果最好掌握打包部署的流程。后端打包很简单Maven的package命令打成jar包mvn clean package -DskipTests打包完成后target目录下会生成一个exam-system-0.0.1.jar直接用Java运行java -jar exam-system-0.0.1.jar需要注意如果配置了多环境application-dev.yml、application-prod.yml启动时可以指定环境java -jar exam-system-0.0.1.jar --spring.profiles.activeprod前端打包更简单npm run build生成dist目录里面是静态文件。部署方案有两种常见组合。第一种前端dist文件放在Nginx的html目录下Nginx监听80端口把/api路径的请求反向代理到后端的8081端口这是最标准的做法。Nginx配置核心部分server { listen 80; server_name your-domain.com; location / { root /usr/share/nginx/html; index index.html; try_files $uri $uri/ /index.html; # history模式刷新404的关键 } location /api { proxy_pass http://localhost:8081; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; } }try_files那一行就是解决history路由模式刷新404的关键网上vue路由刷新404的问题答案就是这个。第二种部署方式是把前端dist目录拷贝到SpringBoot的src/main/resources/static目录下再打包这样前后端就合并成一个jar包了部署简单但缺点是静态资源和后端接口耦合在一起后续前端单独升级不方便。我建议还是用Nginx方案更贴近企业真实部署习惯部署的文章也好写一些。4.2 毕业设计论文的结构与写作技巧这个压缩包里带论文对做毕设的人来说是很大的参考价值。我看了这套系统配套的论文结构是标准的高校毕业设计论文格式大体包括摘要中英文、绪论研究背景、国内外现状、研究内容、相关技术介绍、系统需求分析、系统设计、系统实现、系统测试、总结与展望、参考文献、致谢。写论文最容易犯的毛病是技术介绍部分凑字数系统设计部分太简略。我给出直接可以套用的写作思路绪论部分研究背景要讲在线教育的普及和传统考试方式的弊端不要写废话两三段说清楚就行。国内外现状可以简单提一些已有的在线考试系统产品但不要过多重点落在现有系统存在哪些不足本系统要怎么解决。技术介绍每项技术写一页左右讲清楚是什么、有什么优点、为什么本项目用它。SpringBoot写它的自动配置和生态MySQL写事务和数据一致性Vue写组件化和响应式。需求分析这是业务到技术的桥梁一定要画用例图管理员用例、教师用例、学生用例和数据流图。用例图画好后面写功能设计就有了骨架。系统设计重点画系统架构图前后端分离的结构、功能模块图用思维导图的形式把功能列全、数据库ER图。ER图是答辩老师最爱看的部分把表结构画清楚字段写明白分能拿到手。系统实现按照功能模块→实现思路→核心代码→运行截图的节奏写每个功能模块都要有截图重要的逻辑给代码片段不用贴全核心几行就够代码格式记得设置好别直接截图糊上去。系统测试测试用例表是必须的写清楚测试模块、测试步骤、预期结果、实际结果。功能测试用例能写多少写多少性能测试用JMeter跑一下并发量如果做了也是一个加分项。论文的系统测试部分很多人会犯空话套话的毛病比如经过测试系统运行稳定功能正常——没有一个测试数据老师看到这种话会皱眉头。建议把每个功能模块的测试用例整理成一个表格系统测试结果给出具体的测试环境配置、并发用户数、平均响应时间等。哪怕数据是开发环境跑出来的你写清楚了也好过什么都没写。4.3 高频启动报错与排查实录我复盘了一下开发这套系统时遇到的典型报错也是网上被问得最多的问题按频率从高到低排1. 数据库连接失败和时区错误报错信息一般是Caused by: com.mysql.cj.exceptions.InvalidConnectionAttributeException: The server time zone value...。解决方案就是JDBC URL里加上serverTimezoneAsia/Shanghai。另外确认MySQL服务是否启动Windows打开服务管理器看MySQL服务Linux用systemctl status mysqld。数据库名、用户名、密码对不上也会报连接失败检查一下application.yml的前三项配置即可。2. SpringBoot版本太高导致javax变成jakarta这是个很多人碰到的新问题。SpringBoot 3.0以上版本从Java EE换到了Jakarta EE很多年前写的代码引用的包是javax.servlet.在SpringBoot 3里全都变成jakarta.servlet.。如果你下载的模板或教程代码用的SpringBoot 2.x而你自己创建项目选了最新的SpringBoot 3.x运行直接编译不过。解决方法是把版本降级到2.7.x或者把代码里的javax包全部换成jakarta包。对毕设来说我建议用SpringBoot 2.7.x资料多碰到问题网上都能搜到答案兼容性问题少。这也是热搜词springboot版本太高背后真正的原因。3. 跨域问题前端跑在localhost:8080后端跑在localhost:8081不配置跨域的话浏览器直接拦截请求控制台报CORS错误。解决方案是在后端写一个CorsFilter或者加个CrossOrigin注解更规范的做法是加一个配置类Configuration public class CorsConfig implements WebMvcConfigurer { Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping(/**) .allowedOriginPatterns(*) .allowedMethods(GET, POST, PUT, DELETE) .allowedHeaders(*) .allowCredentials(true) .maxAge(3600); } }注意allowCredentials(true)时不能用allowedOrigins()得用allowedOriginPatterns()否则会报Origin is not allowed by Access-Control-Allow-Origin。4. 中文乱码两种场景一是后端返回的JSON数据中文变成问号检查项目编码是否是UTF-8IDEA右下角看编码格式pom.xml里的spring-boot-starter-web已经默认把HTTP请求和响应的编码设为UTF-8一般不会出问题二是从数据库里查出来的中文乱码检查MySQL连接URL里的characterEncodingutf8以及建表时的字符集是否用utf8mb4。5. 端口占用后端启动报8081端口被占用Windows下netstat -ano | findstr 8081然后taskkill /PID 进程号 /FLinux下lsof -i:8081kill掉对应进程。或者在application.yml里改一个不冲突的端口。6. 前端npm install报错最常见的是node-sass下载失败。现在基本没人用node-sass了建议用sassdart-sass替代后者安装速度快兼容性也好。另外在package.json里把vue/cli-service的版本稍微降一点或者升级Node.js版本通常能解决问题。还有一种是网络问题npm install超时或下载失败换成淘宝镜像源能解决npm config set registry https://registry.npmmirror.com4.4 从这套系统还能扩展出去的方向这个系统做出来已经是一个完整的毕设项目了但如果想让你的项目比其他人更有亮点在答辩时更有话可说可以在这个版本的基础上升级几个方向第一加入人脸识别防作弊。现在的切屏检测只能管浏览器内的行为摄像头拍不到屏幕。如果调用人脸检测API比如百度的离线人脸识别SDK在考试过程中定时抓拍用深度学习模型判断考生是否在认真答题检测视线方向、是否有多人脸整个系统的防作弊等级就上一个台阶这个方向写论文时也可以当创新点。第二智能组卷。现在的组卷策略是按题型难度知识点随机抽取如果再引入遗传算法根据历史成绩数据计算每道题的区分度和信度自动生成一份知识点覆盖最均衡、难度系数最合理的试卷这就是一个很好的研究点。第三分布式部署。用Spring Cloud微服务拆分考试服务、题目服务、用户服务、统计分析服务独立部署Redis存验证码和考试临时数据RabbitMQ处理异步交卷日志这套架构一上项目就从课设水平直接变成生产级水平能写的内容就更多了。我个人在实际操作中的体会是在线考试系统看起来是无数人做过的老选题但真正把它做到细节完善、逻辑自洽、部署顺畅远比想象中费功夫。最容易被低估的是那些边缘功能——比如Excel批量导入题目的模板设计、考试成绩导出的格式兼容、试卷编辑时题目的动态增删这些功能不做也能跑但做了才会让人觉得这系统是能用的而不是能演示的。如果时间充足我建议你先把基础版本跑通再挑一个方向做深做实这份经历不管是写在简历里还是讲在答辩现场都比一份挑不出毛病的平庸作业有价值得多。本文还有配套的精品资源点击获取 基于SpringBoot+Vue的在线考试系统设计与实现
简介这是一套面向高校计算机专业毕业设计或课程实训的完整在线考试系统实现方案基于SpringBoot后端框架、MySQL关系型数据库与Vue前端技术栈构建解决传统纸质考试组织难、阅卷慢、数据难追溯等实际问题。资源包共216个文件包含80个Java后端业务逻辑与控制器代码、57个Vue组件及路由页面、16个JavaScript工具脚本、14个XML配置文件、23张PNG界面截图及1份SQL建表脚本辅以论文文档.docx、系统设计说明.md与安全配置类WebSecurityConfig.java整体压缩包仅6.3MB轻量易部署。已有9242人学习下载涵盖前后端分离开发全流程从用户角色权限管理、题库维护、随机组卷、限时作答到自动评分与成绩统计结构清晰、注释完整适合作为Java Web全栈开发入门到进阶的实践范例。1. 项目定位与整体设计思路1.1 这个系统解决的是什么问题做在线考试系统这个选题的人我猜十有八九是计算机相关专业的毕业生或者正在做课设的学生。这个题目的出现频率之高几乎和学生管理系统图书管理系统并列原因很简单它不是一个纯CRUD的玩具项目有完整的业务闭环建题库→组卷→答题→判分→统计分析但又没有复杂到让人望而却步的程度正好处在能写清楚又不会太难的甜点区。但市面上流传的所谓源码质量参差不齐。有的连数据库脚本都没给全有的前端用的是老掉牙的JSP还有的跑起来直接白屏报错。这套基于SpringBootMySQLVue的在线考试系统说实话是同类毕设里比较规范的一套技术栈比较新前后端分离的结构也符合目前企业招聘时的主流要求。它解决的问题很明确让老师/管理员可以高效管理题库、组卷、批阅让考生可以随时随地在网页上完成考试系统自动判分、自动统计成绩省去人工收发试卷和批改的重复劳动。这个项目适合谁三类人一是正在做毕业设计、需要一套可信参考源码的学生二是想快速上手SpringBootVue全栈开发、但不想从零开始搭框架的Java学习者三是企业里需要给内部员工做培训考核、想低成本搭一套考试系统的人。它的核心价值在于技术选型主流、业务逻辑完整、代码结构清晰你可以直接运行它也可以按自己的需求改造它。1.2 为什么是 SpringBoot MySQL Vue 这个组合先说SpringBoot。它最核心的价值是约定优于配置。以前用SSHStrutsSpringHibernate那套光配置XML文件就能折腾一整天各种bean引用、事务配置、aop切面新手直接在配置阶段就劝退了。而SpringBoot通过自动配置机制把大部分工作都省了。你只要在pom.xml里加一个spring-boot-starter-web依赖一个注解SpringBootApplication就能起一个web服务。对于我们做毕设或者小规模项目来说这就是最优解——把时间花在业务逻辑上而不是配置文件里。更重要的是SpringBoot是目前国内中小型公司后端的主流框架学会它实习面试时至少不会被当成什么都不会的小白。再说MySQL。虽然现在PostgreSQL也挺流行但MySQL在国内的普及度依然是最高的。大学课程教的是它公司的生产环境大概率也是它网上遇到问题一搜就能找到答案。就这个在线考试系统来说数据量根本不会大到需要分库分表的程度MySQL单库完全扛得住。而且MySQL在事务支持、数据一致性方面做得够用考试场景最重要的就是成绩不能算错用InnoDB引擎的ACID特性就能保证交卷时答题记录和成绩计算的一致性。选择MySQL是综合考虑学习成本、稳定性、生态成熟度之后的务实决定。最后说Vue。Vue在国内前端圈的地位不用多说了它的上手曲线比React平缓得多。模板语法很直观v-if/v-for/v-model这些指令几乎是一看就懂。在线考试系统这个场景典型的交互是登录、列表页、答题页、结果页这些都是典型的数据驱动视图需求Vue的响应式机制刚好正中靶心。再说Vue的路由、状态管理、组件化这些概念搞懂之后你就掌握了前端开发的通用思维以后换React也很快。这套系统用Vue做单页面应用SPA配合Element UI这样的组件库都不用自己写CSS几个标签一套页面就挺像样了。1.3 系统功能结构与数据表设计思路这套系统的角色权限设计比较标准三个角色管理员、教师出题人、学生考生。管理员负责系统管理、账号管理教师负责题库维护、试卷创建、考试成绩查看学生登录后可以参加考试、查看自己的成绩和错题。功能模块拆开来看系统管理用户管理对学生/教师账号的增删改查、角色权限分配、系统日志题库管理选择题、判断题、多选题等题型维护按科目/章节分类支持批量导入试卷管理创建试卷、配置题目手动选题或随机抽题、设置考试时间、总分和及格线在线考试考试倒计时、答题、自动保存、交卷、切屏警告、防作弊成绩与统计自动判分、成绩列表、导出Excel、按题目统计正确率、可视化图表数据表这块是重中之重表设计好不好直接决定后面写代码是省心还是崩溃。核心表大致有用户表user、科目表subject、题库表question、试卷表exam_paper、试卷题目关联表exam_paper_question、考试记录表exam_record、答题明细表exam_record_answer。用户表里用一个role字段区分三种角色就行不用分三个表存这是很多新手容易犯的错——没必要把账号体系拆得太碎权限控制靠Spring Security或者拦截器来做比表结构硬拆要优雅得多。题库表是这套系统的核心资产字段至少要包含题型、难度、题干、选项用JSON格式存方便扩展、正确答案、所属科目、创建人。试卷表和题目表是多对多关系必须拆一张关联表存题目在该试卷中的分值、序号。考试记录表和用户表关联答题明细表和考试记录表关联。这套关系理清楚了后面的业务逻辑其实就是对这几张表的增删改查加一些统计查询。2. 开发环境搭建与工程初始化2.1 开发环境准备JDK、Maven、MySQL、Node.js老规矩先把环境搞定。这套系统我调试时用的环境配置如下你如果版本略有差异问题也不大但要注意Java版本和SpringBoot版本的兼容性。JDK 1.8 或 JDK 11推荐JDK 8稳定性最高很多公司生产环境还在用Maven 3.6用IDE内置的也行但建议自己装一个方便命令行操作MySQL 5.7 或 8.08.0要注意时区问题后面会细说Node.js 1416也行Vue CLI和Vite都有要求太老的版本跑不起来前端包管理器npmNode.js自带或yarn这里有个非常常见的坑好多同学卡在MySQL安装这一步。如果你装的是MySQL 8.0安装过程中会让你设置root密码一定要记住安装完打开命令行输入mysql -u root -p能进说明装好了。对于SpringBoot连接MySQL 8.0需要特别注意驱动配置driver-class-name要写com.mysql.cj.jdbc.Driver连接URL要加上serverTimezoneAsia/Shanghai不然后端启动时会报时区错误。这个坑在热搜词里的mysql安装教程mysql安装配置教程springboot配置里反复出现确实非常典型。Maven方面如果你用IDEA的话其实不用额外下载IDEA自带Maven但最好改一下镜像源。在maven的settings.xml里配置阿里云镜像不然下载依赖的速度能让你怀疑人生。改完镜像源后SpringBoot依赖的下载速度至少提升十倍。这一步对于能顺利跑起项目来说极其重要很多同学卡在pom.xml报红其实就是依赖下载超时导致的。Node.js的安装相对省心去官网下载安装包一路下一步就行。装完之后打开终端验证node -v和npm -v能输出版本号就OK。Vue CLI可以全局安装也可以直接用npx去调用我个人的习惯是全局装一个npm install -g vue/cli后面创建项目方便。2.2 后端工程搭建与核心配置后端工程推荐直接用Spring Initializr创建去Spring官网的start.spring.io页面填好项目基本信息groupId、artifactId选上需要的依赖Spring Web、MySQL Driver、MyBatis或MyBatis-Plus、Lombok生成后解压用IDEA打开就行。pom.xml里最核心的依赖大概长这样dependencies !-- Web 启动器 -- dependency groupIdorg.springframework.boot/groupId artifactIdspring-boot-starter-web/artifactId /dependency !-- MyBatis 启动器如果用MyBatis-Plus就换掉 -- dependency groupIdorg.mybatis.spring.boot/groupId artifactIdmybatis-spring-boot-starter/artifactId version2.3.1/version /dependency !-- MySQL 驱动 -- dependency groupIdmysql/groupId artifactIdmysql-connector-java/artifactId scoperuntime/scope /dependency !-- Lombok减少getter/setter样板代码 -- dependency groupIdorg.projectlombok/groupId artifactIdlombok/artifactId optionaltrue/optional /dependency /dependencies如果你用MyBatis-Plus那就不需要单独配mybatis的老配置了因为MyBatis-Plus自带增强功能单表CRUD连SQL都不用写非常省事。对于在线考试系统这种以单表操作为主、少量复杂统计查询的项目MyBatis-Plus确实能提高不少开发效率。然后是application.yml配置文件这是SpringBoot项目的命门所有环境相关的参数都在这里。核心配置如下server: port: 8081 spring: datasource: url: jdbc:mysql://localhost:3306/exam?useUnicodetruecharacterEncodingutf8serverTimezoneAsia/Shanghai username: root password: 你的数据库密码 driver-class-name: com.mysql.cj.jdbc.Driver mybatis-plus: mapper-locations: classpath:mapper/*.xml configuration: log-impl: org.apache.ibatis.logging.stdout.StdOutImpl map-underscore-to-camel-case: true这里有两个要点。第一个是characterEncodingutf8这个不加的话存中文会乱码第二个是serverTimezoneAsia/Shanghai不加的话MySQL 8.0启动报错。map-underscore-to-camel-case这个配置也建议打开这样数据库里的下划线字段名create_time实体类里的createTime字段能自动映射。工程结构上我推荐按controller/service/mapper/entity四层分包。新手容易犯的错误是把所有代码都塞Controller里看着是写完了但后面维护和写论文都痛苦。分层的好处是Controller只负责接收参数和返回结果Service负责业务逻辑Mapper负责和数据库打交道。代码结构清楚了论文的系统设计章节也就好写了——直接把分层架构图画出来你都不用绞尽脑汁去想措辞。2.3 前端工程搭建从Vue CLI到页面骨架前端我用的Vue 2 Element UI这套组合在国内使用最广、资料最多踩坑的时候网上一搜就有答案。如果你用Vue 3对应组件库是Element Plus语法差异也不大但有些第三方插件可能不支持Vue 3需要确认好兼容性。创建项目vue create exam-ui选择Router和Vuex或PiniaCSS预处理器建议选Less或Sass项目初始化之后先安装Element UInpm install element-ui npm install axios然后在main.js里引入import Vue from vue import App from ./App.vue import ElementUI from element-ui import element-ui/lib/theme-chalk/index.css import router from ./router import store from ./store Vue.use(ElementUI) Vue.config.productionTip false new Vue({ router, store, render: h h(App) }).$mount(#app)前端路由的配置是另一个高频踩坑点。Vue Router有hash模式和history模式两种。开发时候用hash模式最省心URL里带个#号虽然丑点但不出幺蛾子但如果部署上线想要漂亮一点的URL就用history模式。用history模式一旦部署后刷新某个路由页面就会出现404这个不是路由本身配置错了是服务器需要做转发配置——把所有请求都转发到index.html上。这个坑在热搜词vue路由下被反复问我会在后面的部署章节详细说。axios请求的封装也是必要一步。考试系统里请求要统一带上token响应要统一处理错误码比如token过期就跳到登录页。不封装的话每个页面都要写一遍请求头配置代码重复又难看。我在项目里一般这样封装import axios from axios import { Message } from element-ui import router from ../router const service axios.create({ baseURL: /api, timeout: 10000 }) service.interceptors.request.use(config { const token localStorage.getItem(token) if (token) { config.headers[Authorization] token } return config }) service.interceptors.response.use( response { const res response.data if (res.code ! 200) { Message.error(res.message || 请求失败) return Promise.reject(new Error(res.message)) } return res }, error { if (error.response error.response.status 401) { router.push(/login) } Message.error(网络异常请稍后重试) return Promise.reject(error) } ) export default service前端页面按角色拆分布局登录页独立登录后进入主框架侧边栏顶栏内容区。管理员和教师共用一套布局只是菜单项不同——这里用路由的meta信息配合导航守卫来做权限控制比在页面里写一堆v-if要清爽得多。比如路由配置上写meta: { roles: [admin, teacher] }然后在router.beforeEach里检查当前用户角色不匹配就直接跳登录页。3. 核心功能实现拆解与关键代码思路3.1 登录认证与权限控制为什么选择JWT在线考试系统作为前后端分离架构多端登录考生端、教师端、管理员端传统的Session方式有几个硬伤Session存在服务器内存里扩展性差前后端分离时处理跨域与会话共享都很别扭。相比之下JWTJSON Web Token这种无状态认证方案就特别适合。登录成功后服务端签发一个包含用户ID和角色的token字符串返回给前端前端存在localStorage里之后每次请求都带上它。服务端拿token一解析就知道你是谁、有什么权限不需要在服务端存任何会话信息。JWT的使用流程三步走登录接口校验账号密码→生成token返回给前端→维护一个拦截器解析token并存入当前线程上下文。后端关键代码如下// 登录接口 PostMapping(/login) public Result login(RequestBody LoginDTO loginDTO) { User user userService.login(loginDTO.getUsername(), loginDTO.getPassword()); if (user null) { return Result.error(用户名或密码错误); } String token JwtUtil.createToken(user.getId(), user.getUsername(), user.getRole()); return Result.success(token); }// JWT工具类核心方法 public class JwtUtil { private static final String SECRET your-secret-key; private static final long EXPIRE_TIME 7 * 24 * 60 * 60 * 1000; public static String createToken(Long userId, String username, String role) { return Jwts.builder() .claim(userId, userId) .claim(username, username) .claim(role, role) .setExpiration(new Date(System.currentTimeMillis() EXPIRE_TIME)) .signWith(SignatureAlgorithm.HS256, SECRET) .compact(); } public static Claims parseToken(String token) { return Jwts.parser().setSigningKey(SECRET).parseClaimsJws(token).getBody(); } }身份认证解决了权限控制就好办了。定义一个拦截器在preHandle方法里从请求头里取token解析成功就放行失败就返回401。然后针对角色控制开一个接口上有不同的权限要求时在方法上加一个自定义注解RequireRole(admin)拦截器解析出来再比对一下这样权限控制非常灵活。考试系统中学生只有访问考试相关接口的权限教师可以管理题库和试卷管理员所有接口都能访问——用这个方案角色和接口权限的映射关系一目了然。3.2 题库管理与组卷策略随机组卷的算法细节题库管理本身不难就是普通的增删改查。但有几个细节值得注意第一选项用JSON格式存。很多新手在数据库里设计四个字段optionA、optionB、optionC、optionD这个设计是能跑但扩展性极差——多选题怎么办判断题只有对错怎么办把选项统一存成JSON字符串查询出来用fastjson或Jackson解析成数组这样任何题型都能适配。第二批量导入功能强烈建议做。如果题库里几千道题让老师一道一道在网页上录入那这个系统离被抛弃就不远了。用EasyExcel或POI解析Excel提供标准模板下载老师填好表格传上去后台批量插入数据库。这个功能写起来大概几十行代码但实际使用体验的提升是质变级的。组卷策略是考试系统的核心算法常见的有两种手动选题和随机抽题。手动选题就是教师在题库里勾选题目设置每道题的分值然后生成试卷。这个实现最简单一份试卷对应多道题目用中间表存关联关系就行。随机抽题则更有技术含量。比如试卷要求单选题20道每题3分多选题5道每题4分判断题10道每题1分。随机抽题算法需要考虑知识点覆盖和难度均衡。我的实现思路是先按题型分类在每种题型内按难度系数分组再从各组随机抽取指定数量的题目。具体的算法流程从请求参数中获取组卷规则题型、数量、难度分布对每个题型按难度分组查询符合条件的题目ID列表在每个难度分组内用随机数从题目ID列表中抽取指定数量汇总所有抽中的题目如果某个分组数量不够返回提示题库中题目数量不足核心代码public ListQuestion generatePaper(ExamPaper paper) { ListPaperRule rules paper.getRules(); // 组卷规则列表 ListQuestion selectedQuestions new ArrayList(); for (PaperRule rule : rules) { // 按题型难度查询可用的题目 QueryWrapperQuestion wrapper new QueryWrapper(); wrapper.eq(question_type, rule.getQuestionType()) .eq(difficulty, rule.getDifficulty()) .eq(subject_id, paper.getSubjectId()) .eq(status, 1); ListQuestion candidates questionMapper.selectList(wrapper); // 随机抽取 Collections.shuffle(candidates); int count Math.min(rule.getCount(), candidates.size()); selectedQuestions.addAll(candidates.subList(0, count)); // 校验数量是否满足 if (count rule.getCount()) { throw new BizException(题型 rule.getQuestionType() 的题目数量不足); } } return selectedQuestions; }这里有个容易被忽略的点对每组题目抽完后要保存哪道题对应多少分这个信息所以中间表exam_paper_question里除了paper_id和question_id还必须有score字段和sort_order字段题目序号。很多粗制滥造的源码只存了个关联关系没有分值字段导致整个试卷只支持统一分值改卷时非常不灵活。3.3 在线答题流程计时、切屏检测与自动判分的实现在线考试和纸质考试最大的区别就是防作弊的手段。这套系统实现了基础的在线考试流程整体的状态机是这样的进入考试→读取试卷→倒计时→答题→切屏警告→交卷→系统判分→展示成绩。进入考试时前端要做两件事第一是从后端拿到该考生的试卷题目第二是启动倒计时。倒计时的实现要注意一点不要只在前端做倒计时因为用户刷新页面或关闭浏览器重新打开前端计时器就会丢失。正确的做法是后端在考试记录表里记录考试开始时间前端每次请求时拿到剩余秒数。前端倒计时只做展示后端才是计时仲裁者。这样即使刷新页面重新请求一次就能拿到正确的剩余时间。答题过程中的自动保存也有讲究。不能等考生把全部题答完才提交万一中间断网或浏览器闪退就前功尽弃了。我的做法是每5秒检查一次答题区是否有变化有变化就调用一次保存接口把当前题目的答案写到exam_record_answer表里。这样断点续考也容易实现——进入考试时从exam_record_answer里读取已经保存的答案回填到页面上。切屏检测是防作弊的关键。实现思路是监听浏览器的visibilitychange事件和window.blur事件。一旦发现页面不可见就记录一次切屏记录并警告。最简单的做法document.addEventListener(visibilitychange, () { if (document.hidden) { // 调用后端接口记录切屏行为 saveScreenSwitchLog() this.$message.warning(检测到切屏行为系统已记录) } })可以再加一个限制切屏超过3次就自动交卷。这个其实就是给后端接口传递一个切屏次数参数后端判断超出阈值后把考试记录状态改为已交卷违纪。这种设计在毕业论文的系统测试章节里写上系统能够有效检测切屏并自动交卷是一个很不错的亮点。自动判分逻辑在服务端来做不要在前端做——虽然前端也可以判分但服务端判分才是可信的。核心逻辑是遍历答题明细表比对考生答案与题库表里的正确答案public ExamResult autoGrade(Long examRecordId) { ListExamRecordAnswer answers examRecordAnswerMapper.selectByExamRecordId(examRecordId); ExamRecord record examRecordMapper.selectById(examRecordId); int totalScore 0; int correctCount 0; for (ExamRecordAnswer answer : answers) { Question question questionMapper.selectById(answer.getQuestionId()); if (question.getAnswer().equals(answer.getUserAnswer())) { totalScore answer.getScore(); correctCount; answer.setIsCorrect(1); } else { answer.setIsCorrect(0); } examRecordAnswerMapper.updateById(answer); } record.setScore(totalScore); record.setStatus(2); // 已完成 examRecordMapper.updateById(record); return new ExamResult(totalScore, correctCount); }这里容易踩坑的是多选题的判分策略完全匹配才得分还是少选得一半分两种策略都有场景如果你做的是从业资格类考试一般要求完全匹配如果是学校平时测验老师可能希望少选得半分。这个策略建议做成试卷级别的配置字段让老师在创建试卷的时候自己选。3.4 成绩统计与可视化试卷分析怎么做考试成绩算出来只是第一步一个完整的在线考试系统还要提供成绩分析和试卷分析这部分在毕业论文里也是浓墨重彩的一笔。成绩分析主要展示在教师端的考试成绩页面查看某场考试的平均分、最高分、最低分、及格率、分数段分布。用SQL做聚合查询GROUP BY 条件统计就能搞定SELECT COUNT(*) AS totalCount, AVG(score) AS avgScore, MAX(score) AS maxScore, MIN(score) AS minScore, SUM(CASE WHEN score 60 THEN 1 ELSE 0 END) AS passCount FROM exam_record WHERE exam_paper_id #{paperId}分数段分布可以用一条GROUP BY CASE WHEN实现SELECT CASE WHEN score 90 THEN 90-100 WHEN score 80 THEN 80-89 WHEN score 70 THEN 70-79 WHEN score 60 THEN 60-69 ELSE 60以下 END AS scoreRange, COUNT(*) AS count FROM exam_record WHERE exam_paper_id #{paperId} GROUP BY scoreRange前端可视化我用的是ECharts。分数段分布用柱状图或饼图展示按科目统计平均分用柱状图学生个人历次成绩走势用折线图。ECharts的引入很简单npm安装echarts然后按需引入图表组件就行。这里有一个经验之谈ECharts图表的标题和提示框里的文字一定要改成中文并且跟论文里的截图保持一致这样答辩老师看着也舒服。4. 部署发布、论文撰写与高频问题排查4.1 前后端分离项目的打包部署项目做完要跑起来有两种方式一种就是本机直接启动后端IDE里点运行前端npm run serve这种方式自己调试没问题但要做成能交付的成果最好掌握打包部署的流程。后端打包很简单Maven的package命令打成jar包mvn clean package -DskipTests打包完成后target目录下会生成一个exam-system-0.0.1.jar直接用Java运行java -jar exam-system-0.0.1.jar需要注意如果配置了多环境application-dev.yml、application-prod.yml启动时可以指定环境java -jar exam-system-0.0.1.jar --spring.profiles.activeprod前端打包更简单npm run build生成dist目录里面是静态文件。部署方案有两种常见组合。第一种前端dist文件放在Nginx的html目录下Nginx监听80端口把/api路径的请求反向代理到后端的8081端口这是最标准的做法。Nginx配置核心部分server { listen 80; server_name your-domain.com; location / { root /usr/share/nginx/html; index index.html; try_files $uri $uri/ /index.html; # history模式刷新404的关键 } location /api { proxy_pass http://localhost:8081; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; } }try_files那一行就是解决history路由模式刷新404的关键网上vue路由刷新404的问题答案就是这个。第二种部署方式是把前端dist目录拷贝到SpringBoot的src/main/resources/static目录下再打包这样前后端就合并成一个jar包了部署简单但缺点是静态资源和后端接口耦合在一起后续前端单独升级不方便。我建议还是用Nginx方案更贴近企业真实部署习惯部署的文章也好写一些。4.2 毕业设计论文的结构与写作技巧这个压缩包里带论文对做毕设的人来说是很大的参考价值。我看了这套系统配套的论文结构是标准的高校毕业设计论文格式大体包括摘要中英文、绪论研究背景、国内外现状、研究内容、相关技术介绍、系统需求分析、系统设计、系统实现、系统测试、总结与展望、参考文献、致谢。写论文最容易犯的毛病是技术介绍部分凑字数系统设计部分太简略。我给出直接可以套用的写作思路绪论部分研究背景要讲在线教育的普及和传统考试方式的弊端不要写废话两三段说清楚就行。国内外现状可以简单提一些已有的在线考试系统产品但不要过多重点落在现有系统存在哪些不足本系统要怎么解决。技术介绍每项技术写一页左右讲清楚是什么、有什么优点、为什么本项目用它。SpringBoot写它的自动配置和生态MySQL写事务和数据一致性Vue写组件化和响应式。需求分析这是业务到技术的桥梁一定要画用例图管理员用例、教师用例、学生用例和数据流图。用例图画好后面写功能设计就有了骨架。系统设计重点画系统架构图前后端分离的结构、功能模块图用思维导图的形式把功能列全、数据库ER图。ER图是答辩老师最爱看的部分把表结构画清楚字段写明白分能拿到手。系统实现按照功能模块→实现思路→核心代码→运行截图的节奏写每个功能模块都要有截图重要的逻辑给代码片段不用贴全核心几行就够代码格式记得设置好别直接截图糊上去。系统测试测试用例表是必须的写清楚测试模块、测试步骤、预期结果、实际结果。功能测试用例能写多少写多少性能测试用JMeter跑一下并发量如果做了也是一个加分项。论文的系统测试部分很多人会犯空话套话的毛病比如经过测试系统运行稳定功能正常——没有一个测试数据老师看到这种话会皱眉头。建议把每个功能模块的测试用例整理成一个表格系统测试结果给出具体的测试环境配置、并发用户数、平均响应时间等。哪怕数据是开发环境跑出来的你写清楚了也好过什么都没写。4.3 高频启动报错与排查实录我复盘了一下开发这套系统时遇到的典型报错也是网上被问得最多的问题按频率从高到低排1. 数据库连接失败和时区错误报错信息一般是Caused by: com.mysql.cj.exceptions.InvalidConnectionAttributeException: The server time zone value...。解决方案就是JDBC URL里加上serverTimezoneAsia/Shanghai。另外确认MySQL服务是否启动Windows打开服务管理器看MySQL服务Linux用systemctl status mysqld。数据库名、用户名、密码对不上也会报连接失败检查一下application.yml的前三项配置即可。2. SpringBoot版本太高导致javax变成jakarta这是个很多人碰到的新问题。SpringBoot 3.0以上版本从Java EE换到了Jakarta EE很多年前写的代码引用的包是javax.servlet.在SpringBoot 3里全都变成jakarta.servlet.。如果你下载的模板或教程代码用的SpringBoot 2.x而你自己创建项目选了最新的SpringBoot 3.x运行直接编译不过。解决方法是把版本降级到2.7.x或者把代码里的javax包全部换成jakarta包。对毕设来说我建议用SpringBoot 2.7.x资料多碰到问题网上都能搜到答案兼容性问题少。这也是热搜词springboot版本太高背后真正的原因。3. 跨域问题前端跑在localhost:8080后端跑在localhost:8081不配置跨域的话浏览器直接拦截请求控制台报CORS错误。解决方案是在后端写一个CorsFilter或者加个CrossOrigin注解更规范的做法是加一个配置类Configuration public class CorsConfig implements WebMvcConfigurer { Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping(/**) .allowedOriginPatterns(*) .allowedMethods(GET, POST, PUT, DELETE) .allowedHeaders(*) .allowCredentials(true) .maxAge(3600); } }注意allowCredentials(true)时不能用allowedOrigins()得用allowedOriginPatterns()否则会报Origin is not allowed by Access-Control-Allow-Origin。4. 中文乱码两种场景一是后端返回的JSON数据中文变成问号检查项目编码是否是UTF-8IDEA右下角看编码格式pom.xml里的spring-boot-starter-web已经默认把HTTP请求和响应的编码设为UTF-8一般不会出问题二是从数据库里查出来的中文乱码检查MySQL连接URL里的characterEncodingutf8以及建表时的字符集是否用utf8mb4。5. 端口占用后端启动报8081端口被占用Windows下netstat -ano | findstr 8081然后taskkill /PID 进程号 /FLinux下lsof -i:8081kill掉对应进程。或者在application.yml里改一个不冲突的端口。6. 前端npm install报错最常见的是node-sass下载失败。现在基本没人用node-sass了建议用sassdart-sass替代后者安装速度快兼容性也好。另外在package.json里把vue/cli-service的版本稍微降一点或者升级Node.js版本通常能解决问题。还有一种是网络问题npm install超时或下载失败换成淘宝镜像源能解决npm config set registry https://registry.npmmirror.com4.4 从这套系统还能扩展出去的方向这个系统做出来已经是一个完整的毕设项目了但如果想让你的项目比其他人更有亮点在答辩时更有话可说可以在这个版本的基础上升级几个方向第一加入人脸识别防作弊。现在的切屏检测只能管浏览器内的行为摄像头拍不到屏幕。如果调用人脸检测API比如百度的离线人脸识别SDK在考试过程中定时抓拍用深度学习模型判断考生是否在认真答题检测视线方向、是否有多人脸整个系统的防作弊等级就上一个台阶这个方向写论文时也可以当创新点。第二智能组卷。现在的组卷策略是按题型难度知识点随机抽取如果再引入遗传算法根据历史成绩数据计算每道题的区分度和信度自动生成一份知识点覆盖最均衡、难度系数最合理的试卷这就是一个很好的研究点。第三分布式部署。用Spring Cloud微服务拆分考试服务、题目服务、用户服务、统计分析服务独立部署Redis存验证码和考试临时数据RabbitMQ处理异步交卷日志这套架构一上项目就从课设水平直接变成生产级水平能写的内容就更多了。我个人在实际操作中的体会是在线考试系统看起来是无数人做过的老选题但真正把它做到细节完善、逻辑自洽、部署顺畅远比想象中费功夫。最容易被低估的是那些边缘功能——比如Excel批量导入题目的模板设计、考试成绩导出的格式兼容、试卷编辑时题目的动态增删这些功能不做也能跑但做了才会让人觉得这系统是能用的而不是能演示的。如果时间充足我建议你先把基础版本跑通再挑一个方向做深做实这份经历不管是写在简历里还是讲在答辩现场都比一份挑不出毛病的平庸作业有价值得多。本文还有配套的精品资源点击获取