計算機科學(xué)與技術(shù)-基于vue-cli3+node.js的英語題庫系統(tǒng)設(shè)計與實現(xiàn)

基于vue_cli3+node.js的英語題庫系統(tǒng)設(shè)計與實現(xiàn)摘要：在應(yīng)用程序的開發(fā)和管理的歷史過程中，web應(yīng)用的發(fā)展一日千里，而舊式框架的開發(fā)管理已經(jīng)略顯累贅，而與此同時，前后端分離的概念卻已漸漸走入人心。2013年，華裔工程師尤雨溪在在GitHub上發(fā)布了早期版本的Vue.js框架，此框架輕便快捷，靈活易用。在GitHub的開源項目中，Vue名列前茅，GitHubStar超過了16萬。據(jù)國家統(tǒng)計局統(tǒng)計分析，大部分的公民在一天內(nèi)的學(xué)習(xí)研究的時間嚴(yán)重不充足，公民的學(xué)習(xí)研究參加率過低。當(dāng)今正值互聯(lián)網(wǎng)應(yīng)用大爆發(fā)的時代，伴隨著互聯(lián)網(wǎng)的利用時間大幅增加的大前提下，完全可以把公民的學(xué)習(xí)形式從線下轉(zhuǎn)移到線上。本英語題庫系統(tǒng)出于提升用戶英語能力的需求，分析和參考類似的題庫系統(tǒng)，結(jié)合實際的生產(chǎn)活動，設(shè)計開發(fā)出一套基于vue_cli3+node.js的英語題庫系統(tǒng)。關(guān)鍵詞：Vue.js,node.js,GitHub,web應(yīng)用,題庫系統(tǒng)

