基于 Spring Boot 与 Vue.js 的在线考试系统设计实现

基于Spring Boot与Vue.js的在线考试系统设计实现

在传统课程考核场景中，纸质考试面临组卷周期长、人工阅卷工作量大、成绩反馈滞后等痛点。随着前后端分离架构与 RESTful 接口的成熟，将考试全流程迁移至浏览器端已成为高校与培训机构提升教学效率的可行方案。本文实现一套基于 Spring Boot + MyBatis-Plus + Vue.js 的在线考试系统，覆盖题库维护、试卷组卷、在线作答与自动判分、成绩可视化等完整业务链路，适合作为计算机专业课程设计或毕业设计的学习参考。

1 系统技术栈与架构

本系统采用经典的前后端分离 B/S 架构。后端基于 Spring Boot 2.1 构建 RESTful 接口层，使用 MyBatis-Plus 3.5 完成数据持久层映射，数据库选用 MySQL 5.7。前端采用 Vue.js 2.5 配合 Element UI 2.4 构建交互界面，ECharts 4.2 负责成绩分布图表渲染，前后端通过 Axios 完成 JSON 数据交换。

系统的分层架构自上而下依次为：前端 Vue 单页应用发起 HTTP 请求，经过 Spring Boot 的 DispatcherServlet 到达对应的 Controller 层，Controller 调用 Service 处理业务逻辑，Service 通过 MyBatis-Plus Mapper 操作 MySQL 数据库，执行结果逐层向上返回。前端接收到数据后由 Vue 组件完成页面渲染，各层职责边界清晰，便于独立开发与维护。

登录页截图与功能脑图分别展示了系统的入口界面与功能模块划分：

2 功能模块设计

系统面向管理员、教师与学生三类角色，设计五个核心功能模块。

登录与权限模块承担身份核验与会话维持。用户选择角色后输入账号密码，后端依据角色字段分别查询 admin、teacher、student 三张表，比对密码哈希后写入 Cookie 会话，角色信息决定前端路由跳转方向，实现三类用户的权限隔离。

题库管理模块供教师维护全部试题资源，支持选择题、填空题与判断题三种题型。每类题目均包含题干、参考答案、分值、所属科目与难度等级字段。教师可按科目或难度等级筛选已有题目，执行新增、编辑与删除操作。选择题额外包含四个选项字段，填空题与判断题结构相对精简。

试卷管理与组卷模块将题库中的题目组合为可上线考试的完整试卷。教师在组卷界面按题型、科目与难度勾选题目，系统实时汇总已选题目的数量与累计分值，避免分值配置失衡。试卷与题目之间通过中间表维护多对多关联，支持同一题目被多份试卷引用。

在线考试与自动判分模块面向学生提供作答环境。学生选择有效考试后，系统从关联试卷中取出全部题目逐题展示，页面顶部显示倒计时。交卷方式支持学生主动提交与超时自动收卷两种场景。提交后系统将学生答案与题库中的参考答案逐一比对，选择题与判断题按选项字符精确匹配，填空题按文本内容比对，按各题分值累加得出总分并写入成绩表。

成绩管理与可视化模块为教师与管理员提供成绩查询与统计分析能力。学生可按考试编号检索个人历次成绩，教师可按班级维度查看整体得分分布。统计数据按分数段分组计数，由 ECharts 渲染为柱状图与饼图，直观呈现及格率与各分数段人数占比。

3 数据库设计

系统数据库共设计十一张核心表，覆盖用户、题目、试卷、考试与成绩等业务实体。

用户域包含三张表：admin 表存储管理员信息，teacher 表存储教师信息，student 表存储学生信息，三者均包含登录账号（主键）、姓名、密码、角色标识与联系方式等公共字段，通过 role 字段区分用户类型。

题库域包含三张题型的独立表：multi_question 存储选择题（包含 answerA/B/C/D 四个选项字段），fill_question 存储填空题，judge_question 存储判断题。三张题目表共享 question、rightAnswer、score、section、level 等字段结构，支持按科目与难度归类检索。

考试域以 exam_manage 表为核心，记录每场考试的编号、描述、关联试卷编号、考试日期、时长、总分及适用的年级、专业、学期范围。paper 表存储试卷基本信息，paper_manage 中间表维护试卷与题目之间的多对多关联。

成绩域以 score 表记录学生参加各场考试的得分，包含客观题得分（etScore）、平时成绩（ptScore）与总成绩（score）三个字段，以及作答时间 answerDate。

各表之间通过主键外键关联：成绩表通过 studentId 关联学生，通过 examCode 关联考试；考试表通过 paperId 关联试卷；中间表通过 paperId 与 questionId 串联试卷与题目。

4 系统运行效果

系统后端打包为 Spring Boot 可执行 JAR，配置文件指定数据库连接参数后直接运行即可启动服务。前端提供开发服务器（npm run dev）与生产构建（npm run build）两套模式，开发模式下 webpack-dev-server 将 API 请求代理到后端端口，生产构建产物为纯静态资源，可部署至任意 HTTP 服务器。

登录界面采用简洁的三栏布局，顶部显示系统名称，中部为账号密码与角色下拉表单，登录成功后将依据角色字段跳转到对应的工作台页面。题库管理页面以标签页形式切换三种题型，表格内支持编辑与删除操作，右上角提供新增入口。组卷页面实时显示已选题目数量与总分，教师可灵活调整题目配比。在线考试页面固定显示剩余时间，选择题以单选按钮组呈现，判断题以是/否选项呈现，填空题提供文本输入框，底部放置提交按钮。成绩统计页面以 ECharts 柱状图展示各分数段人数，以饼图展示及格与不及格占比。

5 总结

本文实现了一套基于 Spring Boot + Vue.js 的在线考试系统，涵盖从用户登录、题库维护、试卷组卷到在线作答、自动判分与成绩可视化的完整业务流程。系统采用前后端分离架构，职责分层清晰，Spring Boot 提供稳健的接口服务与自动装配能力，MyBatis-Plus 简化了数据访问层的重复代码，Vue.js 组件化开发模式使前端维护成本可控。系统支持选择题、填空题与判断题三类客观题型的自动判分，可显著降低教师阅卷负担，对课程考核场景的信息化改造具有一定参考价值。

如有任何疑问，欢迎在评论区交流。
可显著降低教师阅卷负担，对课程考核场景的信息化改造具有一定参考价值。

如有任何疑问，欢迎在评论区交流。