基于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