【《基于SpringBoot的在线考试系统的设计与实现》12000字（论文）】

基于SpringBoot框架的互联网考试系统的优势在于可以轻松降低考试成本，解决辛苦的考试工作[1]。由于试卷内容可以与互联网题库的内容即时结合、匹配，考试系统可以自动阅卷、获取成绩，最后将成绩汇总到数据库中进行统计，因此互联网考试系统可以真正实现无纸化考试，将大部分教职员工从考前整理内容的辛苦工作和考后阅卷时统计分析的辛苦工作中解放出来[2]。传统意义上的考试组织过程包括：教师准备考试试卷，根据题目整理准备好的问题，打印试卷，通过为学生设定考试时间来组织考试，批改试卷，计算分数，分析试卷和讲解题目。组织一次考试需要大量的物质、人力和财政资源，需要大量的时间和不小的努力[3]。随着社会和经济的不断进步，网络技术已经影响到社会的经济发展和人们的工作以及学习方式，传统的考试方式已经不能满足当前教育发展的要求。网上考试系统旨在提高学校考试的效率，使其更加自动化、规范化和系统化。在线考试系统取代了传统的纸质考试，减少了纸张的浪费[4]，完全取代了原有的人工阅卷方式，避免了人为操作造成的一些低级错误，为快速、准确、高效的考试提供了有力的工具。开发适用的在线考试系统，改进测试方法的计算机化，不仅可以避免浪费珍贵的社会资源，减少教师的重复性机械性的工作，而且可以及时地对考试成绩进行反馈，以此来提高教学授课的效率[5]。此外，由于目前的疫情趋势，在线测试变得尤为重要，以避免过度聚集的风险，所以开发一个在线考试系统是势在必行的。本文参考了市面上已经出现的考试系统以及国内外相关参考文献，了解了考试系统在国内和海外的发展历程与现状，综合各大在线考试软件建设所需要的技术，对本网站制定了详细规划。国外发展现状目前，国外有两大具有代表性的在线考试平台，第一个是Canvas，许多高校在演讲中推荐的在线学习平台/工具之一，包括斯坦福大学、哈佛大学、华盛顿大学、普林斯顿大学、威斯康星大学麦迪逊分校等。Canvas是Instructure公司（成立于2008年）的学习管理系统，是一个开源平台。Canvas有一个基于云的系统架构，集成了多种类型的工具，有强大的数据分析能力，并支持移动用户。像大多数电子学习平台一样，Canvas提供一些基本功能，包括课件、测试和学习评估[6]，如图1.1所示。图SEQ图\*ARABIC1.1Canvas平台第二个是Blackboard，这是一个用Java开发的基于网络的商业学习平台，能够支持数百万的用户。Blackboard成立于1997年，在2005年收购了WebCT，并在2003年与中国的赛尔网络成立了合资公司，在中国推广Blackboard。全世界有3700多所大学使用它进行网络应用[7]。Blackboard为中国200多所高校的高等教育、本科、职业教育和商业教育提供产品和服务，以"学习"、"连接"和"分享"为主要目标，提供全面、完整和简化的解决方案。Blackboard允许教员创建一致的课程内容并控制学生的学习顺序，将学生的学习进度保存在一个课程块中，以便他们以后继续学习。系统根据路径中设定的条件，有选择地将内容发布给学生。如图1.2所示。据文献记载，中国的浙江大学、中山大学、首都医科大学、华北煤炭医学院等也在使用Blackboard平台。图1.2Blackboard平台国内发展现状在国内，早期实现在线考试的平台中最著名的非《驾考宝典》莫属。它是由北京木仓科技有限公司开发的一款驾驶员考试软件，如图1.3所示。图1.3驾考宝典驾考宝典可以在手机、电脑以及电视等电子设备上进行使用，以图片+文字+视频的形式，直观、详细地讲解驾考知识。按照学车流程，驾考宝典制定了一套完整的驾考培训计划，为不同培训层次的考生制定培训计划。首先，学员选择车型，题库会自动切换到所选的驾照题型。题库中的题目是经过全国成千上万的驾校和新手司机测试过的，所以考生可以多加练习，提高记忆力。它包含对每个问题的详细解释，以加深考生对该问题的理解，对考试问题的解释也便于用户消化。它还用视频展示了学习过程，可以让考生对题目有深入了解。疫情期间，在居家隔离和学生学习进度考核的双重需求下，猿辅导、火花思维等在线教育平台在实现线上教育的同时，也实现了在线考试与测评。这些APP能够高效统计用户的学习情况，并能及时反馈给老师，方便老师精确感知学生的学习进度。随着互联网技术的发展，在国民教育领域已经开发了各种利用互联网技术的在线考试系统。然而，在线考试系统也有一些缺点，例如：(1)在线考试系统以软件平台、功能库和操作系统为基础，必须在特定的环境下工作，这使得系统的配置和数据结构变得复杂多变。(2)在传统的基于Web的在线考试系统中，用户和服务器之间的信息交流是有限的。这意味着用户必须等待服务器对系统中的每一步进行审查和回应，然后在客户端执行下一个任务时将其发回给客户端[1]。本课题完成后预期解决的关键问题如下：简化系统的组织结构和数据结构，体现在系统的成绩分析模块，能够对与每个学生的成绩和每个学科的成绩进行分析，以折线图和饼状图的形式呈现，便于教师端和管理员端因材施教。数据存储的可靠性和便利性，脱离了纸质文件，能够随时随地通过网络终端添加、删除、修改和审查数据管理任务，数据库存储以及使用定期数据备份。教学、考试效率提高，增加了考试提醒功能。本功能可以提醒学生及时参加考试并完成。本文基于SpringBoot框架和Java语言搭建了一个在线考试系统。本系统在开发过程中涉及到了Vue、ElementUI等技术。SpringBoot是由Pivotal团队开发的一个新框架，它的开发是为了简化新Spring的初始构建和开发。该框架使用特定的配置方法，因此开发者不需要定义典型的配置文件。因此，SpringBoot旨在成为快速应用开发这一新兴领域的领导者[8]。本质上讲，SpringBoot是一套库，可以构建任何系统。为了便于使用，该框架还提供了一个CLI，可以用来运行和测试任何一个没有问题的应用程序。框架的分布式版本，包括一个集成的CLI，可以从Spring资源库下载并手动安装。在系统中，使用SpringBoot简化了配置，程序员不需要写太多的xml配置文件，可以创建独立的应用，而不依赖容器。这样一来，就可以对maven进行简约的配置，以及可视化的相关监控功能，如性能监控、应用状态等[9]。现代的主流互联网架构包括LAMP，Golangweb，Nodejs等服务化开发架构和技术栈。Java相比于这些技术栈，发展时间更长，技术更为成熟，而且最新的SpringBoot2.4对云原生有着很好的支持[10]。社区比较完善，且新技术更新比较及时，能够更全面，稳定的解决集群化、高并发、私有化部署等问题。Vue是一套用于构建用户界面的渐进式框架。Vue是为自下而上的应用而设计的，这是与其他主要框架不同的地方，其核心库只专注于可视化层，它很容易与第三方库和现有项目整合。值得一提的是，当与最新的工具包和各种支持库结合时，Vue可以运行复杂的单页应用程序[11]。Vue是目前最流行的前端框架之一，相比其他两个框架React和Angular也更容易学习，而且其作者是中国人。当然，Vue框架算是一个高级框架，所以在使用过程中要注意JavaScript、JavaScript2015、WebPack、NodeJS、npm、ESLint、JavaScript[12]单元测试框架等知识和使用。VueJS可谓是近年来最好的前端框架之一，越来越多的网站开始使用Vue。作为一个前端框架，Vuejs是一个轻量级的、简单的、对前端友好的、扁平化的学习途径，使前端开发变得更加容易，而基于Vuejs的前端组件库也越来越大了。ElementUI就是其中之一，它是一个基于Vue的前端组件库，由饿了么开发[13]。ElementUI是一套以Vue2.0为基础的组件库，这套基于Vue2.0的组件库为开发者、设计师和产品经理提供了快速塑造网站的辅助设计资源。该系统使用Echarts技术来分析考生的成绩和各科成绩分布。因此，考生的成绩以线性图的形式进行分析，不仅显示了考试次数，还反映了考生成绩随时间的变化。它很容易显示出成绩的趋势，直接反映出成绩的起伏。科目得分的分布用饼图表示，饼图用来反映各分数分段在总分中所占的比例。本章的主要内容是介绍基于Java语言和SpringBoot框架的在线考试系统的搭建过程，分析考试流程以及交互途径，分析考试平台的整体结构，对数据进行收集并设计对应的表结构，以及数据分析系统的环境搭建，为在线考试系统的设计和实现做好基础架构准备。异步控制是基于Java的考试系统设计与实现的难点。在大量学生在线的时候。本文要考虑流量削峰以及负载均衡的问题。比如学生登陆情况比较多，所有写操作可以进行异步操作。先在前端返回成功结果。之后将消息通过RocketMQ推送到消费者端，MQ本身就有流量削弱。且在出现问题的时候进行限制和重试。其次，本文在部署实施的时候，需要考虑多记起负载均衡的部分。这里通过Nginx进行多机器负载均衡的配置，且通过Eureka作为注册中心保活[14]。最后是实施部分，实施部分主要通过服务器来实现，本文会考虑使用阿里云服务器，尽可能降低实施成本。前端会用过前端工程化的形式打包，方便打包之后集成到服务端进行部署，也方便进行自动化部署实施配置，服务端通过单体jar包运行，对外提供嵌入式Tomcat容器，不需要放入额外的服务器里面，也便于扩展和监控以及管理[15]。为了设计并实现基于SpringBoot的在线考试系统，本文的前期工作主要是以调研为主，通过资料查询法对相关文献资料进行查阅与分类，并对其进行学习和分析，获取有用的信息；其次，通过案例分析法结合挑选一个或多个具有代表性的、市面上已经存在的考试系统作为重点研究对象。本文后面的工作主要集中在研发、调试和应用方面。本应用进行系统开发使用的是SpringBoot框架技术，通过SpringBoot框架实现后端应用程序开发。SpringBoot框架属于主流的互联网框架，实现了软件功能的解耦合和工程化拆分，使项目更加有利于维护，同时还给本文提供了分布式扩展。另外，本文还需要用到Vue框架与ElementUI[15]来实现前端用户界面开发前端。技术可行性分析系统采用流行的框架技术进行应用开发，采用SpringBoot框架进行后端应用开发。SpringBoot框架属于主流的互联网框架，相比于其他框架，他实现了软件功能的解耦合和工程化拆分，使项目便于维护，同时也提供了分布式的扩展。Vue框架和ElementUI实现了前端用户界面的开发。SpringBoot简化了Spring的配置，该框架使用特殊的配置方法，因此开发者不需要定义典型的配置文件，本质上讲，SpringBoot是一个库集合，为了便于使用，该框架还提供了一个CLI，可以用来运行和测试任何一个没有问题的应用程序。现代的主流互联网架构包括LAMP，Golangweb，Nodejs等服务化开发架构和技术栈。Java相比于这些技术栈，发展时间更长，技术更为成熟，而且最新的SpringBoot2.4对云原生有着很好的支持。社区比较完善，且新技术更新比较及时，能够更全面，稳定的解决集群化，高并发，私有化部署等问题。基于SpringBoot的考试系统设计与实现的最大难点是异步控制。在很多很多学生在线的时候。系统要考虑流量削峰以及负载均衡的问题。比如学生登陆情况比较多，所有写操作可以进行异步操作。先在前端返回成功结果。之后将消息通过RocketMQ推送到消费者端，MQ本身就有流量削弱。且在出现问题的时候进行限制和重试。其次，在部署和实现时，我们需要记住负载平衡部分。在这里，我们使用nginx来配置多机负载平衡。且通过Eureka作为注册中心保活。经济可行性分析随着商业和技术的快速发展，目前硬件的价格普遍回落，宽带网络的建设正在大力推进。此外与系统运行后的收益相比，系统所需的硬件、软件、人员费用和其他投资是值得的。系统降低了管理费用和人力成本，提高了人员利用率，保证了工作质量，并简化了人力资源的配置，实现了资源优化。它不仅方便了教师的工作，还满足了不同客户的不同需求。可以根据实际情况，随时随地进行测试。它提高了安全性和数据共享，减少了预算，提高了效率，所以具有很高的性价比。本课题的预期目标是通过SpringBoot实现一个交互体验良好，性能稳定且优秀的在线考试系统。本应用的主要组成部分包括管理系统、教师端和学生端，基本具备考试系统的主要功能。对比现有的线下考试系统，该系统具有足够轻量、工程模块化清晰、便于部署和扩展等诸多优点。基于SpringBoot的在线考试系统设计与实现主要分为管理系统、教师端、和学生端等几大部分，系统的功能结构如图4.1所示。图4.1系统功能结构图管理系统主要负责权限管理、组织结构管理和用户管理。教师端主要有班级管理、试卷管理和试卷批改以及查看成绩分析四个功能；学生端有学生考试、学生练习、查看成绩和留言四个功能。首先，在学生方面，学生可以登录注册，查看自己的试卷，然后在规定时间内收到考试通知。学生进入系统之后，可以进入处于考试中状态的试卷进行答题。然后系统会默认进入倒计时。学生答题完成后会提交给教师端。第二部分是教师端。首先，教师可以维护自己班级的基本信息和试卷。试卷中可设置不同的题型，如选择题、判断题、填空题、简答题等，并可根据题型调整分数机制。且在学生答题完成之后，可以根据不用的答题配置方式进行批改，比如选择题和填空题系统可以自动批卷。简答题会显示参考内容。教师根据参考内容对简答题进行批分，最后向学生端发送考试结果。第三部分是管理系统端。管理系统端可以纵观全局进行管理，包括班级，老师，学生，试卷的全局管理，以及对当前学生答题状态进行监控，并具有最高权限，在必要时刻，老师可以联系管理员进行权限修改和拦截。而且学生和老师都可以给管理员提交工单。这三部分是基于B/S架构，学生进入系统进行答疑，教师批改和发卷。管理员进行全局控制和统计。教师端和管理员端可以根据学生过去的考试成绩查看学生成绩的波动和考试成绩的分布。系统共有十一张表，分别为管理员信息表、学生信息表、教师信息表、分数表、考试信息表、填空题表、判断题表、选择题表、试卷信息表、评论表回复表。(1)管理员信息表管理员信息表用于存放管理员端的个人基本信息，例如用户id、用户名、性别、手机号码、用户邮箱、密码、cardid以及用户类型。用户密码采用MD5方式加密。用户id作为本表的主键，用户id必须确保唯一性，不可以有重复。其结构如表4.1所示。表4.1管理员信息表序号数据库字段字段类型字段长度类型存储内容备注1adminIdint9用户id主键2adminNamevarchar20用户名可空3sexvarchar2性别可空4telvarchar11手机号码可空5emailvarchar20用户邮箱可空6pwdvarchar16密码可空7cardIdvarchar18Cardid可空8rolevarchar1用户类型可空(2)学生信息表学生信息表存放学生端的个人基本信息，例如学生学号、学生姓名、成绩、学科、班级、所属学院、手机号码、用户邮箱、密码、cardid、性别以及用户类型。学生学号作为本表的主键，学生学号必须确保唯一性，不可以有重复。用户和角色的对应关系实现一对一的关联，简化用户权限的管理。其结构如表4.2所示。表4.2学生信息表序号数据库字段字段类型字段长度类型存储内容备注1studentIdint9学生学号主键2studentNamevarchar20学生姓名可空3gradevarchar4成绩可空4majorvarchar20学科可空5classvarchar10班级可空6institutevarchar30所属学院可空7telvarchar11手机号码可空8emailvarchar30用户邮箱可空9pwdvarchar16密码可空10cardIdvarchar18Cardid可空11sexvarchar2性别可空12rolevarchar1用户类型可空(3)教师信息表教师信息表存放教师端的个人基本信息，例如教师工号、教师姓名、所属学院、性别、手机号码、用户邮箱、密码、cardid、教师级别以及用户类型。教师工号作为本表的主键，教师工号必须确保唯一性，不可以有重复。其结构如表4.3所示。表4.3教师信息表序号数据库字段字段类型字段长度类型存储内容备注1teacherIdint9教师工号主键2teacherNamevarchar20教师姓名可空3institutevarchar20所属学院可空4sexvarchar2性别可空5telvarchar11手机号码可空6emailvarchar20用户邮箱可空7pwdvarchar16密码可空8cardIdvarchar18Cardid可空续表4.3序号数据库字段字段类型字段长度类型存储内容备注9typevarchar20教师级别可空10rolevarchar1用户类型可空(4)分数表分数表用于存储各个学生的所有成绩信息，例如分数id、考试id、学生学号、学科、练习成绩、考试成绩、总成绩以及参加考试时间。分数作为本表的主键，要保证其唯一性，不可以有重复，考试id和学生学号作为本表的外键，以此来连接学生信息表和考试信息表实现多对一的关系，其结构如表4.4所示。表4.4分数表序号数据库字段字段类型字段长度类型存储内容备注1scoreIdint9分数id主键2examCodeint9考试id外键3studentIdint9学生学号外键4subjectvarchar20学科可空5ptScorefloat6练习成绩可空6etScorefloat6考试成绩可空7scorefloat6总成绩可空8answerDatedate10参加考试时间可空(5)考试信息表考试信息表用于存放考试的相关信息，例如考试id、考试描述、考试科目、试卷id、考试日期、考试总时间、分数、参与班级、专业、所属学院、总分数、考试类型以及提示。考试id作为本表的主键，要保证其唯一性，不可以有重复。其结构如表4.5所示。表4.5考试信息表序号数据库字段字段类型字段长度类型存储内容备注1examCodeint9考试id主键2descriptionvarchar50考试描述可空3sourcevarchar20考试科目可空续表4.5序号数据库字段字段类型字段长度类型存储内容备注4paperIdint10试卷id可空5examDatedate10考试日期可空6totalTimeint3考试总时长可空7gradefloat6分数可空8termvarchar10参与班级可空9majorvarchar20专业可空10institutevarchar20所属学院可空11totalScorefloat6总分数可空12typevarchar255考试类型可空13tipsvarchar255提示可空(6)填空题表填空题表用于存放填空题的全部信息，例如填空题id、所属学科、问题题干、问题答案、答案解析、分值、难度等级以及所属章节。填空题id作为本表的主键，要保证其唯一性，不可以有重复。填空题的答案用于在系统自动判分的时候和考生作答的答案进行精确比对。其结构如表4.6所示。表4.6填空题表序号数据库字段字段类型字段长度类型存储内容备注1TquestionIdint9填空题id主键2subjectvarchar20所属学科可空3questionvarchar255问题题干可空4answervarchar255问题答案可空5analysisvarchar255答案解析可空6scoreint2分值可空7levelvarchar5难度等级可空8sectionvarchar20所属章节可空(7)判断题表判断表用于存放判断题的信息，例如判断题id、所属学科、判断题题干、判断题答案、答案解析、分值、难度等级以及所属章节。判断题id作为本表的主键，要保证其唯一性，不可以有重复。判断题的答案用于在系统自动判分的时候和考生作答的答案进行精确比对。其结构如表4.7所示。表4.7判断题表序号数据库字段字段类型字段长度类型存储内容备注1PquestionIdint9判断题id主键2subjectvarchar20所属学科可空3questionvarchar255判断题题干可空4answervarchar255判断题答案可空5analysisvarchar255答案解析可空6scoreint2分值可空7levelvarchar1难度等级可空8sectionvarchar20所属章节可空(8)选择题表选择题表用于存放选择题的信息，例如选择题id、所属学科、选择题题干、答案A、答案B、答案C、答案D、正确答案、答案解析、分值、难度等级以及所属章节。选择题id作为本表的主键，要保证其唯一性，不可以有重复。选择题的答案用于在系统自动判分的时候和考生作答的答案进行精确比对。其结构如表4.8所示。表4.8选择题表序号数据库字段字段类型字段长度类型存储内容备注1XquestionIdint9选择题id主键2subjectvarchar20所属学科可空3questionvarchar255选择题题干可空4answerAvarchar255答案A可空5answerBvarchar255答案B可空6answerCvarchar255答案C可空7answerDvarchar255答案D可空8rightAnswervarchar10正确答案可空续表4.8序号数据库字段字段类型字段长度类型存储内容备注9analysisvarchar255答案解析可空10scoreint2分值可空11sectionvarchar20所属章节可空12levelvarchar1难度等级可空(9)试卷信息表试卷信息表用于存储试卷的一些基本信息，例如试卷配置id、问题类型、填空题id、判断题id以及选择题id。试卷配置id作为本表的主键，要保证其唯一性，不可以有重复。另外，填空题id、判断题id以及选择题id作为本表的外键，以此来连接填空题表、判断题表以及选择题表实现一对多的关系，其结构如表4.9所示。表4.9试卷信息表序号数据库字段字段类型字段长度类型存储内容备注1paperIdint9试卷配置id主键2questionTypeint1问题类型可空3TquestionIdint9填空题id外键4PquestionIdint9判断题id外键5XquestionIdint9选择题id外键(10)评论表评论表用于存放学生端发表评论的全部信息，例如评论id、主题、评论内容、评论时间以及评论的而学生学号。评论id作为本表的主键，要保证其唯一性，不可以有重复。另外，评论的学生学号作为本表的外键，以此来连接学生表实现多对一的关系，其结构如表4.10所示。表4.10评论表序号数据库字段字段类型字段长度类型存储内容备注1idint11评论id主键2titlevarchar50主题可空3contentvarchar255评论内容可空续表4.10序号数据库字段字段类型字段长度类型存储内容备注4timedate10评论时间可空5studentIdint9评论的学生学号外键(11)回复表回复表用于存放学生端发表评论后被回复的全部信息，例如回复id、回复的学生学号、回复内容以及回复时间。回复id作为本表的主键，要保证其唯一性，不可以有重复。另外，回复的学生学号作为本表的外键，以此来连接学生表实现多对一的关系，其结构如表4.11所示。表4.11回复表序号数据库字段字段类型字段长度类型存储内容备注1messageIdint255回复id主键2replayIdint9回复的学生学号外键3replayvarchar255回复内容可空4replayTimedate10回复时间可空该在线考试系统分为三个端口部分：学生端，教师端，管理员端。学生端可以进行考试、查看考试成绩、发表评论以及回复评论。教师端可以发布试卷，批阅试卷，发放成绩，查看成绩数据，管理班级及学生的信息等。管理员端可以管理学生和教师的个人信息，查看全部的成绩数据等。ORM框架使用Mybatis来动态生成所有的SQL，并将其存储在一个xml文件中。动态SQL中的SQL名称和接口调用与直接调用接口时的调用相匹配，生成SQL并产生查询数据。在Mybatis-Plus中使用Hibernate表达式查询类，业务代码和SQL代码完全分离。为了确保业务代码和SQL代码完全分离，在另一个服务中拼接查询条件后，JSON格式的查询类被传递给数据库服务。publicclassDBUtil{

staticPropertiesprop=PropUtil.getProp("perties");

publicstaticfinalStringdriver=prop.getProperty("jdbc.driver");

publicstaticfinalStringurl=prop.getProperty("jdbc.url");

publicstaticfinalStringusername=prop.getProperty("jdbc.username");

publicstaticfinalStringpassword=prop.getProperty("jdbc.password");

static{try{

Class.forName(driver);

System.out.println("加载驱动成功");

}catch(ClassNotFoundExceptione){

e.printStackTrace();

thrownewRuntimeException("加载驱动失败");

}}在该系统中，用户可以进行身份认证。用户可以通过输入正确的用户名和密码并点击登录。如果用户名或密码不正确，会出现一个弹窗，说明用户名或密码不正确。根据输入的用户名，后台会确定是以学生、教师还是管理员的身份登录的。不同的标识符会导致不同的登录界面。如图5.1所示。图5.1登录模块登录功能对于不同的系统端有不同标识，调用switchcase方法判断接入哪个端口，利用set()方法获取数据库中的数据并调用push()方法，向前端呈现相对应的界面。具体实现代码如下：login(){console.log("登录中");this.$axios({url:`/api/login`,method:'post',data:{this.formLabelAlign}}).then(res=>{letresData=res.data.dataif(resData!=null){switch(resData.role){case"0"://管理员this.$cookies.set("cname",resData.adminName)this.$cookies.set("cid",resData.adminId)this.$cookies.set("role",0)this.$router.push({path:'/index'}) break;case"1"://教师this.$cookies.set("cname",resData.teacherName)this.$cookies.set("cid",resData.teacherId)this.$cookies.set("role",1)this.$router.push({path:'/index'})break;case"2"://学生this.$cookies.set("cname",resData.studentName)this.$cookies.set("cid",resData.studentId)this.$router.push({path:'/student'})break}}考生成功登录系统后，进入考生主页会显示考生进行中的考试和考生参加过的考试，用户可以看到具体的考试开始时间、持续时间以及满分分数。如果存在考试过多的情况，也可以运用搜索功能来选择具体想要参加的考试，如图5.2所示。图5.2考生主页在本页面中，调用search()方法可以查询目前可参加的所有考试，点击考试名称即可触发toExamMsg()跳转到相应的试卷页面。具体代码实现如下：search(){this.$axios('/api/exams').then(res=>{if(res.data.code==200){letallExam=res.data.dataletnewPage=allExam.filter(item=>{returnitem.source.includes(this.key)})this.pagination.records=newPage}})}toExamMsg(examCode){this.$router.push({path:'/examMsg',query:{examCode:examCode}})console.log(examCode)}考生进入答题页面，会显示试题内容、考试用时等信息，已经选择答案的题会在左侧题目列表中填充蓝色，未答显示空白，点击标记按钮会在题目右上角标记一个小红点，提醒考生此题被标记。考生答题完成后，点击“结束考试”按钮即可提交试卷，如图5.3所示。图5.3进入考试界面答题界面主要以两部分组成，左侧题标部分和右侧题干部分，左侧单击题标可触发onclick()方法跳转到对应的题目界面，点击标记调用mark()方法对题目进行标记。具体代码实现如下：mark(){switch(this.currentType){ case1:this.topic[1][this.index]["isMark"]=truebreak case2:this.topic[2][this.index]["isMark"]=true break case3: this.topic[3][this.index]["isMark"]=true}}右侧题干部分显示具体的题目内容，以选择题举例，套用ElementUI中的单选框样式，运用@change事件传递选择题的四个选项。具体代码实现如下：<divv-if="currentType==1"><el-radio-groupv-model="radio[index]"@change="getChangeLabel"><el-radio:label="1">{{showAnswer.answerA}}</el-radio><el-radio:label="2">{{showAnswer.answerB}}</el-radio><el-radio:label="3">{{showAnswer.answerC}}</el-radio><el-radio:label="4">{{showAnswer.answerD}}</el-radio></el-radio-group></div>考生答题完成后，进入我的分数，可以查看考试日期、课程名称以及自己过往的考试成绩，根据分数不同会判断本次考试是否及格，如图5.4所示。图5.4成绩界面成绩界面通过controller层向后台提交查询申请，后台根据当前登录的学生的id，调用getScore()方法来从数据库中调取该生过往的所有成绩。具体代码实现如下：getScore(){letstudentId=this.$cookies.get("cid")this.$axios(`/api/score/${this.pagination.current}/${this.pagination.size}/${studentId}`).then(res=>{if(res.data.code==200){this.loading=false；this.score=res.data.data.recordsthis.pagination={...res.data.data} letmapVal=this.score.map((element,index)=>{letnewVal={} newVal.text=element.answerDate newVal.value=element.answerDate returnnewVal })lethash=[]constnewArr=mapVal.reduce((item,next)=>{hash[next.text]'':hash[next.text]=true&&item.push(next); returnitem},[]);this.filter=newArr}})管理员输入用户名和密码，点击登录系统后台，进入管理员专页，首页会提示关于学院的最新公告，点击弹出窗口。任务栏左侧是管理员可以进行的全部操作，包括考试管理、题库管理、成绩查询、学生管理、教师管理等。管理员可以修改现有的考试信息、搜索考试信息和删除考试信息。单击编辑按钮，管理员可以更改试卷名称、考试介绍、学院、专业、年级、考试日期、持续时间、总分、试卷类型和考生提示，如图5.5所示。图5.5考试管理该页面中可对存在的考试进行增删改查操作，点击编辑，调用edit(examCode)方法，点击删除调用deleteRecord(examCode)方法，确认提交后调用submit()方法对数据库中的信息进行更新。具体代码实现如下：edit(examCode){this.dialogVisible=truethis.$axios(`/api/exam/${examCode}`).then(res=>{if(res.data.code==200){this.form=res.data.data}})}submit(){this.dialogVisible=falsethis.$axios({url:'/api/exam',method:'put',data:{...this.form}}).then(res=>{if(res.data.code==200){this.$message({message:'更新成功',type:'success'})}this.getExamInfo()})管理员进入题库管理模块，对练习题信息进行增删改查。可以详细的看到练习题的题目、答案、所属学科、章节、题目类型、分数和题型难度，如图5.6所示。图5.6添加试题该页面根据题目类型处的下拉菜单选择不同的系统显示不同的添加题目页面，此处以选择题举例，添加选择题调用changeSubmit()方法，并通过post传递到后台，对数据库的信息进行添加。具体代码实现如下：changeSubmit(){this.postChange.subject=this.subjectthis.$axios({url:'/api/MultiQuestion',method:'post',data:{...this.postChange}this.postChange={}}}).then(()=>{this.$axios(`/api/multiQuestionId`).then(res=>{letquestionId=res.data.data.questionIdthis.postPaper.questionId=questionIdthis.postPaper.questionType=1this.$axios({url:'/api/paperManage',method:'Post',data:{...this.postPaper}管理员和教师端使用成绩查询功能，该功能运用Echarts技术以折线图的形式查看某个学生的全部成绩以及其成绩的波动情况，了解该考生的成绩稳定性如何，并且因材施教，如图5.7所示。图5.7某个学生成绩分布该功能首先通过选定的学生id在数据库中查询该生的全部成绩，调用forEach()方法遍历成绩数据，利用echarts技术，调用score()方法，将数据添加到对象的属性中，以折线图的形式呈现。具体核心代码实现如下：letboxDom=this.$refs["box"];letscoreCharts=this.$echarts.init(boxDom);letoption={xAxis:{type:"category",data:this.tableDataX},yAxis:{type:"value"}管理员和教师端也可以以饼状图的形式查看某个考试的具体成绩分布情况，了解各个成绩分段具体的人数，由此可以初步判断目前的教学方式存在哪些问题，并做出整改，如图5.8所示。图5.8某个考试的成绩分布该功能首先通过选定的学科id在数据库中查询该学科的全部成绩，调用forEach()方法遍历成绩数据，利用echarts技术，调用getScoreInfo()方法，将数据添加到对象的属性中，并依次设置tooltip、legend和series相关属性，以饼状图的形式呈现。具体核心代码实现如下：letoption={tooltip:{trigger:'item',formatter:"{a}：{b}<br/>{c}人({d}%)"},legend:{orient:'vertical',left:'left',data:['90分及以上','80-89分','70-79分','60-69分','60分以下']},series:[{name:'分数段',type:'pie',radius:'35%',center:['50%','35%'],data:[...],itemStyle:{emphasis:{shadowBlur:10,shadowOffsetX:0,shadowColor:'rgba(0,0,0,0.5)'}}}]}管理员和教师可以查看学生身份信息，并进行一系列的修改或者删除操作。编辑学生信息需要填写学生账号、所属班级、学生密码、学生姓名和学生手机号码等信息，如图5.9所示。图5.9学生管理管理员进行教师身份信息管理，可以查看教师的身份信息，并进行一系列的修改或者删除操作，编辑教师信息需要填写教师工号、所属学院、性别、电话号码、密码、身份证号以及职称等信息，如图5.