DesignandimplementationofEnglishquestionbanksystembasedonVue﹣cli3+node.jsAbsrtact:inthehistoricalprocessofapplicationdevelopmentandmanagement,thedevelopmentofwebapplicationhasbeendevelopingrapidly,whilethedevelopmentandmanagementoftheoldframeworkhasbeenalittlecumbersome,atthesametime,theconceptoffrontandbackseparationhasgraduallycomeintopeople'smind.In2013,YuXi,aChineseAmericanengineer,releasedanearlierversionofvue.jsframeworkonGitHub,whichislight,fastandeasytouse.AmongGitHub'sopen-sourceprojects,Vueranksfirst,withmorethan160000GitHubstars.AccordingtothestatisticsandanalysisoftheNationalBureauofstatistics,mostofthecitizensdonothaveenoughtimetostudyinoneday,andtheparticipationrateofcitizensinthestudyistoolow.TodayistheeraofInternetapplicationexplosion.WiththerapidincreaseofInternetutilizationtime,thelearningformofcitizenscanbetransferredfromofflinetoonline.Inordertoimprovetheuser'sEnglishability,thisEnglishquestionbanksystemanalyzesandreferencesthesimilarquestionbanksystem,designsanddevelopsanEnglishquestionbanksystembasedonVue﹣cli3+node.jsincombinationwiththeactualproductionactivities.Keywords:vue.js,node.js,GitHub,webapplication,questionbanksystem目錄第1章緒論 11.1研究背景和意義 11.1.1研究背景分析 11.1.2本課題的研究意義 11.2文獻(xiàn)綜述 21.2.1國外研究 21.2.2國內(nèi)研究 31.3課題研究方法和內(nèi)容 31.3.1研究方法 31.3.2研究內(nèi)容 4第2章系統(tǒng)需求分析 62.1系統(tǒng)的背景和意義 62.2功能需求 62.3非功能需求 72.4前后端分離優(yōu)勢分析 7第3章系統(tǒng)設(shè)計 93.1前端架構(gòu)設(shè)計 93.1.1JavaScript架構(gòu) 93.1.2Vue-cli3.0 93.1.3Vue-Router 93.1.4UI框架 93.1.5通信技術(shù) 103.1.6ECMAScript6 103.1.7DOM 103.1.8BOM 113.2功能模塊設(shè)計 113.2.1前臺模塊 113.2.2后臺模塊 12第4章系統(tǒng)實現(xiàn) 124.1開發(fā)環(huán)境 124.1.1硬件環(huán)境 124.1.2軟件環(huán)境 134.2項目環(huán)境搭建 134.3登錄模塊開發(fā) 134.3.1登錄注冊模塊實現(xiàn) 134.3.2試題錄入模塊實現(xiàn) 14第5章系統(tǒng)測試 175.1功能性測試 175.1.1登錄注冊測試 175.1.25.1.2選題組卷測試 185.2安全性測試 19緒論研究背景和意義研究背景分析在應(yīng)用程序的開發(fā)和管理的發(fā)展過程中，伴隨著開發(fā)的復(fù)雜化和巨型化，舊式框架的開發(fā)管理已經(jīng)略顯累贅，而與此同時，前后端分離的概念卻已漸漸走入人心。這些年來，Vue.js、Angular.js和React.js已經(jīng)成為了最具競爭力的三大JS框架。Angular.js于2009年問世，react.js最初源自Facebook公司，并于2013年5月份開源。而Vue.js也受到了Angular.js和React.js等JavaScript框架的啟發(fā)，兼具了它們的優(yōu)點，具備了其它框架的技術(shù)優(yōu)勢。2013年，華裔工程師尤雨溪在結(jié)束了關(guān)于Angular.js的工作后，決定開發(fā)出新的JavaScript框架。在研究Angular.js和React.js等JavaScript框架的優(yōu)勢部分后，決心構(gòu)建出一款輕便、快捷、靈活、易用的框架。2014年2月，作者在GitHub上發(fā)布了早期版本的Vue.js框架。一年后，正式發(fā)布了1.0版本，此框架開始走向大眾，為人們所了解。2016年，Vue2.0版本正式發(fā)布。在GitHub的開源項目中，Vue名列前茅，GitHubStar超過了16萬。Vue-cli3是腳手架的工具，它是基于Vue.js的可以進行快速開發(fā)的系統(tǒng)?？梢詼p少用戶配置工程量，簡單的進行系統(tǒng)開發(fā)。它是一個插件集合，集成了豐富的前端工具，基本的腳手架工具，在此框架下都有集成。而且，Vue還有一套圖形化的界面-VueUI，能夠簡化創(chuàng)建和管理用戶項目。綜上所述，Vue.js框架已經(jīng)成為了最熱門的Js框架之一。由于Vue簡單好學(xué)、性能優(yōu)秀、編碼輕松的原因，現(xiàn)已被廣大中小型公司所采用。本課題的研究意義運用Vue框架來開發(fā)本課題，可以簡化編碼，使開發(fā)工作變得更加簡單輕松。Vue有許許多多的新特性，靈活運用這些新特性，可以大大簡化系統(tǒng)的開發(fā)難度。在Vue中，可以通過組件這一強大的特性，將頁面分割成不同的部分，擴展HTML元素，并且可自定義函數(shù)。同時，在Vue中，使用者可以通過綁定view和model，以此來觀測視圖和模型的變化。例如，在Vue中，即可以使用單向綁定，通過改變model來實現(xiàn)view地更新，也可以使用雙向綁定，將view與model雙向綁定，在更新view或model的時候，model和view也會隨之更新。同時，Vue支持各種各樣的過渡效果，使系統(tǒng)界面更加繽紛多彩。由此可知，采用了該技術(shù)來開發(fā)此英語題庫系統(tǒng)，能夠極大地提高研發(fā)效率，降低不需要的浪費，對用戶的體驗有著極大的改善?？梢?，該技術(shù)對前端開發(fā)有著極高的正面意義。文獻(xiàn)綜述國外研究相對國內(nèi)則言，國外的前后端分離運動要進行得更早一些，而JavaScript框架的研究也更加深入一些。2009年推出了Angular.js框架，后來為Google公司所收購。Angular.js最廣為人知的特性有MVC開發(fā)模式，使項目的可維護性大幅提高，便于業(yè)務(wù)人員修改和維護。其次，Angular.js的模塊化開發(fā)有助于開發(fā)人員將每一個的功能塊切割開，分成各種各樣的模塊，開發(fā)人員可以選擇在某個模塊進行研發(fā)，接著把模塊運用在頁面中。但Angular.js過于笨重，沒有做到輕量化，不利于中小型公司的使用和開發(fā)。同時，Angular.js不適合交互過于頻繁的網(wǎng)頁。與之相比，Vue.js要更加輕便快捷，便于開發(fā)，更加適合小型企業(yè)使用。React.js最初源自Facebook，并于2013年5月份開源。SebastianMarkbage（2018）稱React.js的穩(wěn)定性和靈活性都有了相當(dāng)?shù)陌l(fā)展，引入了較多的函數(shù)調(diào)用，使其能夠更好地優(yōu)化。與Angular.js相比，React.js的設(shè)計更加出眾。React.js極具靈活性，可以與當(dāng)下流行的庫與框架進行配合，具有優(yōu)秀的靈活性。其次，React.js采用了聲明式設(shè)計，能夠極其方便的描述應(yīng)用。再者，React.js中的運用了VirtualDOM算法，在JS與DOM中建立VirtualDOM，對比新舊狀態(tài)的差異，最后再寫入DOM中，這種方法可以降低開發(fā)的復(fù)雜性，使其更具性價比。但與Vue.js相比，React.js的學(xué)習(xí)成本過高，需要長時間的學(xué)習(xí)才能徹底掌握。而且，Vue.js的適應(yīng)性更加強大，擁有更高的效率和更多的模板。國內(nèi)研究目前，國內(nèi)的前后端分離技術(shù)的研究正如火如荼地進行中，伴隨著web研究的大爆發(fā)，前后端分離成為了主流。與此同時，對于前端框架的研究也在進行中，當(dāng)下國內(nèi)的互聯(lián)網(wǎng)公司中較為流行的JavaScript框架是React.js和Vue.js。當(dāng)前，由于Vue十分簡潔，組件輕捷，效率極高，不少互聯(lián)網(wǎng)公司的項目都采用了Vue.js。尤雨溪（2018）研究指出，Vue的設(shè)計初衷是盡其所能的縮減前端開發(fā)的難度，使開發(fā)人員更容易上手。Vue輕便、快捷的特點，有助于減輕中小型企業(yè)和個人開發(fā)者的負(fù)擔(dān)，在短時間內(nèi)理解和掌握相關(guān)知識，開發(fā)出相關(guān)的項目。課題研究方法和內(nèi)容研究方法本論文在編寫的過程之中，運用了下面的這幾種研究方法：比較研究法，即使依照與論文題目相近的項目，對其的相似、相異情況進行判斷和分析，尋找其聯(lián)系與規(guī)律的方法。根據(jù)此標(biāo)準(zhǔn)，先對相近的項目進行觀察與分析，再找出研究的本質(zhì)。在編寫本論文的時候，參考了不少基于Vue.js框架的研究論文，通過研究參考其他論文的結(jié)構(gòu)框架，得到了不少有用的參考資料。同時，在編寫的過程中，根據(jù)研究方向和研究目標(biāo)，收集、挑選、整理好相關(guān)的文獻(xiàn)，對論文進行分析和研究，從而得出問題的本質(zhì)，形成了對客觀事實的基本印象。在設(shè)計系統(tǒng)的時候，參考了不少的開發(fā)文檔和相關(guān)書籍，從而提高了對Vue.js的理解，提高了系統(tǒng)的用戶體驗。實證研究法，即對研究目標(biāo)進行調(diào)研、勘察和分析，從局部到整體，從特殊到一般，通過對客觀世界的觀察與分析，對某些物體、某些特例進行一定程度的觀察。在分析得出的規(guī)律后，獲得事物的一般規(guī)律，歸納出真正研究的結(jié)果，得出事物的發(fā)展規(guī)律。在系統(tǒng)的編寫過程中，有時候會出現(xiàn)意料之外的狀況。在某次開發(fā)中，發(fā)現(xiàn)即使無需登錄校驗，也可以直接訪問系統(tǒng)主界面。在通過對該特例的觀測中，發(fā)現(xiàn)了需要對頁面跳轉(zhuǎn)進行判斷，才允許進入登錄界面，從而得出結(jié)論，形成要進行權(quán)限校驗的理論觀點。訪談法，主要是通過調(diào)查人員直接訪談被調(diào)查人員，從得知對方的知識和體驗。在訪談的過程中，調(diào)查人員可以依據(jù)自己想要的結(jié)果，預(yù)先設(shè)置好要提出的問題。在訪談的過程中，可以對被調(diào)查人員提出問題。若得到答案，可以根據(jù)問題的答案，進行分析。此外，還可以展開座談會的形式，把被調(diào)查人員聚集在一起，讓被調(diào)查人員自由發(fā)言。在談話會結(jié)束后，再收集談話信息，進行下一步的分析，總結(jié)和歸納出事實中的客觀規(guī)律。待到信息整理完成后，對結(jié)果進行驗證，從而得出結(jié)論。在本論文的編寫過程中，通過對相關(guān)從業(yè)人員進行意見咨詢，了解到關(guān)于雙向綁定的相關(guān)知識，通過v-model來對小題進行賦值。研究內(nèi)容本論文探究的是基于MVVM模式下的，Vue.js框架在英語題庫系統(tǒng)中的應(yīng)用。論文分為以下幾部分，其詳細(xì)的內(nèi)容如下：第一章：緒論。主要分析該論文的研究背景、研究方向和研究目標(biāo)，分析該設(shè)計要選用什么樣的技術(shù)。首先，先分析了國內(nèi)國外的研究狀況，先對相關(guān)技術(shù)進行數(shù)據(jù)收集，將各項資料進行研究和對比，對各項技術(shù)的長處和短處都進行探究研習(xí)，為后期的開發(fā)提供參考。第二章：系統(tǒng)需求分析。該章節(jié)首先分析了本課題的背景與意義，對用戶和系統(tǒng)的需求進行了分析，對該系統(tǒng)的功能模塊進行了分析。介紹項目所需要用到的開發(fā)語言，對前端開發(fā)的如HTML、CSS和JavaScript等傳統(tǒng)開發(fā)技術(shù)做了基本的闡述。并對前后端分離架構(gòu)做了基本的介紹，將前后端分離與前后端不分離做了相應(yīng)的對比，解釋了前后端分離運動的由來。接下來，又對組成JavaScript的三部分ECMAScript、DOM和BOM做了基本的說明，分析了三者在前端開發(fā)中的必要性。第三章：系統(tǒng)設(shè)計。該章節(jié)對系統(tǒng)所需的技術(shù)進行了介紹，主要用到的技術(shù)都予以基本的闡釋。其次，系統(tǒng)的各個模塊進行介紹，第四章：系統(tǒng)實現(xiàn)。主要對開發(fā)的硬件環(huán)境和軟件環(huán)境進行介紹，接著再對各主要模塊的實現(xiàn)進行了闡述。第五章：系統(tǒng)測試。在系統(tǒng)完成了基本設(shè)置后，對系統(tǒng)的主要功能進行設(shè)置，再對測試結(jié)果進行匯總和評析，由此得出測試結(jié)論。第六章：結(jié)束語。本章節(jié)主要表達(dá)了對學(xué)校、老師以及同學(xué)好友的感謝，以及對自己未來發(fā)展做了進一步的展望。

