nodejs在线考试系统

摘    要

随着信息技术的发展和网络教育的普及，在线考试系统成为了教育领域创新的重要组成部分。提供了从课程信息、班级信息、试卷、公告信息的全流程服务，极大地提高了教学效率和质量。通过采用现代化的安全措施，确保了考试过程的公正性和安全性。对考试信息进行深入分析，帮助教师了解学生学习情况，为教学改进提供参考[3]。该系统的使用降低了纸质考试的资源消耗，还为学生提供了灵活便捷的考试体验，是现代教育和终身学习体系中不可或缺的技术支撑。

本系统采用nodejs语言进行编写，使用轻量级小型数据库mysql存储数据， Vue框架进行数据的封装和传输。前端页面使用B/S架构进行布局，最终在tomcat服务器上运行。用户通过浏览器访问网站，选择自己所需信息，管理员则通过浏览器实现对系统的管理。

在线考试系统主要包括了三个模块：管理员、教师和学生。学生可以通过本系统查看考试记录、错题本、我的收藏等信息，教师可以通过本系统查看课程信息、试卷管理、试题管理、试题库管理、考试记录等信息，管理员用户权限更高，可以查看注册学生、管理学生、教师、课程信息、课程类型、班级信息、试题库管理、考试记录、我的等信息。本系统由后台数据库和前台界面组成，数据库设计合理，前端页面设计简洁大方，使用简单快捷，方便了管理员、教师和学生的管理。

关键词：在线考试；vue框架；nodejs语言；B/S架构

Abstract

With the development of information technology and the popularization of online education, online examination system has become an important part of innovation in the field of education. It provides the whole process service of course information, class information, test paper and announcement information, which greatly improves the teaching efficiency and quality. By adopting modern security measures, the impartiality and security of the examination process are ensured. The examination information is analyzed deeply to help teachers understand students’ learning situation and provide reference for teaching improvement. The use of this system reduces the consumption of paper examination resources, but also provides students with flexible and convenient examination experience, which is an indispensable technical support in modern education and lifelong learning system.

The system uses nodejs language to write, uses lightweight small database mysql to store data, Vue framework for data encapsulation and transmission. The front-end pages are laid out using the B/S architecture and eventually run on the tomcat server. Users access the website through the browser and select the information they need. Administrators manage the system through the browser.

The online examination system mainly includes three modules: administrator, teacher and student. Students can view test records, error books, my collection and other information through this system, teachers can view course information, test paper management, test question management, test bank management, test records and other information through this system, administrator user authority is higher, You can view registered students, management students, teachers, course information, course types, class information, test bank management, test records, my information and so on. The system is composed of background database and front interface, database design is reasonable, front-end page design is simple and generous, easy to use, convenient for administrators, teachers and students management.

Key words: online examination; vue framework; nodejs language; B/S architecture

目    录

1  概    述

1.1 课题研究背景与意义

1.2　国内外研究现状

1.3 课题研究内容

2  系统开发环境及相关技术

2.1 nodejs语言

2.2 MySql数据库

2.3 B/S结构

2.4 VUE框架

3  系统需求分析

3.1 系统可行性分析

3.1.1 技术可行性

3.1.2 操作可行性

3.1.3 经济可行性

3.1.4 法律可行性

3.2 功能需求分析

3.3 系统流程分析

3.3.1 用户登录流程

3.3.2 系统操作流程

3.3.3 添加信息流程

4  系统设计

4.1 功能模块设计

4.2 系统数据库设计

4.2.1 数据库系统

4.2.2 数据库概念设计

4.2.3 数据表设计

4.2.4 数据表的建立

5  系统实现

5.1前台功能实现

5.1.1系统首页页面

5.1.2个人中心

5.2后台模块实现

5.2.1管理员功能实现

5.2.2教师功能实现

6  系统测试

6.1　测试方法与步骤

6.2　登录模块测试

6.3　测试用例

结    论

致    谢

参 考 文 献

1  概    述

1.1 课题研究背景与意义

在信息技术飞速发展的今天，传统的纸质考试方式因耗时费力、效率低下且不利于环保等缺点逐渐不能满足现代教育的需求。随着网络教育的兴起和普及，越来越多的教学活动转移到了线上平台，在线考试系统成为了这一趋势中的关键组成部分。在线考试系统能够提供实时、便捷的考试服务，使得教师可以在任何时间、任何地点组织和管理考试，学生也可以在网络覆盖的任何角落参与考试。设计一个功能齐全、操作简便且安全稳定的在线考试系统，已经成为教育技术领域的一个重要课题。

在线考试系统的设计对于推动教育信息化进程具有深远的意义。它为教师提供了一个高效的考试管理工具，通过信息化的流程减少了人工操作的繁琐性，使教师能够更多地专注于教学内容和教学方法的创新。系统的应用增强了考试工作的透明度和公正性，通过安全技术确保每次考试的数据安全和完整性，从而保障了评估结果的客观性和可信度。对于学生而言，在线考试系统打破了时间和空间的限制，提供了更加灵活的考试环境，有利于缓解考试焦虑，更好地展现自己的实际水平。系统还能对考试信息据进行统计和分析，帮助教育机构发现教学中的问题，优化课程设计和教学策略。在线考试系统提升了考试工作的效率和质量，还有助于促进教育公平，是现代教育体系中不可或缺的技术支持[1]。

1.2　国内外研究现状

在中国，随着教育信息化的不断推进，在线考试系统成为了教育技术领域的研究热点。众多高校和科研机构投入了大量的资源进行相关技术的探索与开发，致力于解决网络考试中的安全问题、公平问题以及技术可靠性等问题。国内已经出现了多款信息化的在线考试系统，这些系统不仅支持多样化的题型和考试模式，还提供了包括视频监控、人脸识别等在内的高科技防作弊手段。国内的研究者也在持续探索如何通过数据挖掘和智能分析技术来提高在线考试系统信息化水平，例如自动组卷、智能阅卷以及学习成果分析等功能。关于如何在保证考试公正性的同时提高用户体验的研究也在国内学术界引起了广泛关注[7]。

