發(fā)布時(shí)間：2020-12-22 06:07

　　隨著互聯(lián)網(wǎng)的普及,國(guó)內(nèi)外很多大型考試都采用了在線考試方式,這些在線考試系統(tǒng)針對(duì)單個(gè)需求設(shè)計(jì),開(kāi)發(fā)時(shí)一次性完成,但是后續(xù)維護(hù)時(shí),試題類型固定,擴(kuò)展困難。隨著Web2.0的興起,系統(tǒng)多樣化和用戶體驗(yàn)方面的需求不斷更新,導(dǎo)致系統(tǒng)前端頻繁升級(jí),復(fù)雜度持續(xù)提升,系統(tǒng)性能逐漸降低,很多同類在�？荚囅到y(tǒng)都存該問(wèn)題。為了解決這一問(wèn)題,本文從前端框架開(kāi)發(fā)和性能優(yōu)化的角度出發(fā),計(jì)劃設(shè)計(jì)一款前端開(kāi)發(fā)架構(gòu),可用于各類考試系統(tǒng)的前端開(kāi)發(fā)。本文首先基于英語(yǔ)通用考試系統(tǒng)進(jìn)行需求分析,總結(jié)發(fā)現(xiàn)目前通用性操作主要表現(xiàn)在前端方面,試題類型多樣,引起前端代碼冗余、性能變差,同類Web應(yīng)用都存在此類問(wèn)題,因此計(jì)劃將前端架構(gòu)設(shè)計(jì)工程化,降低重復(fù)開(kāi)發(fā),提高開(kāi)發(fā)效率。設(shè)計(jì)時(shí)前端采用MVC架構(gòu),降低前端結(jié)構(gòu)層、表現(xiàn)層和行為層的耦合度,采用WebPack模塊化打包工具、React組件化框架和后端模板引擎Twig,實(shí)現(xiàn)前端的模塊化和組件化。目標(biāo)是設(shè)計(jì)出一款開(kāi)發(fā)效率高、易擴(kuò)展、易維護(hù)、用戶體驗(yàn)及Web性能良好的前端架構(gòu)。本文將該前端架構(gòu)應(yīng)用于Web版本的英語(yǔ)通用考試系統(tǒng),對(duì)教師出題、組卷和學(xué)生現(xiàn)場(chǎng)考試等功能進(jìn)行設(shè)計(jì)開(kāi)發(fā),最后通過(guò)相應(yīng)的測(cè)試... 

【文章來(lái)源】：中國(guó)科學(xué)技術(shù)大學(xué)安徽省 211工程院校 985工程院校

【文章頁(yè)數(shù)】：77 頁(yè)

【學(xué)位級(jí)別】：碩士

【部分圖文】：

圖２．１?Ｒｅａｃｔ虛擬ＤＯＭ原理圖??

??根據(jù)３．２．１中的設(shè)計(jì)思想，設(shè)計(jì)出了本文前端系統(tǒng)架構(gòu)圖如圖３．１所示。??１?ｒ＼?產(chǎn)、ｔ?代碼規(guī)范??前端模塊?ＣＳＳ，ＪａｖａＳｃｒ．ｐｔ?卜?＾１＿＿＿??一以?＿?｜?模板引ｆ??＼１?ｍＬｙ?ｎ?Ｉ前端開(kāi)發(fā)??流?Ｗｅｂ?ｐａｃｋ工具１?ｄ候坎：心?、丁程化，??冋?ｓ?＾ｎ＾?（＼??后?卜?Ｒｅａｃｔ框架?Ｉ?＾組件化??＿?而????分?＾?自動(dòng)化測(cè)試工?????離?一‘具，打包〗５縮＝Ｚ＾＞項(xiàng)尚部署」??￣?＼ｙ?Ｉ工具?１????�。褂�?ＰＨＰ?的?Ｓｙｍｆｏｎｙ?框架，Ｎｏｄｅ．ｊｓ???１????數(shù)￥庫(kù)??圖３．〗系統(tǒng)架構(gòu)圖??從架構(gòu)圖可以看到總體一分為二，前后端分離。整體來(lái)看，后端是數(shù)據(jù)邏輯??處理的核心，采用的開(kāi)發(fā)語(yǔ)言是ＰＨＰ和Ｎｏｄｅ．ｊｓ。ＰＨＰ是近幾年特別受歡迎的后??臺(tái)開(kāi)發(fā)語(yǔ)言，因其易學(xué)，開(kāi)發(fā)過(guò)程快，編譯資源消耗少等特點(diǎn)受開(kāi)發(fā)人員親睞，??也符合本文設(shè)計(jì)的前端架構(gòu)對(duì)輕、快、易學(xué)、性能良好的要求。架構(gòu)的邏輯處理??中采用了?Ｓｙｍｆｏｎｙ框架

