基于SpringBoot+Vue框架的在线考试系统的设计与实现

系统合集跳转

源码获取链接

一、系统环境

运行环境: 最好是java jdk 1.8，我们在这个平台上运行的。其他版本理论上也可以。
IDE环境： Eclipse,Myeclipse,IDEA或者Spring Tool Suite都可以
tomcat环境： Tomcat 7.x,8.x,9.x版本均可
操作系统环境： Windows XP/7/8//8.1/10/11或者Linux或者MacOS,2G内存以上，推荐4G，4G以上更好
用了技术框架： HTML+CSS+JavaScript+jsp+mysql+Spring+SpringMVC+mybatis+Spring boot
数据库： Mysql数据库，任意版本均可，也可使用各种数据库工具，例如Navicat等。
主要功能：
（1）用户管理模块：
该模块主要用于管理用户的信息，包括用户的注册、登录、修改个人信息、权限管理等功能。在该模块中，需要实现用户的信息验证、密码加密等安全机制，同时需要支持不同用户角色的管理，如考生、考官、管理员等，以及不同用户之间的信息隔离。
（2）资源管理模块：
该模块主要用于管理在线考试所需要的资源，包括试题、答案、教学资料等，同时还需要支持资源的上传和下载功能。在该模块中，需要实现资源的分类管理、搜索和浏览等功能，同时需要对资源进行安全管理，确保资源的保密性和完整性。
（3）考试模块：
该模块是在线考试系统的核心模块，主要用于组织、管理和监控考试过程。在该模块中，需要实现考试的发布、考生的考试管理、答题卡的生成、考试成绩的统计等功能。同时，需要考虑到不同类型的考试场景，如定期考试、随机考试、练习考试等。
（4）试卷管理模块：
该模块主要用于管理试卷的信息和组成，包括试卷的组成、试题的分类和难度、试题的选项等。在该模块中，需要实现试卷的自动生成、手动生成、试卷的组卷、试卷的审核等功能。同时，需要考虑到试卷的安全性和保密性，确保试卷不会被非法泄露。

功能模块图如下图所示。

1.1.研究背景与意义

随着计算机技术和互联网技术的不断发展和普及，网络教育已经成为了现代教育的重要组成部分。在线考试系统作为网络教育的一种重要工具，可以为学生提供更加灵活、便捷和高效的考试方式，为教师提供更加便捷和准确的考试管理和评估方式。
然而，在线考试系统的发展还面临着一些挑战和问题。例如，一些在线考试系统的安全性和稳定性问题还没有得到完全解决；一些系统在性能和效率方面存在瓶颈；一些系统在用户体验和功能完善性方面还有待提高。因此，研究和开发一种高效、安全、稳定、易用、功能完善的在线考试系统，对于推进网络教育的发展，提高学生的学习效率和教师的教学效果具有重要意义。
本文的研究意义在于提供一种高效、安全、稳定、易用、功能完善的在线考试系统，为网络教育的发展和学生的学习提供更好的支持和服务。同时，该系统的研究和实现还可以为其他在线教育系统的研究和实现提供一定的参考和借鉴。

1.2.国内外研究现状

近年来，随着互联网和计算机技术的发展，在线考试系统在国内外的研究和应用逐渐得到广泛关注和应用。在国内，已有不少学者对在线考试系统进行了研究和开发。例如，黄文杰等人研究了一种基于B/S模式的在线考试系统，并采用了面向对象技术和数据结构等技术实现了系统的设计和开发。同时，系统还支持多种题型和分数计算方式，具有较好的灵活性和可扩展性。另外，杨靖等人开发了一种基于JavaEE和Struts2框架的在线考试系统，并实现了学生考试、教师管理、试卷管理等功能，同时采用了MVC架构和Ajax技术等技术实现了系统的开发和实现。
在国外，已有不少研究者对在线考试系统进行了研究和应用。例如，Jiandong Zhang等人开发了一种基于Web的在线考试系统，该系统采用了ASP.NET技术和MVC架构，并具有良好的用户体验和功能完善性。另外，Erik Frisk等人研究了一种基于Ruby on Rails框架的在线考试系统，并实现了试题管理、考试管理、学生管理等功能，同时系统具有良好的安全性和稳定性，适用于大规模在线考试。
总体来说，国内外已有不少学者对在线考试系统进行了研究和开发，并取得了一定的成果。然而，当前在线考试系统在安全性、稳定性、效率和用户体验等方面仍存在一些问题和挑战，需要进一步深入研究和探索。

