王鷹漢 明小波

基金項(xiàng)目：江西省教育廳科學(xué)技術(shù)研究項(xiàng)目；項(xiàng)目名稱：基于Vue的前端開(kāi)發(fā)框架設(shè)計(jì)與實(shí)現(xiàn)；項(xiàng)目編號(hào)：GJJ207803。

作者簡(jiǎn)介：王鷹漢（1982— ），男，江西吉安人，教授，碩士；研究方向：計(jì)算機(jī)應(yīng)用技術(shù)，職業(yè)教育教學(xué)。

摘要：在線考試系統(tǒng)的實(shí)現(xiàn)對(duì)教師掌握學(xué)生的學(xué)習(xí)情況及學(xué)習(xí)鞏固知識(shí)具有重要意義。文章在分析用戶在線考試需求的基礎(chǔ)上，設(shè)計(jì)和開(kāi)發(fā)了一款能同時(shí)在PC端和移動(dòng)端運(yùn)行且符合用戶操作習(xí)慣的輕量級(jí)在線考試系統(tǒng)。該系統(tǒng)基于前后端分離的思想，采用Vue框架構(gòu)建和JSON數(shù)據(jù)交換格式，使用Node.js+json-server作為系統(tǒng)數(shù)據(jù)的存儲(chǔ)和管理技術(shù)，實(shí)現(xiàn)用戶在線考試功能，包括練習(xí)測(cè)試、收藏集合、錯(cuò)題集合、答題排行等功能模塊。測(cè)試結(jié)果表明該系統(tǒng)在移動(dòng)端通過(guò)網(wǎng)址就能自適應(yīng)運(yùn)行，且相比傳統(tǒng)技術(shù)開(kāi)發(fā)的在線考試系統(tǒng)成本低、運(yùn)行效率高。

關(guān)鍵詞：在線考試系統(tǒng)；Vue框架；前后端分離

中圖分類號(hào)：TP311 文獻(xiàn)標(biāo)志碼：A

0 引言

隨著信息技術(shù)的發(fā)展，在線考試系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn)技術(shù)呈現(xiàn)多樣化的發(fā)展態(tài)勢(shì)，傳統(tǒng)可通過(guò)ASP.NET，JSP，PHP，Python等計(jì)算機(jī)編程語(yǔ)言，結(jié)合相應(yīng)的數(shù)據(jù)庫(kù)存儲(chǔ)技術(shù)，設(shè)計(jì)并實(shí)現(xiàn)在線考試系統(tǒng)，這種方式實(shí)現(xiàn)的在線考試系統(tǒng)，功能強(qiáng)大，安全性較高，但相應(yīng)的開(kāi)發(fā)成本高，運(yùn)行效率較低。為了使用戶不需要在移動(dòng)端單獨(dú)安裝App的情況下，能夠在PC端和移動(dòng)端同步進(jìn)行在線練習(xí)與考試，筆者基于前后端分離的思想，采用Vue框架構(gòu)建和JSON數(shù)據(jù)交換格式，使用Node.js+json-server作為系統(tǒng)數(shù)據(jù)的存儲(chǔ)和管理技術(shù)，設(shè)計(jì)并實(shí)現(xiàn)了一套輕量級(jí)在線考試系統(tǒng)。本系統(tǒng)為提高試題庫(kù)的創(chuàng)建效率，建立內(nèi)容豐富的試題庫(kù)，提供了單個(gè)試題錄入和文件格式批量導(dǎo)入 ［Json導(dǎo)入（Excel轉(zhuǎn)Json）］兩種試題導(dǎo)入方式。用戶注冊(cè)時(shí)可選擇教師和學(xué)生兩種不同的角色，不僅滿足了系統(tǒng)的完整性，還使得題庫(kù)系統(tǒng)更具有管理性。教師用戶登錄系統(tǒng)可對(duì)題庫(kù)和學(xué)生進(jìn)行管理，學(xué)生用戶登錄系統(tǒng)可進(jìn)行練習(xí)、測(cè)試、題目的收藏等操作。答題時(shí)系統(tǒng)會(huì)自行批改，并將錯(cuò)題合并為錯(cuò)題集。答題排行的實(shí)現(xiàn)，可使教師和學(xué)生互相了解各自的答題進(jìn)度和對(duì)知識(shí)的掌握情況。

