基于Vue的在线考试系统设计与实现

王鹰汉 明小波

基金项目：江西省教育厅科学技术研究项目；项目名称：基于Vue的前端开发框架设计与实现；项目编号：GJJ207803。

作者简介：王鹰汉（1982— ），男，江西吉安人，教授，硕士；研究方向：计算机应用技术，职业教育教学。

摘要：在线考试系统的实现对教师掌握学生的学习情况及学习巩固知识具有重要意义。文章在分析用户在线考试需求的基础上，设计和开发了一款能同时在PC端和移动端运行且符合用户操作习惯的轻量级在线考试系统。该系统基于前后端分离的思想，采用Vue框架构建和JSON数据交换格式，使用Node.js+json-server作为系统数据的存储和管理技术，实现用户在线考试功能，包括练习测试、收藏集合、错题集合、答题排行等功能模块。测试结果表明该系统在移动端通过网址就能自适应运行，且相比传统技术开发的在线考试系统成本低、运行效率高。

关键词：在线考试系统；Vue框架；前后端分离

中图分类号：TP311 文献标志码：A

0 引言

随着信息技术的发展，在线考试系统的设计与实现技术呈现多样化的发展态势，传统可通过ASP.NET，JSP，PHP，Python等计算机编程语言，结合相应的数据库存储技术，设计并实现在线考试系统，这种方式实现的在线考试系统，功能强大，安全性较高，但相应的开发成本高，运行效率较低。为了使用户不需要在移动端单独安装App的情况下，能够在PC端和移动端同步进行在线练习与考试，笔者基于前后端分离的思想，采用Vue框架构建和JSON数据交换格式，使用Node.js+json-server作为系统数据的存储和管理技术，设计并实现了一套轻量级在线考试系统。本系统为提高试题库的创建效率，建立内容丰富的试题库，提供了单个试题录入和文件格式批量导入 ［Json导入（Excel转Json）］两种试题导入方式。用户注册时可选择教师和学生两种不同的角色，不仅满足了系统的完整性，还使得题库系统更具有管理性。教师用户登录系统可对题库和学生进行管理，学生用户登录系统可进行练习、测试、题目的收藏等操作。答题时系统会自行批改，并将错题合并为错题集。答题排行的实现，可使教师和学生互相了解各自的答题进度和对知识的掌握情况。

1 相关技术介绍

Vue.js是基于MVVM模式开发的［1］，主要用于构建用户界面，可以显著提高开发人员的开发效率。Vuetify是基于Vue2.0的组件框架，渐进式的UI框架，旨在提供整洁、语义化和可重用的组件，使得构建应用程序更方便。Vuex是专为Vue.js应用程序开发的状态管理模式+库。Axios是基于promise的网络请求库，作用于node.js和浏览器中并请求后台资源的模块。Node.js的异步非阻塞I/O、事件驱动模式的特点，可以有效解决高并发问题［2］。

2 系统需求分析

2.1 系统性能需求

2.1.1 可用性

用户须注册并登录系统时才能练习或测试。系统界面简洁大方高效，交互性强，用户体验高，符合用户的使用习惯。

2.1.2 安全性

在针对前端设计常出现的网络安全问题，系统通过相应的设计进行防范，以防止前端系统受网络攻击。

2.1.3 健壮性

当系统运行出现问题时，有对应的处理预案，以防止系统崩溃。系统用户界面会给出相应的错误提示，引导用户正确处理问题。

2.1.4 可扩展性

系统在设计时考虑到以后需要新增业务模块或更改现有模块功能需求，可通过扩展API接口连接或不需要大量修改代码就能实现。

2.2 系统功能需求