1.3.研究主要内容

本文提出了一种基于SpringBoot+Vue框架的在线考试系统，该系统采用了前后端分离的架构，使用了JWT进行身份验证，支持多种题型和不同的分数和时间限制，可以自动评分和生成成绩报告，同时支持教师实时查看学生的考试进度。该系统具有结构清晰、功能完善、易于扩展等特点，可以满足学校或教育机构的在线考试需求，提高学生的学习效率和教师的教学效果。
通过以上研究内容的实现和完善，本研究旨在提供一款高效、稳定、安全、易用的在线考试管理系统，以满足用户对在线考试的需求，促进教育行业的发展。同时，本研究也为其他相关研究提供了参考和借鉴的价值。

2.1.前台功能模块实现

2.1.1.登录功能实现

用户在登录页面输入用户名和密码，点击登录按钮。系统接收到登录请求后，从前端获取用户输入的用户名和密码。系统对用户名和密码进行校验，判断用户输入是否正确。页面如下图2-1所示。

图2-1 登录页面
登录功能实现流程如下：
1、首先通过userService的login方法来对用户名信息进行验证，查询系统数据库中是否存在该用户名。
2、然后通过if方法来比对user是否为null方法来判断是否为空，本操作为后端的非空校验，避免空指针异常出现。
3、最后通过user.getPassword().equals(password)方法来对用户名和密码进行比对，比对无勿后进行登录操作。
4、登录成功将会员信息放入Session中，然后通过控制层将登录成功的信息通过HTTP的方式返回给前端页面中。

代码如下：

Admin adminRes = loginService.adminLogin(username, password);
if (adminRes != null) {
    return ApiResultHandler.buildApiResult(200, "请求成功", adminRes);
}
//查询teacher表
Teacher teacherRes = loginService.teacherLogin(username,password);
if (teacherRes != null) {
    return ApiResultHandler.buildApiResult(200, "请求成功", teacherRes);
}
//查询student表
Student studentRes = loginService.studentLogin(username,password);
if (studentRes != null) {
    return ApiResultHandler.buildApiResult(200, "请求成功", studentRes);
}

2.1.2.查看考试信息功能实现

用户登录后可以对考试信息进行查看，页面如下图5-2所示.

图2-2 考试列表页面
在线考试系统的考试列表查询功能是系统中非常重要的一个功能，它可以帮助用户快速地找到自己需要参加或已经参加的考试，提高了系统的使用效率和用户体验。
功能实现流程如下：
（1）首先，需要在前端页面设计中添加一个考试列表查询的搜索框和查询按钮，用于用户输入关键字后发起查询请求，具体代码如下所示：

（2）接下来，需要在后端编写相应的接口，用于接收前端发送的查询请求，并根据关键字进行相应的筛选和过滤，返回符合条件的考试列表数据。具体代码如下所示：

@GetMapping("/exams")
public ApiResult findAll(){
    System.out.println("不分页查询所有试卷");
    ApiResult apiResult;
    apiResult = ApiResultHandler.buildApiResult
(200, "请求成功！", examManageService.findAll());
    return apiResult;
}

在这里，我们使用了SpringBoot提供的@GetMapping注解，来表示这是一个GET请求，并将查询关键字通过@RequestParam注解传递进来。然后，在实现方法中，我们调用了examService中的getExams方法，该方法通过关键字进行模糊匹配和筛选，返回符合条件的考试列表数据，并通过Result.success方法将数据封装为一个Result对象返回给前端。
（3）最后，在Vue组件中，我们需要通过Ajax请求，调用后端接口，并将返回的考试列表数据渲染到前端页面上。具体代码如下所示：

