PAGEI摘要隨著科學技術(shù)的進步和進步，數(shù)字信息技術(shù)在這個時代的使用已經(jīng)全面擴展。學生在線考試系統(tǒng)可以幫助大多數(shù)考生，并提供一個新的學習和考試環(huán)境。在線考試系統(tǒng)充分利用了Brower/Server結(jié)構(gòu)的特點，實現(xiàn)了將考試系統(tǒng)轉(zhuǎn)移到互聯(lián)網(wǎng)的功能REF_Ref163942261\r\h[1]。主要用到的技術(shù)是IDEA2023.1、VSCode、Navicat16、Postman，設(shè)計出了各種功能。本系統(tǒng)主要有用戶有效身份登錄、用戶管理、在線考試、管理員登錄及管理等功能REF_Ref163848969\r\h[2]。主要以天藍色為底色，采用左右框架式，頁面簡單大方。本文主要介紹系統(tǒng)的總體設(shè)計以及著重研究了系統(tǒng)的登錄、在線的考試系統(tǒng)、評分系統(tǒng)、在線的管理系統(tǒng)和自動閱卷系統(tǒng)等的實現(xiàn)REF_Ref163848987\r\h[3]，并在其基礎(chǔ)上建立了后臺數(shù)據(jù)庫。關(guān)鍵詞：B/S架構(gòu)；在線考試；MySQL數(shù)據(jù)庫；ASP.NET無紙化考試ABSTRACTWiththeadvancementandadvancementofscienceandtechnology,theuseofdigitalinformationtechnologyinthiserahasbeenfullyexpanded.Thestudentonlineexamsystemcanhelpmosttesttakersandprovideanewlearningandtestingenvironment.Inordertoreducetheworkloadofteachersandimproveworkefficiency,andstimulatestudents'interestinlearning.TheonlineexaminationsystemmakesfulluseofthecharacteristicsREF_Ref163848987\r\h[3]oftheBrower/ServerstructureandrealizesthefunctionoftransferringtheexaminationsystemtotheInternet.ThemaintechnologiesusedareIDEA2023.1,VSCode,Navicat16,Postman,andvariousfunctionsaredesigned.Thesystemmainlyhasthefunctionsofuservalididentitylogin,usermanagement,onlineexamination,administratorloginandmanagement.Itismainlybasedonskyblue,withleftandrightframes,andthepageissimpleandgenerous.Thispapermainlyintroducestheoveralldesignofthesystemandfocusesontheimplementationofthesystem'slogin,onlineexaminationsystem,scoringsystem,onlinemanagementsystemandautomaticmarkingsystem,andestablishesabackgrounddatabaseonthebasisofit.Keywords:B/SArchitecture,OnlineExams,MySQLDatabases,ASP.NETPaperlessExams目錄第1章緒論 11.1選題背景與意義 11.2國內(nèi)外研究現(xiàn)狀 11.3本文研究的主要內(nèi)容 1第2章系統(tǒng)分析 32.1可行性分析 32.1.1技術(shù)可行性分析 32.1.2操作可行性分析 32.2需求描述 42.3需求分析 42.3.1用例圖 42.3.2用例文檔說明 6第3章系統(tǒng)概要設(shè)計 103.1系統(tǒng)功能設(shè)計 103.2數(shù)據(jù)庫設(shè)計 113.2.1概念模型設(shè)計 113.2.3數(shù)據(jù)庫表設(shè)計 17第4章詳細設(shè)計與實現(xiàn) 224.1靜態(tài)模型 224.1.1邊界類圖 224.1.2控制類圖 224.1.3實體類圖 234.1.4順序圖 234.2管理員子系統(tǒng)的實現(xiàn) 254.2.1登錄 254.2.2考試管理模塊 264.2.3編輯（修改）考試信息模塊 274.2.4刪除考試信息模塊 284.2.5添加考試模塊 294.2.6題庫管理模塊 304.2.7成績管理模塊 344.2.8查詢學生信息模塊 354.2.9編輯（修改）學生信息模塊 364.2.10刪除學生信息模塊 374.2.11添加學生信息模塊 384.2.12編輯（修改）教師信息模塊 394.2.13添加教師信息模塊 404.3教師子系統(tǒng)的實現(xiàn) 414.4學生子系統(tǒng)的實現(xiàn) 414.4.1答題模塊 414.4.2跳轉(zhuǎn)到考試頁面模塊 424.4.3獲取試卷信息模塊 434.4.4考試成績模塊 444.4.5提交成績模塊 45第5章系統(tǒng)測試 475.1測試簡介 475.2測試內(nèi)容 475.2.1登錄 475.2.2試卷管理 485.2.3答題考試 49結(jié)論 50參考文獻 51致謝 52第1章緒論選題背景與意義學生在線考試系統(tǒng)是基于互聯(lián)網(wǎng)平臺的無紙化考試在線系統(tǒng)。傳統(tǒng)的紙筆考試方式時間長、效率低、資源消耗高，逐漸無法滿足現(xiàn)代教育的需要。作為一種新型的考試方法，在線考試系統(tǒng)高效、方便和環(huán)保，越來越多被使用。節(jié)省大量的人力和物力，還可以實現(xiàn)考試的無紙化和自動化，提高教學管理的效率。然而，目前許多學生在線考試系統(tǒng)存在安全性不足、系統(tǒng)不穩(wěn)定、用戶體驗差等問題?？紤]到這一點，本次畢業(yè)設(shè)計旨在開發(fā)更完善的學生在線考試系統(tǒng)。意義體現(xiàn)在以下幾個方面：適應教育信息化趨勢：教育信息化快速發(fā)展，學生在線考試系統(tǒng)順應趨勢，提供新的考試方法，提高了考試效率和標準化水平。提高測試的準確性：由于在線測試系統(tǒng)具有智能監(jiān)控功能，可以通過遠程視頻監(jiān)控來確保測試的準確性。促進教育公平：在線考試系統(tǒng)可以讓學生有靈活的考試空間和地點選擇，方便考生參加考試，有效地緩解地理和時間等因素對考試的限制，促進教育公平。\o"清空"\o"添加到收藏夾"互聯(lián)網(wǎng)技術(shù)的不斷發(fā)展和推廣將使這種無紙化考試方法越來越受人們的歡迎和應用。國內(nèi)外研究現(xiàn)狀國內(nèi)外研究現(xiàn)狀主要體現(xiàn)在以下幾個方面：國內(nèi)紙筆考試仍然是一種傳統(tǒng)的考試方法，在這種模式下，每個考試組織都必須經(jīng)過五個環(huán)節(jié)：人工閱卷、考生考試、人工批改、試卷分析、考試結(jié)果評估。顯然，隨著考試的多樣性增加，對學生的要求和教師的工作量也會增加，而這類工作非常繁瑣。當前世界各國都高度重視教育發(fā)展，基于Web的考試系統(tǒng)體系結(jié)構(gòu)和功能設(shè)計REF_Ref163849043\r\h[4]是他們研究的重點之一。許多研究人員針對不同的實施場景和需求，提供了各種不同的系統(tǒng)架構(gòu)和功能設(shè)計方案，包括云處理、大數(shù)據(jù)、人工智能等，以及針對不同特定領(lǐng)域、機構(gòu)和部門的自適應考試系統(tǒng)。努力使教育在信息時代處于有利地位，走在社會發(fā)展的前列。因此，學生在線考試系統(tǒng)有著廣闊的發(fā)展前景。1.3本文研究的主要內(nèi)容論文研究學生在線考試系統(tǒng)目的是開發(fā)一個易于管理和維護、具有一定通用性的教學導向考試系統(tǒng)REF_Ref163849050\r\h[5]，以滿足多課程測試和評估的要求。為了滿足系統(tǒng)在進度、安全性、跨平臺、可擴展性、可移植性、分布式等方面的要求，系統(tǒng)整體架構(gòu)采用先進的基于B/S的三層架構(gòu)：學生層、業(yè)務邏輯層、數(shù)據(jù)庫層REF_Ref163849063\r\h[6]。創(chuàng)建包含試題樣本庫的后臺數(shù)據(jù)庫，教師可以在庫中添加，修改和刪除試題；可以充分利用題庫中的試題，通過系統(tǒng)隨機組卷，并在指定的時間內(nèi)發(fā)布試卷；學生在提交試卷后收到答案，并分析考試中答錯的題；教師在考試結(jié)束后會收到學生發(fā)送到系統(tǒng)的反饋，能夠輕松查詢和分析結(jié)果REF_Ref163849111\r\h[7]，匯編學生考試錯誤的統(tǒng)計數(shù)據(jù)，以供進一步教學。此外，它還有監(jiān)測的界面，最大限度地降低不當行為的發(fā)生率，并具有安全和保密機制。學生在線考試系統(tǒng)以其獨特的優(yōu)勢在教育中發(fā)揮重要作用。利用計算機技術(shù)，對試題庫進行存儲和管理REF_Ref163849141\r\h[8]，并由計算機完成智能組卷、標準化考試、試卷評估等工作，取代傳統(tǒng)的紙筆考試方法。主要體現(xiàn)在：方便快捷的出卷、準確快速的閱卷、科學直觀的成績分析需要測試的知識和其他相關(guān)條件REF_Ref163849152\r\h[9]；成績分析和統(tǒng)計由計算機自動完成，學生成績可以輕松詢問、打印，統(tǒng)計和分析由計算機自動執(zhí)行，可以輕松處理，如查詢、打印、統(tǒng)計和學生成績分析REF_Ref163849167\r\h[10]。學生在線考試系統(tǒng)實現(xiàn)真正意義上的無紙化考試，其前后端分離架構(gòu)有許多優(yōu)點，如快速、方便、高效和安全，可以顯著提高可靠性和有效性REF_Ref163849192\r\h[11]。第2章系統(tǒng)分析2.1可行性分析2.1.1技術(shù)可行性分析1.使用技術(shù)：開發(fā)工具：IDEA2023.1、VSCode、Navicat16、Postman開發(fā)環(huán)境：Java（JDK8）、Mysql（8.0.33）管理：Git（分布式管理）、Maven（后端版本管理）、webpack(前端工程化)后端框架：SpringBoot2，Spring、SpringMVC、Mybatis、MybatisPlus、Druid前端：Vue2、Vuex(3)、Element-UI、axios、echarts（可視化圖表）2.Vue技術(shù)：Vue.js可以說是MVVM架構(gòu)的最佳實踐，JavaScriptMVVM庫，一組用于創(chuàng)建學生界面的漸進式框架，具有簡單的APIREF_Ref163994837\r\h[12]，每個框架都有一些強弱特性，其強度影響其在業(yè)務開發(fā)中的使用REF_Ref163994837\r\h[12]。3.Springboot技術(shù)：特征：SpringBootStarter收集常用的依賴組，并將它們合并為一個依賴項，以便可以立即添加到項目Maven或Gradle構(gòu)造中。SpringBoot使用JavaConfig來配置Spring，并提供了大量的注釋，這大大提高了工作效率，例如@Configuration和@bean-notes的組合，這是基于@Configuration完成類掃描，基于@bean-notes將返回值注入到ROK容器中REF_Ref163944157\r\h[13]。SpringBoot的自動配置功能利用Spring條件配置支持，合理猜測應用程序所需的bean，并自動進行配置REF_Ref163944157\r\h[13]。SpringBoot下面有三個內(nèi)置的容器，Tomcat、Jetty。要啟動SpringBoot項目，我們只需要一個Java運行時環(huán)境，并且可以將SpringBoot工程制作成一個jar包。2.1.2操作可行性分析學生在線考試系統(tǒng)的操作可行性主要涉及以下幾個方面：1.接口設(shè)計：系統(tǒng)前端界面美觀簡潔，布局合理有序。2.工作流程：系統(tǒng)設(shè)計合理，可以讓學生快速了解并使用。同時，系統(tǒng)提供了良好響應，使學生清楚地了解操作的現(xiàn)狀和結(jié)果。3.安全性：系統(tǒng)使用非對稱加密算法來保護學生信息，確保學生信息的安全。還檢查學生輸入的數(shù)據(jù)的有效性，以防止不當行為或惡意活動導致數(shù)據(jù)丟失。4.兼容性：該平臺應與不同的操作系統(tǒng)、瀏覽器和設(shè)備兼容，在不同的設(shè)備上也不會出現(xiàn)界面錯位或顯示異常的情況?？傊瑢W生在線考試系統(tǒng)的可行性考慮了學生體驗、工作流程、安全性和兼容性等因素，以提供高質(zhì)量的學生體驗和服務。2.2需求描述在線考試系統(tǒng)主要的需求包括以下幾個方面REF_Ref163849290\r\h[14]：1.登錄功能確保系統(tǒng)的安全。2.在線的考試系統(tǒng)，主要是發(fā)卷、收集答案、保存并記錄REF_Ref163849525\r\h[15]。3.管理系統(tǒng)，即在數(shù)據(jù)庫中對學生進行學生管理和測試，涵蓋瀏覽學生、添加和刪除學生以及更改學生密碼的整個系統(tǒng)REF_Ref163849549\r\h[16]。4.后臺系統(tǒng)，可以自動改進和評估學生在線考試系。5.自動評分系統(tǒng)，學生交卷后自動評分REF_Ref163849566\r\h[17]。2.3需求分析2.3.1用例圖（1）總用例圖如圖2.1。圖2.1系統(tǒng)總用例圖（2）學生在線考試系統(tǒng)中管理員的用例詳情如圖2.2。圖2.2管理員用例圖學生在線考試系統(tǒng)中學生的用例詳情如圖2.3所示。圖2.3普通學生用例圖學生在線考試系統(tǒng)中教師的用例詳情如圖2.4所示。圖2.4教師用例圖2.3.2用例文檔說明以下展示學生在線考試系統(tǒng)核心功能的用例情況。表2.1登錄用例用例名登錄用例編號1簡要描述系統(tǒng)管理員登錄到學生在線考試系統(tǒng)管理員端參與者管理員，教師，學生涉眾管理員：登錄相關(guān)用例注冊前置條件系統(tǒng)存在該管理員賬戶及密碼后置條件系統(tǒng)提示“登錄成功”，進入后臺系統(tǒng)首頁

