• 项目概述

在线考试系统是一种提供便捷、高效的考试解决方案，通过将传统考试流程转移到互联网平台上，可以减少纸质材料的使用、提高考试安全性和效率，以及为用户提供更好的使用体验。

在行业背景方面，随着互联网的普及和技术的发展，传统的纸质考试方式逐渐被取代。在线考试系统成为教育和职业培训领域中的一个重要工具。它为学生、学校、培训机构和企业提供了一种更便捷、灵活和可管理的考试方式。在线考试系统可以自动批改试卷，减轻教育者的工作负担，提高评估的准确性；同时，学生也能够及时获得成绩反馈和个人学习报告，有利于学习效果的监控和提升。

在设计背景方面，基于Spring Boot框架、Vue.js和MySQL数据库构建了在线考试系统。Spring Boot是一个快速开发Java应用的框架，具有便于使用、快速集成和可扩展性的特点。Vue.js是一个灵活、高效的JavaScript框架，可以构建单页应用和交互式用户界面。MySQL数据库是一种可靠、灵活的关系数据库管理系统，使用SQL语言进行数据操作和管理。

在线考试系统的设计包括三个角色：管理员、教师和学生。管理员拥有全面的权限，包括用户管理、考试管理、题目管理和成绩统计等功能。教师可以创建和管理考试、题目，并监管学生的考试过程。学生可以登录系统，参加考试，查看成绩和交流互动。

系统的核心功能包括考试管理、题目管理、成绩统计和用户管理等模块。其中，考试管理模块实现了考试的创建、修改、删除和查询功能，方便管理员和教师管理考试安排。题目管理模块支持题目的增加、修改、删除和查询，同时可以根据题库自动组卷，提高试卷的多样性和难度的控制。成绩统计模块通过折线图和饼图展示学生成绩，方便管理员和教师了解学生的成绩情况。用户管理模块实现了用户信息的增加、修改、删除和查询，保证系统的安全性和完整性。

综上所述，本文档详细分析了在线考试系统的行业背景、设计需求和功能模块，并提供了一个基于Spring Boot、Vue.js和MySQL的系统设计框架。希望该设计报告对相关人员在实际开发过程中提供参考和指导，最终构建一个高效、用户友好的在线考试系统。

关键字：在线考试系统 Java Vue.js 互联网技术

• 需求分析

2.1总体目标

管理员作为在线考试系统的主要管理者，具有全面的权限和责任。管理员需要能够安全登录系统，并具备修改个人密码的能力。

教师在在线考试系统中扮演着重要的角色，旨在为学生提供有效的教学和评估支持。

学生在在线考试系统中扮演着重要的角色，旨在参与考试、获取成绩反馈和与教师、学生进行交流。

实体集是具有相同类型及相同属性的实体的集合。本系统主要的实体集包括管理员、考试、题目（包括填空题、判断题、选择题）、留言、回复、成绩、学生、教师。这些实体集记录了系统中的关键信息，如管理员的个人信息、考试的管理信息、各种题目的内容和相关信息、学生和教师的个人信息、交流留言和回复、以及学生的考试成绩。这些实体集之间存在关联关系，构成了在线考试系统中的核心数据模型。

2.2具体目标

在主页面上，管理员需要能够根据自己的需求和权限选择不同的功能模块，包括考试管理、题目管理、成绩分析、教师管理和学生管理等。管理员需要能够创建、修改、删除考试和题目，查询学生成绩并以图表形式展示。同时，管理员还需要有能力管理教师和学生信息，包括添加、修改和删除等操作。管理员需要能够修改个人密码以保证账户安全。总而言之，管理员角色需要具备多种权限和操作能力，以确保在线考试系统的安全性和有效性。

教师需要能够安全登录系统，并具备修改个人密码的能力。在主页面上，教师需要能够选择不同的功能模块，包括考试管理、题目管理、成绩分析等。教师可以创建、修改和删除考试，并设置考试的时间和规则。教师还需要能够管理题目，包括添加、修改和删除等操作，并可以根据需要手动给题库中新增题目。教师可以查询学生的考试成绩情况，提供及时的评估和个别指导。此外，教师也可以修改个人密码以确保账户安全。总之，教师角色需要具备多种功能和权限，以支持学生的学习评估。