在线考试系统旨在为学生提供一个练习和模拟测试的平台，为教师建立一个了解学生学习情况的途径。系统在结构布局上简洁明了，符合用户浏览和操作习惯，整体布局由左、右两部分组成，左侧是导航菜单，右侧是系统主界面。左侧导航菜单包括题库汇总和个人信息两个大模块，其中题库汇总模块包括练习测试、收藏集合、错题集合、答题排行4个子模块。根据用户的练习和测试需求，练习测试子模块中包含随机练习和模拟测试两种模式，在随机练习模式下，用户可根据题目分类有针对性地选择练习题目进行练习，题目分类包括应用基础、多媒体技术、数据表示和计算、网络、计算机硬件、C语言、JavaScript等13种类型。在模拟测试模式下，系统会在各种类型题目中按比例随机抽取题目组合成试卷供学生进行测试。收藏集合模块是让学生在练习过程中收藏易错、易混淆的题目，便于后期对比查看。错题集合模块是对学生在练习和模拟测试过程中出错的题目进行自动收集，以便订正查看。答题排行模块是以学生答题的分数进行排名，以便教师掌握学生的学习情况，学生与学生之间也可彼此了解，相互竞争，以形成良好的学习氛围。个人信息模块包括注册用户的个人详细信息和注册本系统的人数，以便教师查看学生，学生之间相互查看。系统结构如图1所示。

2.3 系统架构设计

系统架构设计如图2所示［3］。其中，Json-server代替了使用数据库的存储功能，前端数据传输都须经过Json存储到服务器中；公共工具包括Axios通用工具及自己编写的公共组件；基本的页面容器包括Vue框架；Vuetify组件库和Vuex状态管理工具负责组织页面数据；Webpack负责管理外部引入的工具包，管理程序的打包处理，打包完成后生成一个可以在浏览器中使用的单页面应用程序。

3 系统设计与实现

3.1 系统主要配置

系统配置主要集中在main.js文件中［4］，这里引入Vuetify和与其对应的样式文件，同时引入Axios请求和引入Vue-router路由控制页面的跳转，再引入Vuex管理相应数据以供不同组件之間通信，其核心代码如下。

import Vue from 'vue'

import App from '@/App.vue'

import vuetify from 'plugins/vuetify' //导入vuetify框架

import router from '@/router' //导入路由

import store from './store' //导入状态管理

import moment from "plugins/moment";

Vue.config.productionTip = false

new Vue（{

router，

vuetify，

store，

render： h => h（App），

}）.$mount（'#app'）

3.2 頂部展示区域设计与实现

顶部展示区域固定在系统顶部不动，主要包括两部分，一是显示隐藏左侧导航菜单按钮，默认左侧导航菜单是显示状态，点击按钮后可隐藏，反之则显示；二是显示登录用户的详细信息及退出系统按钮。用户可根据主界面显示需求打开或关闭左侧导航菜单，在学习或测试结束后可快速退出系统。打开或关闭导航菜单核心代码如下。

methods： {

tigger（）{

eventBus.$emit（"tigger"）;

}，}

3.3 左侧导航菜单设计与实现

3.3.1 题库汇总导航菜单

左侧导航菜单给用户提供了系统使用导航和展示功能。在题库汇总导航菜单中，用户可进行随机练习或模拟测试，也可根据自己个人学习情况查看复习收藏和错误题目，通过点击答题排行可查看其他用户的答题情况。菜单主要分为一级和二级菜单，其中每个一级菜单前面都放置了一个iconfont图标，并通过为菜单设置a：link，a：hover和a：visited样式以展示当前选中和非选中菜单选项。

（1）随机练习模块。随机练习模块可供用户选择不同类型题目进行随机（顺序或跳转）练习，练习题目数量不限制。

（2）模拟测试模块。相比随机练习模块，模拟测试模块有3个不同点：一是测试题目数量做了具体限制，固定为300道；二是不具备题型选择功能，测试过程中系统会在各种题型中按比例随机抽取一定数量的题目进行组合；三是没有查看答案功能，只有在题目全部做完且提交后，错题会汇总至错题集合模块中。

（3）收藏集合模块。用户在随机练习过程中遇到不易理解或是有疑问的题目时，可点击收藏按钮将题目进行收藏，便于后期复习查看。

（4）错题集合模块。用户在随机练习或模拟测试过程中的错题，系统会以次数（最近10次）为单位自动收集进入错题集合模块。

（5）答题排行模块。系统以用户在答题后的总分高低进行排行。