国外在在线考试系统方面的研究起步较早，研究范围广泛，涵盖了从基础架构设计、用户交互体验到安全性问题等多个方面。许多国际知名的教育机构和企业已经将在线考试系统应用于各种类型的评估中，这些系统通常具有高度的可扩展性和灵活性，能够适应不同国家和文化背景下的教育需求。国外的研究者们也在持续探索如何利用最新的网络技术和人工智能算法来提升在线考试系统的性能，例如通过自适应学习技术来提供个性化的考试体验，以及利用区块链技术来确保考试过程的透明度和不可篡改性。国外对于在线考试系统的隐私保护、数据安全以及应对网络欺诈等方面的研究也相当深入，为全球在线考试系统的发展提供了宝贵的经验和参考。

1.3 课题研究内容

本系统以Nodejs为编程语言，结合了VUE框架进行开发。数据存储和管理方面，我们选择了MySQL数据库作为解决方案。在前端设计中，我们采用了HTML、CSS和JavaScript技术，以实现用户界面的交互性和可用性。为了提高开发效率，我们选用了Eclipse作为开发工具，其强大的功能和易用性使得编程工作更加高效。同时，我们还使用了Navicat作为数据库管理工具，以便更方便、快捷地进行数据库操作。通过这样的技术栈选择，我们确保了管理系统的开发流程既高效又稳定。系统分管理员、教师和学生三个角色，主要包括对学生、教师、课程信息、课程类型、班级信息、试题库管理、考试记录、我的信息等进行管理。

2  系统开发环境及相关技术

2.1 nodejs语言

Node.js是一个基于Chrome V8引擎的JavaScript运行环境。它的设计目标是实现一个轻量级、高效、可扩展的网络应用开发平台。Node.js采用事件驱动、非阻塞I/O模型，使其轻量又高效，非常适合处理高并发请求。Node.js的核心模块提供了一些基本的API，如文件操作、网络通信等。此外，还有丰富的第三方模块可供选择，如Web框架Express、模板引擎EJS、数据库模块MongoDB等[5]。这些模块可以帮助开发者快速构建各种类型的网络应用。与传统的后端开发语言（如Java、PHP）相比，Node.js具有以下优势：

(1)单线程：Node.js采用单线程模型，避免了多线程带来的资源竞争和上下文切换开销。这使得Node.js在处理高并发请求时表现出色。

(2)异步非阻塞：Node.js采用异步非阻塞I/O模型，可以同时处理多个I/O操作，提高了程序的执行效率。

(3)事件驱动：Node.js基于事件驱动模型，可以更好地处理用户输入、网络请求等外部事件。这使得Node.js更适合构建实时应用和服务器端应用。

(4)跨平台：Node.js支持多种操作系统，如Windows、Linux、Mac OS等。这使得开发者可以在不同的平台上进行开发和部署。

(5)社区活跃：Node.js拥有庞大的开发者社区，提供了大量的第三方模块和教程。这使得开发者可以快速学习和掌握Node.js技术。

Node.js是一个轻量级、高效、可扩展的网络应用开发平台。它采用事件驱动、非阻塞I/O模型，适合处理高并发请求。通过丰富的第三方模块和活跃的社区支持，开发者可以快速构建各种类型的网络应用。然而，Node.js也存在一些不足之处，需要开发者在实际项目中加以注意。

2.2 MySql数据库

MySql是由瑞典MySql AB公司开发的关系型数据管理系统，是按照数据结构来组织、存储和管理数据的仓库，每个数据库都有一个或多个不同的API接口用于创建、访问、管理、搜索和复制所保存的数据。我们也可以将数据存储在文件中，但是在文件中读取速度相对较慢，所以现在我们使用关系型数据库管理系统（RDBMS）来存储和管理大量数据。

Sql语句是用于访问数据库的标准化语言。由于其速度快、体积小、总体成本低，MySql成为中小型网站开发最常用的网络数据库。

2.3 B/S结构

B/S结构是一种网络应用程序架构模式。在这种模式下，客户端（浏览器）通过互联网与服务器进行通信，服务器负责处理数据和业务逻辑，客户端只需负责展示和交互。这种结构简化了客户端的开发和维护，降低了系统的复杂度，提高了系统的可扩展性和安全性。常见的B/S结构应用有网页浏览、在线购物、在线教育等。

2.4 VUE框架

Vue.js是一款用于构建用户界面的渐进式JavaScript框架。与其他大型框架不同的是，Vue被设计为可以自底向上逐层应用。Vue的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue也完全能够为复杂的单页应用提供驱动。

以下是Vue的一些特点：

（1）易用性：Vue的学习曲线平缓，入门容易，文档详细且易于理解。

（2）灵活性：Vue提供了灵活的数据绑定和组合方式，使得开发者可以根据需求自由组合组件。

（3）高效性：Vue采用虚拟DOM技术，减少了不必要的重绘和回流，提高了页面渲染效率。

（4）组件化：Vue支持组件化开发，可以将复杂的页面拆分成多个小组件，提高代码的可维护性和复用性。

3  系统需求分析