系統(tǒng)需求分析系統(tǒng)的需求分析分為功能需求和非功能需求兩個方面。功能需求講解了系統(tǒng)的主要功能，而非功能需求介紹了系統(tǒng)的安全性和可靠性等除主要功能的特性。接下來的系統(tǒng)設(shè)計，主要介紹了系統(tǒng)的各部分組成和代碼架構(gòu)。系統(tǒng)的背景和意義據(jù)國家統(tǒng)計局統(tǒng)計分析，大部分的公民在一天內(nèi)的學(xué)習(xí)研究的時間嚴(yán)重不充足，公民的學(xué)習(xí)研究參加率過低。而與此同時，中國公民在一天內(nèi)的互聯(lián)網(wǎng)使用的平均時間卻相當(dāng)高，遠(yuǎn)遠(yuǎn)地凌駕于公民一天內(nèi)的學(xué)習(xí)研究的時間。當(dāng)今正值互聯(lián)網(wǎng)應(yīng)用大爆發(fā)的時代，伴隨著互聯(lián)網(wǎng)的利用時間大幅增加的大前提下，完全可以把公民的學(xué)習(xí)形式從線下轉(zhuǎn)移到線上。隨著互聯(lián)網(wǎng)各項技術(shù)的流行，開發(fā)人員可以把相應(yīng)的試題集放在數(shù)據(jù)庫中存儲和管理，并采用智能化、科學(xué)化的方式來組織、編寫試題，最后再分發(fā)給用戶所使用。功能需求本英語題庫系統(tǒng)出于提升用戶英語能力的需求，分析和參考類似的題庫系統(tǒng)，結(jié)合實際的生產(chǎn)活動，設(shè)計開發(fā)出一套基于vue_cli3+node.js的英語題庫系統(tǒng)。本英語題庫系統(tǒng)的主要要求如下所示：第一，UI設(shè)計先進清晰，常用按鈕擺放位置合理，對用戶的操作習(xí)慣予以了特別優(yōu)化，可以讓使用人員最短時間內(nèi)掌握該題庫的使用方法。第二，系統(tǒng)可以實現(xiàn)對學(xué)生做題進行判斷和分析，對錯題進行反饋。第三，該系統(tǒng)兼容性優(yōu)秀，系統(tǒng)相當(dāng)靈活，便于優(yōu)化，性能較好，能夠得到學(xué)生用戶的學(xué)習(xí)情況。該英語題庫系統(tǒng)符合軟件測試的基本流程，在需求分析階段，能做到理解產(chǎn)品需求，分析系統(tǒng)的優(yōu)勢與不足。在測試英語題庫系統(tǒng)的過程中，做到了對系統(tǒng)生命周期的全面管理，包括了登錄注冊、選題組卷、測試報告、考試記錄、在線做題、題庫管理、系統(tǒng)判題等主要模塊，其中題庫管理、系統(tǒng)判題主要由錄題人員來管理，而登錄注冊、選題組卷、在線做題由學(xué)生來操作，在自動判卷測試完成后，系統(tǒng)會返回測試報告，學(xué)生會增加一個考試記錄。非功能需求系統(tǒng)的非功能需求，著重的是系統(tǒng)在滿足功能以外的需求，主要涵蓋了系統(tǒng)的安全性、美觀性和可靠性等。本系統(tǒng)在開發(fā)的過程中，運用了v-html指令。V-html指令能能獲取真正的html效果，同時，v-html還能防止xss攻擊。若在網(wǎng)頁中注入了js腳本，并通過js來讀儲存了登錄帳號和登錄密碼的用戶信息，再把此信息發(fā)送至駭客的相關(guān)客戶端，由此駭客便能取得用戶的登錄賬戶與登錄密碼，再使用用戶信息進行非法操作。此外，js腳本還有嵌入到html頁面，從而擁有轉(zhuǎn)跳到非法網(wǎng)站的可能性，讓用戶損失用戶信息和用戶資產(chǎn)。對此，v-html不會將js識別出來，防止xss攻擊。在系統(tǒng)完善主要功能的同時，頁面的美觀性也是系統(tǒng)設(shè)計的重點。在系統(tǒng)開發(fā)的過程中，盡可能的使系統(tǒng)符合用戶的使用習(xí)慣，讓系統(tǒng)布局的設(shè)計盡可能的合理。為了減輕系統(tǒng)用戶的學(xué)習(xí)成本，在開發(fā)系統(tǒng)的過程中，系統(tǒng)的操作也盡其所能的符合主流網(wǎng)頁的操作方式。在系統(tǒng)界面的設(shè)計上，使用了Element-UI后臺組件庫來進行布局，是界面的外觀更加的友好美觀。前后端分離優(yōu)勢分析在傳統(tǒng)的系統(tǒng)架構(gòu)中，最開始的是產(chǎn)品經(jīng)理提出需求。在提出需求后，把需求交給前端人員開發(fā)。前端人員運用HTML、CSS以及JavaScript等經(jīng)典的網(wǎng)頁編程語言，編寫出前端頁面。待前端人員編寫完畢后，就把前端頁面轉(zhuǎn)交給予后端人員。后段人員運用相應(yīng)技術(shù)，將頁面轉(zhuǎn)換為Jsp，既往前端頁面中，嵌入相關(guān)的java代碼。這就導(dǎo)致了前后端不分離、耦合度較高的結(jié)果。該開發(fā)方式較為適合簡單頁面使用，但伴隨著web的大爆發(fā)，前端人員與后段人員的聯(lián)系更為混亂，往往出現(xiàn)牽一發(fā)而動全身的狀況。為了改善當(dāng)下這個狀況，前后端分離技術(shù)應(yīng)運而生。而在前后端分離的架構(gòu)中，前端人員與后段人員并不存在強依賴關(guān)系。在前端人員與后段人員規(guī)定好api文檔后，前端人員只需要集中精神于html界面的開發(fā)中，而并不需要理解后端的業(yè)務(wù)邏輯開發(fā)。而后端人員也無需分心在前端開發(fā)中，只需要處理業(yè)務(wù)邏輯即可。在api接口文檔中，可以先定義好要傳輸?shù)膮?shù)，而前端頁面再發(fā)送Ajax請求以此傳輸數(shù)據(jù)，而不是傳遞整個網(wǎng)頁，由此，不需要依賴于后端。而后段人員可以依靠api文檔進行接口開發(fā)，將數(shù)據(jù)返回并渲染在前端頁面上。由此可見，此架構(gòu)也便于后期的維護。若前端發(fā)生改動，只要對應(yīng)得函數(shù)和參數(shù)沒有發(fā)生改變，后段人員就無需進行改動。圖2-1前后端分離圖示

