深圳大學(xué)本科畢業(yè)論文——基于Vue和React的教學(xué)型在線判題系統(tǒng)PAGE第2頁(yè)共51頁(yè)第2章需求分析2.1目的本系統(tǒng)的目標(biāo)是，建立一個(gè)教學(xué)型的在線評(píng)測(cè)平臺(tái)，以滿足學(xué)院和教師的教學(xué)需求和管理需求，以滿足學(xué)生的學(xué)習(xí)需求。對(duì)學(xué)院而言，系統(tǒng)需要滿足學(xué)院制訂的教學(xué)任務(wù)，需要滿足學(xué)院的在線判題及標(biāo)準(zhǔn)化題型的考核業(yè)務(wù)；對(duì)教師而言，系統(tǒng)需要做到使用方便，管理簡(jiǎn)單，功能多樣，方便開(kāi)展教學(xué)任務(wù)；對(duì)學(xué)生而言，系統(tǒng)需要給學(xué)生提供較簡(jiǎn)易的做題流程，同時(shí)要考慮預(yù)防測(cè)驗(yàn)進(jìn)行時(shí)的多種意外因素（比如瀏覽器被關(guān)閉，電腦死機(jī)），保證學(xué)生能夠比較順利的完成教師布置的任務(wù)，讓學(xué)生用戶(hù)的關(guān)注點(diǎn)保持在完成問(wèn)題本身上2.2系統(tǒng)適用人群系統(tǒng)的目標(biāo)用戶(hù)是深圳大學(xué)計(jì)算機(jī)與軟件學(xué)院的教師和學(xué)生。系統(tǒng)具有通用性，也可以用于具有標(biāo)準(zhǔn)化測(cè)驗(yàn)和程序在線判題需求的各大院校。2.3功能性需求分析2.3.1用戶(hù)角色分析本系統(tǒng)不允許用戶(hù)自己注冊(cè)，所有用戶(hù)都由管理員創(chuàng)建。系統(tǒng)的角色權(quán)限設(shè)計(jì)如下：系統(tǒng)管理員：具有最高權(quán)限，顯示所有的功能，可以對(duì)所有的功能模塊進(jìn)行操作，主要功能是進(jìn)行用戶(hù)管理、課程管理、權(quán)限分配、日志查看、判題機(jī)狀態(tài)檢查、考試模式設(shè)置等教師：具有教師相關(guān)的權(quán)限功能，主要進(jìn)行班級(jí)管理、測(cè)驗(yàn)管理、添加題目、批閱測(cè)驗(yàn)、查重管理等，并且只能操作自己班級(jí)相關(guān)的業(yè)務(wù)。學(xué)生：具有學(xué)生相關(guān)的權(quán)限功能，主要操作就是完成測(cè)驗(yàn)，查看成績(jī)。助教：助教是具有助教權(quán)限的學(xué)生，新增的權(quán)限功能有：允許訪問(wèn)教師端，可以訪問(wèn)該班級(jí)每個(gè)測(cè)驗(yàn)的批閱模塊，執(zhí)行批閱。并且可以導(dǎo)出相關(guān)的學(xué)生測(cè)驗(yàn)數(shù)據(jù)。2.3.2系統(tǒng)用例分析圖在線測(cè)評(píng)系統(tǒng)學(xué)生端的用例分析圖如圖2所示。圖2在線測(cè)評(píng)系統(tǒng)學(xué)生端的用例分析圖在線測(cè)評(píng)系統(tǒng)教師端的用例分析圖如圖3所示：第3章系統(tǒng)總體設(shè)計(jì)3.1基于角色的訪問(wèn)控制系統(tǒng)本系統(tǒng)是一個(gè)基于角色的訪問(wèn)控制系統(tǒng)[5]（role-basedaccesscontrol），是一種將系統(tǒng)訪問(wèn)權(quán)限限制為授權(quán)用戶(hù)的方法。角色訪問(wèn)控制引入了角色（role）的概念，目的是為了隔離用戶(hù)（即動(dòng)作主體，subject）與權(quán)限（privilege，表示對(duì)資源的一個(gè)操作）。角色作為一個(gè)用戶(hù)與權(quán)限的代理層，解耦了權(quán)限和用戶(hù)的關(guān)系，所有的授權(quán)應(yīng)該給予角色而不是直接給用戶(hù)或用戶(hù)群組。權(quán)限是權(quán)限設(shè)計(jì)中的基本顆粒，由操作和資源組成，表示對(duì)資源的一個(gè)具體操作。角色權(quán)限（role-privilege）是多對(duì)多（many-to-many）的關(guān)系，這就是權(quán)限的核心。本系統(tǒng)具有四種角色：管理員、教師、助教、學(xué)生。角色的權(quán)限是包含關(guān)系，最頂層權(quán)限管理員具有最高的、全部的權(quán)限，以此類(lèi)推，學(xué)生在系統(tǒng)中的權(quán)限最低。如圖4所示。圖4系統(tǒng)中權(quán)限的層次本課題研究的是系統(tǒng)的前端構(gòu)建。在前端開(kāi)發(fā)中，與用戶(hù)權(quán)限相關(guān)的信息被緩存在Vuex全局狀態(tài)管理組件中。角色在系統(tǒng)中的權(quán)限主要體現(xiàn)在這四處：（1）頁(yè)面訪問(wèn)權(quán)限。通過(guò)使用動(dòng)態(tài)過(guò)濾、動(dòng)態(tài)掛載權(quán)限路由實(shí)現(xiàn)。（2）后臺(tái)按鈕級(jí)別的權(quán)限控制。通用后臺(tái)表格組件的按鈕顯示，通過(guò)按鈕數(shù)據(jù)結(jié)構(gòu)中的顯示權(quán)限項(xiàng)，使用過(guò)濾器過(guò)濾實(shí)現(xiàn)。（3）普通組件的顯示權(quán)限控制。使用封裝的權(quán)限指令v-permission實(shí)現(xiàn)。（4）后端接口的訪問(wèn)權(quán)限。由Axios實(shí)例的攔截器實(shí)現(xiàn)。以上描述的具體實(shí)現(xiàn)在“系統(tǒng)實(shí)現(xiàn)”章節(jié)中。3.2系統(tǒng)的功能流程3.2.1在線判題系統(tǒng)的學(xué)生端系統(tǒng)功能流程下圖是學(xué)生端的系統(tǒng)功能流程圖，即圖5：圖5學(xué)生端功能流程圖3.2.2在線判題系統(tǒng)的教師端系統(tǒng)功能流程由于教師端具有非常多的平級(jí)功能點(diǎn)，涉及多個(gè)增刪查改操作，所以此處以教師端的測(cè)驗(yàn)?zāi)K為例子，繪制了測(cè)驗(yàn)部分的功能流程圖。即圖6：圖6教師端測(cè)驗(yàn)部分功能流程圖第四章系統(tǒng)實(shí)現(xiàn)4.1系統(tǒng)構(gòu)建腳手架配置本系統(tǒng)按照現(xiàn)代前端開(kāi)發(fā)流程進(jìn)行開(kāi)發(fā)。系統(tǒng)采用了Webpack4作為構(gòu)建腳手架。Webpack是一個(gè)對(duì)前端資源進(jìn)行加載以及打包的工具。它會(huì)根據(jù)模塊的依賴(lài)關(guān)系進(jìn)行靜態(tài)分析，然后將這些模塊按照指定的規(guī)則生成對(duì)應(yīng)的靜態(tài)資源。此構(gòu)建工具需要配置的主要有三個(gè)部分：Loader（加載器）、Plugin（插件）、開(kāi)發(fā)和生產(chǎn)配置。4.1.1Loader的配置Loader的主要職能是增加代碼兼容性和壓縮處理靜態(tài)文件。它會(huì)把一個(gè)代碼文件或者靜態(tài)資源文件進(jìn)行轉(zhuǎn)換和加載。本系統(tǒng)中需進(jìn)行轉(zhuǎn)換的文件類(lèi)型有：JS代碼文件、SCSS文件、圖像資源和字體資源。4.2系統(tǒng)登陸狀態(tài)維持和初始化4.2.1登陸的安全防護(hù)如圖8所示，服務(wù)器響應(yīng)頭的Set-Cookie字段，包括HttpOnly和SameSite項(xiàng)。HttpOnly項(xiàng)讓此Cookie不能被前端頁(yè)面包含的腳本代碼讀取，保護(hù)了前端頁(yè)面不會(huì)被其它的腳本注入并盜取Cookie，一定程度防御XSS攻擊（CrossSiteScripting，跨站腳本攻擊）。同時(shí)SameSite項(xiàng)的值為L(zhǎng)ax，讓除了導(dǎo)航到目標(biāo)網(wǎng)址的Get請(qǐng)求外，其他類(lèi)型的請(qǐng)求不會(huì)發(fā)送第三方Cookie，一定程度防御了CSRF攻擊（Cross-siterequestforgery，跨站請(qǐng)求偽造攻擊）[6]。同時(shí)系統(tǒng)也使用了csrf-token用來(lái)增強(qiáng)防御CSRF攻擊。[7]圖8服務(wù)器響應(yīng)頭4.3.1權(quán)限路由權(quán)限路由的主要作用有，實(shí)現(xiàn)頁(yè)面級(jí)別的權(quán)限訪問(wèn)控制，生成教師端側(cè)邊導(dǎo)航欄，生成教師端頂部面包屑。系統(tǒng)通過(guò)維護(hù)一張路由表，在每次啟動(dòng)系統(tǒng)時(shí)，根據(jù)用戶(hù)的角色權(quán)限對(duì)路由進(jìn)行過(guò)濾并且進(jìn)行動(dòng)態(tài)掛載，再根據(jù)掛載后的路由表自動(dòng)生成側(cè)邊欄菜單，并根據(jù)目前的路由位置生成導(dǎo)航欄的面包屑。權(quán)限路由表是由路由表項(xiàng)組成的數(shù)組，它的主要數(shù)據(jù)結(jié)構(gòu)如圖12所示。圖12權(quán)限路由表項(xiàng)數(shù)據(jù)結(jié)構(gòu)在這個(gè)數(shù)據(jù)結(jié)構(gòu)中，Path字段是相對(duì)URL路徑；Component字段是對(duì)應(yīng)的