在当今的社会生活中，互联网已经变得非常普遍和重要。充分利用互联网大数据等技术可以解决很多问题。目前，在线考试管理也面临着自身的问题。根据这一普遍现象，在线考试制度的出现需求巨大。该系统可以很好地解决这些问题。系统中这三类用户的数据在系统中非常关键，因此系统数据应该被组织起来，因为数据是以某种格式存储的，而不是无序的。其概念是，它可以根据长期稳定的格式在计算机内存中共享。数据库管理系统主要用于保存、修改和添加索引数据以及设置数据库。为了确保系统数据管理的顺利进行，一些有能力的处理器可以在不需要专业人员处理的情况下管理数据。创建数据表时，可以调整、重新组织和重建数据表中的数据，以确保数据可靠性。在数据库系统设计中，MySQL主要用于实现数据的集中管理。各方面表现良好。

3.1 系统可行性分析

3.1.1 技术可行性

本系统在技术层面使用Eclipse作为Nodejs开发环境，后台管理系统使用了Spring和MyBatis等开源框架，本系统选择MySQL数据库系统来开发完成本在线考试系统。作为软件工程专业的学生，在大学开设的相关专业课程中都包含了这些技术，所以在系统开发技术及应用上都没有太大困难，因此系统开发在技术层面是完全可行的。

3.1.2 操作可行性

在线考试系统旨在为管理员、教师和学生提供一个简单方便快捷的在线考试系统。在线考试系统的界面简洁，操作方便，即使是不具备很强的网络技术知识的用户也可以轻松使用。在管理员管理模块中，各项内容的管理操作界面也都简洁易懂的，实际操作也十分的简单，能满足基本的信息管理系统需要。因此该系统具有可操作性。

3.1.3 经济可行性

本项目所有功能的开发都是由本人独立完成，而且开发中使用的所有技术及工具也都开源的，易于学习和掌握的，所有省去了请专家开发指导的大笔费用，本系统的开发对计算机的软硬件的要求较低，因此这个系统在经济方面是完全可行的。

3.1.4 法律可行性

在线考试系统属于自己设计的管理系统，因为这个系统在数据管理方面以及软件方面都是应用自己开发的开源代码，不存在模仿或盗用其他人的软件问题，是非常合法的。

从上面给大家讲解的过程不难看出，在线考试系统是一个全面优质的系统，我们开发的这个程序也是存在合法和必然性的，而且在技术方面也是过硬的，还节约了成本，难度不大，很适合用户进行操作。

3.2 功能需求分析 

在线考试系统综合网络空间开发设计要求。目的是将在线考试通过网络平台将传统管理方式转换为在线上管理，完成在线考试的方便快捷、安全性高、交易规范做了保障，目标明确。在线考试系统可以将功能划分为管理员功能、教师功能和学生功能。

（1）、教师关键功能包含首页、课程信息、试卷管理、试题管理、试题库管理、考试记录、我的信息等功能。教师用例如下：

图3-1 教师用例图

（2）、学生关键功能包含个人中心、修改密码、考试记录、错题本、我的收藏等功能。学生用例如下：

图3-2 学生用例图

（3）、管理员的功能是最高的，可以对系统所在功能进行查看，修改和删除，包括教师功能和学生功能。管理员用例如下：

图3-3管理员用例图

3.3 系统流程分析

3.3.1 用户登录流程

登录流程实现了管理员和其他用户的登录，在登录页面需要用户填写自己的信息，前端页面会将信息传递给后端接口，然后查询数据库确定该身份有效后登录成功，否则此用户登录失败，需要重新填写信息，进行再次验证，如图3-4所示。

图3-4登录流程图

3.3.2 系统操作流程

系统操作流程分析是软件开发过程中的一个关键环节，它是整个系统整体的运行过程，必须保证其中的每一个步骤都是确定的，这样一个规范的流程图可以使开发者易于理解，快速的投入到接口开发中，从而提升系统开发效率。

同时，流程图还能减少开发者对系统操作流程产生歧义和降低沟通的成本，系统操作流程如图3-5所示。

图3-5-系统操作流程图

3.3.3 添加信息流程

系统的正常运行离不开数据的支撑，因此，在本系统中添加了数据插入功能，数据库中数据的缺失，会直接影响到数据的查询结果，查询结果错误又会导致逻辑处理出现偏差，最终导致系统性错误或故障，所以在对系统进行数据添加操作时，必须要对数据进行合法性校验，确定此条数据是否有惟一的主关键字和字段是否允许为空等等，若数据库表中不允许某字段为空，而程序没有进行该字段非空逻辑校验，那么就会出现数据存储失败，可能因此造成严重系统后果。添加信息流程如图3-6所示。

图3-6添加信息流程图

4  系统设计

4.1 功能模块设计

在线考试系统按照权限的类型进行划分，分为管理员、教师和学生三个模块。主要实现学生、教师、课程信息、课程类型、班级信息、试题库管理、考试记录、我的信息等功能进行操作，增强了用户的操作体验。管理员模块主要针对整个系统的管理进行设计，提高了管理的效率和标准。系统的总体模块设计如下图所示:

图4-1 系统总体模块设计

4.2 系统数据库设计

4.2.1 数据库系统

本系统采用MySQL来进行数据库的管理。MySQL数据库具有体积小、速度快、成本低等优点。具备同时处理数千万条记录，实现大型数据库的高并发读写和高效读写需求。

4.2.2 数据库概念设计

概念模型用于对信息世界建模，并与指定的数据库管理系统分离。它有助于将真实世界的事物抽象为适合于数据库管理系统的数据库模型。人们倾向于将现实世界抽象为信息世界，再把信息世界变成机器世界。也就是说，将现实世界的目标抽象成独立于专用计算机软件和专用数据库管理系统的信息结构的数据模型，然后将物理模型转化为适合电子计算机的数据库管理系统[6]。事实上，数据模型是从真实世界到机器世界的中间层。

信息世界的基本要素包括实体和关联。现实存在且彼此可区别的事物称为实体。实体可以是实际的人、事或物，还可以是抽象化的概念或联络。以下将“课程信息、公告信息、教师、学生、班级信息”等作为实体，它们的局部E-R图，如图4-2所示：

