《基于Java Web的在线考试系统设计与实现17000字（论文）》

基于JavaWeb的在线考试系统设计与实现摘要随着国家对教育改革的推进，教育的网络化成为教育改革很重要的一个方面。在线考试系统作为线上教育的一部分，吸引着越来越多的人才投入到该领域的研究，并且受到社会各界的持续关注。在线考试系统是“无纸化”的，这是它的一个重大特点，学生只需操作电脑在计算机上答题即可，无须在线下手写答题。它与传统的考试方式相比，效率更高，灵活性更强。传统的考试一般情况下时间、地点比较固定，灵活性和不可控制的因素太多。例如，去年在新冠疫情的影响下，许多学校的考试工作很难开展，而线上考试却能够规避新冠疫情的风险。本次系统的框架架构，Vue.js和SpringBoot为主要的两大框架，辅助框架为Mybatis数据库框架。前台、后台单独成模块各自独立开发，旨在提高代码的开发效率，方便前后端模块的独立修改、调试和维护。作为一个轻量级框架，SpringBoot框架相比其他后端框架，能让后台开发更加迅捷，无须进行琐碎的配置工作。前端部分，该项目使用Vue.js框架对前台进行搭建，最后通过Api来连接前后端，构建完整的考试系统。本次项目用到的数据库为Mysql数据库，利用其强大的索引机制，提高系统性能。关键词SpringBoot;Mysql;Vue.js;Html;目录TOC\o"1-3"\h\u第一章、前言 6第二章、课题背景、国内外现状及开发意义、开发预期 82.1课题背景 82.2国内外研究现状及项目开发实际意义 82.3开发预期 9第三章、基于JavaWeb在线考试系统相关技术简介 103.1前端基础知识 103.1.1Html 103.1.2JavaScript 103.1.3CSS 113.1.4Ajax 113.1.5vue.js 123.2后端基础知识 123.2.1java 123.2.2SpringBoot 133.2.3Mybatis 133.2.4Mysql 143.2.5MVC模式 15 15第四章、基于JavaWeb在线考试系统的设计与开发 164.1系统功能、架构设计 164.2软件开发环境准备及搭建 174.2.1软件开发环境 174.2.2Maven的配置与使用 174.2.3Node.js的配置与使用 194.3数据库的设计与运用 204.3.1用户信息数据库表 214.3.2试题模块数据库表 234.3.3数据库表的运用 264.4登录模块 274.4.1登录模块前端设计 274.4.2登录模块前后端业务逻辑 284.5管理员模块 294.5.1管理员登录界面 294.5.2学生信息维护 294.5.3教师信息维护 324.6教师模块 334.6.1试题管理 334.6.2试题维护 354.6.3成绩查询 374.6.4教师个人信息修改 394.7学生模块 404.7.1在线考试 404.7.2在线练习 424.7.3学生个人成绩查询 434.7.4学生个人信息修改 43第五章、总结与展望 455.1总结 455.2展望 45参考文献 48 第一章、前言考试对于每个学生来说都是很重要的一次个人测试。一方面学生通过考试，学生和学校都能清楚了解到这段时间学生个人自己的知识掌握量。学生是否上课认真听讲、是否课后及时温习新知识都能通过考试直观的反映出来。考试能让学生及时的调整个人的学习状态，给学生警醒的作用，督促学生更好的学习新知识而不是荒废时间。另外一方面，教师也能对这次考试的总体情况进行分析与评估，如果学生总体情况良好，则证明这段时间的教学成果是成功的，否则，若出现大量学生成绩一般的情况，带教老师应该及时的调整自己的教学规划及教学策略，因为学生的成绩是教学成果的侧面体现。传统的考试方式，学生须到学校指定的场所去答题，手写试卷。如若遇到极端天气等不可控制因素的影响，很难去开展考试工作，同时对考生和监教的个人安全也会产生很大的威胁。而且，一场考试需要提前打印非常多的试卷（包括备用卷），简单来说，在人力、财力、物力方面的花费量是可想而知的。而学校组织的考试存在抄袭、作弊的风险是比较高的，因为学校组织的考试一般是以班级为单位的，考试时周围都是自己的同学，熟人之间作弊风险极高。与此同时，传统考试在考试完成后，教师都要花费自己的空余时间去查卷并且登记不同学生的成绩，是一项繁琐的工作。一个教师可能要批改的试卷量达到一两百张，工作量是庞大的。总而言之，传统的考试系统效率低、成本高，而且其操作难度较大，已经很难跟上当前的发展需求。因此，在线考试系统的开发是一种趋势，每个学校都应该具备一套符合本校校情的在线考试系统，一方面可以节约自己学校的成本，另一方面也是对自己学校教育改革的重大尝试。在开发在线考试系统过程中运用到的框架不仅仅是SpringBoot和Vue.js，还运用到Mybatis框架。Mybatis框架与传统的增删查改相比，优了了对数据库操作。其中后端部分使用SprintBoot的好处是一方面在配置的简化方面优势巨大，另一方面大大降低了开发者的开发难度。在用IDEA去开发SpringBoot项目时，开发者可在不同的层去开发项目。SpringBoot项目是由不同层去构建的，各个层的功能不同。例如常见的数据库增删查改是在Mapper层进行的，开发者在Mapper层注解开发，编写Sql语句。而控制层主要实现一些业务逻辑，存放不同的Api，为前后端的连接搭建通道。本课题通过MAVEN来对项目作总体的管理，例如本次项目的依赖存放于pom.xml中，开发者可根据个人的需求去更新依赖，而很多依赖库都是IDEA帮我们自动下载添加的，大幅度减少环境搭配的难度和导包的繁琐工作。而本次课题的前端部分主要运用Vue.js框架来构建前端网页的可视化界面，Vue.js框架提供了很多工具和依赖，像在Vue.js的Modules存放了很多项目开发的依赖，开发者只需进行组件化的开发，极大提高前端网页界面的搭建效率。第一章，介绍了前言第二章，介绍了开发背景，同时对其国内外现状以及开发此项目的实际意义进行了分析。第三章，主要介绍了前端、后端的一些主流编程语言和技术。前台运用到的语言有Html、CSS、JavaScript等等，后端部分包括java、SpringBoot框架、Mysql数据库、Mybatis框架等等。第四章，主要介绍了软件的整体设计步骤。第五章，总结、展望、致谢。第二章、课题背景、国内外现状及开发意义、开发预期2.1课题背景尽管在线考试系统的研发已经持续了一段时间，少数高校也拥有了自己的在线考试平台，然而很多高校的考试方式还是传统的线下组织，学生手写试卷。考试方式改变不大，依然是人工打印试卷、教师手动改卷登记成绩、学生统一手动写卷，在试卷打印、教室安排、监考安排等方面花费巨大，且组织一场大型考试涉及面广，其中存在诸多的不确定性。例如，受去年新冠的影响，诸多学校纷纷采取线上教学方式，有些学校的考试课也因为此次疫情的影响变成了考察课。在疫情的波及下，传统的考试方式几乎不可能开展工作，如果学校拥有自己的在线考试平台，并且拥有着严厉的监考系统，疫情对学校的冲击几乎为0。教师线上出题、改卷、登记成绩，学生线上考试，在统一的总时长内完成试卷的填写工作，因次人员聚集而带来的疫情风险几乎没有。经研究表明，大部分学生、学校对在线考试系统持积极、支持态度，认为其相比于传统考试方式，更具有效率。2.2国内外研究现状及项目开发实际意义在国外，很多大型考试的组织方已经拥有属于自己的考试平台，他们组织的考试几乎已经实现了线上考试。例如，我们耳熟能详的托福、雅思考试、电子工程师考试等等都是采用线上考试的方式。世界各地的学生都能通过线上考试的方式去参加各种证书认证。这种方式让世界各地不同的学生享有公平竞争的机会。而这种机会对于部分群体来说是极其重要的。而在我国的某些领域采用线上考试方式也持续了一段时间，例如学生驾照考试、计算机一级、二级、三级、四级考试等等，都是采用线上考试的方式。而且在去年，各大互联公司抓住契机，阿里钉钉、腾讯等平台都推出了在线考试功能。教育是国家发展的基础，对传统的教育模式改革必须不断的推进。传统考试作为传统教育的一部分，改革的步伐不应停滞不前。线上考试不仅灵活多变，而且具有高效性。学生的线上考试过程都是基于计算机系统完成的，只需按照相对应的提示进入系统，并在规定时间内完成试卷即可。对于教师，学生的选择题、判断题等客观题都是可以通过系统去自动批改的，减少了教师的个人工作量，能让教师更多集中于教学研究。主观题部分老师在电脑上阅卷，最终系统根据客观题和主观题得分自动计分。总而言之，一个好的、符合本校校情的在线考试系统，对学生、学校都提供了极大的便利，侧面来说也是学校的教育改革。它改变传统的考试方式，减少了纸张的消耗量，不仅节约大量资源，而且十分的绿色、环保。2.3开发预期对于此次系统的开发预期，本人希望能够通过不同角色去设计考试系统，主要是管理者、老师、学生三个角色。对不同的角色赋予不同的功能模块，最终将各个模块连接在一起实现考试系统该有的功能。例如教师发布试卷、学生填写试卷，自动评定成绩，管理者维护后台数据等等。第三章、基于JavaWeb在线考试系统相关技术简介3.1前端基础知识3.1.1HtmlHTML是用来设计网页的编程语言，通常在设计网站页面都会使用它来构建相关动、静态页面。在开发过程中主要还是HTML+CSS搭配的方式。在设计网页的过程中，Html一般都会使用标签来定义元素，也就是说Html编程很大程度就是标签语言。例如在编写表格时，会用到<td></td>标签。在编写文本标题时会用到<h></h>标签。在用到超链接标签时用到的是<a></a>标签。这些都是比较基础的标签，而实际在网页设计的过程中运用到的标签数量会更多。所以在设计网站的过程中，熟悉Html的标签是基础，掌握好Html中的常用标签能够让你迅速的开发网页界面，Html主要就是学习标签在网页中的应用，与其他编程语言相比，它是更加容易上手的，也是很基础的编程语言。不同的浏览器对标签的定义是不同的，所以在开发中还要注意Html的兼容性问题，避免在不同的浏览器上出现不兼容情况，导致网页的显示出现问题。现在的主流浏览器，例如：火狐、谷歌等等运行代码时代码效果偏差不大。主要是IE浏览器不同的版本会出现较大偏差，所以在Html开发中要更加谨慎。Html标签通常也是成对存在的，所以在编写过程中避免出现漏写情况。3.1.2JavaScript相比于Html和Css而言，JavaScript更多是一种功能性语言，简称JS。Html和Css更多的作用是去构建画面、描绘画面，而更多的功能性模块都是用JavaScript去实现的。例如，网页要实现怎样的行为、网页要实现怎样的动作，怎么去控制网页等等都是用JavaScript去实现的。直白的说，JavaScript能够让静止的东西“动”起来，能够赋予网页不同的动作。实现网页页面静态与动态的交互，可以极大的提高用户的体验效果。而且JavaScript还能提高网页的流畅程度，避免卡顿现象。而JavaScript相比于其他的编程语言，像java、c语言，它更加的简单易学，因为它对格式的要求没有其他编程语言那么高，也没有很多复杂的数据结构，更多的是函数模块功能。而且它的跨平台性很好，只要浏览器支持，它就能发挥作用。在实际的运用过程中，在Html中的js代码，开头结尾通常是<script></script>。而现在更多企业、互联网公司的网页开发者更喜欢将Js语言编写在单独的Js文件中，让编写的Js语言单独成一个模块，这样做的好处是对于后续程序的开发、调试、维护提供了极大的方便性。JavaScript的存在让网页开发更加丰富，是网页开发的核心。3.1.3CSS CSS简单来说就是叠层样式表。CSS常与HTML、JavaScript相互配合，主要负责网页中各种样式的排版。例如：表格的线条粗细，标题大小、颜色，背景板的颜色等等，都可以通过编写CSS来进行改变。Html是对网页基本框架的架构，而CSS就是来装饰网页的。CSS可以理解为是一种装饰语言。在总体的设计、开发中，经过Html的架构过后，经常用CSS来对网页的界面进行排版和颜色渲染，所以说Html和CSS是相辅相成的。CSS可以说是对于HTML语言的补充，让网页开发更加美观。在实际的运用过程中，Html中的CSS代码，开头结尾通常是<style></style>。但是现在大部分网页开发者将CSS语言编写在CSS文件夹中，将它单独成一个模块来编写，一方面是使代码编写开发更加美观，另一方面也为后期网页的调试、维护提供巨大的便利性。开发者能够相对应的去CSS文件夹中排错、修改样式，无须花费时间寻找各自对应的代码。而CSS也为程序员提供了丰富的样式去构建网页。例如：可以随意修改文本的颜色、大小，为任何元素加边框、设置元素间的距离等等。而CSS有好多选择器，例如属性选择器、Id选择器、class选择器等等，程序员可以通过修改选择器的内容去修改样式，无须一个个修改。同样也可通过选择器去统一样式，所以说CSS语言非常实用、简单。在编写Html的标签时，可以为不同的标签设置不同的属性，例如<pId=“student”></p>，可以为标题标签定义Id值student，<tdclass=“table”></td>可以为表单设置class值table。当我们想要去改变标题的样式或者是表单的样式时，可以通过Id值、class值去修改样式。3.1.4AjaxAjax,简单的说就是异步通信。软件系统开发是由不同的网页界面构成的，使用Ajax技术能及时的更新画面，避免了页面的重复刷新情况。本次设计用到的是axios，封装了Ajax，是Ajax的一种表达方式。现在有许多技术都能实现异步通信，也就是Ajax。本次毕业设计我选用到的是axios，它从划分意义上来说它是属于Ajax的一种，与其他异步通信的方式相比，它更加的简单，在前端模块运用中，更加便捷，也是比较常用的异步通信方式。3.1.5vue.jsVue.js框架是一种目前常用的开源前端开发框架。简单来说，它是一个JavaScript框架，让开发者更加简单构建网页的页面，也就是常说的UI。Vue.js拥有很多库，这些库都是Vue.js框架帮我们封装好的，极大提高了前端的网页的开发效率。而Vue.js开发都是组件化开发的，只需知道组件的参数和组件的标签。在Vue.js框架中，不同页面代表不同的组件，只需在上级菜单（父级菜单）中写入对应的标签和参数，就能实现组件。同时Vue.js也采用虚拟的Dom，传统的Dom操作很容易导致网页的卡壳或者出现延迟。虚拟的DOM与传统的DOM操作相比，网页的渲染次数更少了，渲染次数越少，网页更加流畅，卡顿出现的次数更少。现在很多公司的前端开发，Vue.js框架是应用次数最多的框架。Vue.js框架的开发也是比较模块化的，不同的前端页面由不同的模块去控制，在项目的开发过程很容易的排错。与后端框架一样，前端框架也是不断发展的，前端框架有Vue.js框架、React框架等等，不同的框架各有优缺点，但Vue.js和React框架是当下前端项目开发的优选框架。任何项目开发都是奔着减少时间成本、提高效率去的，将Vue.js框架应用到前端项目中，非常能够提高代码的健壮性。3.2后端基础知识3.2.1javaJava语言相比于C++，更加易学。Java类的变量和方法必须在类中声明、定义，而C++可以在类外定义。Java是运行于虚拟机的，不需要进行内存分配和内存管理。一般情况下java的内存和分配都是自动进行的。Java现在的发展极其迅猛，如在Web后端开发领域，Spring、SpringBoot、SpringMVC全家桶框架技术发展迅速，已经很成熟了。他们的存在让程序员开发更加便利，还有其他的数据库框架，像Mybatis数据库框架，让网页开发上升到了另外一个档次。同时java拥有强大的缓存机制，像Redis缓存，提高开发性能，优化了缓存。所以，现在很多网页开发首选都是用java开发，java开发在后端开发中相对于其他编程语言已经很成熟了，其成熟的框架技术深受企业、程序员喜欢。同时java的编译十分简单，只要有虚拟机即可，这就是它跨平台性的主要原因。而且java支持线程机制，因为现在的企业级项目时需要多个进程同时启动的，而java的多线程机制则很好的解决了这个问题，java开发让企业级开发更加强大。Java的垃圾回收机制也是一个重大特点，在内存的分配以及空间缓存机制上，java是更占优势的。所以，java在很长的一段时间内终将会是热门的编程语言。3.2.2SpringBoot平常大家在进行后端开发时，Spring全家桶（Spring、SpringBoot、SpringMvc）可以说是必须掌握的框架。三个框架之间相互联系，而SpringBoot可以说是其他两个框架的延伸。Spring框架就是一个优化项目开发的免费框架。以前的网页设计工作量是庞大的,程序员需要反复进行代码编写。而Spring框架的出现，让软件开发更加高效，让网页设计更加的迅捷。Spring框架的一大关键就是IOC。IOC翻译过来就是控制反转，在开发设计的过程中，不再用传统的new（）去创建对象，Spring框架会自动搞定对象，优化了项目的设计、开发。AOP直面翻译就是面向切面编程，简单说就是在不修改代码的前提下进行功能性方面的增强。传统的网页开发模式，用到的都是判断，改变条件时需要修改相关联的代码，代码的修改量是巨大的，而Spring框架则是对不同模块增加不同的功能，需要改变条件时只需到各自的功能模块去修改即可，无须删改大量代码，它只是对需要补充的功能在特定位置进行增强操作，而不改变原有的代码结构。但是Spring的不足也很明显，用Spring框架去开发网页，繁琐复杂的配置工作是其一大劣势。而SpringBoot，微服务的框架就是来解决网页开发中的配置问题的。每个框架的诞生，可以说都是解决另外一个框架的不足。Spring框架操作麻烦，SpringBoot框架则让项目设计速度更加快，省略了很多琐碎的工作。约定的内容大于配置，这是微服务框架的核心。简单说就是减少人为手动的配置，开发者默认统一的配置。只要我们有相对应的jar包，SpringBoot就会帮助实现自动配置，当然我们也可以用自己的配置来代替这些默认的配置。例如在IDEA开发项目时，一个项目一般只有一个默认配置的文件。现在很多企业级的开发都是用到微服务框架的，因为在开发效率问题上，SpringBoot框架相对于其他框架更加的高效，开发速度更快。但是每个框架都有每个框架的不足之处，如果开发中能够让不同框架去相互配合，相互补充，开发的项目的漏洞、风险也会更少。3.2.3MybatisMyBatis是一个持久层框架。传统的数据库连接，开发者数据库的知识储备必须很丰富，因为其过程很多东西都要手动编写，比较底层。例如，你要懂得怎么去使用Statement，它就是一个接口，Sql语句通常都是通过这个类去控制的。还要懂得Connection类（驱动连接类），主要就是对驱动进行加载。后续还要返回数据库的结果查询，还要编写异常类，所以说传统的数据库过程操作是极其复杂的。而自从Mybatis框架被不断完善后，则省略了大部分繁琐的数据库操作。Mybatis框架拥有不同的版本，开发过程需要下载自己需要的版本号。在使用Mybatis框架过程中，我们只需编写需要实现的sql语句即可，其他繁琐的工作，像加载驱动、JDBC异常处理等等都交由Mybatis处理。在项目的实际设计中，通常都是通过实体类去操作数据库的，Mybatis也不例外。之前的数据库操作框架是Hibernate。Hibernate框架确实对许多数据库操作步骤进行了优化，但是其需要进行的工作配置量是巨大的，配置也是一项琐碎的工作。一个新框架的产生都是解决另外一个框架的不足，Mybatis框架不再需要配置大量的文件，程序员把业务逻辑编写好即可。所以说，Mybatis框架让项目开发更加高效，减少JDBC的重复编写，是革命性的一次变革，让网页的开发更加迅捷，其重要性不亚于Spring全家桶（Spring框架、Spring成Boot框架、SpringMVC框架）。现在几乎所有后端项目的开发都要用到Mabatis框架，其重要性不言而喻。3.2.4Mysql表是Mysql最重大的特性，表中存储着Mysql数据库的内容，具有持久存储性。同时Mysqld索引也具有重大的作用，例如项目开发中用到的表很多，但Mysql的索引能够让系统仍然保持较快的查询速度。索引的存在，能让保存到数据库表中的数据根据索引的规则进行不同的操作，例如分组、排序，有效地提高查询速度。现在企业开发中经常会使用到Mysql数据库，因为其提供的便利性以及强大的索引机制深受程序员喜爱。像本次毕业设计利用Mysql数据库中的表和实体类相对应的关系，更加便捷实现对数据库的增、删、查、改操作。而本次系统用到的另外一个软件是Navicat，Navicat能够十分容易的创建数据库和表，而不用在命令提示界面进行复杂的创建工作。Navicat还能够十分容易的连接到系统上的Mysql数据库，所以说本次Mysql数据库及相关表的创建能够快速创建还要得益于Navicat软件。3.2.5MVC模式MVC,英文全称是ModelViewController。在用java进行后端开发时，MVC设计模式都是一般情况下会用到的模式。MVC设计模式主要分为三个层次，每个层次所负责的模块功能不同，例如，控制器主要就是实现部分业务逻辑。视图层主要负责的部分就是页面数据显示部分，另外还有模型层，在开发中经常用到MVC模式，因为这种设计模式能够很好的将视图界面、数据、业务逻辑分开操作，各个层次之间相互联系，相互配合，使系统的设计、开发更加的迅捷，更加的模块化，这种对于以后项目的维护是非常有利的。本次毕业设计也是用到了MVC设计模式，在开发过程中也是极其方便的，很大程度上节省了系统设计的时间。如下图3-1所示，图3-1MVC设计模式第四章、基于JavaWeb在线考试系统的设计与开发4.1系统功能、架构设计本次毕业设计的是JavaWeb在线考试系统。从系统的架构出发，SpringBoot、Vue.js是其两大主要框架。同时，本次在线考试系统采用模块化设计，管理员、学生、教师为系统的三大模块。管理员端包含的主要功能：维护后台数据信息。教师端包含的内容：教师创建、发布试卷、教师查看学生考试成绩、教师个人信息修改等。学生端包含的内容:学生成绩查询、线上考试、线上练习。下图为本次毕业设计系统的整体功能图，其如图4-1所示。图4-1在线系统架构结构图本次毕业设计的系统，后台部分中，主要使用java进行开发,前台语言为Html、CSS、JavaScript,以下为在线考试系统的系统层次结构，介绍了系统在运行的过程中，用户、前台、后台、数据库各自相对的联系。如图4-2所示：图4-2前后端分离系统架构图4.2软件开发环境准备及搭建4.2.1软件开发环境 任何系统设计在开发前，都需要搭建好项目设计的运行环境，运行环境能否搭建成功，关系到你能否正常的运行项目。例如，本次在线考试系统的使用的框架架构为Vue.js和SpringBoot，前台与后台各自单独成模块开发，前台、后台设计完成后，设计Api,将前端、后端连接起来构成完整项目。此次项目设计前，需要提前搭建好SpringBoot环境、Vue.js环境。前端开发使用到了JavaScript语言，需要搭建好JavaScript运行环境,例如Node.js环境。环境的搭建是十分重要，在项目正式设计前必须确保环境搭建成功。以下为部分软、硬件开发环境。软件部分：JDK版本号：8.0.18数据库：Mysql浏览器：火狐浏览器开发软件：IDEA、VsCode、Navicat开发语言：Java、Html、CSS硬件部分：电脑类型：联想CPU：Intel(R)Core（TM）i5-7200U容量：8G 4.2.2Maven的配置与使用1、Maven介绍在javaweb的开发中，Maven主要起到管理项目的作用。使用Maven管理SpringBoot框架，Maven管理下的pom.xml可以自动更新和下载依赖，在SpringBoot中使用Maven，很大程度上为开发带来了便利，可以减少琐碎的依赖添加工作，提高代码开发的效率。简而言之，Maven管理项目时能够减少很多重复的包的反复引用，同样的我们也可以较方便的更换不同库、框架的版本。现在大部分企业都用IDEA来开发JavaWeb项目，IDEA可以自动产生部分依赖来管理我们对应的项目，当我们需要更新部分依赖的版本时只需要在pom.xml里面更新依赖，并重新加载Maven。搭建环境时，将提前下载好的Maven导入到SpringBoot环境中，系统会自动去更新各自对应的依赖。如图4-2，为IDEA中的pom.xml文件。图4-2Maven的pom.xml文件2、Maven的变量配置通常去官网提前下载好系统需要的Maven压缩包，到电脑的高级系统设置的系统变量中设置Maven路径，路径为你包的存放路径。如图4-4、图4-5。图4-4Maven添加到系统变量图4-5Maven添加到Path中3、Maven的配置测试在安装好相对应的版本后，还需进行配置测试，检查Maven是否配置成功。首先打开命令界面，输入mvn–v，可以看到界面显示了系统安装的Maven版本，电脑用到是Maven3.6.3版本，界面显示的也是Maven3.6.3,即代表Maven配置成功。图4-6Maven配置测试4.2.3Node.js的配置与使用1、Node.jsNode.js简单来说就是一个运行环境，主要就是来运用JavaScript。此次在线考试系统的设计必须安装Node.js环境，因为前端部分应用到了Vue.js框架，而且也有利于JavaScrit在前端部分的运行。在Node.js环境中，Module模块里面存放了许多依赖和包文件，开发者不用自行添加依赖，这样能够减少掉程序员大量的时间，将核心工作集中到业务逻辑的开发中，不用花费大量时间去注入各种依赖。2、Node.js的变量配置在官网中下载自己本身需要的Node.js版本，官网会提供Node.js压缩包，将其保存到自己创建的文件夹中。然后到电脑的高级系统设置中的系统变量去设置Node.js路径。如图4-7、图4-8。图4-7添加Node.js到系统变量图4-8Node.js添加到path路径3、Node.js安装检测同样的，安装完成后需要检测Node.js是否已经存在于电脑上.如图4-9所示,输入ode–v，系统显示的版本号是v14.16.0，本次系统用到的Node.js版本是v14.16.0，版本号一样，在界面输入npm–v,可看到npm版本是6.14.11，cmd界面显示的版本号与电脑系统一致，说明Node.js安装成功。图4-9node.js和npm版本4.3数据库的设计与运用项目开发中数据库的重要性不言而喻，Mysql数据库是此次系统的数据库。Navicat（设计Mysql的软件）能够十分迅速的与本电脑的Mysql进行连接，建表的速度也非常快。而数据库表是Mysql数据库的关键，外键能够实现不同表的连接，进而推进数据库中数据的传递。而数据库中的表又是和后端部分的实体类相对应的，表与表之间，表与实体类之间，实现了数据库与后端的联系。如图4-10，为本课题的所有数据库表的信息，其中包括题目的表、用户表等等信息。数据库的名称为exam,共有9个表。图4-10在线考试系统总数据库表4.3.1用户信息数据库表 （1）管理员数据库表 在设计管理员的表信息时，将其命名为admin表，表4-1（管理员数据库表）中写明了该表包含的具体管理员内容信息，从表中可知道adminId包含的内容为账号，role内容为管理员角色信息。如下表4-1所示字段（名称）类型注释约束adminIdint主键id号、账号主键adminNamevarchar姓名sexvarchar性别cardIdvarchar身份证pwdvarchar密码emailvarchar电子邮箱telvarchar电话rolevarchar角色表4-1amdin数据库表 （2）教师数据库表 teacher为教师数据库表，表4-2为教师数据库表包含的具体信息。在表4-2中可以看到teacherid内容为老师账号，role包含老师的角色信息。如下表4-2所示字段类型注释约束teacheridint主键id主键teacherNamevarchar教师姓名pwdvarchar密码cardIdvarchar身份证telvarchar电话emailvarchar电子邮箱Institutevarchar学院sexvarchar性别typevarchar职称rolevarchar角色表4-2teacher数据库表（3）学生数据库表student表为学生数据库表，表4-3为学生数据库表包含的具体信息，从里面的信息可以发现，studentId字段是学生的登录账号，major存放着学生的班级信息。如下表4-3所示。字段类型注释约束studentIdint主键id主键majorvarchar班级信息gradevarchar年级信息studentNamevarchar专业信息clazzvarchar学生姓名emailvarchar电子邮箱telvarchar详细电话号码institutevarchar学院信息pwdvarchar密码信息cardIdvarchar身份证信息表4-3student数据表4.3.2试题模块数据库表（1）填空题数据库表fill_question填空题数据库表，表4-4为填空题数据库表包含填空题的具体信息，可以从表里面了解关于填空题的信息，如下表4-4所示。字段类型注释约束questionIdint主键id主键subjectvarchar考试具体科目questionvarchar试题具体内容answervarchar正确答案analysisvarchar题目详细解析scoreint得分levelvarchar难度系数sectionvarchar对应章节表4-4fill_question表（2）判断题数据库表judge_question判断题数据库表，表4-5为judge_question表的具体相关信息。主要用于存放判断题题的编号、判断题题内容、准确答案等等，如下表4-5所示字段类型注释约束questionIdint主键id主键subjectvarchar考试具体科目levelvarchar难度系数scorevarchar得分sectionvarchar对应章节answerint正确答案questionvarchar试题具体内容analysisvarchar题目详细解析图4-5judge_question表（3）选择题数据库表multi_question表为选择题数据库表，表4-6为multi_question表的具体信息，可以在表里设计关于选择题内容。例如：选择题的详细解析。如下表4-6所示字段 类型 注释约束questionIdint主键id主键subjectvarchar考试的科目questionvarchar试题具体内容answerAvarcharA选项answerBvarcharB选项answerCvarcharC选项answerDvarcharD选项scorevarchar得分analysisvarchar题目详细解析rightAnswerint正确答案表4-6multi_question表（4）添加试题数据库表paper-manage表为添加试题数据库表，表4-7为添加试题数据库表包含的一些具体的信息，例如试卷编号的字段，题目的字段等等。如下表4-7所示字段类型注释约束paperIdint主键id号主键questionTypeint题目类型questionIdint题目编号表4-7paper-manage表（5）试卷管理数据库表exam-manage表为试卷管理数据库表，表4-8为exam-manage表的具体信息，可以在表里设计关于考试的相关信息内容。如下表4-8所示字段类型注释约束examCodeint主键id主键descriptionvarchar考试信息介绍sourcevarchar课程具体名称paperIdvarchar试卷的编号examDatevarchar考试具体日期totalTimeint考试总时长gradevarchar年级信息termvarchar具体学期majorvarchar专业信息institutevarchar学院信息表4-8exam-manage表（6）试卷分数表score表为试卷分数表，score表为选择题数据库表，表4-9为score表的具体信息，可以从中了解学生分数情况。例如：平时成绩、总成绩，分数表会记录学生每次考试对应的分数。如下表4-9所示字段类型注释约束scoreIdint主键id主键examCode varchar考试编号studentIdvarchar学号subjectvarchar课程名称ptScoreint平时成绩etScoreint期末成绩scoreint总成绩answerDatevarchar答题日期图4-9score表4.3.3数据库表的运用在SpringBoot项目中，SpringBoot项目目录下的perties中添加数据库地址、端口、登录账号和密码，实现对数据库的访问。如图4-11，其中，server.port为前后端连接的端口号，前后端的端口号不能存在差异，必须一致，否则前后端连接不上。spring.datasource.username为电脑本身Mysql数据库的名称，为root。要想连接电脑本身的数据库，需要知道password密码。passsword密码是我们在安装Mysql时自己定义的。而我电脑在安装数据库时，设置的密码为123456789。本次课题的数据库名称为exam，driver为驱动。SpringBoot通过这种方式实现了数据库的连接工作，与以前使用JDBC(连接数据库)相比，直接、简单一目了然。图4-11连接数据库每个人电脑安装的数据库版本是不一样的，在pom.xml中添加本电脑依赖管理数据库，这样才能正常操作数据库，否则会出现报错的情况，如图4-12，图4-12添加依赖4.4登录模块4.4.1登录模块前端设计本次毕业设计项目前端代码是在VsCode软件上运行的，在搭配好相关环境和添加依赖完成后，点击产生新的终端，在控制台上输命令npmrundev启动前端代码，如果启动成功，VsCode的显示台显示相对应的网址，例如本次设计的在线考试系统的端口号为8080，启动成功后显示台会出现http://localhost:8080/，这是此次系统的登录网址，可以按住ctrl+鼠标点击网页地址或者直接复制到浏览器，就可以访问到前端登录系统了。登录界面比较简单，登录者将信息填写完整后登陆系统。登陆者无法查看到自己输入密码的准确信息。进行登录操作时，系统会把前端输入的信息，通过Api,传达给后台，后台接收到反馈后调用数据库的信息，两者进行差异化比较。若不存在差异性，则用户成功登录，系统会跳转到各个角色相对应的主页。如果用户输入信息与后台存在差异，浏览器页面面会提示账号或者密码错误，此时用户需要重新进行登录操作。如下图4-13，为其具体的流程图图4-13登录的流程图登录页面：图4-14登录页面登录页面失败：图4-15登录失败4.4.2登录模块前后端业务逻辑该系统登录模块简单实现身份验证并进行登录。因为前端框架使用了Vue.js框架，Vue.js框架不具备通信功能，前端部分我们使用了anxios。简单来说，axios是属于Ajax一种，此次系统前后台的通信主要依靠的就是anxios。当用户在前端登录页面输入信息时，前端请求后台处理数据，登录模块用到的url为/login。后端接收到前端的请求后，通过@RequestBody来接收前端传递的参数数据，并将它交给adminLogin()处理，若前端传送的数据是正确的，后端会将该用户的总体信息反馈到前端，前端的resData()就是后端的反馈信息，前端用到resData.role来辨认系统登录者的角色。前端根据反馈信息的role信息，0代表管理员，1代表老师，2,代表学生，跳转到不同用户的页面。若登录失败，系统提示账号或者密码错误。后端部分业务逻辑代码，下图4-16主要介绍了登录模块的部分后端代码：图4-16部分后端登录模块的代码4.5管理员模块4.5.1管理员登录界面管理员首先会完善个人信息并登陆，若输入的账号信息、密码信息与后台不存在差异性，则会连接到管理员页面，否则登陆失败。管理员负责的只有两部分，学生信息管理、教师信息管理。如下图4-17所示，管理员的主要工作就是管理。教师、学生在后台的信息通通由管理员管理。图4-17管理员登陆界面4.5.2学生信息维护本次毕设的考试系统，管理员可对后台已经存在的学生进行查询。当管理员点击添加学生栏时，能够添加新的学生的信息。如下图4-18为查询学生具体信息。图4-19是添加学生操作。图4-18学生管理图4-19添加学生管理员添加新的学生，如下图4-20图4-20添加学生如下图4-21，我们可以在浏览器上看到，数据添加成功了，也就是说学生已经被我们添加到系统中去了。我们可在其对应页面中查看到新学生的相关信息。图4-21成功添加学生信息添加学生模块的部分前端代码，如下图4-22为前端部分逻辑代码：图4-22前端部分代码后端的业务逻辑模块部分代码，如下图4-23：图4-23部分后端代码在对前端表单初始化数据后，前端通过onSubmit()