学生需要能够安全登录系统，并具备修改个人密码的能力。在主页面上，学生应能够进入考试中心，查询可参加的考试列表，并根据考试时间参加考试。学生可以选择答题并提交试卷，等待试卷的批改。学生可以随时查看自己的成绩，并获得成绩分析的反馈，以便提高学习效果。同时，学生可以参与交流区的讨论，与教师和其他学生进行互动交流，提出问题并获取指导。此外，学生也可以修改个人密码，确保账户安全。总而言之，学生角色需要能够参与在线考试、获取成绩反馈和参与学习交流，以实现个人的学习和成长。

管理员：管理员ID号、、姓名、性别、电话号码、电子邮箱、密码、身份证号、角色；

考试管理：考试编号、考试介绍、课程名称、试卷编号、考试日期、持续时长、年级、学期、专业、学院、总分、考试类型、考生须知；

填空题：试题编号、考试科目、试题内容、正确答案、题目解析、分数、难度等级、所属章节；

判断题：试题编号、考试科目、试题内容、正确答案、题目解析、分数、难度等级、所属章节；

留言：留言编号、标题、留言内容、留言时间；

选择题：试题编号、考试科目、问题题目、选项A、选项B、选项C、选项D、正确答案、题目解析、分数、所属章节、难度等级；

试卷管理：试卷编号、题目类型、题目编号；

回复：留言编号、回复编号、内容、回复时间；

成绩：分数编号、考试编号、学号、课程名称、是否及格、成绩、试卷满分、答题日期；

学生：学号、姓名、年级、专业、班级、学院、电话号码、电子邮件、密码、身份证号、性别、角色；

教师：教师ID、姓名、学院、性别、电话号码、邮箱、密码、身份证号、职称、角色。

管理员的实体操作分析： 管理考试、试卷和题目信息,查询学生成绩和生成成绩分析图表,管理学生和教师信息。

教师的实体操作分析：管理考试、试卷和题目信息,查询学生成绩和生成成绩分析图表,管理学生信息。

学生的实体操作分析：登录、修改密码,查询考试列表、参加考试、提交试卷、查询成绩,发送留言、评论留言。

2.3图示分析

根据本系统的使用者将用户划分为三种角色，分别是管理员，教师和学生。进入系统前需要通过账号以及密码进行登录，患者若无账号可先注册，医生的账号由管理员统一注册，登录成功后则根据他们的各自的角色进入相应的页面。

管理员进入网站的页面后，可以进行的功能用例如图所示:

教师进入网站的页面后，可以进行的功能用例如图所示:

学生进入网站的页面后，可以进行的功能用例如图所

系统类图如下：

• 概要设计

3.1接口设计

3.1.1设计概述

本系统使用SpringBoot、Vue.js等主流开发框架进行开发，遵守MVC模式，同时使用到了Element-UI进行页面的设计。为方便前后端进行整合和日后系统的维护，本系统分为视图层、控制层、业务层和持久层。各层之间相互独立，通过之间的接口进行通信，高内聚，低耦合。

系统架构图

3.1.2用户管理模块

该模块是对用户的信息进行保存以及修改的模块，是整个项目的重要组成部分。几乎整个项目的功能模块都会与该模块存在依赖关系，例如在用户登录的时候就需要调用该模块去查询有没有存在此用户，该用户输入的账号和密码是否正确。对于注册功能，也需要调用该模块去添加用户。该模块提供对用户的多种查询接口，例如按用户昵称查询用户信息（selectByUserAll），按用户的在数据库中的id（唯一标识主键）来查询用户信息（getUserId）等，当然还向前端提供对于用户信息进行修改的接口，开发人员可根据项目内的Controller而文件夹下的各个Controller类中所写的接口进行调用便可完成相应的功能而无需担心底层的实现。

3.2数据库设计

3.2.1 E-R图

实体关联er图

试卷管理表er图

选择题题库表er图

填空题题库表er图

判断题题库表er图

考试管理表er图

成绩管理表er图

学生信息表er图