图4-2局部E-R图

4.2.3 数据表设计

本设计根据数据表管理系统的具体流程进行管理，方便管理员、教师和学生对数据的添加、删除、修改和查询等操作。

4.2.4 数据表的建立

系统采用Navicat Premium对数据库进行操作，数据库管理操作简单，数据处理能力强。数据表建立如下: 

表4-1：考试记录表

字段名称	类型	长度	字段说明	主键	默认值
id	bigint		主键	主键
addtime	timestamp		创建时间		CURRENT_TIMESTAMP
userid	bigint		用户id
username	varchar	200	用户名
paperid	bigint		试卷id（外键）
papername	varchar	200	试卷名称
questionid	bigint		试题id（外键）
questionname	varchar	200	试题名称
options	longtext	4294967295	选项，json字符串
score	bigint		分值		0
answer	varchar	200	正确答案
analysis	longtext	4294967295	答案解析
ismark	bigint		是否批卷		0
type	bigint		试题类型，0：单选题 1：多选题 2：判断题 3：填空题（暂不考虑多项填空） 4:主观题		0
myscore	bigint		试题得分		0
myanswer	varchar	200	考生答案

表4-2：试题库表

字段名称	类型	长度	字段说明	主键	默认值
id	bigint		主键	主键
addtime	timestamp		创建时间		CURRENT_TIMESTAMP
questionname	varchar	200	试题名称
options	longtext	4294967295	选项，json字符串
score	bigint		分值		0
answer	varchar	200	正确答案
analysis	longtext	4294967295	答案解析
type	bigint		试题类型，0：单选题 1：多选题 2：判断题 3：填空题（暂不考虑多项填空） 4:主观题		0
sequence	bigint		试题排序，值越大排越前面		100

表4-3：试题表

字段名称	类型	长度	字段说明	主键	默认值
id	bigint		主键	主键
addtime	timestamp		创建时间		CURRENT_TIMESTAMP
paperid	bigint		所属试卷id（外键）
papername	varchar	200	试卷名称
questionname	varchar	200	试题名称
options	longtext	4294967295	选项，json字符串
score	bigint		分值		0
answer	varchar	200	正确答案
analysis	longtext	4294967295	答案解析
type	bigint		试题类型，0：单选题 1：多选题 2：判断题 3：填空题（暂不考虑多项填空）4:主观题		0
sequence	bigint		试题排序，值越大排越前面		100

表4-4：试卷表

字段名称	类型	长度	字段说明	主键	默认值
id	bigint		主键	主键
addtime	timestamp		创建时间		CURRENT_TIMESTAMP
name	varchar	200	试卷名称
time	int		考试时长(分钟)
status	int		试卷状态		0

表4-5：用户表

字段名称	类型	长度	字段说明	主键	默认值
id	bigint		主键	主键
username	varchar	100	用户名
password	varchar	100	密码
image	varchar	200	头像
role	varchar	100	角色		管理员
addtime	timestamp		新增时间		CURRENT_TIMESTAMP

表4-6：配置文件

字段名称	类型	长度	字段说明	主键	默认值
id	bigint		主键	主键
name	varchar	100	配置参数名称
value	varchar	100	配置参数值
url	varchar	500	url

表4-7：收藏表

字段名称	类型	长度	字段说明	主键	默认值
id	bigint		主键	主键
addtime	timestamp		创建时间		CURRENT_TIMESTAMP
userid	bigint		用户id
refid	bigint		商品id
tablename	varchar	200	表名
name	varchar	200	名称
picture	longtext	4294967295	图片
type	varchar	200	类型		1
inteltype	varchar	200	推荐类型
remark	varchar	200	备注

表4-8：公告信息分类

字段名称	类型	长度	字段说明	主键	默认值
id	bigint		主键	主键
addtime	timestamp		创建时间		CURRENT_TIMESTAMP
typename	varchar	200	分类名称

表4-9：公告信息

字段名称	类型	长度	字段说明	主键	默认值
id	bigint		主键	主键
addtime	timestamp		创建时间		CURRENT_TIMESTAMP
title	varchar	200	标题
introduction	longtext	4294967295	简介
typename	varchar	200	分类名称
name	varchar	200	发布人
headportrait	longtext	4294967295	头像
clicknum	int		点击次数		0
clicktime	datetime		最近点击时间
thumbsupnum	int		赞		0
crazilynum	int		踩		0
storeupnum	int		收藏数		0
picture	longtext	4294967295	图片
content	longtext	4294967295	内容

表4-10：教师

字段名称	类型	长度	字段说明	主键	默认值
id	bigint		主键	主键
addtime	timestamp		创建时间		CURRENT_TIMESTAMP
jiaoshigonghao	varchar	200	教师工号
mima	varchar	200	密码
jiaoshixingming	varchar	200	教师姓名
xingbie	varchar	200	性别
zhiwu	varchar	200	职务
dianhua	varchar	200	电话
touxiang	longtext	4294967295	头像

表4-11：学生

字段名称	类型	长度	字段说明	主键	默认值
id	bigint		主键	主键
addtime	timestamp		创建时间		CURRENT_TIMESTAMP
xueshengxuehao	varchar	200	学生学号
mima	varchar	200	密码
xueshengxingming	varchar	200	学生姓名
xingbie	varchar	200	性别
banji	varchar	200	班级
dianhua	varchar	200	电话
touxiang	longtext	4294967295	头像

表4-12：班级信息

字段名称	类型	长度	字段说明	主键	默认值
id	bigint		主键	主键
addtime	timestamp		创建时间		CURRENT_TIMESTAMP
banjimingcheng	varchar	200	班级名称
suozainianji	varchar	200	所在年级
fudaoyuan	varchar	200	辅导员
banjijieshao	longtext	4294967295	班级介绍
chuangjianshijian	date		创建时间
banjitupian	longtext	4294967295	班级图片