methods: { 
search() { 
axios.get('/api/exams', {params: {keyword: this.searchText}
}) .then(res => { this.exams = res.data }) }

2.1.3.在线考试功能实现

用户登录后可以在前台页面上进行在线，页面如下图2-3所示。

图2-3 试卷详情页面
点击开始考试进入到考试页面，页面如下图2-4所示。

图2-4 在线考试页面
基于SpringBoot+Vue框架的在线考试系统的在线考试功能是系统中的核心功能之一。实现在线考试功能需要考虑多个方面，包括试卷生成、考试界面设计、考试计时、等。
（1）试卷生成
在线考试系统需要支持试卷生成功能，管理员可以通过系统提供的试卷生成工具创建试卷。试卷生成工具应该支持随机生成试题、手动添加试题、试题分值设置等功能。同时，为了保证试卷的难度和多样性，应该支持试题库的分类管理和试题难度分级设置。
（2）考试界面设计
考试界面是考生进行在线考试的主要界面。考试界面需要具备良好的用户体验和交互性。界面设计应该简洁明了、易于操作，并提供考试规则和注意事项等信息。同时，应该充分考虑不同设备和浏览器的兼容性问题，确保考生可以在各种设备上顺畅进行考试。
（3）考试计时
在线考试系统需要支持考试计时功能，考试时间应该根据试卷的总分和难度自动计算。同时，系统应该支持倒计时提醒功能，以免考生因为时间不够而未完成考试。考试计时器应该具有良好的精度和稳定性，能够在网络延迟等异常情况下保证计时的准确性。
代码如下：
// 选择题数据库获取

List<Integer>  changeNumbers = multiQuestionService.findBySubject(item.getSubject(), changeNumber);
if(changeNumbers==null){
    return ApiResultHandler.buildApiResult(400,"选择题数据库获取失败",null);
}
for (Integer number : changeNumbers) {
    PaperManage paperManage = new PaperManage(paperId,1,number);
    int index = paperService.add(paperManage);
    if(index==0)
        return ApiResultHandler.buildApiResult(400,"选择题组卷保存失败",null);
}
List<Integer> fills = fillQuestionService.findBySubject(item.getSubject(), fillNumber);
if(fills==null)
    return ApiResultHandler.buildApiResult(400,"填空题数据库获取失败",null);
for (Integer fillNum : fills) {
    PaperManage paperManage = new PaperManage(paperId,2,fillNum);
    int index = paperService.add(paperManage);
    if(index==0)
        return ApiResultHandler.buildApiResult(400,"填空题题组卷保存失败",null);
}

2.1.4.留言功能实现

用户登录后可以在前台页面上进行留言，页面如下图2-5所示。

图2-5 留言页面
留言成功后会生成在留言板中，页面如下图2-6所示。

                                       图2-6 留言板页面

功能实现流程：
1、前端页面输入留言内容和联系方式，点击提交按钮触发事件。前端使用AJAX框架发送POST请求，将留言内容和联系方式数据以JSON格式封装在请求体中，同时指定请求的url为后端的留言处理接口。
2、后端接收到留言处理接口的请求，使用Springboot框架解析请求体中的JSON数据，将其映射为Java对象。后端使用Java对象的数据进行业务处理，例如将留言信息存储到数据库中。
3、后端将处理结果封装成JSON格式的数据，并将其作为响应体返回给前端。前端使用AJAX框架解析后端返回的JSON数据，根据返回的处理结果进行页面展示。
在数据传递的过程中需要进行参数校验、异常处理等操作，以确保数据的完整性和系统的稳定性。同时，为了保证数据的安全性，系统对用户输入的内容进行过滤和编码，以防止XSS等攻击。
代码如下：

//验证实体
CodeMsg validate = ValidateEntityUtil.validate(coupleBack);
if (validate.getCode() != CodeMsg.SUCCESS.getCode()){
    return Result.error(validate);
}
//符合验证进行保存
if (null == coupleBackService.save(coupleBack)){
    return Result.error(CodeMsg.ADMIN_COUPLEBACK_ADD_ERROR);
}

2.2.后台功能模块实现

2.2.1 学生管理功能

学生管理页面如下图2-7所示。

图2-7 学生管理页面
（1）学生修改
学生修改功能主要是对注册到本系统的用户信息进行修改的过程，主要是对数据库中Student表中的信息进行Update的操作。学生修改页面如下图2-8。

图2-8 学生修改页面
在后台用户管理中也可以对用户信息进行删除，页面如下图2-9所示。

图2-9 学生信息删除页面
功能实现流程可以通过以下步骤：
1、前端页面通过AJAX请求向Spring后端发送请求，请求URL为/user开头，后端通过@Controller注解的方法进行处理。
2、后端Controller中的方法使用@PathVariable注解获取前端请求中的参数，如请求的页码，每页显示的数据数量等，并将这些参数传递给Service层进行处理。
3、Service层根据请求参数使用JPA的Mapper进行查询，获取用户信息数据，并将数据封装成PageInfo对象返回给Controller层。
4、Controller层接收到Service层返回的PageInfo对象后，使用ModelAndView对象将数据传递给前端JSP页面进行显示。
5、前端HTML页面接收到后端传递的用户列表数据后，使用JavaScript等技术进行处理和展示。
在这个过程中，前端和后端通过AJAX技术进行数据传递，后端使用SpringBoot框架进行接收请求和处理业务逻辑，同时使用JPA框架进行数据查询，最终通过JSP页面将结果展示给用户。
代码如下：

@PutMapping("/student")
public ApiResult update(@RequestBody Student student) {
    int res = studentService.update(student);
    if (res != 0) {
        return ApiResultHandler.buildApiResult(200,"更新成功",res);
    }
    return ApiResultHandler.buildApiResult(400,"更新失败",res);}

2.2.2试卷管理模块

点击左边一级目录试卷管理会出现二级目录，点击所有试卷后对对试卷信息进行全局查询，加载出所有的试卷信息显示在列表中，并且可以对试卷信息进行一系列操作，包括添加试题，查看试卷下的试题，以及生成试题的功能。页面如下图2-10所示。

图2-10 试卷列表页面

图2-11 修改试卷页面
增加试题页面如下图2-12所示。

图2-12 增加试题页面

参考文献

[1]孙珊珊,孟欣. 高职院校单独招生在线考试系统研究[J]. 电脑编程技巧与维护,2021,(07):26-28.
[2]席梦如,杨帆,杨彦铃. 中小学信息技术考试系统的现状调查研究[J]. 新课程研究,2021,(13):120-121.
[3]谢铠联. 基于事件驱动的SQL在线考试系统的设计与实现[D].南京大学,2021.
[4]张学波,王琳,李晋丽. 大学计算机基础“线上+线下”混合教学模式研究[J]. 软件,2021,42(02):184-186.
[5]赵守才,杨校庆. 基于SSM的线上考试系统[J]. 电子技术与软件工程,2021,(03):220-221.
[6]方雅婷. 疫情防控常态化背景下高校在线考试系统的设计与应用探析[J]. 大学(研究版),2020,(08):113-114.
[7]邢瑞. 基于神经图模型的试题推荐在线考试系统设计与研究[D].吉林大学,2020.
[8]罗振南. 三晋理工学院线上教学管理系统设计与实现[D].大连理工大学,2020.
[9]何长福. 基于Web技术的计算机应用考试系统[J]. 信息与电脑(理论版),2019,(15):58-59.
[10]韦俊旭. 线上考试智能管理系统的设计与实现[J]. 科技创新与应用,2019,(08):90-91+93.
[11]桑永超,冉崇善. 基于JavaWeb的线上考试系统应用研究[J]. 计算机光盘软件与应用,2015,18(02):43+45.
[12]张鑫睿. 基于WEB的在线考试系统设计和实践[D].电子科技大学,2012.
[13]袁红氢. 利用ASP技术实现线上考试的探索[J]. 湖南冶金职业技术学院学报,2004,(01):45-47+50.
[14] Horstmann,Cay S, Core Java.Volume I.Fundamentals[G]，北京人民邮电出版社，2019,12(5):44-49
[15] Bloch、Joshua， Effective Java[G]，北京电子工业出版社，2019,5(31):62-78

一键三连+关注+评论留下你的邮箱 获取源码，主动获取 看主页置顶
一键三连+关注+评论留下你的邮箱 获取源码，主动获取 看主页置顶
一键三连+关注+评论留下你的邮箱 获取源码，主动获取 看主页置顶