基于Bootstrap+spring boot框架的在線考試系統開發

◆葉惠仙 沈文杰

基于Bootstrap+spring boot框架的在線考試系統開發

◆葉惠仙 沈文杰

（福建農業職業技術學院 福建 350007）

Internet的開放分布性特點使各種考試突破了時間和空間限制，該在線考試系統設計使用Bootstrap+spring boot框架，實現用戶管理，題庫管理、成績管理、考試自動組合出卷與評卷管理等功能。本框架能夠減少底層開發工作量，系統模塊之間具有高內聚、低耦合的特點，進而提升系統的可用性和可維護性。本系統能滿足各科課程教學考試考核需求，簡化并改善傳統紙質考試模式，提高考試效率與學院信息化建設。

在線考試系統；Bootstrap；spring boot框架；信息化

隨著計算機技術的不斷發展，校園信息化建設程度已是評估一個學校現代化發展的重要指標，這其中就包含教學信息化建設，傳統的期中期末考核測試，由于它涉及試卷命題的組織，打印試卷，考試流程安排，人工閱卷等主觀因素，是教職工期中或是期末的一項重要任務，從出卷、考試到批卷，時間長，工作量大，嚴重阻礙了我院信息化建設的發展。我院有數千名學生，每次考試時，監考教師和考場都不能滿足需要。建立一套具備現代化的、新型的在線考試系統是尤為重要。

我國在線考試系統在一些專業技能考試上應用較為成熟，如國家普通話等級考試、計算機高新考試、車輛駕考中的科目1 科目四考試等，而在高職院校中應用于通識課、專業課的在線考試系統還不太成熟，目前缺乏通用性，所以本考試系統在設計上，更強調階段性，高校通用性及簡捷性的測試方式。

1 在線考試系統的技術分析

Spring Boot是一個簡化Spring開發的框架。它整合了很多優秀的框架，去繁就簡，立即就能創建一個獨立的，產品級的應用。此項目中使用Spring Boot時只需要配置相應的Spring Boot就可以用所有的Spring組件，不用自己手動的去寫一堆xml配置然后進行配置[1]。Spring Boot將所有的功能場景都抽取出來，做成一個個的starters（啟動器），只需要在項目里面引入這些starter 相關場景的所有依賴都會導入進來。要用什么功能就導入什么場景的啟動器。

Bootstrap簡潔、直觀、強悍的前端開發框架，讓Web開發更迅速、是最受歡迎的 HTML、CSS 和 JS 框架，用于開發響應式布局。編譯后的文件可以快速應用于任何web項目[2]。

在線考試系統總體架構主要包括三層，分別是表示層、業務邏輯層和數據訪問層。表現層主要是用戶通過瀏覽實現各個界面的操作，如用戶添加、測驗查詢、題庫查看等。業務層主要包括題庫管理、試卷管理、考生信息管理、成績管理、考試管理、題型管理等具體的業務功能[3]。數據訪問層主要是對用戶信息及操作信息、題庫數據、試卷數據、成績數據等進行處理及存儲，三者的相互交互構建了在線考試系統的總體架構[3]。

2 在線考試系統功能設計

本設計采用框架開發法，使用Bootstrap+spring boot框架來開發在線考試系統，完善系統考試功能。以問卷的形式獲知管理員、教師、學生的需求，并且獲取用戶體驗數據，作為反饋系統設計開發的參考數據。系統功能需求上，擁有簡潔美觀的操作界面。本系統的用戶可分為管理員、學生和教師用戶三類。他們之間的功能如圖1所示：

圖1 在線考試系統功能圖

管理員功能：主要負責基本資料，科目，用戶，成績，試卷、系部的管理等；管理員可以對用戶的資料進行查詢、刪除。

教師功能：包括試卷管理，題庫管理，成績管理。可以從課程，各種題型的數量等方面對某份試卷提出一定的要求并生成試卷。同時，還可以對庫中已有的試卷進行修改和刪除，添加新試卷等。教師可以設置題干、答案等屬性。教師登錄要負責對題型、試卷生成，閱卷管理等，對學生做錯的題目進行分析。可以查看考生的考試成績，并針對不同的課程進行成績統計，包括考試人數、最高分、最低分、平均分以及各分數段得分人數等。

學生功能：可在線考試及成績查詢。考生可在規定時間內進行在線考試，考試結束后，系統會根據系統題庫中已有的標準答案進行自動評卷；考生可在線查詢以前參加過的各科考試成績。

3 系統模塊設計

（1）用戶管理