表4-13：课程信息

字段名称	类型	长度	字段说明	主键	默认值
id	bigint		主键	主键
addtime	timestamp		创建时间		CURRENT_TIMESTAMP
kechengmingcheng	varchar	200	课程名称
kechengleixing	varchar	200	课程类型
kechengjieci	varchar	200	课程节次
kechengshipin	longtext	4294967295	课程视频
kechengziliao	longtext	4294967295	课程资料
kechengjianjie	longtext	4294967295	课程简介
kechengtupian	longtext	4294967295	课程图片
jiaoshigonghao	varchar	200	教师工号
jiaoshixingming	varchar	200	教师姓名
thumbsupnum	int		赞		0
crazilynum	int		踩		0
clicktime	datetime		最近点击时间
clicknum	int		点击次数		0
storeupnum	int		收藏数		0

表4-14：课程类型

字段名称	类型	长度	字段说明	主键	默认值
id	bigint		主键	主键
addtime	timestamp		创建时间		CURRENT_TIMESTAMP
kechengleixing	varchar	200	课程类型

5  系统实现

5.1前台功能实现

5.1.1系统首页页面

当人们打开系统的网址后，首先看到的就是首页界面。在这里，人们能够看到系统的导航条，通过导航条导航进入各功能展示页面进行操作。系统首页界面如图5-1所示：

图5-1 系统首页界面

在注册流程中，用户在Vue前端填写必要信息（如用户名、密码等）并提交。前端将这些信息通过HTTP请求发送到node.js后台。后端处理这些信息，检查用户名是否唯一，并将新用户数据存入MySQL数据库。完成后，后端向前端发送注册成功的确认，前端随后通知学生完成注册。这个过程实现了新用户的数据收集、验证和存储。系统注册页面如图5-2所示：

图5-2系统注册页面

课程信息：在课程信息页面的输入栏中输入课程名称、课程类型、课程节次、教师工号、教师姓名、点击次数、课程资料进行查询，可以查看到课程详细信息，并进行点击下载或收藏操作；课程信息页面如图5-3所示：

图5-3课程信息详细页面

5.1.2个人中心

个人中心：在个人中心页面可以对个人中心、修改密码、考试记录、错题本、我的收藏进行详细操作；如图5-4所示：

图5-4个人中心界面

5.2后台模块实现

在登录流程中，用户首先在Vue前端界面输入用户名和密码。这些信息通过HTTP请求发送到node.js后台。后端接收请求，通过与MySQL数据库交互验证用户凭证。如果认证成功，后端会返回给前端，允许用户访问系统。这个过程涵盖了从用户输入到系统验证和响应的全过程。。后台登录界面图5-5所示。 

图5-5后台登录界面

5.2.1管理员功能实现

管理员进入主页面，主要功能包括对首页、学生、教师、课程信息、课程类型、班级信息、试题库管理、考试记录、我的信息等进行操作。管理员主页面如图5-6所示：

图5-6管理员主界面

学生管理功能模块的实现首先涉及到设计前端用户界面和后端服务。在前端，使用Vue.js框架，创建一个新的Vue组件，放在 src/components 目录下。这个组件通过模板、脚本和样式组成，分别负责展示学生信息的表格视图、处理用户交互（如搜索、增加或删除学生信息）以及定义视图的样式。在脚本部分，我们使用Vue的数据绑定和方法来管理表单输入和事件处理。同时，利用Vuex的 store 来管理状态，如学生列表数据，以及通过Vue Router在不同视图间导航。在后端，在 models 文件夹中定义一个 Model.js，使用Sequelize或类似的ORM来映射数据库中的学生表。在 routes 文件夹中创建一个 students.js 路由文件，处理HTTP请求，并通过Node.js的Express框架与前端通信。在这个路由文件中，定义CRUD（详情、更新或删除）操作的API端点，这些操作将调用Model 中的方法来与数据库交互。在Vue组件中使用 axios 或其他HTTP库与后端API进行通信，实现数据的读取、发送和更新。学生管理模块就可以在前端提供用户交互，并在后端进行数据持久化。学生界面如图5-7所示：

图5-7学生界面

教师功能模块的实现首先涉及到设计前端用户界面和后端服务。在前端，使用Vue.js框架，创建一个新的Vue组件，放在 src/components 目录下。这个组件通过模板、脚本和样式组成，分别负责展示教师信息的表格视图、处理用户交互（如搜索、增加或删除教师信息）以及定义视图的样式。在脚本部分，我们使用Vue的数据绑定和方法来管理表单输入和事件处理。同时，利用Vuex的 store 来管理状态，如教师列表数据，以及通过Vue Router在不同视图间导航。在后端，在 models 文件夹中定义一个 Model.js，使用Sequelize或类似的ORM来映射数据库中的教师表。在 routes 文件夹中创建一个 students.js 路由文件，处理HTTP请求，并通过Node.js的Express框架与前端通信。在这个路由文件中，定义CRUD（详情、更新或删除）操作的API端点，这些操作将调用Model 中的方法来与数据库交互。在Vue组件中使用 axios 或其他HTTP库与后端API进行通信，实现数据的读取、发送和更新。教师管理模块就可以在前端提供用户交互，并在后端进行数据持久化。教师界面如图5-8所示：

图5-8教师界面