方法，将我们新增加的学生信息传给后端，此时的api是/student，后端通过@RequestBody接收前端数据，并将它赋值给update()函数，update函数将传送的数据及时更新到数据库并反馈给前端。前端将反馈到的学生信息push到/studentManage中，实现前端添加学生的数据的显示。简单来说就是管理员在进行添加学生操作，当点击添加键，管理员输入的学生相关信息会通过Api传给后台，后台通过简单数据添加操作，这里用到的是update更新数据。将新增加的学生信息添加到后台学生数据库，并且反馈给前台，前台接收到后台的反馈后会跳转到/studentManage，studentManage模块会将新增加的学生信息实时展现在学生信息界面。在studentManage模块中还用到checkGrade()函数来编辑学生，用到deleteById()函数来删除学生，主要是通过学生的StudentId来实现。4.5.3教师信息维护同时，管理员能够对现有老师信息进行查询。当管理员点击及教师管理栏时，能够查询到现有的教师的相关信息，还能添加新的教师。如下图4-24、图4-25所示。图4-24教师信息查询图4-25添加教师当点击立即创建之后，系统显示添加成功，并可以在界面查看到相关信息。添加老师的前后端代码与学生的大致一样，都是现在前端构建好相关的前端界面，然后把我们在前端输入的相关信息通过Api传给后端，此时的Api为/teacher，后端根据前端的请求，通过PostMapping注解的方式将数据添加到数据库，并将信息反馈到前端的/teacherManager，/teacherManager会将新添加教师的信息实时展示在页面上。在teacherManage模块中也是用到checkGrade()函数来编辑教师信息，用到deleteById()函数来删除教师。如图4-26为添加教师成功的界面显示。4.6教师模块在线考试系统中，教师模块由：考试管理安排、试题创建与维护、教师个人信息维护、学生成绩查询构成。其中题库主要就是教师创建完试卷后，试卷的试题会在试题管理栏一一显示出来。考试管理主要包括考试查询和添加考试。试题维护主要就是教师可以查询到自己已经发布的试题，包括试卷名称、题目信息、所属章节、试题分数等。试题维护还能添加试题和发布试卷，教师可以重新添加试题，包括选择题、判断题、填空题并且发布该科试卷，在创建试题时会设置难度系数，教师可根据难度系数挑选题目创建试卷。个人信息主要就是教师个人密码的修改，教师可根据自己的需要修改自己当前的密码。4.6.1试题管理试题管理主要包括考试信息查询和添加考试两大模块，教师可以查询到已经发布的考试的相关信息，同时还能够添加新的考试信息。如下图4-26、图4-27图4-26考试查询图4-27添加考试当点击立即创建后，我们可在浏览器看到提示:创建数据成功，新的考试已经被我们添加到系统中并反馈到学生的页面。如下图4-28图4-28添加考试成功添加考试的前后端业务逻辑与管理员模块的添加学生、教师基本是一样的，添加考试用到的api是/exam，前端部分通过onSubmit()函数将新增加的表单信息通过api传送到后端，后端通过@RequestBody接收到参数后传给exam的update()函数，及时更新数据库并反馈给前端。后端模块在ExamManageMaapper中定义findOnlyPaperId()函数，查询最后一条记录的paperId,返回给前端达到自增效果。前端用resdata接收后端信息后，更新相关考试的界面信息。更新界面主要由selectExam模块去实现，前台添加考试信息，后台接收到新考试信息，添加到数据库examManage中，添加完成后反馈到addExam，addExam接收完反馈给selectExam模块。selectExam模块中用到Edit()函数，通过参数examCode（试卷编号）去编辑试卷。4.6.2试题维护试题维护主要包括所有题库和增加题库两大功能，所有题库主要包含教师已经发布过的试题，教师可以通过增加题库添加新的试题，试题的种类包括选择题、填空题、判断题。如下图4-29图4-29所有题库当点击增加题库时，教师可以为不同的考试科目添加不同的题目。教师可以设置难度等级不同的题目，并归类它的章节数。如下图4-20所示。图4-20增加题库当增加题库成功后可以在所有题库查询到相关信息，如下图4-21所示图4-21增加题库成功此次题库表分开为三张表，为fill_question，judge_question,multi_question三个表，通过中间表paper_manage关联起来组合成试卷。部分后端核心业务逻辑代码如下图4-22：图4-22部分后端代码其中的paperId为考试的科目，不同的题目类型有不同的questiontype，教师在组件试卷时会创建不同的题目类型，包括选择题、填空题、判断题。然后教师将已经提前创建好的题目组建成试卷。前端创建试卷时，用到的url为/item,postChange（）函数包含选择题提交的内容，postFill（）函数包含填空题提交的内容，postJudge()包含判断题提交的内容，postPaper为考试管理表对应字段，包括paperId（表编号）、questiontype（考试类型）,questionId（问题id号）。Create（）为组建试卷函数。4.6.3成绩查询学生成绩主要分为个人学生成绩查询和成绩分段查询，每位学生只要参加过考试，就会在此处记录学生的个人成绩。同时教师能根据成绩分段查询统计此次考试成绩的总体情况。如下图4-23，可以看到该同学此次的考试成绩为0分，如下图4-24，可以看到该科班级的总体考试情况。图4-23学生成绩查询图4-24学生班级成绩统计部分前端代码如下图4-25所示:图4-25成绩统计前端代码部分后端代码如下图4-26所示:图4-26成绩统计后端代码如前端代码所示，统计学生的成绩时，会将学生的考试成绩进行分段统计，例如90分及以上为一个统计模块，80-89分为另外一个统计模块，以此类推。在统计模块用到了分页查询和不分页查询，即是图片中的 IPage()函数，通过分页能够有秩序查询学生的成绩，避免一次性查询到太多数据。4.6.4教师个人信息修改教师个人信息修改部分主要是教师能够更改旧密码，每位教师可以根据个人需要选择是否更改密码。如下图4-27，当教师成功修改密码后，系统会显示修改密码成功。图4-27教师修改密码成功以下为教师修改密码的部分前端代码，如图4-28所示图4-28教师修改个人信息前端代码以下为教师修改密的部分后端代码，如图4-29所示图4-29教师修改个人信息后端代码当登陆者成功登录考试系统后，系统会对登录者的身份进行判定，管理员的身份是0，学生是2，教师是1，在线考试系统通过登录角色信息获取到该登录者的原密码。当教师要修改密码时点击右上角的用户管理，教师输入密码和新密码，然后通过Api反馈到后端，这里的Api接口是/teacherPWD,后端对传送的数据Update（）到teacher表中，当teacher表的信息成功更新后，前端显示更改密码成功。4.7学生模块而在本系统中，学生端：学生个人信息、线上考试、练习中心、个人成绩查询四大模块。学生可更改不同密码等级的密码，在在线考试栏开始考试，在练习中心处完成已考试卷的练习，在个人成绩处可查询到本次完成考试后的成绩。4.7.1在线考试学生的线上考试是本次系统的关键功能，教师将创建好的试卷发布后会显示学生模块界面，包括考试总的时长等等关于考试的具体信息。学生可以点击不同考试科目在规定时间完成答题工作。当开始考试后，已经答完的题目背景颜色会变篮，同时学生可跳过当时解不出来的题，并且对他进行标记。试卷的右上方会显示此次考试的总时长。如下图4-40图4-40开始考试开始考试时，学生开始答题，试卷部分由选择题、判断题、填空题构成，学生可自行决定优先完成哪种题型。系统根据学生选择的答案，前端通过Api与后端进行连接，将考生选的答案与后端数据库正确答案进行比较，进行计分工作。同时学生还可对暂时不会做的题目进行标记工作，防止题目的漏答。当学生点击结束答题时，系统会对学生的答题情况进行计分。如下图4-41,为学生答题完成后的计分图3-41结束试卷计分在线考试的前端代码，如下图4-42：图4-42在线考试部分前端代码在线考试的部分后端代码如下图4-43图4-43在线考试后端代码在前端代码处可以看到，前端部分通过getExamData()函数来获取考试试卷的详细信息，前端会通过路由$route来获取此次试卷的具体编号，examCode为试卷的编号，通过编号能够获取到此次试卷的详情，最后通过paperId获取试题题目信息。此处连接后端的Api为/api/paper。因为本次设计的试卷主要由判断题、填空题、选择题构成，通过getChangelabel()函数来获取选择题作答选项，通过getJudgeLabel()获取判断题作答选项，通过judge()函数来获取判断题的作答选项，最后通过commit（）函数计算总分数。后端通过各自对应的Api,将不同题目的准确答案反馈给前端，前端再判断两者答案是否存在差异，比较差异后进行登分操作，将学生的成绩显示到教师相对应的页面和考生成绩查询页面。考试通过成通过mark()函数可对题目进行标记。4.7.2在线练习学生可在考试结束后对已经考试的科目进行练习，提高对知识的掌握程度。在线练习会提供题目解析与参考答案给考生，方便考生对没掌握的知识点重新学习。教师在创建题目时可给题目添加解析，学生在个人练习处可通过解析来解决自己不会的题目。题目的答案和解析由教师端提供，教师在创建题目时可对难度系数较高的题目填写解析，当学生在线练习时会出现相对应的题目解析。如下图4-44为考生的在线练习。图4-44在线练习4.7.3学生个人成绩查询学生在考试结束后，系统会将学生考试的总分反馈到学生的我的成绩处，学生可以通过我的成绩及时查询到自己各个科目的考试成绩，系统会判定学生的成绩是否及格，若分数低于60分则是不及格。如下图4-45图4-45学生个人成绩4.7.4学生个人信息修改学生个人信息修改主要作用就是学生能够自行修改密码，每位学生可根据自己的需求更换新的密码，更改密码成功后，系统会有相对应的提示，若是更改成功就会显示密码更改成功。若是两者存在差异化，则系统会弹出相对应的提示，此时需要重新进行密码更改工作。如下图4-46，为学生修改密码成功图片图4-46学生修改密码成功与教师修改密码一样，主要在前端代码中添加manager模块，manager模块能够将我们改动的密码信息通过Api传到后端，此处的Api接口为studentPWD。后端通过接收到的前端数据对数据库进行Update更新修改，并及时的反馈信息是否修改成功。第五章、总结与展望5.1总结 本次毕业设计会选择考试系统很大程