續(xù)表2.1登錄用例基本事件流1）系統(tǒng)學生填入賬號、密碼2）系統(tǒng)學生點擊登錄，提交表單3）系統(tǒng)檢查賬戶和密碼是否準確（A-1）4）系統(tǒng)得到菜單權(quán)限，顯示頁面5）系統(tǒng)將使用公鑰對數(shù)據(jù)進行加密處理，響應端以私鑰解密并匹配6）如果學生名密碼匹配成功，跳轉(zhuǎn)到后端控制臺系統(tǒng)主頁7）如果學生名與密碼不匹配，則系統(tǒng)無響應備選事件流A-1若是系統(tǒng)學生在系統(tǒng)數(shù)據(jù)庫中不存在，系統(tǒng)不響應，此用例結(jié)束。補充約束數(shù)據(jù)需求學生表表2.2考試管理信息用例用例名管理考試信息用例編號2簡要描述管理員登錄到后端控制臺系統(tǒng)，管理考試信息。參與者管理員，教師涉眾管理員，教師相關(guān)用例登錄前置條件學生已成功登錄到學生在線考試系統(tǒng)后臺系統(tǒng)后置條件刷新后臺系統(tǒng)考試信息界面基本事件流1）系統(tǒng)管理員輸入賬戶和密碼，登錄系統(tǒng)；2）系統(tǒng)驗證身份；3）系統(tǒng)顯示管理考試信息；4）管理員可選擇編輯管理考試信息或退出。備選事件流無補充約束數(shù)據(jù)需求學生表表2.3查詢所有試卷信息用例用例名查詢所有試卷信息用例編號3簡要描述學生進入學生在線考試系統(tǒng)的學生端，查詢所有試卷信息。參與者學生涉眾學生續(xù)表2.3查詢所有試卷信息用例相關(guān)用例無前置條件學生進入學生在線考試系統(tǒng)的學生端，查詢所有試卷信息。后置條件學生成功查詢所有試卷信息基本事件流1）學生進入學生在線考試系統(tǒng)的學生端2）學生點擊“查詢所有試卷信息”查看所有試卷信息備選事件流無補充約束數(shù)據(jù)需求試卷表表2.4查詢考科目的分數(shù)信息用例用例名查詢已考科目的分數(shù)信息用例編號4簡要描述學生進入學生在線考試系統(tǒng)的學生端，查詢已考科目的分數(shù)信息。參與者學生涉眾學生相關(guān)用例無前置條件學生進入學生在線考試系統(tǒng)的學生端，查詢已考科目的分數(shù)信息。后置條件學生成功查詢已考科目的分數(shù)信息基本事件流1）學生進入學生在線考試系統(tǒng)的學生端2）學生點擊“查詢已考科目的分數(shù)信息”查看已考科目的分數(shù)信息備選事件流無補充約束數(shù)據(jù)需求分數(shù)表表2.5自動打分用例用例名自動打分用例編號5簡要描述通過系統(tǒng)自動給學生打分參與者教師涉眾教師相關(guān)用例進行答題考試前置條件學生進入學生在線考試系統(tǒng)的學生端，進行答題考試。表2.6答題考試用例用例名答題考試用例編號6簡要描述學生通過系統(tǒng)進行答題考試參與者學生涉眾學生相關(guān)用例無前置條件學生進入學生在線考試系統(tǒng)的學生端，查詢所有試卷信息。后置條件通過系統(tǒng)自動給學生打分基本事件流1）學生進入學生端2）學生點擊試卷進行答題備選事件流無補充約束無

