基于MEVN 技术栈的计算机等级考试系统设计与实现
作者： 陆道军
摘要：随着计算机技术的不断发展，传统的计算机等级考试系统面临着安全性、灵活性和用户体验等方面的挑战。为解决这些问题，文章基于MEVN（MongoDB、Express、Vue.js、Node.js） 技术栈，构建一个现代化的Web考试系统。通过MEVN技术栈的各个组成部分，完成系统的需求与功能设计，数据库设计使用MongoDB，后端采用Node.js和Express.js，前端使用Vue.js进行开发。系统实践阶段包括开发环境的搭建、数据库的建立与管理、后端服务的实现以及前端界面的设计与实现。系统整体经过测试与调优，其性能和用户体验达到最佳水平。在系统的实际应用中，对其性能、用户体验以及与传统系统的对比情况，基于MEVN技术栈的计算机等级考试系统在安全性、灵活性和用户体验方面均取得了显著的改进。
关键词：计算机等级考试；MEVN 架构；Web 应用系统
中图分类号：TP311 文献标识码：A
文章编号：1009-3044（2024）17-0062-03 开放科学（资源服务）标识码（OSID） ：
0 引言
随着计算机技术的飞速发展，计算机等级考试成为评估个体计算机技能水平的重要方式，传统的考试系统面临着一系列问题，如安全性、灵活性和用户体验等方面的挑战。本研究旨在通过应用MEVN技术栈构建一种现代化的计算机等级考试系统，以解决传统系统的安装部署复杂，灵活性欠佳等问题[1]。本文将介绍系统的设计与实践，并评估其性能和用户体验，从而为计算机等级考试系统的未来发展提供有益的经验和启示。
1 计算机等级考试系统的现状与设计思路
1.1 计算机等级考试系统的发展现状
计算机等级考试系统的发展经历了从传统纸质考试到现代化计算机化考试的演变。早期的计算机等级考试主要依赖于纸质试卷和离线评估，受限于时间和空间的局限性。随着计算机技术的普及，计算机等级考试系统逐渐转向了计算机化考试，允许考生在线完成考试，并通过计算机实时评估和反馈成绩。这一转变使得考试更加灵活、高效，并为考生提供了更加公正的评价机制。传统的C/S架构设计[2]的计算机等级考试系统仍然存在一些问题，如安装部署复杂、对操作系统平台和第三方数据库软件版本要求严格，整体构建使用度低、试题灵活性以及用户体验方面的不足。这些问题催生了对于新型考试系统的需求，引领了基于现代技术栈构建计算机等级考试系统的研究和实践。
1.2 MEVN 技术栈的概述与应用领域
MEVN 技术栈是一组包括MongoDB、Express.js、Vue.js和Node.js的现代化Web开发技术，被广泛应用于构建高性能、可扩展的Web应用程序。这一技术栈的独特之处在于它的全栈性质，涵盖了前后端开发的所有环节，从数据库到服务器再到用户界面的实现。
MongoDB： 作为MEVN技术栈的首个成员，Mon⁃goDB是一款NoSQL数据库，以其灵活的数据模型和横向可扩展性而闻名。在计算机等级考试系统中，MongoDB的使用可以提供高效的数据存储和管理，适应考试系统动态变化的数据需求。
Express.js： Express.js是一款基于Node.js的Web 应用框架，提供了简单而灵活的方式来构建Web服务器。在计算机等级考试系统中，Express.js可以用于处理后端业务逻辑，实现安全的数据传输和服务器端的应用逻辑，如图1所示。
Vue.js： Vue.js是一款流行的JavaScript前端框架，专注于构建用户界面。其简洁的API和响应式数据绑定使得前端开发更加便捷。在考试系统中，Vue.js 的运用有助于实现直观、友好的用户界面，提升用户体验。
Node.js： 作为MEVN技术栈的最后一环，Node.js 是一个基于Chrome V8引擎的JavaScript运行环境，适用于构建高度可伸缩的网络应用。在计算机等级考试系统中，Node.js可用于搭建高性能的服务器，支持系统的快速响应和并发处理。
MEVN技术栈以其全面性和协同工作的优势，在构建计算机等级考试系统方面展现了强大的应用潜力。本文将深入探讨如何将这一技术栈应用于实际系统设计与实践中。
2 系统设计
2.1 系统需求与功能设计
计算机等级考试系统主要包括前端页面、后端服务和数据库三个部分[3]。前端页面通过Vue.js实现，提供用户界面和交互功能；后端服务通过Express.js 和Node.js实现，处理用户请求和数据传输，数据库采用MongoDB存储用户信息和考试数据。关键的需求和功能包括，如图2所示。
用户管理：能够注册、登录和管理用户信息，确保安全的身份验证和授权机制。
题库管理：管理考试题目，包括增加、修改、删除题目，以及分类和标签功能[4]。
考试管理：提供灵活的考试安排功能，包括考试时间、地点、考试科目等。
成绩管理：提供考试成绩查询和解析，考生答题文件浏览和回溯等功能[5]。
监控管理：开考后，系统能够实时监控考生的答题情况，包括考试中断后的二次登录，重新选题生成试卷等。
安全管理：实现数据的安全存储、传输和备份处理，防范可能的安全威胁。
2.2 系统数据库设计
MongoDB作为NoSQL数据库，其文档型数据库模型使得在系统中存储和管理数据变得更加灵活，数据库设计包括：
用户集合： 存储管理员信息、用户信息，包括用户名、密码（加密存储）、个人信息等。
题目集合： 包含考试题目的信息，如题目内容、答案、难度等。
考试排期集合：包括考试计划、考场和考场信息、监考员信息、各个考场考生数量等。
考试记录集合：记录每次考试的详细信息，包括考生登录次数、考试时间等。
成绩集合：包含考试成绩详细信息、得分明细、考生答题信息等。
安全维护集合：包含安全管理信息，如限制频繁登录次数、数据定期备份计划等。
2.3 系统后端设计
后端设计采用Node.js和Express.js协同工作，处理HTTPS 请求、业务逻辑和数据库交互，后端设计包括：
路由管理：使用Express.js的路由功能，定义不同HTTPS请求的处理逻辑，如用户注册、登录、获取题目等。
控制管理：使用Node.js完成各业务逻辑功能，如考试安排处理、成绩分析处理、试卷生成等。
中间件：实现身份验证、数据校验、日志记录等中间件，确保系统的稳定性和安全性。
数据库连接：利用Node.js 的MongoDB 驱动，与MongoDB建立连接，进行数据的读写操作。
2.4 系统前端设计
在前端设计中，Vue.js负责构建用户界面，使用户能够方便地与系统交互。前端设计包括：
组件设计：利用Vue.js的组件化特性，构建可复用的UI组件，如题目展示、考试界面等。
状态管理：使用Vue.js的状态管理机制，实现前端状态的管理，确保用户交互的实时性。
用户交互：利用Vue.js的指令和事件处理机制，实现用户界面的交互功能，如点击、输入等。
3 系统实践
3.1 开发环境的搭建
搭建MEVN技术栈开发的环境，安装好以下工具和组件：
Node.js 和npm：安装Node.js 作为后端运行时环境，并随之安装npm用于包管理。
MongoDB：安装MongoDB数据库，确保能够通过命令行或图形用户界面进行数据库的基本操作。
Vue CLI：安装Vue CLI 用于创建和管理Vue.js 项目。
代码编辑器：选择Visual Studio Code 用于编写、调试前端和后端代码。
3.2 数据库的建立与管理
使用MongoDB 创建数据库，并设计合适的集合（表）来存储用户信息、题目数据、考试记录等。确保数据库的连接配置正确，以便后端服务可以与数据库进行交互。考虑数据库的索引、数据备份和安全性等方面，进行必要的管理工作[6]。
// MongoDB连接配置
const mongoose = require（′mongoose′）;
mongoose. connect（′mongodb：//localhost： 27017/ex⁃amSystem′， { useNewUrlParser： true， useUnifiedTopol⁃ogy： true }）;
3.3 后端服务的实现
使用Node.js和Express.js创建后端服务，实现系统的业务逻辑、路由管理和中间件。考虑用户身份验证、数据校验、异常处理等关键功能。建立RESTfulAPI，通过Mongoose库连接MongoDB数据库，使前端能够与后端进行有效的数据交互。
// Express.js路由和中间件
const express = require（′express′）;
const router = express.Router（）;
// 用户注册
router.post（′/register′， UserController.register）;
// 获取题目列表
router.get（′/questions′， QuestionController.getQues⁃tions）;
// 示例：身份验证中间件
const authenticate = （req， res， next） => {
// 在此进行用户身份验证逻辑
next（）;
};
// 应用身份验证中间件
router.use（authenticate）;
3.4 前端界面的设计与实现
前端页面采用Vue.js框架搭建，使用Vue Router 进行路由管理，Vuex 进行状态管理， axios 库进行HTTPS请求。页面设计保持简洁清晰，包括登录页面、注册页面、考试科目选择页面、考试页面、成绩查询页面等。
<！-- Vue.js组件 -->
<template>
<div>
<QuestionList ：questions="questions" />
<ExamForm @submit="submitExam" />
</div>
</template>
<script>
import QuestionList from ′./QuestionList.vue′;
import ExamForm from ′./ExamForm.vue′;
export default {
data（） {
return {
questions： []，
};
}，
methods： {