SSM+Vue在线考试系统毕设实战：从架构到二次开发完整指南

简介：一套基于Java的在线考试系统毕业设计资料包，采用SSM框架与Vue开发，适合计算机专业毕业设计、课程设计及Java Web学习者使用。系统按角色分为前台用户与管理员两大模块，用户可进行首页浏览、个人中心管理、考试成绩查询、公告与通知查看以及在线考试；管理员则负责用户管理、考试成绩管理、公告通知管理、考生通知管理、试题管理、试卷管理和考试管理，覆盖考试业务完整闭环。资源包共534个文件，包括95个Java源码、95个Class编译文件、43个Vue前端页面、34个XML配置，以及SQL数据库脚本、Maven配置等，结构清晰，便于直接导入IDE运行或进行功能扩展。压缩包整体大小为15.54MB，内置论文资料与演示文档，满足毕业设计从开发到答辩的文档需求。运行环境基于JDK 1.8、Tomcat 7/8/9、MySQL 5.7/8.0，支持IDEA、Eclipse等工具，部署门槛较低。目前该资源已有159人浏览学习，作为完整项目参考，能有效帮助读者理解在线考试系统的前后端交互与权限设计。

1. 在线考试系统能做什么：一个适合毕业设计的SSM+Vue完整闭环

如果你去翻一堆计算机毕业设计源码，会发现一个现象：很多项目号称"在线考试系统"，下载下来要么缺数据库脚本，要么前端跑不起来，要么论文里的功能跟代码完全对不上。而手里这套基于Java SSM框架加Vue的在线考试系统，是少有的三件套齐全、可以直接从0跑到答辩现场的项目——源码、数据库、论文都有，而且功能覆盖了登录、题库管理、随机组卷、在线答题、自动评分、成绩查询这些完整闭环。它的定位很明确：给需要做毕业设计或课程设计的人一个能落地、能演示、也能二次开发的起点。你可以先把它跑起来看完整效果，再照着论文把每个模块讲清楚，比对着空壳项目自己造轮子要省事得多。

2. 架构与目录：SSM后端加Vue前端，三件套资源怎么组织

2.1 技术选型：为什么这个项目用SSM而不是Spring Boot

先说技术栈。标题里写着"SSM框架 + Vue"，这是很典型的Java Web前后端分离或半分离结构。SSM指Spring、SpringMVC、MyBatis三件套——Spring管Bean和事务，SpringMVC管接口路由，MyBatis管数据库操作。这种组合在毕业设计中依然是主流，因为很多高校的Java课程、教材和论文模板都围绕SSM展开，写论文时能引用大量现成资料。

不过这里有个细节值得注意：现在很多标题写着"SSM"的毕设项目，实际是用SpringBoot作为启动壳，内部依然用SpringMVC和MyBatis，这样开发不用配置一堆XML，启动也方便。这套系统很可能就是这种形态。你拿到源码后先看一眼有没有@SpringBootApplication启动类，或者有没有spring-boot-maven-plugin，就能判断它是传统war包部署还是SpringBoot的jar包部署。两种都行，不冲突。

前端部分常见的是Vue 2 + Element UI，配合axios发请求。Vue 3现在也流行，但如果你是照着毕设模板做，Vue 2的踩坑资料更多、组件库更稳，遇到问题搜索起来也好查。这个项目用Vue 2还是Vue 3不影响整体理解，核心是路由、组件、状态管理这三板斧。

2.2 目录结构拆解：源码、数据库、论文分别放在哪

拿到项目后不要急着双击运行，先看目录。一个合格的毕设项目压缩包，展开后通常长这样：

online-exam/ ├── sql/ │ └── exam_system.sql # 数据库初始化脚本 ├── backend/ │ ├── pom.xml # Maven配置 │ └── src/main/ │ ├── java/com/exam/ │ │ ├── controller/ # 接口层：登录、考试、管理等 │ │ ├── service/ # 业务逻辑层 │ │ ├── mapper/ # MyBatis数据访问接口 │ │ ├── entity/ # 实体类 │ │ └── common/ # 统一返回结果、拦截器、工具类 │ └── resources/ │ ├── application.properties # 数据源、端口等配置 │ └── mapper/ # MyBatis的SQL XML文件 ├── frontend/ │ ├── package.json # 前端依赖 │ └── src/ │ ├── api/ # axios请求封装 │ ├── router/ # Vue路由 │ ├── views/ # 页面组件：登录、考试、管理后台 │ └── main.js # 入口 └── 论文/ └── 在线考试系统设计文档.doc

