基于Vue的在線考試系統(tǒng)設(shè)計(jì)與實(shí)現(xiàn)

王鷹漢 明小波

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

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

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

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

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

0 引言

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

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

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

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

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

2.1.1 可用性

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

2.1.2 安全性

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

2.1.3 健壯性

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

2.1.4 可擴(kuò)展性

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

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

在線考試系統(tǒng)旨在為學(xué)生提供一個練習(xí)和模擬測試的平臺，為教師建立一個了解學(xué)生學(xué)習(xí)情況的途徑。系統(tǒng)在結(jié)構(gòu)布局上簡潔明了，符合用戶瀏覽和操作習(xí)慣，整體布局由左、右兩部分組成，左側(cè)是導(dǎo)航菜單，右側(cè)是系統(tǒng)主界面。左側(cè)導(dǎo)航菜單包括題庫匯總和個人信息兩個大模塊，其中題庫匯總模塊包括練習(xí)測試、收藏集合、錯題集合、答題排行4個子模塊。根據(jù)用戶的練習(xí)和測試需求，練習(xí)測試子模塊中包含隨機(jī)練習(xí)和模擬測試兩種模式，在隨機(jī)練習(xí)模式下，用戶可根據(jù)題目分類有針對性地選擇練習(xí)題目進(jìn)行練習(xí)，題目分類包括應(yīng)用基礎(chǔ)、多媒體技術(shù)、數(shù)據(jù)表示和計(jì)算、網(wǎng)絡(luò)、計(jì)算機(jī)硬件、C語言、JavaScript等13種類型。在模擬測試模式下，系統(tǒng)會在各種類型題目中按比例隨機(jī)抽取題目組合成試卷供學(xué)生進(jìn)行測試。收藏集合模塊是讓學(xué)生在練習(xí)過程中收藏易錯、易混淆的題目，便于后期對比查看。錯題集合模塊是對學(xué)生在練習(xí)和模擬測試過程中出錯的題目進(jìn)行自動收集，以便訂正查看。答題排行模塊是以學(xué)生答題的分?jǐn)?shù)進(jìn)行排名，以便教師掌握學(xué)生的學(xué)習(xí)情況，學(xué)生與學(xué)生之間也可彼此了解，相互競爭，以形成良好的學(xué)習(xí)氛圍。個人信息模塊包括注冊用戶的個人詳細(xì)信息和注冊本系統(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ù)庫的存儲功能，前端數(shù)據(jù)傳輸都須經(jīng)過Json存儲到服務(wù)器中；公共工具包括Axios通用工具及自己編寫的公共組件；基本的頁面容器包括Vue框架；Vuetify組件庫和Vuex狀態(tài)管理工具負(fù)責(zé)組織頁面數(shù)據(jù)；Webpack負(fù)責(zé)管理外部引入的工具包，管理程序的打包處理，打包完成后生成一個可以在瀏覽器中使用的單頁面應(yīng)用程序。

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

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

系統(tǒng)配置主要集中在main.js文件中［4］，這里引入Vuetify和與其對應(yīng)的樣式文件，同時引入Axios請求和引入Vue-router路由控制頁面的跳轉(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)頂部不動，主要包括兩部分，一是顯示隱藏左側(cè)導(dǎo)航菜單按鈕，默認(rèn)左側(cè)導(dǎo)航菜單是顯示狀態(tài)，點(diǎn)擊按鈕后可隱藏，反之則顯示；二是顯示登錄用戶的詳細(xì)信息及退出系統(tǒng)按鈕。用戶可根據(jù)主界面顯示需求打開或關(guān)閉左側(cè)導(dǎo)航菜單，在學(xué)習(xí)或測試結(jié)束后可快速退出系統(tǒng)。打開或關(guān)閉導(dǎo)航菜單核心代碼如下。

methods： {

tigger（）{

eventBus.$emit（"tigger"）;

}，}

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

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

左側(cè)導(dǎo)航菜單給用戶提供了系統(tǒng)使用導(dǎo)航和展示功能。在題庫匯總導(dǎo)航菜單中，用戶可進(jìn)行隨機(jī)練習(xí)或模擬測試，也可根據(jù)自己個人學(xué)習(xí)情況查看復(fù)習(xí)收藏和錯誤題目，通過點(diǎn)擊答題排行可查看其他用戶的答題情況。菜單主要分為一級和二級菜單，其中每個一級菜單前面都放置了一個iconfont圖標(biāo)，并通過為菜單設(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）模擬測試模塊。相比隨機(jī)練習(xí)模塊，模擬測試模塊有3個不同點(diǎn)：一是測試題目數(shù)量做了具體限制，固定為300道；二是不具備題型選擇功能，測試過程中系統(tǒng)會在各種題型中按比例隨機(jī)抽取一定數(shù)量的題目進(jìn)行組合；三是沒有查看答案功能，只有在題目全部做完且提交后，錯題會匯總至錯題集合模塊中。

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

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

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

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

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

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

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

this.submitd.tipBd = "";

}

this.submitd.dialog = true;

}，

4 系統(tǒng)測試

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

5 結(jié)語

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

參考文獻(xiàn)

［1］胡雅麗.基于Vue.js的“微商城”前端開發(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的地下綜合管廊管理平臺的前端設(shè)計(jì)與實(shí)現(xiàn)［J］.現(xiàn)代信息科技，2021（16）：13-18.

［4］姜全坤.基于Vue的通用后臺管理系統(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