系統(tǒng)設(shè)計在前一章中，對本系統(tǒng)的背景和意義都作了介紹，從居民的作息時間得出了網(wǎng)絡(luò)題庫系統(tǒng)的前景和優(yōu)勢。同時，對系統(tǒng)的需求分析做出了闡釋。而在本章節(jié)中，對Vue.js以及Element-UI等關(guān)鍵技術(shù)進行了介紹，同時，對各個功能模塊進行了分析和介紹。前端架構(gòu)設(shè)計JavaScript架構(gòu)在本系統(tǒng)的開發(fā)中，使用了Vue.js2.0作為JavaScript框架。Vue.js簡潔方便，組件輕便，能夠快速學(xué)習(xí)并上手，有助于提高前端工程開發(fā)的效率，減輕開發(fā)人員的負(fù)擔(dān)。Vue-cli3.0Vue-cli是Vue.js框架的腳手架工具，它能自動生成關(guān)于Vue.js的模板，提供了基本的渲染和標(biāo)記，生成基本的代碼。通過Vue-cli，可以大大減輕工作強度，提高生產(chǎn)效率。Vue-RouterVue-Router是Vue.js的路由集成，可以提供Vue-Router的使用，根據(jù)接收到的請求地址，實現(xiàn)不同組件的切換。UI框架Element-UI是一款后臺組件庫，它是依照Vue.js2.0的一款UI框架。在Vue-cli3與Element-UI的組合使用下，可創(chuàng)建出便捷、優(yōu)美的頁面。通信技術(shù)在開發(fā)本系統(tǒng)的時候，使用了Ajax技術(shù)來進行異步請求。在前端頁面中，可以使用Ajax來向后端接口請求，依次調(diào)用各種數(shù)據(jù)和函數(shù)。前端得到數(shù)據(jù)后，便能在頁面進行渲染。ECMAScript6ECMAScript是一種腳本語言，被認(rèn)為是JavaScript的國際標(biāo)準(zhǔn)。它可以實現(xiàn)快速開發(fā)，且相對來說部署的過程較為輕松，容易為研發(fā)人員學(xué)習(xí)并使用。由此可見，JavaScript可以看作對ECMAScript的實現(xiàn)。DOMDOM即是文檔對象模型（DocumentObjectModel），是HTML文件的基礎(chǔ)。DOM節(jié)點樹將所有的HTML元素包含于其中，為HTML頁面建立了相應(yīng)的模型。在完成HTML編寫后，瀏覽器能夠使用HTML解析器來建立DOM節(jié)點樹，通過此節(jié)點樹，有助于使各節(jié)點串聯(lián)起來。同樣在CSS完成編寫后，也可以讓瀏覽器中的CSS解析器建立出樣式表規(guī)則，再把此類的規(guī)則掛在DOM節(jié)點樹上，以此渲染出CSS樣式。當(dāng)DOM節(jié)點樹完成后，瀏覽器遵循自頂而下，自左往右的規(guī)律，將HTML頁面渲染出來。圖3-1普通的html頁面以節(jié)點樹的形式表示：圖3-2以節(jié)點樹的形式展示html頁面BOMBOM既是瀏覽器對象模型（BrowserObjectModel），該接口用于控制瀏覽器的行為。多個的對象組成了BOM，而BOM的頂級對象是window對象，是BOM的核心。window對象表示了瀏覽器的窗口，而開發(fā)人員可以通過操作BOM來對瀏覽器的窗口進行一系列的操作與變化。像是利用窗口來打開某外部鏈接，調(diào)整屏幕的大小等操作。功能模塊設(shè)計前臺模塊1、登陸注冊功能：用戶可以在注冊頁面注冊賬號，注冊成功后即可登入英語題庫系統(tǒng)。2、查看題庫功能：學(xué)生用戶在登陸成功后，可以根據(jù)關(guān)鍵字搜索相應(yīng)的題目，系統(tǒng)以列表形式展示出符合學(xué)生用戶的題目。3、在線做題功能：學(xué)生在瀏覽題目后，點擊列表中自己想要的題目。在點擊后，學(xué)生用戶能夠進入做題界面，自主訓(xùn)練。在訓(xùn)練完成后，可以提交試卷。4、接收試題功能：學(xué)生用戶成功登陸后，能接收教師所發(fā)送的試題。5、查看成績功能：學(xué)生在完成測試后，返回測試報告，學(xué)生信息欄會增加一個考試記錄。后臺模塊1、教師管理功能：教師可以對試題進行管理，選題組卷，以及把選好的試題發(fā)給學(xué)生用戶。2、題庫管理功能：用戶可以添加題目，更新題目，刪除題目。3、系統(tǒng)判題功能：系統(tǒng)能夠自動判斷學(xué)生用戶上交的題目，并根據(jù)試卷的得分，統(tǒng)計學(xué)生用戶的學(xué)習(xí)情況。圖3-3功能模塊設(shè)計系統(tǒng)實現(xiàn)在分析完本系統(tǒng)的需求，了解該系統(tǒng)的開發(fā)背景和研發(fā)意義，并探索研究了開發(fā)此系統(tǒng)所需的技術(shù)后，我們還需要對開發(fā)該系統(tǒng)的硬件配置和軟件環(huán)境進行分析匯總，再對各個模塊進行分類探究。開發(fā)環(huán)境硬件環(huán)境CPU：InterCeleron2950M雙核處理器GPU：NVIDIAGT940M2GMEMORY：4GDDR3LSTORAGE：500HDD軟件環(huán)境OS：Window764位操作系統(tǒng)WebBrower：GoogleChrome編輯器：VisualStudioCode項目環(huán)境搭建1、PC機上要安裝好vsCode軟件、node.js第12版以及MySQL(5.4)，電腦還要正確配好npm(依賴安裝)和vue-cli（前端腳手架）環(huán)境。2、用vsCode寫系統(tǒng)前，要先根據(jù)自己的需求分析報告，進行各個數(shù)據(jù)庫表的建立。保證數(shù)據(jù)庫準(zhǔn)確無誤后再進行系統(tǒng)的編寫。3、用node.js創(chuàng)建一個vue項目，然后搭建vue-cli3前端框架和koa2持久層框架，在搭建vue框架時，要注意每一個依賴是否引入成功，例如es-link,node-sass等。確保項目與數(shù)據(jù)庫連接成功。若依賴或插件引入不完整，后面整個項目的編譯，打包都可能出現(xiàn)問題。搭建好框架后，要檢查系統(tǒng)需要的依賴包是否齊全。這些別要工作準(zhǔn)備完成后，才開始編寫系統(tǒng)主業(yè)務(wù)。登錄模塊開發(fā)登錄注冊模塊實現(xiàn)使用Element-UI完成登陸頁面的基本布局，給表單背景色，并設(shè)置好各種各樣的間距設(shè)置。完成相應(yīng)的設(shè)置后，給登陸界面設(shè)置好背景圖片，最后再給頁面放置好標(biāo)題和解釋的標(biāo)注信息。圖4-1登陸界面使用Element-UI封裝好的各種主鍵，為注冊頁面提供相應(yīng)的布局。同時，綁定各種數(shù)據(jù)，用于登陸時提交表單的作用。密碼框可以指定type為password，不顯示密文。圖4-2輸入注冊信息在登陸界面中，運用jwt中間件做token權(quán)限驗證。圖4-3生成的碼便是唯一標(biāo)識，用于放在后端重新解析成用戶ID，然后給開發(fā)人員用作查詢。系統(tǒng)實行了表單驗證的功能，在登陸頁面中，將相應(yīng)的屬性預(yù)定好的傳入檢驗規(guī)則，再對屬性予以判斷。圖4-3生成唯一標(biāo)識試題錄入模塊實現(xiàn)圖4-4生成一個結(jié)構(gòu)，一道大題下有五道小題，然后每個小題下有四個選項。在開發(fā)中，使用v-model實現(xiàn)雙重綁定，對topicContent、topicAnalysis予以賦值。圖4-4對小題予以賦值圖4-5使用Element-UI完成基本布局圖4-6完成數(shù)據(jù)綁定圖4-7錄入題目界面在使用Element-UI完成基本布局后，創(chuàng)建相應(yīng)api文件，用來導(dǎo)入相應(yīng)的題目的接口。先使用import導(dǎo)入相應(yīng)的包，在使用export定義默認(rèn)對象。1、添加題目功能：在進入系統(tǒng)后，點擊“添加”按鈕，便會彈出添加題目的界面。在輸入題目和答案后，系統(tǒng)會相應(yīng)的請求api接口，執(zhí)行錄題功能。2、顯示題目試卷：在選取了相應(yīng)的題目后，系統(tǒng)會向api接口尋找相應(yīng)的題目，在找到對應(yīng)的題目后，使用v-for的實現(xiàn)數(shù)據(jù)綁定，顯示出相應(yīng)的試卷與題目。3、在學(xué)生完成試題后，點擊“提交”按鈕，即可提交答案，讓系統(tǒng)對試卷判斷正誤。