￥?ＱｙｅｓＪｏｎ?Ｑ?ｑｕｅｓｔｉｏｎ－ｔｙｐｅ＿ｅｄｉｔｊｓ??圖３．２?ＨＴＭＬ文件結(jié)構(gòu)圖３．３?ＣＳＳ、ＪａｖａＳｃｒｉｐｔ文件結(jié)構(gòu)??文件夾安排的核心思想是首先項(xiàng)目下面的第一層共同點(diǎn)抽象，不同點(diǎn)根據(jù)模??塊名稱劃分文件夾，然后模塊共同點(diǎn)盡可能抽象到有一個(gè)ｃｏｍｍｏｎ文件夾，模塊??自有的按照實(shí)體類名劃分文件夾，其次共同點(diǎn)再抽象，不同點(diǎn)根據(jù)頁(yè)面功能命名??文件名。??ｃ）?ＣＳＳ文件和ＪａｖａＳｃｒｉｐｔ文件引入方式，這個(gè)是前端比較熟知的統(tǒng)一規(guī)范，??ＣＳＳ放在ＨＴＭＬ頭文件引入，而ＪａｖａＳｃｒｉｐｔ放在文件末尾，防止阻塞頁(yè)面加載，??引入的時(shí)候按順序加載

【參考文獻(xiàn)】：
期刊論文
[1]基于BootStrap的WEB前端開(kāi)發(fā)應(yīng)用研究[J]. 丁蓮,張玲,杜巍.  電子制作. 2016(20)
[2]Web前端性能優(yōu)化方案與實(shí)踐[J]. 王成,李少元,鄭黎曉,緱錦,曾梅琴,劉慧敏.  計(jì)算機(jī)應(yīng)用與軟件. 2014(12)
[3]互聯(lián)網(wǎng)交通安全服務(wù)平臺(tái)前端架構(gòu)設(shè)計(jì)與研究[J]. 宗欣,全喜偉,何曉亮.  中國(guó)公共安全(學(xué)術(shù)版). 2014(03)
[4]Node.JS平臺(tái)下Web前端架構(gòu)的研究[J]. 鐘強(qiáng).  無(wú)線互聯(lián)科技. 2013(12)
[5]HTML5——下一代Web開(kāi)發(fā)標(biāo)準(zhǔn)研究[J]. 劉華星,楊庚.  計(jì)算機(jī)技術(shù)與發(fā)展. 2011(08)
[6]基于組件的計(jì)算機(jī)考試系統(tǒng)研究與實(shí)現(xiàn)[J]. 劉相濱,陽(yáng)波,王勝春,譚劍,楊鐵林.  計(jì)算機(jī)工程與應(yīng)用. 2006(05)

碩士論文
[1]Web前端工程組件化的分析與改進(jìn)[D]. 戴翔宇.吉林大學(xué) 2016
[2]通用型英語(yǔ)測(cè)試系統(tǒng)的研究與設(shè)計(jì)[D]. 高峰.中國(guó)科學(xué)技術(shù)大學(xué) 2016
[3]面向定制化廣告的前端組件化框架設(shè)計(jì)與實(shí)現(xiàn)[D]. 張佳梁.南京大學(xué) 2016
[4]面向Web2.0的web應(yīng)用前端開(kāi)發(fā)框架的設(shè)計(jì)與實(shí)現(xiàn)[D]. 劉靖桐.北京郵電大學(xué) 2014
[5]知識(shí)管理系統(tǒng)前端架構(gòu)的設(shè)計(jì)與實(shí)現(xiàn)[D]. 韓宗澤.西安電子科技大學(xué) 2013
[6]高性能Web框架的分析與應(yīng)用[D]. 楊穎瑩.北京郵電大學(xué) 2012
[7]基于WEB的英語(yǔ)在線考試系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn)[D]. 鄒宏.電子科技大學(xué) 2012
[8]計(jì)算機(jī)輔助英語(yǔ)考試系統(tǒng)中的現(xiàn)場(chǎng)考試子系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn)[D]. 王洪敏.中國(guó)科學(xué)技術(shù)大學(xué) 2011
[9]Web前端性能優(yōu)化的研究與應(yīng)用[D]. 張紫微.電子科技大學(xué) 2010
[10]基于B/S模式的網(wǎng)絡(luò)通用考試系統(tǒng)的研究與實(shí)現(xiàn)[D]. 李志奎.浙江工業(yè)大學(xué) 2009



本文編號(hào)：2931274