1 相關(guān)技術(shù)介紹

Vue.js是基于MVVM模式開(kāi)發(fā)的［1］，主要用于構(gòu)建用戶界面，可以顯著提高開(kāi)發(fā)人員的開(kāi)發(fā)效率。Vuetify是基于Vue2.0的組件框架，漸進(jìn)式的UI框架，旨在提供整潔、語(yǔ)義化和可重用的組件，使得構(gòu)建應(yīng)用程序更方便。Vuex是專為Vue.js應(yīng)用程序開(kāi)發(fā)的狀態(tài)管理模式+庫(kù)。Axios是基于promise的網(wǎng)絡(luò)請(qǐng)求庫(kù)，作用于node.js和瀏覽器中并請(qǐng)求后臺(tái)資源的模塊。Node.js的異步非阻塞I/O、事件驅(qū)動(dòng)模式的特點(diǎn)，可以有效解決高并發(fā)問(wèn)題［2］。

2 系統(tǒng)需求分析

2.1 系統(tǒng)性能需求

2.1.1 可用性

用戶須注冊(cè)并登錄系統(tǒng)時(shí)才能練習(xí)或測(cè)試。系統(tǒng)界面簡(jiǎn)潔大方高效，交互性強(qiáng)，用戶體驗(yàn)高，符合用戶的使用習(xí)慣。

2.1.2 安全性

在針對(duì)前端設(shè)計(jì)常出現(xiàn)的網(wǎng)絡(luò)安全問(wèn)題，系統(tǒng)通過(guò)相應(yīng)的設(shè)計(jì)進(jìn)行防范，以防止前端系統(tǒng)受網(wǎng)絡(luò)攻擊。

2.1.3 健壯性

當(dāng)系統(tǒng)運(yùn)行出現(xiàn)問(wèn)題時(shí)，有對(duì)應(yīng)的處理預(yù)案，以防止系統(tǒng)崩潰。系統(tǒng)用戶界面會(huì)給出相應(yīng)的錯(cuò)誤提示，引導(dǎo)用戶正確處理問(wèn)題。

2.1.4 可擴(kuò)展性

系統(tǒng)在設(shè)計(jì)時(shí)考慮到以后需要新增業(yè)務(wù)模塊或更改現(xiàn)有模塊功能需求，可通過(guò)擴(kuò)展API接口連接或不需要大量修改代碼就能實(shí)現(xiàn)。

2.2 系統(tǒng)功能需求