系統(tǒng)測試在完成了本系統(tǒng)的開發(fā)后，仍舊需要對系統(tǒng)進行測試，檢查系統(tǒng)的安全性與可靠性。本章節(jié)將對該系統(tǒng)的用戶登錄注冊、在線答題、系統(tǒng)判卷以及選題組卷等功能進行測試。功能性測試登錄注冊測試本小節(jié)對系統(tǒng)的登錄與注冊等功能進行了檢測，檢測詳情如下圖所示：圖5-1用戶登錄測試界面用戶需要在登陸頁面正確輸入用戶賬號和密碼，若賬號和密碼都正確，用戶方可成功登陸，進入系統(tǒng)主界面。本測試用于英語題庫系統(tǒng)，對其檢測用戶的注冊用戶功能和登陸賬號功能，其詳細(xì)過程如下表所示：表5-1用戶登陸功能測試功能操作步驟預(yù)期情況實際情況結(jié)果注冊用戶點擊“注冊”，出現(xiàn)注冊頁面輸入用戶帳號和密碼，單擊“保存”按鈕新增用戶，數(shù)據(jù)庫表單增加新用戶新增用戶，數(shù)據(jù)庫表單增加新用戶成功登錄帳號用戶輸入帳號和密碼，點擊登錄用戶成功登錄用戶成功登錄成功由測試結(jié)果可知，該功能基本完善。5.1.2選題組卷測試本小節(jié)對系統(tǒng)的選題與組卷等功能進行了檢測，檢測詳情如下圖所示：圖5-21選題組卷測試界面用戶在錄入試題界面輸入題目和答案，同時題目難度和題目類型做出判斷，確定該試題屬于簡單題、中等題還是較難題。圖5-22在線做題測試界面用戶在在線做題測試界面可以選擇最先要完成的題目，完成選擇后，再完成該題目下的小題的作答。本測試用于英語題庫系統(tǒng)，對其檢測用戶的錄入題目功能、選題組卷功能和提交試卷功能，其詳細(xì)過程如下表所示：表5-2題選題組卷測試功能操作步驟預(yù)期情況實際情況結(jié)果錄入題目錄題員錄入題目，點擊“保存”按鈕題目添加成功題目添加成功成功選題目組卷學(xué)生注冊賬號自己選題目組卷學(xué)生得到試題集學(xué)生得到試題集成功學(xué)生提交試卷學(xué)生完成試卷，點擊“提交”按鈕自動判卷測試完后返回測試報告，學(xué)生增加一個考試記錄自動判卷測試完后返回測試報告，學(xué)生增加一個考試記錄成功由表所示，題庫系統(tǒng)的選題組卷功能符合設(shè)計目的。安全性測試安全性測試包括了xss攻擊、登陸安全性測試等，主要對系統(tǒng)的登錄時輸入錯誤賬號、考試中途退出以及插入非法js語句進行性不同的測試。測試的結(jié)果如下表所示：表5-3題庫系統(tǒng)安全性測試功能操作步驟預(yù)期情況實際情況結(jié)果登錄安全性測試輸入錯誤的帳號與密碼帳號或密碼存在錯誤，無法登錄帳號或密碼存在錯誤，無法登錄成功退出考試測試刷新頁面與中途退出考試如果中途退出考試或刷新頁面就作廢如果中途退出考試或刷新頁面就作廢成功Xss攻擊測試在文本中插入非法的js語句頁面不予以執(zhí)行js語句頁面不執(zhí)行js語句成功由表所示，題庫系統(tǒng)的安全性符合設(shè)計目的。

