1 开发技术1.1 Java 介绍Java 是由 Sun 公司于 1995 年推出的一种面向对象编程语言具有跨平台、安全性高、可移植性强等特点遵循“一次编写到处运行”的设计思想。Java 支持封装、继承、多态等面向对象特性便于模块化设计与代码复用通过 JVM 可在多种操作系统上运行并具备字节码校验、安全管理器等安全机制其类库与框架生态成熟与 Spring、MyBatis 等工具集成良好在企业级 Web 开发中应用广泛。本系统后端采用 Java 1.8 进行开发负责业务逻辑处理、RESTful 接口提供及与数据库的交互为在线考试系统的稳定运行提供服务端支撑。1.2 Spring Boot 介绍Spring Boot 是由 Pivotal 团队基于 Spring 框架开发的快速开发工具旨在简化 Spring 应用的初始搭建和配置过程。它采用“约定优于配置”的理念通过自动配置机制减少 XML 配置提高开发效率内嵌 Tomcat 等 Web 容器无需单独部署应用服务器可直接以 JAR 包方式运行同时便于模块化拆分与横向扩展并与 MyBatis-Plus、Druid 等组件集成方便生态完善。本系统采用 Spring Boot 2.1.2 作为后端核心框架配合 spring-boot-starter-web 提供 RESTful API实现考试管理、题库管理、成绩查询、学生管理等业务接口并完成前后端数据交互。1.3 Vue.js 介绍Vue.js 是由尤雨溪创建的一套用于构建用户界面的渐进式 JavaScript 框架采用数据驱动和组件化开发模式具有轻量、高效、易学等特点。Vue 通过响应式数据绑定实现视图自动更新减少 DOM 操作支持将页面拆分为可复用组件便于维护与扩展借助虚拟 DOM 提升渲染效率并可通过 Vue Router、Vuex、Element UI 等扩展路由、状态管理与界面组件能力。本系统前端基于 Vue 2.5.2 构建采用前后端分离架构。管理端与学生端共用 Vue 工程通过 Vue Router 3.0.1 实现页面路由跳转通过 Vuex 3.0.1 管理菜单、练习模式等全局状态通过 Axios 0.18.0 与后端 API 通信实现登录、考试、答题、成绩查询等功能。1.4 Element UI 介绍Element UI 是一套基于 Vue 2.x 的桌面端 UI 组件库由饿了么团队开源提供了按钮、表单、表格、对话框、分页等常用组件。其组件覆盖表单录入、数据展示、导航、消息反馈等常见业务场景界面风格统一、交互规范文档完善、上手成本较低与 Vue 深度集成适合快速搭建后台管理系统。本系统采用 Element UI 2.4.11 构建用户界面管理端使用侧边栏菜单、表格、表单、分页等组件实现考试管理、题库维护、成绩统计与学生管理学生端使用表单、按钮、表格等组件实现考试中心、在线答题、成绩查看与交流区等功能保证系统界面一致性与易用性。1.5 MyBatis-Plus 介绍MyBatis-Plus 是在 MyBatis 基础上进行增强的持久层框架在保留 MyBatis 灵活性的同时提供了通用 CRUD、条件构造器、分页插件等功能。它对现有工程无侵入单表增删改查无需编写大量 XML支持链式条件构造与物理分页可显著减少 SQL 编写量提高数据访问层开发效率。本系统采用 MyBatis-Plus 3.5.0 作为持久层框架配合 Druid 1.1.8 连接池完成对考试管理、选择题、填空题、判断题、成绩、学生、教师等业务表的数据访问支撑考试、题库、成绩等核心模块的持久化操作。1.6 MySQL 介绍MySQL 是一种开源的关系型数据库管理系统具有性能高、成本低、可靠性好、使用广泛等特点。MySQL 社区版可免费使用支持索引、事务等机制查询效率较高可在多种操作系统上部署并与 Java、Spring Boot、MyBatis 等开发工具链配合良好是 Web 应用中最常用的数据库之一。本系统采用 MySQL 8.0 作为数据存储方案数据库名为 DB_OnlineExam共包含管理员、教师、学生、考试管理、试卷管理、三类题库、成绩、留言与回复等 11 张业务表用于存储用户信息、考试数据、试题内容、成绩记录及交流信息为系统提供可靠的数据持久化支持。2 系统实现本系统采用 B/S 架构与前后端分离设计前端基于 Vue.js 构建用户界面后端基于 Spring Boot 提供 JSON 格式接口前后端通过 Axios 进行数据交互降低了系统维护成本也便于后续功能扩展。系统设置管理员、教师、学生三类角色管理员负责考试、题库、成绩、学生、教师等全局业务数据的维护与管理教师负责考试组织、题库维护、成绩查询及学生信息管理学生通过用户端完成在线考试、试卷练习、成绩查看与交流讨论。以下分别对三类角色的主要功能实现进行说明。2.1 管理员功能管理员登录后可进入在线考试系统管理台拥有考试管理、题库管理、成绩查询、学生管理、教师管理五个功能模块可在各模块中完成业务数据的查询、新增、编辑与删除并通过 ECharts 图表查看成绩统计分析结果同时支持修改个人登录密码。2.1.1 登录管理员在系统登录页面输入用户名和密码点击「登录」按钮后前端将账号信息提交至后端/api/login接口进行验证。系统依次匹配管理员、教师、学生账号验证通过后自动识别管理员身份跳转至管理台首页/index并在 Cookie 中记录用户姓名、编号及角色标识。管理员登录界面如图 2-1 所示。图 2-1 管理员登录界面2.1.2 系统首页管理员登录成功后进入系统管理台首页页面顶部显示「在线考试系统管理台」及当前登录用户名左侧为功能导航菜单包含考试管理、题库管理、成绩查询、学生管理、教师管理五个模块右侧内容区默认展示欢迎页面提示「欢迎登录在线考试系统后台」。管理员可通过左侧菜单进入各功能模块点击右上角用户头像可进行密码修改或退出登录。管理员系统首页如图 2-2 所示。图 2-2 管理员系统首页2.1.3 考试管理考试管理模块包含「考试查询」与「添加考试」两个子功能。在考试查询页面系统以表格形式展示所有考试信息包括试卷名称、介绍、所属学院、专业、年级、考试日期、持续时间、总分、考试类型及考生提示等字段支持分页浏览并提供试题详情查看、编辑与删除操作点击「试题详情」可查看该考试关联的选择题、填空题、判断题组成情况。在添加考试页面管理员通过表单填写试卷名称、介绍、学院、专业、年级、考试日期、持续时间、考试类型及考生提示等信息点击「立即创建」即可发布新考试。考试管理界面如图 2-3 所示。图 2-3 管理员考试管理界面2.1.4 题库管理题库管理模块包含「所有题库」「增加题库」及试题维护等功能。在所有题库页面管理员可按试卷名称、章节、题目内容进行条件查询表格展示题目信息、所属章节、题目类型、分数及难度等级并支持对试题进行编辑。在增加题库页面系统列出已有考试列表管理员选择对应试卷后进入试题维护界面。试题维护界面提供「添加试题」与「在线组卷」两个选项卡添加试题支持录入选择题、填空题、判断题三种题型可设置科目、章节、难度等级、分值及正确答案在线组卷可指定各题型数量系统从题库中随机抽取试题自动生成试卷。题库管理界面如图 2-4 所示。图 2-4 管理员题库管理界面2.1.5 成绩查询成绩查询模块包含「学生成绩查询」「个人成绩统计」与「成绩分段查询」三个子功能。在学生成绩查询页面管理员可按姓名、学院、专业、年级、班级、联系方式等条件筛选学生表格展示学生基本信息点击「查看成绩」可跳转至该学生的成绩统计图表页面以 ECharts 折线图展示其各科目历次考试成绩变化趋势。在成绩分段查询页面系统列出所有考试管理员选择某场考试后可查看该考试的成绩分段统计图将考生成绩按 90 分及以上、8089 分、7079 分、6069 分、60 分以下五个区间进行汇总展示。成绩查询界面如图 2-5 所示。图 2-5 管理员成绩查询界面2.1.6 学生管理学生管理模块包含「学生管理」与「添加学生」两个子功能。在学生管理页面管理员可按姓名、学院、专业、年级、班级、联系方式等条件查询学生信息表格展示学生姓名、学院、专业、年级、班级、性别及联系方式支持对学生信息进行编辑与删除操作。在添加学生页面管理员通过表单填写学生姓名、学院、专业、年级、班级、性别、联系方式、身份证号及初始密码等信息点击「立即创建」完成学生账号注册。学生管理界面如图 2-6 所示。图 2-6 管理员学生管理界面2.1.7 教师管理教师管理模块为管理员专属功能包含「教师管理」与「添加教师」两个子功能。在教师管理页面系统以表格形式展示所有教师信息包括姓名、学院、性别、联系方式、邮箱、身份证号及职称等字段支持分页浏览并提供编辑与删除操作。在添加教师页面管理员通过表单填写教师姓名、学院、性别、电话号码、密码、身份证号及职称等信息点击「立即创建」完成教师账号注册。教师管理界面如图 2-7 所示。图 2-7 管理员教师管理界面2.1.8 修改密码管理员点击页面右上角用户头像在下拉菜单中选择「修改密码」弹出密码修改对话框输入旧密码、新密码及确认新密码后点击「确定」系统调用后端接口完成密码更新。修改成功后提示「修改成功」管理员可使用新密码重新登录系统。修改密码界面如图 2-8 所示。图 2-8 管理员修改密码界面2.2 教师功能教师登录后进入在线考试系统管理台拥有考试管理、题库管理、成绩查询、学生管理四个功能模块可进行考试发布、试题维护、在线组卷、成绩统计及学生信息管理等日常教学业务操作但不具备教师管理模块及管理员密码修改权限。2.2.1 登录教师在系统登录页面输入用户名和密码点击「登录」按钮后前端将账号信息提交至后端接口进行验证。系统验证通过后自动识别教师身份跳转至管理台首页/index并在 Cookie 中记录用户姓名、编号及角色信息。教师与管理员共用同一登录页面教师登录界面如图 2-9 所示。图 2-9 教师登录界面2.2.2 系统首页教师登录成功后进入系统管理台首页页面顶部显示「在线考试系统管理台」及当前登录用户名左侧导航菜单包含考试管理、题库管理、成绩查询、学生管理四个模块右侧内容区默认展示欢迎页面。教师可通过左侧菜单进入各功能模块完成教学管理工作点击右上角用户头像可退出登录。教师系统首页如图 2-10 所示。图 2-10 教师系统首页2.2.3 考试管理教师可在考试管理模块中进行考试查询与添加考试操作功能界面与管理员一致。在考试查询页面教师可浏览所有考试列表查看考试详细信息并对考试进行编辑、删除及试题详情查看在添加考试页面教师填写考试相关信息后即可发布新考试供学生在线参加。教师考试管理界面如图 2-11 所示。图 2-11 教师考试管理界面2.2.4 题库管理教师可在题库管理模块中维护试题资源功能界面与管理员一致。教师可在所有题库页面按条件查询并编辑已有试题通过增加题库功能选择试卷后进入试题维护界面支持手动添加选择题、填空题、判断题也可通过在线组卷功能按题型数量自动从题库抽题生成试卷。教师题库管理界面如图 2-12 所示。图 2-12 教师题库管理界面2.2.5 成绩查询教师可在成绩查询模块中查看学生考试表现功能界面与管理员一致。教师可按多条件筛选学生并查看其历次成绩折线统计图也可选择某场考试查看该考试的成绩分段统计图表便于分析考试整体情况与分数分布。教师成绩查询界面如图 2-13 所示。图 2-13 教师成绩查询界面2.2.6 学生管理教师可在学生管理模块中维护学生信息功能界面与管理员一致。教师可按条件查询学生列表对学生信息进行编辑与删除也可通过添加学生功能录入新学生账号信息。教师学生管理界面如图 2-14 所示。图 2-14 教师学生管理界面2.3 学生功能学生登录后进入在线考试系统用户端可在考试中心参加正式考试在试卷练习中进行模拟训练在我的分数中查看历史成绩在交流区发布留言并查看回复同时支持修改个人登录密码。2.3.1 登录学生在系统登录页面输入用户名和密码点击「登录」按钮后前端将账号信息提交至后端接口进行验证。系统验证通过后自动识别学生身份跳转至用户端首页/student并在 Cookie 中记录用户姓名及学号信息。学生与管理员、教师共用同一登录页面学生登录界面如图 2-15 所示。图 2-15 学生登录界面2.3.2 系统首页学生登录成功后进入用户端首页页面顶部显示「在线考试系统」及功能导航栏包含考试中心、试卷练习、我的分数、交流区四个入口下方内容区默认展示考试中心页面。学生可通过顶部导航切换各功能模块点击右上角用户名可进行密码修改或退出登录。学生系统首页如图 2-16 所示。图 2-16 学生系统首页2.3.3 考试中心考试中心页面以卡片形式展示学生可参加的考试列表每张卡片显示课程名称、考试介绍、考试日期、限时分钟数及满分分值等信息顶部提供试卷名称搜索功能。学生点击某场考试卡片后进入考试详情页面可查看考试总分、限时、考生须知及选择题、填空题、判断题的数量与分值构成确认无误后点击「开始考试」进入在线答题界面。考试中心界面如图 2-17 所示。图 2-17 学生考试中心界面2.3.4 在线答题在线答题页面顶部显示考试类型与科目名称及当前考生信息左侧为题目编号导航区区分当前题、未答题、已答题及标记题状态右侧为答题区域依次展示选择题、填空题、判断题供学生作答。页面提供倒计时功能学生完成作答后点击交卷系统自动判分的选择题与判断题即时计分填空题按答案匹配计分交卷完成后跳转至成绩结果页面。在线答题界面如图 2-18 所示。图 2-18 学生在线答题界面2.3.5 成绩结果学生交卷完成后进入成绩结果页面页面中央以动画形式展示本次考试得分下方显示考试开始时间与结束时间。该页面仅在正式考试交卷后展示便于学生即时了解本次考试表现。成绩结果界面如图 2-19 所示。图 2-19 学生成绩结果界面2.3.6 试卷练习学生点击顶部导航「试卷练习」进入练习模式页面以列表形式展示可练习的试卷支持按名称搜索。学生选择试卷进入详情页后点击「开始练习」进入答题界面练习模式不计入正式成绩便于学生在考前进行模拟训练。试卷练习界面如图 2-20 所示。图 2-20 学生试卷练习界面2.3.7 我的分数我的分数页面以表格形式展示学生历次考试成绩包括考试日期、课程名称、考试分数及是否及格等信息支持按考试日期筛选与分页浏览及格的分数以绿色标签显示不及格以红色标签显示便于学生回顾历史考试表现。我的分数界面如图 2-21 所示。图 2-21 学生我的分数界面2.3.8 交流区交流区页面顶部提供留言标题与留言内容输入框学生填写后点击「提交留言」即可发布留言。下方以列表形式展示所有留言每条留言显示标题、内容、发布时间鼠标悬停可显示「回复」按钮其他用户可对留言进行回复回复内容以缩进形式展示在原留言下方形成互动交流。交流区界面如图 2-22 所示。图 2-22 学生交流区界面2.3.9 修改密码学生点击页面右上角用户名在下拉菜单中选择「修改密码」进入密码修改页面输入新密码及确认密码后点击「提交」完成密码更新。修改成功后学生可使用新密码重新登录系统。修改密码界面如图 2-23 所示。图 2-23 学生修改密码界面3 源码获取方式源码地址源码集市