注冊登錄：用戶通過頁面點擊注冊，使用郵箱或手機號碼，選擇身份注冊，用戶輸入正確的用戶名與密碼，系統自動通過搜索數據庫進行身份認證，只有找到相應的用戶信息才能進入系統，進入系統前，系統又會自動搜索數據庫，根據此用戶是學生還是教師進行判斷，進入到相應的考試系統界面中。個人信息修改：進入到個人信息中心，可修改個人信息，如姓名、電話號碼、密碼等修改。用戶通過前端以學生、教師的身份登錄系統，管理員由指定的地址進入后端，管理員不能進入前端，學生與教師不能進入后端，保證系統的安全性。學生用戶可以修改自己的個人信息與個人密碼，學生信息以班級為單位，任課教師可將所任課的班級學生信息批量導入，也可以通過老師的邀請碼登入任課教師的班級[4]。教師用戶可以修改個人信息，試卷信息，科目信息等；管理員可通過后臺修改學生用戶與教師用戶的信息、試卷信息、科目信息及成績管理等。用戶信息表如表1所示。

表1 用戶信息表

用戶注冊方法

@ApiOperation（value = "用戶注冊"， notes = "用戶注冊信息"， response = UserRegristForm.class）

@ApiImplicitParams（{

@ApiImplicitParam（paramType = "query"， name = "username"， value = "用戶名"， required = true， dataType = "String"），

@ApiImplicitParam（paramType = "query"， name = "email"， value = "郵箱"， required = true， dataType = "String"），

@ApiImplicitParam（paramType = "query"， name = "telphone"， value = "手機號碼"，required = true， dataType = "String"），

@ApiImplicitParam（paramType = "query"， name = "password"， value = "密碼"， required = true， dataType = "String"），}）

@PostMapping（value = "/register"）