第3章系統(tǒng)概要設(shè)計本章主要介紹學生在線考試系統(tǒng)的系統(tǒng)功能設(shè)計和數(shù)據(jù)庫設(shè)計。3.1系統(tǒng)功能設(shè)計學生在線考試系統(tǒng)主要分為后臺管理模塊和前端宣傳模塊REF_Ref163849290\r\h[14]。后臺管理模塊為管理員通過權(quán)限控制進行訪問的，用于管理學生在線考試系統(tǒng)；前端宣傳界面可供普通學生訪問，用于了解學生在線考試制度和申請試卷資源。系統(tǒng)功能模塊如圖3.1所示。圖3.1系統(tǒng)的頁面邏輯結(jié)構(gòu)示意圖管理員模塊功能如下：（1）考試管理（2）題庫管理（3）成績查詢（4）學生管理（5）教師管理與管理員模塊類似，但是管理員能編輯教師信息。教師模塊功能如下：（1）考試管理（2）題庫管理（3）成績查詢（4）學生管理學生模塊功能如下：（1）我的試卷（2）我的練習（3）我的分數(shù)（4）我的留言如圖所示：圖3.2后臺管理功能模塊圖3.2數(shù)據(jù)庫設(shè)計3.2.1概念模型設(shè)計（1）管理員實體屬性圖如圖3.3所示。圖3.3管理員實體屬性圖（2）學生實體屬性圖如圖3.4所示。圖3.4學生實體屬性圖（3）教師實體屬性圖如圖3.5所示。圖3.5教師實體屬性圖（4）留言實體屬性圖如圖3.6所示。圖3.6留言實體屬性圖（5）回復實體屬性圖如圖3.7所示。圖3.7回復實體屬性圖（6）考試管理實體屬性圖如圖3.8所示。圖3.8考試管理實體屬性圖（7）試卷管理實體屬性圖如圖3.9所示。圖3.9試卷管理實體屬性圖（8）填空題題庫實體屬性圖如圖3.10所示。圖3.10填空題題庫實體屬性圖（9）判斷題題庫實體屬性圖如圖3.11所示。圖3.11判斷題題庫實體屬性圖（10）選擇題題庫實體屬性圖如圖3.12所示。圖3.12選擇題題庫實體屬性圖（11）成績管理實體屬性圖如圖3.13所示。圖3.13成績管理實體屬性圖圖3.14系統(tǒng)E-R圖3.2.3數(shù)據(jù)庫表設(shè)計根據(jù)上述學生在線考試系統(tǒng)的概念模型設(shè)計和關(guān)系模型設(shè)計，得到本系統(tǒng)的數(shù)據(jù)庫表，于MySQL中創(chuàng)建REF_Ref163946874\r\h[20]，一共有：管理員信息表（admin）、學生信息表（student）、教師信息表（teacher）、留言表（message）、回復表（reply）、考試管理表（exam_manage）、成績管理表（score）、填空題題庫（fill_question），試卷管理表（paper_manage），判斷題題庫表（judge_question），選擇題題庫表（multi_question）管理員信息表（admin）。表結(jié)構(gòu)如表3.1所示。表3.1管理員表admin學生信息表（student）。表結(jié)構(gòu)如表3.2所示。表3.2學生信息表（student）（3）教師信息表（teacher）。表結(jié)構(gòu)如表3.3所示。表3.3教師信息表（teacher）（4）留言表（message）。表結(jié)構(gòu)如表3.4所示。表3.4留言表（message）（5）回復表（reply）。表結(jié)構(gòu)如表3.5所示。表3.5回復表（reply）（6）考試管理表（exam_manage）。表結(jié)構(gòu)如表3.6所示。表3.6考試管理表（exam_manage）（7）試卷管理表（paper_manage）。表結(jié)構(gòu)如表3.7所示。表3.7試卷管理表（paper_manage）（8）填空題題庫（fill_question）。表結(jié)構(gòu)如表3.8所示。表3.8填空題題庫（fill_question）（9）判斷題題庫表（judge_question）。表結(jié)構(gòu)如表3.9所示。表3.9判斷題題庫表（judge_question）選擇題題庫表（multi_question）。表結(jié)構(gòu)如表3.10所示。表3.10選擇題題庫表（multi_question）（11）成績管理表（score）。表結(jié)構(gòu)如表3.11所示。表3.11成績管理表（score）第4章詳細設(shè)計與實現(xiàn)本章主要介紹學生在線考試系統(tǒng)的詳細設(shè)計與實現(xiàn)，包括后臺管理模塊詳細設(shè)計與實現(xiàn)和硬件設(shè)備模塊詳細設(shè)計與實現(xiàn)REF_Ref163946874\r\h[21]。4.1靜態(tài)模型4.1.1邊界類圖依據(jù)需求，分析系統(tǒng)的功能，該系統(tǒng)的邊界類如圖4.1所示。圖4.1系統(tǒng)邊界類圖4.1.2控制類圖根據(jù)需求功能分析，得到系統(tǒng)的控制類。該系統(tǒng)的控制類如圖4.2所示。圖4.2系統(tǒng)控制類圖4.1.3實體類圖根據(jù)需求功能分析，得到系統(tǒng)的實體類。該系統(tǒng)的實體類如圖4.3所示。圖4.3系統(tǒng)實體類圖4.1.4順序圖（1）登錄順序圖如圖4.4所示。圖4.4登錄順序圖（2）查詢考試信息順序圖如圖4.5所示。圖4.5查詢考試信息順序圖（3）修改密碼順序圖，如圖4.6所示。圖4.6修改密碼順序圖4.2管理員子系統(tǒng)的實現(xiàn)4.2.1登錄后端接口接口：/api/login前端訪問接口：/#/運行代碼如下：publicRlogin(@RequestBodyLoginlogin,HttpServletResponseresponse){