课程信息功能模块的实现首先涉及到设计前端用户界面和后端服务。在前端，使用Vue.js框架，创建一个新的Vue组件，放在 src/components 目录下。这个组件通过模板、脚本和样式组成，分别负责展示课程信息的表格视图、处理用户交互（如搜索、增加或删除课程信息）以及定义视图的样式。在脚本部分，我们使用Vue的数据绑定和方法来管理表单输入和事件处理。同时，利用Vuex的 store 来管理状态，如课程信息列表数据，以及通过Vue Router在不同视图间导航。在后端，在 models 文件夹中定义一个 Model.js，使用Sequelize或类似的ORM来映射数据库中的课程信息表。在 routes 文件夹中创建一个 students.js 路由文件，处理HTTP请求，并通过Node.js的Express框架与前端通信。在这个路由文件中，定义CRUD（详情、更新或删除）操作的API端点，这些操作将调用Model 中的方法来与数据库交互。在Vue组件中使用 axios 或其他HTTP库与后端API进行通信，实现数据的读取、发送和更新。课程信息管理模块就可以在前端提供用户交互，并在后端进行数据持久化。课程信息界面如图5-9所示：

图5-9课程信息界面

课程类型功能模块的实现首先涉及到设计前端用户界面和后端服务。在前端，使用Vue.js框架，创建一个新的Vue组件，放在 src/components 目录下。这个组件通过模板、脚本和样式组成，分别负责展示课程类型信息的表格视图、处理用户交互（如搜索、增加或删除课程类型信息）以及定义视图的样式。在脚本部分，我们使用Vue的数据绑定和方法来管理表单输入和事件处理。同时，利用Vuex的 store 来管理状态，如课程类型列表数据，以及通过Vue Router在不同视图间导航。在后端，在 models 文件夹中定义一个 Model.js，使用Sequelize或类似的ORM来映射数据库中的课程类型表。在 routes 文件夹中创建一个 students.js 路由文件，处理HTTP请求，并通过Node.js的Express框架与前端通信。在这个路由文件中，定义CRUD（更新或删除）操作的API端点，这些操作将调用Model 中的方法来与数据库交互。在Vue组件中使用 axios 或其他HTTP库与后端API进行通信，实现数据的读取、发送和更新。课程类型管理模块就可以在前端提供用户交互，并在后端进行数据持久化。课程类型界面如图5-10所示：

图5-10课程类型界面

班级信息功能模块的实现首先涉及到设计前端用户界面和后端服务。在前端，使用Vue.js框架，创建一个新的Vue组件，放在 src/components 目录下。这个组件通过模板、脚本和样式组成，分别负责展示班级信息的表格视图、处理用户交互（如搜索、增加或删除班级信息）以及定义视图的样式。在脚本部分，我们使用Vue的数据绑定和方法来管理表单输入和事件处理。同时，利用Vuex的 store 来管理状态，如班级信息列表数据，以及通过Vue Router在不同视图间导航。在后端，在 models 文件夹中定义一个 Model.js，使用Sequelize或类似的ORM来映射数据库中的班级信息表。在 routes 文件夹中创建一个 students.js 路由文件，处理HTTP请求，并通过Node.js的Express框架与前端通信。在这个路由文件中，定义CRUD（详情、更新或删除）操作的API端点，这些操作将调用Model 中的方法来与数据库交互。在Vue组件中使用 axios 或其他HTTP库与后端API进行通信，实现数据的读取、发送和更新。班级信息管理模块就可以在前端提供用户交互，并在后端进行数据持久化。班级信息界面如图5-11所示：

图5-11班级信息界面

试题库管理功能模块的实现首先涉及到设计前端用户界面和后端服务。在前端，使用Vue.js框架，创建一个新的Vue组件，放在 src/components 目录下。这个组件通过模板、脚本和样式组成，分别负责展示试题库信息的表格视图、处理用户交互（如搜索、增加或删除试题库信息）以及定义视图的样式。在脚本部分，我们使用Vue的数据绑定和方法来管理表单输入和事件处理。同时，利用Vuex的 store 来管理状态，如试题库列表数据，以及通过Vue Router在不同视图间导航。在后端，在 models 文件夹中定义一个 Model.js，使用Sequelize或类似的ORM来映射数据库中的试题库表。在 routes 文件夹中创建一个 students.js 路由文件，处理HTTP请求，并通过Node.js的Express框架与前端通信。在这个路由文件中，定义CRUD（更新或删除）操作的API端点，这些操作将调用Model 中的方法来与数据库交互。在Vue组件中使用 axios 或其他HTTP库与后端API进行通信，实现数据的读取、发送和更新。试题库管理模块就可以在前端提供用户交互，并在后端进行数据持久化。试题库界面如图5-12所示：

图5-12试题库管理界面

试卷管理功能模块的实现首先涉及到设计前端用户界面和后端服务。在前端，使用Vue.js框架，创建一个新的Vue组件，放在 src/components 目录下。这个组件通过模板、脚本和样式组成，分别负责展示试卷信息的表格视图、处理用户交互（如搜索、增加或删除试卷信息）以及定义视图的样式。在脚本部分，我们使用Vue的数据绑定和方法来管理表单输入和事件处理。同时，利用Vuex的 store 来管理状态，如试卷列表数据，以及通过Vue Router在不同视图间导航。在后端，在 models 文件夹中定义一个 Model.js，使用Sequelize或类似的ORM来映射数据库中的试卷表。在 routes 文件夹中创建一个 students.js 路由文件，处理HTTP请求，并通过Node.js的Express框架与前端通信。在这个路由文件中，定义CRUD（详情、更新、组卷或删除）操作的API端点，这些操作将调用Model 中的方法来与数据库交互。在Vue组件中使用 axios 或其他HTTP库与后端API进行通信，实现数据的读取、发送和更新。试卷管理模块就可以在前端提供用户交互，并在后端进行数据持久化。试卷界面如图5-13所示：

图5-13试卷界面