3.3.2 个人信息导航菜单

个人信息导航菜单主要包含个人资料和注册人数两个模块。个人资料模块用来显示登录用户的详细信息，注册人数模块用来显示已注册用户的信息。

3.4 主界面设计与实现

当选择不同的菜单选项时，路由器会显示不同的主界面。以随机练习模块页面为例，该界面主要展示题型选择、保存当前作答记录、题号跳转、测试计时、题目详细信息以及查看答案、题目解析功能，答题完成提交后，系统会自行统计得分，其主界面效果如图3所示。部分核心代码如下。

submitAs（） {

if （Object.keys（this.doneItems）.length ！== this.doneData.has） {

this.submitd.tipHd = "你还有未完成的题目！";

this.submitd.tipBd =

"还有" +

（this.doneData.has-Object.keys（this.doneItems）.length） +

"道题未完成～";

} else {

this.submitd.tipHd = “真棒！ 题目都被你答对啦！”;

this.submitd.tipBd = "";

}

this.submitd.dialog = true;

}，

4 系统测试

安装Node.js，配置好相应的环境变量，进入项目文件夹，在地址栏中输入“cmd”进入命令窗口，使用“npm run serve”命令启动项目后，命令窗口不能关闭。打开浏览器，在浏览器窗口地址栏中输入“http：//localhost：8080/”进入系统主界面。对于新用户，需要注册一个新用户名方可登录，对于已注册用户可直接登录系统，如果输入的密码错误会有错误提示。用户输入正确的用户名和密码登录系统后可进行相应的操作［5］。为了对系统进行测试，利用批量导入试题的方式分别导入应用基础题1 270道、多媒体技术题150道、数据库原理题149道等，总共导入4 456道题供学生和教师进行使用测试。测试结果是本系统功能性强，界面设计友好，可靠性高，具有良好的可扩展性。

5 结语

本文基于Vue框架，综合运用Webpack，Vuex，VueRouter，Vuetify，Axios等技术，使用HBuilderX工具构建了在线考试系统，基于前后端分离的思想，实现了用户注册、登录与退出、导航菜单的显示与隐藏、随机练习与模拟测试、错题的收藏与汇总、答题排行等功能。本系统适合用户在PC端或移动端练习题目与在线测试，具有较好的适用性与扩展性，方便维护。本系统已在笔者所在学校推广备战大学生科技创新与职业技能竞赛，得到了相关指导老师和学生的一致好评。但在后续的完善过程中，可以将Json-server数据存储修改成以数据库MySQL或NoSQL存储，以数据库的形式存储数据，存储的数据量将更大，更安全，并将在系统高并发处理上进行深层次的研究。

参考文献

［1］胡雅丽.基于Vue.js的“微商城”前端开发设计与实现［J］.电子技术与软件工程，2020（20）：34-35.

［2］王玲.基于高并发处理模式的在线考试系统设计与实现［J］.现代信息科技.2022（3）：18-20，24.

［3］刘正.基于Vue的地下综合管廊管理平台的前端设计与实现［J］.现代信息科技，2021（16）：13-18.

［4］姜全坤.基于Vue的通用后臺管理系统设计与实现［J］.现代信息科技，2022（8）：33-35，38.

［5］张旭辉，郭华瑞.在线考试系统的设计与实现［J］.电脑编程技巧与维护，2022（6）：13-14，35.

（编辑 沈 强）

Abstract： The realization of online examination system is of great significance for teachers to master students learning situation and students to consolidate knowledge. Based on the analysis of users online examination needs， this paper designs and develops a lightweight online examination system that can run on both PC and mobile terminals and conforms to users operating habits. The system is based on the idea of front end and back end separation. It adopts Vue framework and JSON data exchange format， and uses Node Js+json server is used as the storage and management technology of system data to realize users online examination function， including practice test， collection， error collection， answer ranking and other functional modules. The test results show that the system can run adaptively through the website on the mobile terminal， and compared with the online examination system developed by traditional technology， the cost is low and the running efficiency is high.

Key words： online examination system; Vue framework; front and rear end separation