这个结构的好处是责任清晰：controller只管收请求、调服务、返回结果；service写业务逻辑，比如抽题、判分；mapper直接对应SQL语句；frontend里按页面对应功能。你要修改一个功能，只要顺着这个链条找到对应的三层文件就能改，不存在改一处要满项目翻找的情况。

资源层面，sql里的脚本是整个项目的根基。数据库没有，后端启动就报连接失败。论文则是答辩时用来解释设计的，后面我会专门说怎么让论文和代码保持一致，这里不赘述。

2.3 数据库设计：6张核心表把权限和考试流程串起来

数据库我数了一下，核心表大概6张，覆盖了用户、考试、题库、试卷、作答、成绩这六件事。字段设计不复杂，但该有的关联都有。

这个设计的关键点是：题目的答案直接存在question表里，判分时用用户答案和它比对即可；paper表决定了这场考试考哪些题；answer_record存的是用户每一次作答，就算自动判分出了问题，也能回溯原始答题记录。对毕设来说，这个表结构足够应付评委对"数据一致性"的追问。

3. 核心模块拆解：一次考试从登录到自动评分的完整链路

3.1 登录鉴权：拦截器怎么放行学生、教师、管理员

不管是哪种角色，登录入口是一样的。后端接收用户名和密码，比对用户表，然后往Session里写入当前用户信息。下面是一段典型的SSM登录接口：