留言表er图

回复表er图

管理员表er图

教师表er图

3.2.3数据库管理系统

Mysql 5.7

3.2.4数据库命名

Online_exam

3.2.5数据库表

1、管理员表

字段名称	字段类型	字段描述
adminId	int(0)	ID号
adminName	varchar(20)	姓名
sex	varchar(2)	性别
tel	varchar(11)	电话号码
email	varchar(20)	电子邮箱
pwd	varchar(16)	密码
cardId	varchar(18)	身份证号
role	varchar(1)	角色

2、试卷管理表

字段名称	字段类型	字段描述
examCode	int(0)	考试编号
description	varchar(50)	该次考试介绍
source	varchar(20)	课程名称
paperId	int(0)	试卷编号
examDate	varchar(10)	考试日期
totalTime	int(0)	持续时长
grade	varchar(10)	年级
term	varchar(10)	学期
major	varchar(20)	专业
institute	varchar(20)	学院
totalScore	int(0)	总分
type	varchar(255)	考试类型
tips	varchar(255)	考生须知

3、填空题题库表

字段名称	字段类型	字段描述
questionId	int(0)	试题编号
subject	varchar(20)	考试科目
question	varchar(255)	试题内容
answer	varchar(255)	正确答案
analysis	varchar(255)	题目解析
score	int(0)	分数
level	varchar(5)	难度等级
section	varchar(20)	所属章节

4、判断题题库表

字段名称	字段类型	字段描述
questionId	int(0)	试题编号
subject	varchar(20)	考试科目
question	varchar(255)	试题内容
answer	varchar(255)	正确答案
analysis	varchar(255)	题目解析
score	int(0)	分数
level	varchar(1)	难度等级
section	varchar(20)	所属章节

5、评论表

字段名称	字段类型	字段描述
id	int(0)	留言编号
title	varchar(20)	标题
content	varchar(255)	留言内容
time	date	留言时间

6、选择题题库表

字段名称	字段类型	字段描述
questionId	int(0)	试题编号
subject	varchar(20)	考试科目
question	varchar(255)	问题题目
answerA	varchar(255)	选项A
answerB	varchar(255)	选项B
answerC	varchar(255)	选项C
answerD	varchar(255)	选项D
rightAnswer	varchar(10)	正确答案
analysis	varchar(255)	题目解析
score	int(0)	分数
section	varchar(20)	所属章节
level	varchar(1)	难度等级

7、试卷管理表

字段名称	字段类型	字段描述
paperId	int(0)	试卷编号
questionType	int(0)	题目类型
questionId	int(0)	题目编号

8、回复表

字段名称	字段类型	字段描述
messageId	int(0)	留言编号
replayId	int(0)	回复编号
replay	varchar(255)	内容
replayTime	date	回复时间

9、成绩表

字段名称	字段类型	字段描述
scoreId	int(0)	分数编号
examCode	int(0)	考试编号
studentId	int(0)	学号
subject	varchar(20)	课程名称
ptScore	int(0)	是否及格
etScore	int(0)	成绩
score	int(0)	试卷满分
answerDate	varchar(10)	答题日期

10、学生表

字段名称	字段类型	字段描述
studentId	int(0)	ID
studentName	varchar(20)	姓名
grade	varchar(4)	年级
major	varchar(20)	专业
clazz	varchar(10)	班级
institute	varchar(30)	学院
tel	varchar(11)	电话号码
email	varchar(30)	电子邮件
pwd	varchar(16)	密码
cardId	varchar(18)	身份证号
sex	varchar(2)	性别
role	varchar(1)	角色

11、教师表

字段名称	字段类型	字段描述
teacherId	int(0)	ID
teacherName	varchar(20)	姓名
institute	varchar(20)	学院
sex	varchar(2)	性别
tel	varchar(11)	电话号码
email	varchar(20)	邮箱
pwd	varchar(16)	密码
cardId	varchar(18)	身份证号
type	varchar(20)	职称
role	varchar(1)	角色

• 模块分工

（一） 项目介绍

后端接口:localhost:8080

前端接口:localhost:8088（访问页面）

前端定义了“api”代替后端访问端口 