试题管理功能模块的实现首先涉及到设计前端用户界面和后端服务。在前端，使用Vue.js框架，创建一个新的Vue组件，放在 src/components 目录下。这个组件通过模板、脚本和样式组成，分别负责展示试题管理信息的表格视图、处理用户交互（如搜索、增加或删除试题管理信息）以及定义视图的样式。在脚本部分，我们使用Vue的数据绑定和方法来管理表单输入和事件处理。同时，利用Vuex的 store 来管理状态，如试题管理列表数据，以及通过Vue Router在不同视图间导航。在后端，在 models 文件夹中定义一个 Model.js，使用Sequelize或类似的ORM来映射数据库中的试题管理表。在 routes 文件夹中创建一个 students.js 路由文件，处理HTTP请求，并通过Node.js的Express框架与前端通信。在这个路由文件中，定义CRUD（更新或删除）操作的API端点，这些操作将调用Model 中的方法来与数据库交互。在Vue组件中使用 axios 或其他HTTP库与后端API进行通信，实现数据的读取、发送和更新。试题管理管理模块就可以在前端提供用户交互，并在后端进行数据持久化。试题管理界面如图5-14所示：

图5-14试题管理界面

系统管理，公告信息分类管理功能模块的实现首先涉及到设计前端用户界面和后端服务。在前端，使用Vue.js框架，创建一个新的Vue组件，放在 src/components 目录下。这个组件通过模板、脚本和样式组成，分别负责展示公告信息分类信息的表格视图、处理用户交互（如搜索、增加或删除公告信息分类信息）以及定义视图的样式。在脚本部分，我们使用Vue的数据绑定和方法来管理表单输入和事件处理。同时，利用Vuex的 store 来管理状态，如公告信息分类列表数据，以及通过Vue Router在不同视图间导航。在后端，在 models 文件夹中定义一个 Model.js，使用Sequelize或类似的ORM来映射数据库中的公告信息分类表。在 routes 文件夹中创建一个 students.js 路由文件，处理HTTP请求，并通过Node.js的Express框架与前端通信。在这个路由文件中，定义CRUD（详情、更新或删除）操作的API端点，这些操作将调用Model 中的方法来与数据库交互。在Vue组件中使用 axios 或其他HTTP库与后端API进行通信，实现数据的读取、发送和更新。公告信息分类管理模块就可以在前端提供用户交互，并在后端进行数据持久化。还可以对轮播图管理、公告信息进行相应操作；公告信息分类界面如图5-15所示：

图5-15系统管理界面

5.2.2教师功能实现

教师进入主页面，主要功能包括对首页、课程信息、试卷管理、试题管理、试题库管理、考试记录、我的信息等进行操作。教师主页面如图5-16所示：

图5-16教师主界面

6  系统测试

6.1 测试方法与步骤

本系统首先在本地服务器上进行了安装和测试,之后鉴于对系统的结构和处理方法的充分熟悉和对系统特性的充分了解，对系统进行了白盒测试和黑盒试验。

在发展软件系统的整个过程中,人们必须面临错综复杂性的实际问题,所以,在软件系统生存周期的各个过程中都必然地会形成错误。应用软件检测目的在于:出现出错并运行某个程序的步骤,而应用软件检测的最重要目的便是找到其中尚未发生的出错。

为了制定出合理的测试计划,根据以下原则开始了测量；任何测试都要追溯到客户需要；当确定了客户使用模型后就要着手制定测试计划,并在编码以前就对整个软件测试工作做出规划和制定；御用Pareto原理,主要对占出了百分之八十九以上的最易于出错的约百分之二十的模板实施了检测,并从小规模开始逐步实施大量检测,范围一般从主要检测单编程模板再到完全集成的模板;同时精心设计了检测方法,尽可能地全面覆盖所有程序逻辑并使其满足要求的能力。

测试环境，软件和硬件的配置清单见下表。

表6.1　测试环境表

设备名称	硬件配置		应用程序
服务器端	处理器	1.6GHz 双核 Intel Core i5 (Turbo Boost 最高可达 3.6GHz)，配备 4MB 三级缓存	jdk1.8, tomcat9.0.12, Mysql8.0 maven3.5
	内存	8 GB
	主硬盘	128GB PCIe 固态硬盘
	网卡	802.11a/b/g/n
客户端	处理器	1.6GHz 双核 Intel Core i5 (Turbo Boost 最高可达 3.6GHz)，配备 4MB 三级缓存	macOS
	内存	8 GB
	主硬盘	128GB PCIe 固态硬盘
	显卡	Intel UHD Graphics 617
	网卡	802.11a/b/g/n

6.2 登录模块测试

进入本系统时，根据不同登录方式区分教师、学生以及管理员的登录。三者登录均需填写用户名和密码。当填写了错误的用户名或密码时，将提示“用户名或密码错误”，按确认按钮返回注册窗口。登录界面简介且高效，输入错误后返回注册窗口也不会卡顿。

6.3　测试用例

本系统在采用单元测试的方法，对系统各模块进行测试，检测流程必须严格遵循检测的标准流程，进行单位检测，子系统检测和控制系统检测。经过单位检测，就检查出了控制系统中各个模块内在的错误；经过子系统检测，发现了模板之间相互协作与沟通上的出错；经过集成测试，发现了流程中出现的错误。通过修正，确定了在线考试系统能够实现需求分解中确定的技术要求。根据单元测试对系统进行集成测试，判断各功能组合完成后是否存在逻辑和功能上的错误，保证系统集成后不会出现bug。最后，对系统进行系统测试，确保整个系统的完整性和功能的流通性。

通过用户对系统进行完整的系统测试，并对相应的测试进行了详细的测试用例制作，同时记录了详细测试过程，形成了相关的系统测试文档。具体测试用例如下：

表6.2　注册测试用例表

测试对象	测试案例	操作说明	实际结果	是否通过
注册	学生	未注册用户登录提示请注册	得到相应信息提示	是