@Controller @RequestMapping("/api/user") public class UserController { @Autowired private UserService userService; @PostMapping("/login") @ResponseBody public Result login(@RequestBody User user, HttpSession session) { User dbUser = userService.findByUsername(user.getUsername()); if (dbUser == null) { return Result.error("用户不存在"); } // 这里演示的是明文比对，实际项目可以用MD5或BCrypt加密 if (!dbUser.getPassword().equals(user.getPassword())) { return Result.error("密码错误"); } session.setAttribute("loginUser", dbUser); return Result.success(dbUser); } }

这段代码的逻辑：先用findByUsername查出一条用户记录，然后判断密码是否匹配。匹配成功后，把整个用户对象塞进Session，后续接口就能通过Session知道"当前是谁在操作"。参数@RequestBody User user要求前端传JSON格式的{username: "xxx", password: "xxx"}，Result是统一返回包装，带code和msg字段。

拦截器负责拦住那些需要登录才能访问的接口。比如学生查看考试列表、教师发布考试、管理员管理用户，都必须在Session里有loginUser：

public class LoginInterceptor implements HandlerInterceptor { @Override public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception { HttpSession session = request.getSession(); User user = (User) session.getAttribute("loginUser"); if (user == null) { response.setContentType("application/json;charset=utf-8"); response.getWriter().write("{\"code\":401,\"msg\":\"未登录或登录已过期\"}"); return false; } // 可以在这里根据请求的URL前缀做角色控制：/admin/** 要求管理员 return true; } }

拦截器在Spring配置里注册，通常要设置放行路径，比如/api/user/login和静态资源。这里有个常见设计取舍：传统SSM用Session，前后端分离后用Token更主流。这个项目如果前端通过axios携带Cookie访问，Session方案完全够用；如果前端是纯Token方式，那会有一个LoginFilter做Token解析，逻辑类似，只是把Session换成了Redis或本地存储。你改的时候看代码里有没有JWT相关依赖就能判断。

3.2 题库与试卷生成：随机抽题的两种写法

在线考试系统最让评委感兴趣的就是组卷逻辑。最常见的方案是：教师创建考试时，设定单选题、多选题、判断题各多少道，系统从题库里随机抽取。后端核心代码如下：

public List<Question> generatePaper(Integer examId) { // 查询考试配置 Exam exam = examMapper.selectById(examId); List<Question> paperQuestions = new ArrayList<>(); // 每种题型随机抽取指定数量 paperQuestions.addAll( questionMapper.selectRandomByType(1, exam.getSingleCount())); paperQuestions.addAll( questionMapper.selectRandomByType(2, exam.getMultiCount())); paperQuestions.addAll( questionMapper.selectRandomByType(3, exam.getJudgeCount())); // 把题目写入paper表，固定这场考试的试卷 Paper paper = new Paper(); paper.setExamId(examId); for (Question q : paperQuestions) { paper.setQuestionId(q.getId()); paperMapper.insert(paper); } return paperQuestions; }

对应Mapper里的SQL是抽题的关键：

<select id="selectRandomByType" resultType="com.exam.entity.Question"> SELECT * FROM question WHERE type = #{type} ORDER BY RAND() LIMIT #{limit} </select>

#{type}代表题型：1单选、2多选、3判断；#{limit}是要抽的数量。ORDER BY RAND()在MySQL里是随机排序，数据量几千道题时性能没问题，但如果题库到了几十万道，每次随机排序会拖慢数据库。那时候可以改成先随机算出一个ID区间，再从那一段里取数据。毕设的题库量通常几百道，用RAND()完全够，而且代码最好懂。

这里有个隐含问题：试卷什么时候生成？常见做法是教师点"发布考试"时一次性生成，每个学生看到的试卷是同一套。如果要求每个学生的题目顺序不同，可以在生成后对paperQuestions再做一次Collections.shuffle()。这个改动很简单，我在最后会提到。

3.3 考试进行时：答题提交与自动评分

学生进入考试页后，前端会倒计时，时间到了自动提交；学生手动交卷时，前端把所有答案整理成JSON数组提交到后端。后端评分逻辑如下：

@PostMapping("/submit") @ResponseBody public Result submit(@RequestBody SubmitVO submitVO) { // submitVO 包含 examId, userId, answers[{questionId, userAnswer}] List<AnswerItem> answers = submitVO.getAnswers(); int totalScore = 0; for (AnswerItem item : answers) { Question question = questionMapper.selectById(item.getQuestionId()); boolean correct = question.getAnswer().trim().equals(item.getUserAnswer().trim()); if (correct) { totalScore += question.getScore(); } // 保存每道题的作答记录，方便教师复核 answerRecordMapper.insert(...); } // 保存最终成绩 ExamResult result = new ExamResult(); result.setExamId(submitVO.getExamId()); result.setUserId(submitVO.getUserId()); result.setScore(totalScore); examResultMapper.insert(result); return Result.success(totalScore); }

这段代码最核心的一步是把用户答案和question.answer做字符串比对。注意这里用了trim()，因为用户答案可能带空格，标准答案也可能因为从Excel导入多出不可见字符，不trim很容易误判。评分后同时做了两件事：逐题写answer_record，汇总写exam_result。前者是为了"查分时能看到每道题对错"，后者是为了"展示总分"。这两条数据都写入后，前端跳转到成绩页就能显示得分。

参数SubmitVO是一个前端传来的自定义对象，里面包含考试ID、用户ID和答题列表。这里的userId不一定从请求里获取，而是从Session里取更安全，防止学生手动篡改JSON里的userId替别人交卷。有些版本确实会漏掉这个问题，你在二次开发时要注意。

3.4 前端Vue：路由守卫和页面状态管理

前端部分，Vue负责展示和调用后端接口。登录页把表单POST到后端后，要把用户信息存到localStorage，这样刷新页面后登录状态还在。路由守卫则保证没登录的人不能进考试页：

// 登录成功后 async handleLogin() { const res = await this.$http.post('/api/user/login', this.loginForm) if (res.data.code === 200) { localStorage.setItem('user', JSON.stringify(res.data.data)) // 根据角色跳转到不同首页 this.$router.push('/' + res.data.data.role) } else { this.$message.error(res.data.msg) } } // 路由守卫 router.beforeEach((to, from, next) => { const user = localStorage.getItem('user') if (!user && to.path !== '/login') { next('/login') } else { next() } })

这段代码里的$http是axios的实例化封装，统一了请求前缀和超时时间。路由守卫虽然只判断了"有没有user"，但已经足够拦住未登录访问。角色权限可以在守卫里再加一层判断，比如管理员页面要求JSON.parse(user).role === 'admin'。不过毕设演示阶段，通常只有学生、教师、管理员三种首页，路径不会太深。

答题页面用一个数组收集用户所选答案，比如selectedAnswers.push({questionId: item.id, userAnswer: choice})，倒计时结束或点击交卷时，把这个数组发给后端。这里要注意多选的用户答案要用逗号拼接成一个字符串，比如"A,B,C"，否则后端比对时会因为格式不一致误判。

4. 本地跑通全流程：从导入数据库到浏览器出界面

4.1 环境准备：JDK、Maven、MySQL、Node 的版本搭配

跑这套系统的环境组合，我建议按这个来：

• JDK 1.8（最常见，很多毕设代码用了lambda表达式和DateTime API，1.8完全够）
• Maven 3.6 左右（用来拉取依赖）
• MySQL 5.7 或 8.0（5.7更稳，8.0注意时区问题）
• Node.js 12 到 14（太新的Node版本有时候会因为依赖编译问题跑不动Vue2项目）
• IDEA 或 Eclipse（后端开发工具）
• VSCode 或 HBuilderX（前端开发工具）

这里有个血泪经验：不要用最新版Node去跑老Vue项目，比如Node17以上对crypto的哈希算法有变更，老项目装依赖时会爆digital envelope routines::unsupported。如果遇到这个错误，可以加NODE_OPTIONS=--openssl-legacy-provider，但最省事的还是装一个Node14左右的版本。

4.2 导入数据库与修改配置：必须改的4个地方

第一步，用Navicat或其他客户端执行sql/exam_system.sql。执行完会有6张表和一些测试数据。测试数据里通常会包含一个管理员账号、一个教师账号、一个学生账号，密码可能是123456，这些在论文或README里一般会写。

第二歩，打开backend/src/main/resources/application.properties，重点检查这四项：

spring.datasource.url=jdbc:mysql://localhost:3306/exam_system?useUnicode=true&characterEncoding=utf8&useSSL=false&serverTimezone=Asia/Shanghai spring.datasource.username=root spring.datasource.password=123456 server.port=8080

exam_system要和你建的数据库名一致；serverTimezone=Asia/Shanghai是MySQL8必须加的，不加会报时长错误；characterEncoding=utf8保证中文不乱码；server.port是后端端口，如果8080被占了可以改成8090，但记得前端代理的target也要跟着改。

第三步，检查MyBatis的mapper路径配置。如果是SpringBoot启动方式，通常已经有了mybatis.mapper-locations=classpath:mapper/*.xml，这个不用动。如果你发现启动后报"Invalid bound statement (not found)"，多半是XML文件没编译到target目录，Maven里加一段资源声明就能解决。

4.3 启动后端：jar包还是war包

启动后端前先判断项目形态。如果在pom.xml里看到了spring-boot-maven-plugin，那这就是一个SpringBoot壳的SSM项目，可以直接运行主类里的main方法。IDEA里右键Application.java选择Run，等到控制台出现Started Application就表示启动成功。如果包形式是war，那需要先把项目打包成war，拷贝到Tomcat的webapps目录，再启动Tomcat。

用Maven打包是常规操作：

mvn clean package -DskipTests

打包完成后在target目录会生成exam-system.jar或.war。jar包直接：

java -jar exam-system.jar

war包就放到Tomcat里。不管哪种方式，后端启动后你可以先用浏览器访问http://localhost:8080/api/user/login试试能不能通——注意这个地址如果是POST接口，直接访问会返回405或参数错误，但只要不是404，说明接口已经能处理请求了。

4.4 启动前端：npm脚本与代理转发

前端典型流程是：

cd frontend npm install npm run dev

npm install首次可能需要几分钟，如果网络不好会卡住。遇到安装失败时，我一般先删掉node_modules和package-lock.json，换成淘宝镜像源重新装：

npm install --registry=https://registry.npmmirror.com

npm run dev启动后，控制台会打印一个地址，一般是http://localhost:8081或3000。这时如果直接访问前端页面，会发现登录后请求后端接口报跨域。解决办法是在前端根目录的vue.config.js或config/index.js里配置代理：

module.exports = { devServer: { port: 8081, proxy: { '/api': { target: 'http://localhost:8080', // 后端地址 changeOrigin: true } } } }

它的作用是把前端发出的/api开头的请求，在开发服务器层面转发给localhost:8080，这样浏览器看到的请求始终是同源的，不触发跨域。配置好后重启npm run dev，打开页面用初始账号登录，就能看到完整的考试系统界面了。

5. 避坑排查：SSM+Vue项目最常见的五个翻车现场

5.1 数据库连接报错：Access denied / Unknown database / 时区

现象：后端启动时抛异常，报错关键字是Access denied for user、Unknown database 'exam_system'或者The server time zone value。

原因：前两个是账号密码或数据库名不对，第三个是MySQL8的时区问题。

解决：打开application.properties，把spring.datasource.password改成你本机MySQL的密码；确认数据库名存在且url里的名字一致；在url末尾加serverTimezone=Asia/Shanghai。如果是MySQL5.7，时区可以不写，但加上也没问题。

5.2 Vue代理不生效：请求404或跨域

现象：前端页面能打开，点登录后F12看到请求地址是http://localhost:8081/api/user/login，控制台报proxy error或跨域错误。

原因：proxy配置写错了，比如target端口写错；或者改完配置后没有重新启动npm run dev。

解决：先确认target里的端口和实际后端端口一致；改完配置后一定要重启开发服务器，只保存文件不重启有时不生效。如果代理写的是/api，那axios请求地址一定要以/api开头，不要在axios里写完整域名。

5.3 中文乱码：从页面到数据库的编码链路

现象：页面上输入中文用户名或答案，保存到数据库变成问号；或者查询出的中文显示乱码。

原因：这个连锁反应可能出在三个地方——前端页面没有<meta charset="utf-8">、后端接口读取时解码错误、数据库表本身不是utf8。

解决：前端入口HTML和JS都声明UTF-8；后端要确保Spring的CharacterEncodingFilter已注册，url参数带characterEncoding=utf8；MySQL建表时设置DEFAULT CHARSET=utf8mb4。已经乱码的表，用ALTER TABLE user CONVERT TO CHARACTER SET utf8mb4;修复，但历史数据可能救不回来，只能在导入脚本前就把编码处理好。

5.4 论文里的图表与代码不一致

现象：答辩时老师翻论文，看到第三章的系统结构图里画了一个"成绩导出模块"，但实际代码里找不到对应功能；或者论文里的数据库表字段和实际SQL脚本对不上。

原因：很多人下载的论文模板是别人项目的，题目一样但内部细节不同。系统的设计图可能是从另一套源码截取的。

解决：拿到这套项目后，先跑起来，把实际有的菜单、功能列出来，对照论文目录做增删。最好把数据库的6张表截图替换论文里的ER图，把核心Controller代码截图替换论文里的类图。答辩现场老师最关心的不是你写了多少，而是你能不能讲清楚自己系统里有什么。花一晚上时间让论文和代码对齐，比死记硬背论文有效得多。

5.5 端口被占用或前端后端不一致

现象：启动后端时报Port 8080 was already in use；或者后端启动了但前端登录时说"网络错误"。

原因：8080端口被其他程序占用，或者前端代理的target端口和后端实际端口不一致。

解决：后端换端口的话，要在application.properties改server.port，同时改前端proxy的target。如果你用的是IDEA，看到端口占用可以用netstat -ano | findstr 8080在Windows下找到PID，然后taskkill /PID 端口号 /F结束进程。Mac下用lsof -i :8080加kill -9。

6. 二次开发实战：把固定试卷改成随机组卷加定时发布

毕设系统最容易被问"你做了哪些创新点"。如果只是复现一个基本考试流程，很难拉开差距。我建议你在跑通项目后，从下面这个方案里选一个做改造成长点，成本低、效果好。

第一个改动：让每个学生拿到不同试卷。当前ORDER BY RAND()只会在教师发布时抽一次，所有学生看到同一套题。改成学生进入考试时，先查paper表里user_id是否为空，为空才抽题，这样每个学生第一次进入考试时才会生成自己的试卷。核心逻辑就是把generatePaper从发布环节挪到进入考试的接口里，然后给paper表加一个user_id字段。这个改动涉及一张表的DDL和两个Service方法的调用顺序，半天能写完，但答辩时讲"防作弊随机组卷"很有说服力。

第二个改动：给考试加一个定时发布状态。目前exam表虽然有start_time和end_time，但前端可能只做倒计时，学生可以通过改请求接口提前拿到考题。完整做法是后端在进入考试接口里判断当前时间是否在start_time和end_time之间，不在就拒绝返回"考试未开始"或"考试已结束"。前端可以加一个定时器轮询状态，但真正的安全边界必须在后端。就这一行判断，就能在答辩时讲"权限控制和接口安全"。

第三个改动：Excel批量导入题库。这是很实际的痛点——手动一道题一道题录入太慢，教师角色需要一个上传按钮。实现思路是前端用el-upload接收Excel文件，通过POI或EasyExcel解析成Question对象列表，一条条插入数据库。这个功能不仅能展示你掌握了文件上传和第三方工具库，还能让整个系统的实用性看起来更强。

我的建议是不要三个都做，选一个做到完整闭环就够了。做完后自己走一遍测试流程：不同角色登录、创建考试、学生参加、自动评分、教师查看成绩，每一步都能截图放进论文。

最后我分享一个习惯：从那以后，我每次拿到这种毕设项目源码，都强制自己先按"导入SQL → 启动后端 → 启动前端 → 跑通核心流程"这个顺序过一遍，再把论文翻出来对功能。这个顺序看起来简单，但能防住一大半的突发状况——数据库没导入就启动后端，只会看到一堆连接异常，你根本分不清是配置问题还是依赖问题。希望这些踩坑记录和改造思路，能帮你把这个在线考试系统顺利跑起来，答辩时心里有底。

本文还有配套的精品资源，点击获取