基于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 组件化开发模式使前端维护成本可控。系统支持选择题、填空题与判断题三类客观题型的自动判分可显著降低教师阅卷负担对课程考核场景的信息化改造具有一定参考价值。如有任何疑问欢迎在评论区交流。可显著降低教师阅卷负担对课程考核场景的信息化改造具有一定参考价值。如有任何疑问欢迎在评论区交流。