在線考試系統(tǒng)旨在為學(xué)生提供一個(gè)練習(xí)和模擬測(cè)試的平臺(tái)，為教師建立一個(gè)了解學(xué)生學(xué)習(xí)情況的途徑。系統(tǒng)在結(jié)構(gòu)布局上簡(jiǎn)潔明了，符合用戶瀏覽和操作習(xí)慣，整體布局由左、右兩部分組成，左側(cè)是導(dǎo)航菜單，右側(cè)是系統(tǒng)主界面。左側(cè)導(dǎo)航菜單包括題庫(kù)匯總和個(gè)人信息兩個(gè)大模塊，其中題庫(kù)匯總模塊包括練習(xí)測(cè)試、收藏集合、錯(cuò)題集合、答題排行4個(gè)子模塊。根據(jù)用戶的練習(xí)和測(cè)試需求，練習(xí)測(cè)試子模塊中包含隨機(jī)練習(xí)和模擬測(cè)試兩種模式，在隨機(jī)練習(xí)模式下，用戶可根據(jù)題目分類有針對(duì)性地選擇練習(xí)題目進(jìn)行練習(xí)，題目分類包括應(yīng)用基礎(chǔ)、多媒體技術(shù)、數(shù)據(jù)表示和計(jì)算、網(wǎng)絡(luò)、計(jì)算機(jī)硬件、C語(yǔ)言、JavaScript等13種類型。在模擬測(cè)試模式下，系統(tǒng)會(huì)在各種類型題目中按比例隨機(jī)抽取題目組合成試卷供學(xué)生進(jìn)行測(cè)試。收藏集合模塊是讓學(xué)生在練習(xí)過(guò)程中收藏易錯(cuò)、易混淆的題目，便于后期對(duì)比查看。錯(cuò)題集合模塊是對(duì)學(xué)生在練習(xí)和模擬測(cè)試過(guò)程中出錯(cuò)的題目進(jìn)行自動(dòng)收集，以便訂正查看。答題排行模塊是以學(xué)生答題的分?jǐn)?shù)進(jìn)行排名，以便教師掌握學(xué)生的學(xué)習(xí)情況，學(xué)生與學(xué)生之間也可彼此了解，相互競(jìng)爭(zhēng)，以形成良好的學(xué)習(xí)氛圍。個(gè)人信息模塊包括注冊(cè)用戶的個(gè)人詳細(xì)信息和注冊(cè)本系統(tǒng)的人數(shù)，以便教師查看學(xué)生，學(xué)生之間相互查看。系統(tǒng)結(jié)構(gòu)如圖1所示。

2.3 系統(tǒng)架構(gòu)設(shè)計(jì)

系統(tǒng)架構(gòu)設(shè)計(jì)如圖2所示［3］。其中，Json-server代替了使用數(shù)據(jù)庫(kù)的存儲(chǔ)功能，前端數(shù)據(jù)傳輸都須經(jīng)過(guò)Json存儲(chǔ)到服務(wù)器中；公共工具包括Axios通用工具及自己編寫的公共組件；基本的頁(yè)面容器包括Vue框架；Vuetify組件庫(kù)和Vuex狀態(tài)管理工具負(fù)責(zé)組織頁(yè)面數(shù)據(jù)；Webpack負(fù)責(zé)管理外部引入的工具包，管理程序的打包處理，打包完成后生成一個(gè)可以在瀏覽器中使用的單頁(yè)面應(yīng)用程序。

3 系統(tǒng)設(shè)計(jì)與實(shí)現(xiàn)

3.1 系統(tǒng)主要配置

系統(tǒng)配置主要集中在main.js文件中［4］，這里引入Vuetify和與其對(duì)應(yīng)的樣式文件，同時(shí)引入Axios請(qǐng)求和引入Vue-router路由控制頁(yè)面的跳轉(zhuǎn)，再引入Vuex管理相應(yīng)數(shù)據(jù)以供不同組件之間通信，其核心代碼如下。

import Vue from 'vue'

import App from '@/App.vue'

import vuetify from 'plugins/vuetify' //導(dǎo)入vuetify框架

import router from '@/router' //導(dǎo)入路由

import store from './store' //導(dǎo)入狀態(tài)管理

import moment from "plugins/moment";

Vue.config.productionTip = false

new Vue（{

router，

vuetify，

store，

render： h => h（App），

}）.$mount（'#app'）

3.2 頂部展示區(qū)域設(shè)計(jì)與實(shí)現(xiàn)

頂部展示區(qū)域固定在系統(tǒng)頂部不動(dòng)，主要包括兩部分，一是顯示隱藏左側(cè)導(dǎo)航菜單按鈕，默認(rèn)左側(cè)導(dǎo)航菜單是顯示狀態(tài)，點(diǎn)擊按鈕后可隱藏，反之則顯示；二是顯示登錄用戶的詳細(xì)信息及退出系統(tǒng)按鈕。用戶可根據(jù)主界面顯示需求打開(kāi)或關(guān)閉左側(cè)導(dǎo)航菜單，在學(xué)習(xí)或測(cè)試結(jié)束后可快速退出系統(tǒng)。打開(kāi)或關(guān)閉導(dǎo)航菜單核心代碼如下。