結(jié)束語大學(xué)里的學(xué)習(xí)生活就要結(jié)束了，一轉(zhuǎn)眼，就到了畢業(yè)的時光。此時此刻，我最想感謝的就是在我陷入困惑的時候，學(xué)校里的各位老師、各位同學(xué)，都能及時的向我伸出援助之手。在我面對苦難的時候，是老師和同學(xué)們給予我鼓勵，在我困惑的時候，是老師和同學(xué)們給予我指導(dǎo)。在你們的鼓勵和指導(dǎo)之下，我掌握了新的知識，擁有了面對困難的勇氣。首先，我要感謝的是我的學(xué)校對我的指導(dǎo)。學(xué)校為學(xué)生搭建了一個優(yōu)秀的平臺，在這個平臺之上，我獲得了索取知識的機會，讓我獲得了接觸新知識的機會。在學(xué)校的優(yōu)良學(xué)習(xí)氛圍里，我認(rèn)識了許許多多優(yōu)秀的教師，接觸了上進認(rèn)真的同學(xué)，從他們的身上，我提升了自己的學(xué)識和能力。在學(xué)校里，我的專業(yè)技能得到了增長，我的見識得到了提升。我由衷地祝福學(xué)校能夠再創(chuàng)輝煌，學(xué)術(shù)水平越來也好，師資力量越來越優(yōu)秀，教學(xué)環(huán)境越來越優(yōu)美。同時，我還要感謝老師們對我的大力栽培。在學(xué)習(xí)上，老師們給予我很多的幫助。從我進入校園的第一天，老師就對我們的專業(yè)知識和專