(Config.index.js)

proxyTable: {

      '/api': {

        target: 'http://localhost:8080',//本地地址

        // target: 'http://gopikachu.top:8080',// 线上部署地址

        changeOrigin: true,

        pathRewrite: {

          '^/api': ''//这里理解成用‘/api’代替target里面的地址，后面组件中我们掉接口时直接用api代替 比如我要调用'http://40.00.100.100:3002/user/add'，直接写‘/api/user/add’即可

        }

      }

    }

项目启动：

后端IDEA：启动boot启动类即可。

前端终端运行:npm i -y  （项目下载依赖）npm run start（项目启动）。

主要后端介绍：

类：com.exam.Result.ApiResult<T>——对结果集的统一封装

有三个属性：int code（错误码）、String message（消息）、T data（返回结果的包装）

类com.exam.vo.Item——题目模型

用于创建试卷用的实例对象，这个就是创建考试的类型的关键类之一

private String subject;//考试科目
private Integer paperId;//考试编号
private Integer multiNumber;//选择题
private Integer fillNumber;//填空题
private Integer judgeNumber;//判断题

类com.exam.vo.AnswerVO——题目模型

用于管理创建题目结构的类

private String question;//问题题目
private String subject;//考试科目
private String score;//分数（默认为2）
private String section;//所属章节
private String level;//难度等级
private String type;//类型

其余交予service，controller等包类进行处理

（二） 登录系统的功能

后端接口接口：/api/login

前端访问接口： /#/

分析：页面未登录的主页，前端进行获取到表单的账号密码信息，交由后端判断输入的信息是否正确，前端进行数据校验。

运行结果：

（三） 管理员模块

（1）考试管理

查询（精确查询、模糊查询，分页查询）所有考试列表：

用接口查询所有数据返回一个list<>就好了

    //搜索试卷

    search() {

      this.$axios('/api/exams').then(res => {

        if(res.data.code == 200) {

          let allExam = res.data.data

          let newPage = allExam.filter(item => {

            return item.source.includes(this.key)

          })

          this.pagination.records = newPage

        }

      })

    },

分页查询:

使用MybatisPlus实现

import com.baomidou.mybatisplus.core.metadata.IPage;
import com.baomidou.mybatisplus.extension.plugins.pagination.Page;

//分页查询
@Select("select * from exam_manage")
IPage<ExamManage> findAll(Page page);

运行结果：

模糊查询：

编辑（修改）考试信息：

返回一个ExamMessage的Jons对象，有输入修改，无输入则不变

@Update("update exam_manage set description = #{description},source = #{source},paperId = #{paperId}," +
        "examDate = #{examDate},totalTime = #{totalTime},grade = #{grade},term = #{term}," +
        "major = #{major},institute = #{institute},totalScore = #{totalScore}," +
        "type = #{type},tips = #{tips} where examCode = #{examCode}")
int update(ExamManage exammanage);

运行结果：

删除考试信息：

后端接口：/api/exams/{examCode}

根据考试的代号（examCode）进行删除整条数据

@Delete("delete from exam_manage where examCode = #{examCode}")
int delete(Integer examCode);

添加考试：

后端接口：/api/exams

字段有则加，无则为空

@Options(useGeneratedKeys = true,keyProperty = "examCode")
@Insert("insert into exam_manage(description,source,paperId,examDate,totalTime,grade,term,major,institute,totalScore,type,tips)" +   "values(#{description},#{source},#{paperId},#{examDate},#{totalTime}"+     "#{grade},#{term},#{major},#{institute},#{totalScore},#{type},#{tips})")
int add(ExamManage exammanage);

（2）题库管理

查询所有题库：

@Select("select question, subject, score, section,level, \"选择题\" as type from multi_question " +
        "union select  question, subject, score, section,level, \"判断题\" as type  from judge_question " +
        "union select  question, subject, score, section,level, \"填空题\" as type from fill_question")
IPage<AnswerVO> findAll(Page page);

运行结果：

添加题库

添加新题库在页面上没有开发输入功能，而是在数据库建表的时候加上了一个默认值为“2”为什么呢，因为没时间写还有忽略了这个，我就直接砍了这个功能，以后再加上就好了。系统有存在不合理的地方，以后慢慢完善。