Integerusername=login.getUsername();

Stringpassword=login.getPassword();

AdminadminRes=loginService.adminLogin(username,password);

if(adminRes!=null){

Cookietoken=newCookie("rb_token",adminRes.getCardId());

token.setPath("/");

Cookierole=newCookie("rb_role","0");

role.setPath("/");

//將cookie對象加入response響應

response.addCookie(token);

response.addCookie(role);

returnApiResultHandler.buildApiResult(200,"請求成功",adminRes);

}

}運行結(jié)果如圖4.7圖4.7登錄界面4.2.2考試管理模塊后端接口：/api/exams查詢（精確查詢、模糊查詢，分頁查詢）所有考試列表：分頁查詢:后端接口：/api/exams/{page}/{size}使用MybatisPlus實現(xiàn)importcom.baomidou.mybatisplus.core.metadata.IPage;

importcom.baomidou.mybatisplus.extension.plugins.pagination.Page;

@Select("select*fromexam_manage")IPage<ExamManage>findAll(Pagepage);methods:{

getExamInfo(){//分頁查詢所有試卷信息

this.$axios(`/api/exams/${this.pagination.current}/${this.pagination.size}`).then(res=>{

this.pagination=res.data.data

}).catch(error=>{

})

},

//改變當前記錄條數(shù)

handleSizeChange(val){

this.pagination.size=val

this.getExamInfo()

},

//改變當前頁碼，重新發(fā)送請求

handleCurrentChange(val){

this.pagination.current=val

this.getExamInfo()

},運行結(jié)果如圖4.8圖4.8查詢考試列表界面模糊查詢：使用MybatisPlus實現(xiàn)，直接調(diào)用/api/eaxms接口，渲染至頁面即可，代碼與精確查詢類似。如圖4.9圖4.9查詢考試列表界面4.2.3編輯（修改）考試信息模塊后端接口：/api/examManagePaperId返回一個ExamMessage的Jons對象，有輸入修改，無輸入則不變@Update("major=#{major},institute=#{institute},totalScore=#{totalScore},"+"type=#{type},tips=#{tips}whereexamCode=#{examCode}")intupdate(ExamManageexammanage);運行結(jié)果如圖4.10圖4.10編輯試卷信息界面4.2.4刪除考試信息模塊后端接口：/api/exams/{examCode}根據(jù)考試的代號（examCode）進行刪除整條數(shù)據(jù)@Delete("deletefromexam_managewhereexamCode=#{examCode}")

intdelete(IntegerexamCode);deleteRecord(examCode){var_this=this;

this.$confirm(

method:'delete',

}).then(res=>{

this.getExamInfo()

})運行結(jié)果如圖4.11圖4.11刪除考試信息界面4.2.5添加考試模塊后端接口：/api/exams字段有則加，無則為空@Options(useGeneratedKeys=true,keyProperty="examCode")@Insert("insertintoexam_manage(description,source,paperId,examDate,totalTime,grade,term,major,institute,totalScore,type,tips)"+"values(#{description},#{source},#{paperId},#{examDate},#{totalTime}"+"#{grade},#{term},#{major},#{institute},#{totalScore},#{type},#{tips})")intadd(ExamManageexammanage);運行結(jié)果如圖4.12圖4.12添加考試界面4.2.6題庫管理模塊查詢所有題庫IPage<AnswerVO>findAll(Pagepage);getAnswerInfo(size,current){

if(typeofsize==='number'&&!isNaN(size)){

this.pagination.size=size;

}

if(typeofcurrent==='number'&&!isNaN(current)){

this.pagination.current=current;

}else{

this.pagination.current=1;

}

varsubject=this.subject;

if(this.subject.trim()==""){

subject="@";

}

varsection=this.section;

if(this.section.trim()==""){

section="@";

}

varquestion=this.question;

if(this.question.trim()==""){

question="@";

}

this.$axios(

`/api/answers/${this.pagination.current}/${this.pagination.size}/${subject}/${section}/${question}`

)

.then(res=>{

this.pagination=res.data.data;

})

.catch(error=>{});},//改變當前記錄條數(shù)

handleSizeChange(val){

this.getAnswerInfo(val);},//改變當前頁碼，重新發(fā)送請求

handleCurrentChange(val){

this.getAnswerInfo(undefined,val);},運行結(jié)果如圖4.13：圖4.13查詢所有題庫界面前端校驗獲取到考試科目，根據(jù)下拉列表選著相應的題目類型，前端根據(jù)選擇的題目類型進行判斷調(diào)用哪個接口添加哪個題目。<span>題目類型:</span>

<el-select

v-model="optionValue"

placeholder="請選擇題型"

class="w150"

>

<el-option

v-for="iteminoptions"

:key="item.value"

:label="item.label"

:value="item.value"

>

</el-option>

</el-select></li><liv-if="optionValue=='選擇題'">

<span>所屬章節(jié)：</span>

<el-input

placeholder="請輸入對應章節(jié)"

v-model="postChange.section"

class="w150"

clearable

>

</el-input></li><liv-if="optionValue=='填空題'">

<span>所屬章節(jié)：</span>

<el-input

placeholder="請輸入對應章節(jié)"

v-model="postFill.section"

class="w150"

clearable

>

</el-input></li><liv-if="optionValue=='判斷題'">

<span>所屬章節(jié)：</span>

<el-input

placeholder="請輸入對應章節(jié)"

v-model="postJudge.section"

class="w150"

clearable

>

</el-input>其中一個的具體實現(xiàn)：<!--判斷題--><divclass="changejudge"v-if="optionValue=='判斷題'">

<divclass="title">

<el-tag>題目:</el-tag><span>在下面的輸入框中輸入題目</span>

<el-input

type="textarea"

rows="4"

v-model="postJudge.question"

placeholder="請輸入題目內(nèi)容"

resize="none"

class="answer"

>

</el-input>

</div>

<divclass="judgeAnswer">

<el-radiov-model="postJudge.answer"label="T">正確</el-radio>

<el-radiov-model="postJudge.answer"label="F">錯誤</el-radio>

</div>

<divclass="title">

<el-tag>解析:</el-tag><span>在下面的輸入框中輸入題目解析</span>

<el-input

type="textarea"

rows="4"

v-model="postJudge.analysis"

placeholder="請輸入答案解析"

resize="none"

class="answer"

>

</el-input>

</div>

<divclass="submit">

<el-buttontype="primary"@click="judgeSubmit()"

>立即添加</el-button

>運行結(jié)果如圖4.14所示圖4.14添加試題界面4.2.7成績管理模塊查詢所有學生的成績信息@Select("select*fromstudent")查看分數(shù)：使用echarts（可視化圖表）實現(xiàn)exportdefault{

name:"grade",

data(){

return{

isNull:false,//原始數(shù)據(jù)

tableDataX:[],//x軸數(shù)據(jù)保存次數(shù)

tableDataY:[],//y軸數(shù)據(jù)保存分數(shù)

};

},

mounted(){

this.score();

},

methods:{

score(){

letstudentId=this.$route.query.studentId;

this.$axios(`/api/score/${studentId}`).then((res)=>{

varinsertIntervalString=(

originStr,

disNum=10,

insertStr="\n"

)=>

originStr.replace(

newRegExp("(.{"+disNum+"})","g"),

"$1"+insertStr

);

//每隔一個字符插入一個回車

varsubject=insertIntervalString(element.subject,3,"\n");

this.tableDataX.push(subject);

this.tableDataY.push(element.etScore);

});運行結(jié)果如圖4.15圖4.15查看所有學生成績界面4.2.8查詢學生信息模塊exportdefault{

data(){

return{

pagination:{

current:1,//當前頁

total:null,//記錄條數(shù)

size:6,//每頁條數(shù)

},

dialogVisible:false,//對話框

form:{},//保存點擊以后當前學生的信息,

condition:{

name:"",

tel:"",

grade:"",

clazz:"",

major:"",

institute:"",

}

};運行結(jié)果如圖4.16圖4.16查詢學生信息界面4.2.9編輯（修改）學生信息模塊@Update("updatestudentsetstudentName=#{studentName},grade=#{grade},major=#{major},clazz=#{clazz},"+

"institute=#{institute},tel=#{tel},email=#{email},pwd=#{pwd},cardId=#{cardId},sex=#{sex},role=#{role}"+

"wherestudentId=#{studentId}")

intupdate(Studentstudent);checkGrade(studentId){//修改學生信息

this.dialogVisible=true

this.$axios(`/api/student/${studentId}`).then(res=>{

this.form=res.data.data

})

},運行結(jié)果如圖4.17圖4.17編輯學生信息界面4.2.10刪除學生信息模塊deleteById(studentId){this.$axios({

url:`/api/student/${studentId}`,

method:'delete',

}).then(res=>{

this.getStudentGrade()

})運行結(jié)果如圖4.18圖4.18刪除學生信息界面4.2.11添加學生信息模塊@Options(useGeneratedKeys=true,keyProperty="studentId")@Insert("insertintostudent(studentName,grade,major,clazz,institute,tel,email,pwd,cardId,sex,role)values"+

"(#{studentName},#{grade},#{major},#{clazz},#{institute},#{tel},#{email},#{pwd},#{cardId},#{sex},#{role})")intadd(Studentstudent);運行結(jié)果如圖4.19圖4.19添加學生信息界面4.2.12編輯（修改）教師信息模塊methods:{

getTeacherInfo(){

//分頁查詢所有教師信息

this.$axios(`/api/teachers/${this.pagination.current}/${this.pagination.size}`).then(res=>{

this.pagination=res.data.data;

}).catch(error=>{});

},publicintupdate(Teacherteacher);checkGrade(teacherId){//修改教師信息

this.dialogVisible=true

this.$axios(`/api/teacher/${teacherId}`).then(res=>{

this.form=res.data.data

})運行結(jié)果如圖4.20圖4.20編輯教師信息界面4.2.13添加教師信息模塊@Options(useGeneratedKeys=true,keyProperty="teacherId")

@Insert("insertintoteacher(teacherName,sex,tel,email,pwd,cardId,role,type,institute)"+

"values(#{teacherName},#{sex},#{tel},#{email},#{pwd},#{cardId},#{role},#{type},#{institute})")

publicintadd(Teacherteacher);運行結(jié)果如圖4.21圖4.21添加教師信息界面4.3教師子系統(tǒng)的實現(xiàn)教師子系統(tǒng)的實現(xiàn)與管理員基本相同，只是缺少教師管理以及其頁面，在此不重復說明。4.4學生子系統(tǒng)的實現(xiàn)4.4.1答題模塊查詢試卷信息（模糊查詢、精確查詢、分頁查詢）：methods:{

//獲取當前所有考試信息

getExamInfo(){

this.$axios(`/api/exams/${this.pagination.current}/${this.pagination.size}`).then(res=>{

this.pagination=res.data.data

this.loading=false

console.log(this.pagination)

}).catch(error=>{

console.log(error)

})}

handleCurrentChange(val){

this.pagination.current=val

this.getExamInfo()

},運行結(jié)果如圖4.22圖4.22獲取所有考試信息界面4.4.2跳轉(zhuǎn)到考試頁面模塊運行結(jié)果如圖4.23圖4.23開始考試界面4.4.3獲取試卷信息模塊運行結(jié)果如圖4.24圖4.24獲取試卷信息界面4.4.4考試成績模塊<template>

<divclass="score">

<br>

<divclass="total">

<divclass="look">

本次考試成績

</div>

<divclass="show">

<divclass="number":class="{'border':isTransition}">

<span>{{score}}</span>

<span>分數(shù)</span>

</div>

</div>

<ulclass="time">

<liclass="start"><span>開始時間</span><span>{{startTime}}</span></li>

<liclass="end"><span>