methods： {

tigger（）{

eventBus.$emit（"tigger"）;

}，}

3.3 左側(cè)導(dǎo)航菜單設(shè)計(jì)與實(shí)現(xiàn)

3.3.1 題庫(kù)匯總導(dǎo)航菜單

左側(cè)導(dǎo)航菜單給用戶提供了系統(tǒng)使用導(dǎo)航和展示功能。在題庫(kù)匯總導(dǎo)航菜單中，用戶可進(jìn)行隨機(jī)練習(xí)或模擬測(cè)試，也可根據(jù)自己個(gè)人學(xué)習(xí)情況查看復(fù)習(xí)收藏和錯(cuò)誤題目，通過(guò)點(diǎn)擊答題排行可查看其他用戶的答題情況。菜單主要分為一級(jí)和二級(jí)菜單，其中每個(gè)一級(jí)菜單前面都放置了一個(gè)iconfont圖標(biāo)，并通過(guò)為菜單設(shè)置a：link，a：hover和a：visited樣式以展示當(dāng)前選中和非選中菜單選項(xiàng)。

（1）隨機(jī)練習(xí)模塊。隨機(jī)練習(xí)模塊可供用戶選擇不同類型題目進(jìn)行隨機(jī)（順序或跳轉(zhuǎn)）練習(xí)，練習(xí)題目數(shù)量不限制。

（2）模擬測(cè)試模塊。相比隨機(jī)練習(xí)模塊，模擬測(cè)試模塊有3個(gè)不同點(diǎn)：一是測(cè)試題目數(shù)量做了具體限制，固定為300道；二是不具備題型選擇功能，測(cè)試過(guò)程中系統(tǒng)會(huì)在各種題型中按比例隨機(jī)抽取一定數(shù)量的題目進(jìn)行組合；三是沒(méi)有查看答案功能，只有在題目全部做完且提交后，錯(cuò)題會(huì)匯總至錯(cuò)題集合模塊中。

（3）收藏集合模塊。用戶在隨機(jī)練習(xí)過(guò)程中遇到不易理解或是有疑問(wèn)的題目時(shí)，可點(diǎn)擊收藏按鈕將題目進(jìn)行收藏，便于后期復(fù)習(xí)查看。

（4）錯(cuò)題集合模塊。用戶在隨機(jī)練習(xí)或模擬測(cè)試過(guò)程中的錯(cuò)題，系統(tǒng)會(huì)以次數(shù)（最近10次）為單位自動(dòng)收集進(jìn)入錯(cuò)題集合模塊。

（5）答題排行模塊。系統(tǒng)以用戶在答題后的總分高低進(jìn)行排行。

3.3.2 個(gè)人信息導(dǎo)航菜單

個(gè)人信息導(dǎo)航菜單主要包含個(gè)人資料和注冊(cè)人數(shù)兩個(gè)模塊。個(gè)人資料模塊用來(lái)顯示登錄用戶的詳細(xì)信息，注冊(cè)人數(shù)模塊用來(lái)顯示已注冊(cè)用戶的信息。

3.4 主界面設(shè)計(jì)與實(shí)現(xiàn)

當(dāng)選擇不同的菜單選項(xiàng)時(shí)，路由器會(huì)顯示不同的主界面。以隨機(jī)練習(xí)模塊頁(yè)面為例，該界面主要展示題型選擇、保存當(dāng)前作答記錄、題號(hào)跳轉(zhuǎn)、測(cè)試計(jì)時(shí)、題目詳細(xì)信息以及查看答案、題目解析功能，答題完成提交后，系統(tǒng)會(huì)自行統(tǒng)計(jì)得分，其主界面效果如圖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 = “真棒！ 題目都被你答對(duì)啦！”;

this.submitd.tipBd = "";

}

this.submitd.dialog = true;

}，

4 系統(tǒng)測(cè)試