前端校验获取到考试科目，根据下拉列表选着相应的题目类型，前端根据选择的题目类型进行判断调用哪个接口添加哪个题目。

其中一个的具体实现：

运行结果：

（3）成绩管理

查询所有学生的成绩信息

@Select("select * from student")
IPage<Student> findAll(Page page);

查看分数：

使用echarts（可视化图表）实现

（4）学生管理

查询所有学生：

编辑（修改）学生信息：

@Update("update student set studentName = #{studentName},grade = #{grade},major = #{major},clazz = #{clazz}," +
        "institute = #{institute},tel = #{tel},email = #{email},pwd = #{pwd},cardId = #{cardId},sex = #{sex},role = #{role} " +
        "where studentId = #{studentId}")
int update(Student student);

运行结果：

删除学生信息：

添加学生信息：

@Options(useGeneratedKeys = true,keyProperty = "studentId")
@Insert("insert into student(studentName,grade,major,clazz,institute,tel,email,pwd,cardId,sex,role) values " +
        "(#{studentName},#{grade},#{major},#{clazz},#{institute},#{tel},#{email},#{pwd},#{cardId},#{sex},#{role})")
int add(Student student);

（5）教师管理

编辑（修改）教师信息：

@Update("update teacher set teacherName = #{teacherName},sex = #{sex}," +
        "tel = #{tel}, email = #{email},pwd = #{pwd},cardId = #{cardId}," +
        "role = #{role},institute = #{institute},type = #{type} where teacherId = #{teacherId}")
public int update(Teacher teacher);

添加教师：

@Options(useGeneratedKeys = true,keyProperty = "teacherId")
@Insert("insert into teacher(teacherName,sex,tel,email,pwd,cardId,role,type,institute) " +
        "values(#{teacherName},#{sex},#{tel},#{email},#{pwd},#{cardId},#{role},#{type},#{institute})")
public int add(Teacher teacher);

（四）教师模块

与管理员模块类似，管理员模块多了个教师管理，教师模块没有，其他基本一样，就不过多说明了。

（五）学生模块

由于题库太少，只设置了《计算机网络》有答题功能

查询试卷信息（模糊查询、精确查询、分页查询）：

运行结果：

跳转到考试页面

    toAnswer(id) {

      this.$router.push({path:"/answer",query:{examCode: id}})

    },

this.$axios(`/api/exam/${examCode}`).then(res => {})获取路由传递过来的试卷编号，通过examCode请求试卷详细信息， this.examData = { ...res.data.data} 获取考试详情， this.$axios(`/api/paper/${paperId}`).then(res => { })通过paperId获取试题题目信息,对象转数组.循环每种题型,计算出总分,把每种题型总分存入score。

 

答题完成上传考试信息

倒计时功能

• 实习收获(心得体会)

队员1：通过此次实习我学习并实践了许多先进技术，例如Spring boot3+vue3框架以及前后端分离的原理，并利用mysql完成了对数据库的学习，最终通过良好的团队协作完成了后台考试管理的项目，收获了不少企业实践的经验，十分感谢指导老师的亲切指导和学校给予的实习机会。

队员2：在本次基于SpringBoot+Vue的后台考试管理系统开发中，我不仅完成了技术层面的实践积累，更对“系统开发”有了从“理论”到“落地”的全面认知。在技术层面，我深入掌握了SpringBoot框架的后端开发逻辑——从Controller层的接口设计（如登录接口/api/login的参数校验与角色分流），到Service层的业务逻辑实现（如成绩计算时选择题、填空题、判断题的分数累加逻辑），再到MyBatisPlus的分页查询（如考试列表的分页展示），每一步都让我深刻理解了“分层架构”如何提升代码的可维护性。

在前端方面，Vue的组件化开发（如考试答题页面的倒计时组件、成绩展示的ECharts图表组件）和Axios的前后端数据交互（如提交试卷时的分数上传），让我切实感受到“前后端分离”模式下高效协作的优势。