public String handleUserCreateForm（Model model， @Valid @ModelAttribute（"form"） UserRegristForm form， BindingResult bindingResult） {

if （bindingResult.hasErrors（）） {

model.addAttribute（"error"， bindingResult.getFieldError（）.getDefaultMessage（））;

return "register";} else if （userResitory.findByEmail（form.getEmail（）） != null） {

model.addAttribute（"error"， "郵箱已被注冊"）; return "register";}

else if （userResitory.findByTelPhone（form.getTelphone（）） .isPresent（）） {

model.addAttribute（"error"， "手機號已被注冊"）; return "register";}

else if （!form.getPassword（）.equals（form.getRepassword（））） {

model.addAttribute（"error"， "密碼輸入不一致"）; return "register";}

User user = userService.registerNewAccount（form）;

（2）科目信息管理：對考試科目與對應課程進行設置

表2 科目表（Subject）

科目信息顯示與修改代碼如下：

（3）試卷信息管理

試題類型分為單選題、多選題、判斷題、填空題和分析題，教師逐個題型或逐題上傳生成試卷及對自己上傳的試卷進行修改、刪除、查詢.；試卷信息主要包括科目類型、試題類型與試題題目的建設3個方面。主要是由任課教師完成。任課教師需要在數據庫中增加考試科目，也可以對現有的科目進行修改、刪除，并將數據保存在試題表單數據庫中[4]。添加試卷及生成試卷實現代碼如表3所示：

表3 試卷信息表

添加試卷信息功能部分代碼如下：

@GetMapping（value="/examAddition"）

public String AddExam（Model model）{

List subjectList=subjectRepository.findAll（）;

log.info（"subjectList科目顯示"+JSON.toJSONString（subjectList））;

model.addAttribute（"subjects"， subjectList）; return "examAddition";}

@PostMapping（value="/examAddition"）

public String AddExam（Model model， @ModelAttribute（"form"） AddExamForm addExamForm）{ Exam save= iExamService.save（addExamForm）;

if （save != null） { model.addAttribute（"result"， "成功"）;}

else { model.addAttribute（"result"， "失敗"）;}

return "examAddition";}

（4）試卷評審管理

學生通過選擇科目類別，點擊開始考試按鈕，系統據設計好的各題題量自動出題，學生即可在線考試，在考試過程中，可以反復提交答案，以最后一次提交為準。點擊結束考試，或者考試時間結束的時候，系統停止考試，自動評分。評審時，單選題、多選題、判斷題、填空通過與數據庫的答案一一匹配來評審，問答題通過模糊匹配，搜索與數據庫標準答案的關鍵字來進行評審。教師也可手動修改評分。使用機器學習中的knn算法和貝葉斯算法，針對學生考試情況進行分析，在學生下一次考試，或是下一屆考生時，基于前幾次的錯題知識點分析，系統自動出卷的內容會針對這些錯題知識點而更加關注[5]。評審表信息如表4所示。

表4 評審表

自動評審試卷代碼如下：

Public String taking（Model model，@ModelAttribute（"addQuestion"） TakingExamForm takingExam，HttpServletRequest httpRequest）

{HttpSession session = httpRequest.getSession（）;List answerList = new ArrayList<>（）; Integer uid = （Integer） session.getAttribute（"uid"）;

Integer examid = Integer.valueOf（httpRequest.getParameter（"examid"））;

Listsingle= questionRepository.findAllByExamIdAndQuestionTypeOrderByQuestionTypeAsc（examid， "1"）;

Listdx= questionRepository.findAllByExamIdAndQuestionTypeOrderByQuestionTypeAsc（examid， "2"）;

Listtk= questionRepository.findAllByExamIdAndQuestionTypeOrderByQuestionTypeAsc（examid， "3"）;

Listpd= questionRepository.findAllByExamIdAndQuestionTypeOrderByQuestionTypeAsc（examid， "4"）;

Listwd= questionRepository.findAllByExamIdAndQuestionTypeOrderByQuestionTypeAsc（examid， "5"）;

表5 考生單選題答案表（UserSingleAnsewr）（多選題類同）

字段名類型說明 id自動編號主鍵碼 userId文本用戶ID examIdVarchar試題ID userSingleAnswerint考生選擇答案

（5）考生成績管理

學生可以查看成績、導出成績、自己的成績在班級的排名，教師可以查看班級學生的考試成績、每個學生的成績排名、導出成績。成績表如表6所示。

表6 成績表

考生成績顯示：

public String showScoreAndExamName（HttpServletRequest servletRequest， Model model） {

HttpSession session = servletRequest.getSession（）;

Integer uid = （Integer） session.getAttribute（"uid"）;

List scoreDos = new ArrayList<>（）;

List scores = scoreRepository.findAllByUserId（uid）; for （Score score ： scores）{

Exam examname = examRepository.findAllById（score.getExamId（））;

log.info（"examnamevexamnameexamname11"+ JSON.toJSONString（examname））;

ScoreDo scoreDo = new ScoreDo（）;scoreDo.setExamname（examname.getExamName（））;

scoreDo.setScore（score.getScore（））;scoreDos.add（scoreDo）; model.addAttribute（"scores"，scoreDos）; log.info（"scoreDo成績信息為："+scoreDo）; }

return "/studentscore";}}

（6）系統的非功能性分析

學生信息、試卷信息與成績的管理對系統的安全性及保密性是較高的要求。學生在校成績是終身存檔，系統需要存儲大量的試卷數據、用戶信息，因此需對數據庫進行優化；在可維護性上，系統需要有自動備份的功能，防止各種意外的產生而造成數據丟失；安全性：在數據庫中，對用戶密碼使用MD5加密，防止因數據庫被人攻擊，而對用戶造成的直接損失，管理員只能在特定的網絡中才能登錄后臺系統，防止網絡在傳輸中，被人抓包，導致數據泄露[6]。

4 系統部署環境

在線考試系統的特殊性，確保考試期間出現意外如斷電等，能快速恢復相關信息。完善錯誤處理機制構建，避免單點故障、服務器采用集中管理、統一配置。當某些應用訪問量升高時，通過增加服務器節點達到整個服務器集群的性能穩定，該Web前端系統基于Tomcat主機平臺，提供服務端程序運行環境。

5 總結

本在線考試系統應用Bootstrap+spring boot框架進行開發，采用B/S 架構，在實現考試功能的基礎上不用過多的安裝考試客戶端，滿足了原有考試教學輔助能力不足的問題，考試端無須特殊的計算機硬件要求，節省考試成本，提高工作效率，為學院校園信息化、示范性建設添磚加瓦，本系統不僅能實現選擇題、判斷題等客觀題的自動閱卷，還能實現主觀題的自動閱卷，可通過掃描班級二維碼加入班級中。隨著系統的應用，繼續加強對主觀題的自動評卷及成績管理這個模塊，在應用中發現問題，改進問題，使該系統應用范圍更廣，更好地為學院教育教學提供便捷的服務。

[1]鐘葉.Bootstrap框架在響應式Web開發中的應用與研究[J].科技廣場，2017（02）.

[2]丁蓮，張玲，杜巍.基于BootStrap的WEB前端開發應用研究[J].電子制作，2016（20）.

[3]史永哲.大型在線考試系統的設計與實現[J].電子設計工程，2016（07）.

[4]金圣道.在線考試及試卷分析系統的設計與實現[J]. 電子技術與軟件工程，2018（07）.

[5]葉惠仙，黃偉剛，沈文杰.基于ThinkPHP框架的高職校在線考試系統的設計與實現[J].網絡安全技術與應用，2019（06）.

[6]譚敏，范強，童宇.在線考試系統的研究與設計[J].信息通信，2017（09）.

院級科技類科研項目（2019JS013）。