表6.3　后台管理员测试用例表

测试对象	测试案例	操作说明	实际结果	是否通过
后台管理员管理权限	添加管理员	点击后台管理员/管理员列表/添加管理员按钮	显示添加管理员弹框	是
		点击后台管理员/管理员列表/取消管理员按钮	关闭弹框	是
	搜索管理员	在输入框中输入要找的管理员(用户名/手机号/邮箱)点击搜索按钮	显示搜索到的管理员结果	是
	编辑管理员权限/信息	点击要编辑的管理员	显示要编辑管理员的弹框	是
	删除管理员	点击删除管理员	显示删除管理员弹窗/确认删除	是

结    论

总结

本课题主要对现代社会在线考试管理的现状做了分析，最终确认了在线考试系统的可行性，然后对其进行分析和设计，介绍了系统的大概模块与功能，着重介绍了数据库的详细设计，字段、属性及说明，展示了部分模块的设计界面。

这个系统是对我大学四年学习生涯的总结于回顾，四年里我没有单独完成过一项功能完善的系统，这是第一次。过程中我对很多知识有了更深刻的了解与掌握，将许多大学里学到的零零散散的知识整合融汇到了一起并加以运用。深刻理解了开发过程中的B/S开发模式，对各个层次的功能划分掌握地更加透彻。对数据库SQL语句运用更加熟练，掌握到了JDBC连接数据库的基本步骤以及对数据连接池技术的了解；对线程的有了更进一步的了解，并且能够熟练使用简单的线程池技术。

开发过程中，我遇到过不少问题，比如日期格式的相互转换问题；不会使用Mybatis中@param注解导致参数传递出问题；还有就是对框架运用不熟练的问题，这些都曾成为阻碍我的绊脚石，但是经过老师的指导与同学的帮助，我都一一将它们克服，并最终完成了这个系统。但是由于自生能力不足，以及时间限制，系统还存在着诸多不足之处，都需要以后慢慢打磨修改，最终将其完善。

展望

4G时代氤氲而生了许多新兴产物以及互联网的普及，方便了人们的生活，提高了人们的生活质量。21世纪的科技发展极其迅猛，5G已经萌芽，相信在未来几年5G将会慢慢普及，在5G时代里一定会诞生出更加方便安全的信息管理系统供与人们使用，相信那将彻底改变人们的生活方式。身处21世纪的我们一定要跟上时代的步伐，努力学习更多新科技、新知识，争取走在时代的前沿，走在科技的前沿，做时代的弄潮儿。

致    谢

经过长时间的分析、开发与总结，系统和论文工作终于接近了尾声，这也意味着我的大学生活即将结束，心中无限感慨。

首先，我想感谢生我养我的父母，他们每日辛辛苦苦地劳作，供我长大成人。父母是孩子的第一任老师，是他们的善良激励我前行，是他们无怨无悔的付出让我迎难而上。

其次，我要感谢全体老师，他们无私奉献，将自己的知识全部教授与我，教会我技能，帮助我填补知识的空缺乃至人生的空缺，大学生活因为老师们的奉献而色彩斑斓。尤其是指导老师，在我毕设期间给予了我充分的教导和帮助，在我方向出错时候及时纠正，督促我前行。

最后，我要感谢帮助过我的同学们。是他们在我设计遇到问题时积极伸出援助之手，是他们陪伴我度过了充实的大学四年。

参 考 文 献

[1]基于Vue和Node.js的手语教学Web平台的设计与实现[J]. 裴之蕈,高艳霞.  电脑与信息技术. 2021(06)

[2]高职就业网站的设计与开发[J]. 朱克武.  福建电脑. 2021(11)

[3]面向RISC-V的汇编程序语义等价性自动化测试系统[J]. 徐学政,王涛,方健,张光达.  计算机系统应用. 2021(11)

[4]一种基于SpringBoot架构下的水质监测系统设计[J]. 马聪,华亮,羌予践.  电子器件. 2021(05)

[5]基于前后端分离技术的在线购物平台研究与实现[J]. 方生,秦晓安,王睿.  黄河水利职业技术学院学报. 2021(04)

[6]基于Koa2的可视化页面编辑系统服务端设计[J]. 陈月燕,邹庆,边雁,吴冠宇.  电子技术与软件工程. 2021(20)

[7]基于STM32F107的LTE小基站从时钟同步系统的实现[J]. 姜亚民,贾卫卫,曾洁,刘立群.  电子设计工程. 2021(19)

[8]基于Vue.js的Web应用开发教学案例设计与实现[J]. 胡开华,张玉静,陈明禄,何文鑫.  信息与电脑(理论版). 2021(18)

[9]人工智能电缆隧道移动巡检软件测试研究及实施[J]. 张超永,王振,王鹏,浮明军.  工业控制计算机. 2021(09)

[10]基于Spring Boot和Vue框架的水库水雨情监测系统设计与实现[J]. 陈亚军,肖海斌,徐小坤,李黎.  软件. 2021(09)

[11]Oswald C . Java Basics Using ChatGPT/GPT-4[M].Mercury Learning and Information:2023-12-28.

[12]Diego M ,A. C F . Lightweight precise automatic extraction of exception preconditions in java methods[J]. Empirical Software Engineering,2023,29(1).

[13]Oswald C . Java Basics Using ChatGPT/GPT-4[M].Mercury Learning and Information:2023-12-26.

[14]Cuong Q B ,Ranindya P ,Ly D V , et al. APR4Vul: an empirical study of automatic program repair techniques on real-world Java vulnerabilities[J]. Empirical Software Engineering,2023,29(1).

[15]Ghoshal A . Oracle’s MySQL HeatWave gets Vector Store, generative AI features[J]. InfoWorld.com,2023.