更有价值的是问题解决能力的提升。开发初期，我们遇到了题库添加功能的设计疏漏——原本计划的前端输入界面未及时开发，最终通过设置数据库默认值临时处理。这个小插曲让我明白：开发不仅要关注“理想流程”，更要预留“应急方案”。此外，在调试学生答题分数计算逻辑时，填空题答案匹配因格式问题出现误差，通过优化字符串匹配规则（如忽略空格、区分核心关键词）解决问题，这让我意识到“用户体验”藏在每一个细节之中。

队员3：这次实习让我跳出了“单纯写代码”的局限，站在“系统设计者”的视角，全面理解了项目开发的全流程，收获远超技术本身。

首先，我深刻认识到“需求转化”的重要性。项目初期，我们需要将“管理员、教师、学生三类角色的功能需求”转化为可落地的模块设计。例如，管理员的“教师管理”与教师的“考试管理”虽都涉及数据操作，但权限边界需严格区分（管理员可删除教师信息，而教师仅能管理自己创建的考试）。这种“从角色需求到功能边界”的转化，让我明白“系统设计的核心在于匹配用户真实场景”。

其次，我重视起“数据逻辑”的作用。在设计数据库表时，最初忽略了“试卷与题目”的关联关系，导致组卷功能出现数据混乱。后来通过补充试卷管理表（关联试卷编号和题目编号），才理顺了“一张试卷包含哪些题目”的逻辑。这让我意识到：数据库设计是系统的“地基”，表与表的关联、字段的约束（如成绩表中考试编号与试卷编号的对应），直接决定了后续功能能否顺畅实现。

此外，项目中的“不完美”也给了我成长的启发。例如，题库添加功能因时间原因未开发前端界面，仅通过数据库默认值临时处理——这让我学会用“迭代思维”看待开发：先保证核心功能可用，再通过后续优化补全细节。而学生端考试倒计时功能的实现（结合setInterval定时器与交卷逻辑），则让我体会到“技术服务于体验”——哪怕是一个简单的倒计时提示，也能提升用户对系统的信任感。

这次实习不仅让我掌握了具体的开发技能，更让我明白：一个合格的开发者，既要能写好一行代码，更要能站在用户和系统的角度，思考“为什么写”和“如何写得更好”。

• 致谢

本次基于SpringBoot+Vue的后台考试管理系统开发实训已圆满完成，在此，我们向所有给予我们支持与帮助的师长、同学及相关方致以最诚挚的感谢。

首先，衷心感谢指导教师孙大伟老师、张俊三老师和张培颖老师。从项目初期的需求分析，到中期的模块设计，再到后期的功能调试，老师们始终给予我们专业的指导：在系统架构设计时，老师们提醒我们注意SpringBoot与Vue前后端分离的接口规范性，避免后续整合出现数据交互问题；在数据库设计阶段，针对试卷与题目关联关系的设计，老师们建议补充试卷管理表以明确关联逻辑，为后续组卷功能奠定基础；在功能测试环节，老师们指出学生答题分数计算的细节漏洞，引导我们优化填空题答案匹配规则。老师们的耐心指导不仅帮助我们解决了技术难题，更让我们学会了从用户视角思考系统的合理性。

感谢第30组团队成员的协作与支持。在项目开发中，我们分工明确又相互补位：有人专注后端接口开发，确保登录、考试管理等核心接口稳定运行；有人负责前端页面实现，让学生答题、成绩展示等界面兼具功能性与易用性；有人梳理测试用例，及时发现题库添加、试卷删除等功能的潜在问题。从初期需求讨论时的思维碰撞，到开发中遇到问题时的共同排查，再到后期整合时的相互配合，团队协作让我们高效推进项目，也让我们深刻体会到“分工不分家”的团队精神。

最后，感谢青岛软件学院、计算机与科学与技术学院为我们提供本次实训机会，以及学校搭建的实践平台。这次实训让我们将课堂上学到的SpringBoot、Vue、MySQL等理论知识转化为实际项目能力，也让我们对软件开发的全流程有了更清晰的认知。

此次实训的收获离不开各方支持，未来我们将带着这份经历继续提升专业能力，不负师长与学校的培养。