安裝Node.js，配置好相應(yīng)的環(huán)境變量，進(jìn)入項(xiàng)目文件夾，在地址欄中輸入“cmd”進(jìn)入命令窗口，使用“npm run serve”命令啟動(dòng)項(xiàng)目后，命令窗口不能關(guān)閉。打開(kāi)瀏覽器，在瀏覽器窗口地址欄中輸入“http：//localhost：8080/”進(jìn)入系統(tǒng)主界面。對(duì)于新用戶，需要注冊(cè)一個(gè)新用戶名方可登錄，對(duì)于已注冊(cè)用戶可直接登錄系統(tǒng)，如果輸入的密碼錯(cuò)誤會(huì)有錯(cuò)誤提示。用戶輸入正確的用戶名和密碼登錄系統(tǒng)后可進(jìn)行相應(yīng)的操作［5］。為了對(duì)系統(tǒng)進(jìn)行測(cè)試，利用批量導(dǎo)入試題的方式分別導(dǎo)入應(yīng)用基礎(chǔ)題1 270道、多媒體技術(shù)題150道、數(shù)據(jù)庫(kù)原理題149道等，總共導(dǎo)入4 456道題供學(xué)生和教師進(jìn)行使用測(cè)試。測(cè)試結(jié)果是本系統(tǒng)功能性強(qiáng)，界面設(shè)計(jì)友好，可靠性高，具有良好的可擴(kuò)展性。

5 結(jié)語(yǔ)

本文基于Vue框架，綜合運(yùn)用Webpack，Vuex，VueRouter，Vuetify，Axios等技術(shù)，使用HBuilderX工具構(gòu)建了在線考試系統(tǒng)，基于前后端分離的思想，實(shí)現(xiàn)了用戶注冊(cè)、登錄與退出、導(dǎo)航菜單的顯示與隱藏、隨機(jī)練習(xí)與模擬測(cè)試、錯(cuò)題的收藏與匯總、答題排行等功能。本系統(tǒng)適合用戶在PC端或移動(dòng)端練習(xí)題目與在線測(cè)試，具有較好的適用性與擴(kuò)展性，方便維護(hù)。本系統(tǒng)已在筆者所在學(xué)校推廣備戰(zhàn)大學(xué)生科技創(chuàng)新與職業(yè)技能競(jìng)賽，得到了相關(guān)指導(dǎo)老師和學(xué)生的一致好評(píng)。但在后續(xù)的完善過(guò)程中，可以將Json-server數(shù)據(jù)存儲(chǔ)修改成以數(shù)據(jù)庫(kù)MySQL或NoSQL存儲(chǔ)，以數(shù)據(jù)庫(kù)的形式存儲(chǔ)數(shù)據(jù)，存儲(chǔ)的數(shù)據(jù)量將更大，更安全，并將在系統(tǒng)高并發(fā)處理上進(jìn)行深層次的研究。

參考文獻(xiàn)

［1］胡雅麗.基于Vue.js的“微商城”前端開(kāi)發(fā)設(shè)計(jì)與實(shí)現(xiàn)［J］.電子技術(shù)與軟件工程，2020（20）：34-35.

［2］王玲.基于高并發(fā)處理模式的在線考試系統(tǒng)設(shè)計(jì)與實(shí)現(xiàn)［J］.現(xiàn)代信息科技.2022（3）：18-20，24.

［3］劉正.基于Vue的地下綜合管廊管理平臺(tái)的前端設(shè)計(jì)與實(shí)現(xiàn)［J］.現(xiàn)代信息科技，2021（16）：13-18.

［4］姜全坤.基于Vue的通用后臺(tái)管理系統(tǒng)設(shè)計(jì)與實(shí)現(xiàn)［J］.現(xiàn)代信息科技，2022（8）：33-35，38.

［5］張旭輝，郭華瑞.在線考試系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn)［J］.電腦編程技巧與維護(hù)，2022（6）：13-14，35.

（編輯 沈 強(qiáng)）

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