前端架構工程化設計與在英語通用考試系統(tǒng)中的應用
發(fā)布時間：2020-12-22 06:07
隨著互聯(lián)網的普及,國內外很多大型考試都采用了在線考試方式,這些在線考試系統(tǒng)針對單個需求設計,開發(fā)時一次性完成,但是后續(xù)維護時,試題類型固定,擴展困難。隨著Web2.0的興起,系統(tǒng)多樣化和用戶體驗方面的需求不斷更新,導致系統(tǒng)前端頻繁升級,復雜度持續(xù)提升,系統(tǒng)性能逐漸降低,很多同類在�？荚囅到y(tǒng)都存該問題。為了解決這一問題,本文從前端框架開發(fā)和性能優(yōu)化的角度出發(fā),計劃設計一款前端開發(fā)架構,可用于各類考試系統(tǒng)的前端開發(fā)。本文首先基于英語通用考試系統(tǒng)進行需求分析,總結發(fā)現目前通用性操作主要表現在前端方面,試題類型多樣,引起前端代碼冗余、性能變差,同類Web應用都存在此類問題,因此計劃將前端架構設計工程化,降低重復開發(fā),提高開發(fā)效率。設計時前端采用MVC架構,降低前端結構層、表現層和行為層的耦合度,采用WebPack模塊化打包工具、React組件化框架和后端模板引擎Twig,實現前端的模塊化和組件化。目標是設計出一款開發(fā)效率高、易擴展、易維護、用戶體驗及Web性能良好的前端架構。本文將該前端架構應用于Web版本的英語通用考試系統(tǒng),對教師出題、組卷和學生現場考試等功能進行設計開發(fā),最后通過相應的測試...
【文章來源】：中國科學技術大學安徽省 211工程院校 985工程院校
【文章頁數】：77 頁
【學位級別】：碩士
【部分圖文】：
圖２．１?Ｒｅａｃｔ虛擬ＤＯＭ原理圖??
??根據３．２．１中的設計思想，設計出了本文前端系統(tǒng)架構圖如圖３．１所示。??１?ｒ＼?產、ｔ?代碼規(guī)范??前端模塊?ＣＳＳ，ＪａｖａＳｃｒ．ｐｔ?卜?＾１＿＿＿??一以?＿?｜?模板引ｆ??＼１?ｍＬｙ?ｎ?Ｉ前端開發(fā)??流?Ｗｅｂ?ｐａｃｋ工具１?ｄ候坎：心?、丁程化，??冋?ｓ?＾ｎ＾?（＼??后?卜?Ｒｅａｃｔ框架?Ｉ?＾組件化??＿?而????分?＾?自動化測試工?????離?一‘具，打包〗５縮＝Ｚ＾＞項尚部署」??￣?＼ｙ?Ｉ工具?１????�。褂�?ＰＨＰ?的?Ｓｙｍｆｏｎｙ?框架，Ｎｏｄｅ．ｊｓ???１????數￥庫??圖３．〗系統(tǒng)架構圖??從架構圖可以看到總體一分為二，前后端分離。整體來看，后端是數據邏輯??處理的核心，采用的開發(fā)語言是ＰＨＰ和Ｎｏｄｅ．ｊｓ。ＰＨＰ是近幾年特別受歡迎的后??臺開發(fā)語言，因其易學，開發(fā)過程快，編譯資源消耗少等特點受開發(fā)人員親睞，??也符合本文設計的前端架構對輕、快、易學、性能良好的要求。架構的邏輯處理??中采用了?Ｓｙｍｆｏｎｙ框架
￥?ＱｙｅｓＪｏｎ?Ｑ?ｑｕｅｓｔｉｏｎ－ｔｙｐｅ＿ｅｄｉｔｊｓ??圖３．２?ＨＴＭＬ文件結構圖３．３?ＣＳＳ、ＪａｖａＳｃｒｉｐｔ文件結構??文件夾安排的核心思想是首先項目下面的第一層共同點抽象，不同點根據模??塊名稱劃分文件夾，然后模塊共同點盡可能抽象到有一個ｃｏｍｍｏｎ文件夾，模塊??自有的按照實體類名劃分文件夾，其次共同點再抽象，不同點根據頁面功能命名??文件名。??ｃ）?ＣＳＳ文件和ＪａｖａＳｃｒｉｐｔ文件引入方式，這個是前端比較熟知的統(tǒng)一規(guī)范，??ＣＳＳ放在ＨＴＭＬ頭文件引入，而ＪａｖａＳｃｒｉｐｔ放在文件末尾，防止阻塞頁面加載，??引入的時候按順序加載
【參考文獻】：
期刊論文
[1]基于BootStrap的WEB前端開發(fā)應用研究[J]. 丁蓮,張玲,杜巍. 電子制作. 2016(20)
[2]Web前端性能優(yōu)化方案與實踐[J]. 王成,李少元,鄭黎曉,緱錦,曾梅琴,劉慧敏. 計算機應用與軟件. 2014(12)
[3]互聯(lián)網交通安全服務平臺前端架構設計與研究[J]. 宗欣,全喜偉,何曉亮. 中國公共安全(學術版). 2014(03)
[4]Node.JS平臺下Web前端架構的研究[J]. 鐘強. 無線互聯(lián)科技. 2013(12)
[5]HTML5——下一代Web開發(fā)標準研究[J]. 劉華星,楊庚. 計算機技術與發(fā)展. 2011(08)
[6]基于組件的計算機考試系統(tǒng)研究與實現[J]. 劉相濱,陽波,王勝春,譚劍,楊鐵林. 計算機工程與應用. 2006(05)
碩士論文
[1]Web前端工程組件化的分析與改進[D]. 戴翔宇.吉林大學 2016
[2]通用型英語測試系統(tǒng)的研究與設計[D]. 高峰.中國科學技術大學 2016
[3]面向定制化廣告的前端組件化框架設計與實現[D]. 張佳梁.南京大學 2016
[4]面向Web2.0的web應用前端開發(fā)框架的設計與實現[D]. 劉靖桐.北京郵電大學 2014
[5]知識管理系統(tǒng)前端架構的設計與實現[D]. 韓宗澤.西安電子科技大學 2013
[6]高性能Web框架的分析與應用[D]. 楊穎瑩.北京郵電大學 2012
[7]基于WEB的英語在線考試系統(tǒng)的設計與實現[D]. 鄒宏.電子科技大學 2012
[8]計算機輔助英語考試系統(tǒng)中的現場考試子系統(tǒng)的設計與實現[D]. 王洪敏.中國科學技術大學 2011
[9]Web前端性能優(yōu)化的研究與應用[D]. 張紫微.電子科技大學 2010
[10]基于B/S模式的網絡通用考試系統(tǒng)的研究與實現[D]. 李志奎.浙江工業(yè)大學 2009
本文編號：2931274
【文章來源】：中國科學技術大學安徽省 211工程院校 985工程院校
【文章頁數】：77 頁
【學位級別】：碩士
【部分圖文】：
圖２．１?Ｒｅａｃｔ虛擬ＤＯＭ原理圖??
??根據３．２．１中的設計思想，設計出了本文前端系統(tǒng)架構圖如圖３．１所示。??１?ｒ＼?產、ｔ?代碼規(guī)范??前端模塊?ＣＳＳ，ＪａｖａＳｃｒ．ｐｔ?卜?＾１＿＿＿??一以?＿?｜?模板引ｆ??＼１?ｍＬｙ?ｎ?Ｉ前端開發(fā)??流?Ｗｅｂ?ｐａｃｋ工具１?ｄ候坎：心?、丁程化，??冋?ｓ?＾ｎ＾?（＼??后?卜?Ｒｅａｃｔ框架?Ｉ?＾組件化??＿?而????分?＾?自動化測試工?????離?一‘具，打包〗５縮＝Ｚ＾＞項尚部署」??￣?＼ｙ?Ｉ工具?１????�。褂�?ＰＨＰ?的?Ｓｙｍｆｏｎｙ?框架，Ｎｏｄｅ．ｊｓ???１????數￥庫??圖３．〗系統(tǒng)架構圖??從架構圖可以看到總體一分為二，前后端分離。整體來看，后端是數據邏輯??處理的核心，采用的開發(fā)語言是ＰＨＰ和Ｎｏｄｅ．ｊｓ。ＰＨＰ是近幾年特別受歡迎的后??臺開發(fā)語言，因其易學，開發(fā)過程快，編譯資源消耗少等特點受開發(fā)人員親睞，??也符合本文設計的前端架構對輕、快、易學、性能良好的要求。架構的邏輯處理??中采用了?Ｓｙｍｆｏｎｙ框架
￥?ＱｙｅｓＪｏｎ?Ｑ?ｑｕｅｓｔｉｏｎ－ｔｙｐｅ＿ｅｄｉｔｊｓ??圖３．２?ＨＴＭＬ文件結構圖３．３?ＣＳＳ、ＪａｖａＳｃｒｉｐｔ文件結構??文件夾安排的核心思想是首先項目下面的第一層共同點抽象，不同點根據模??塊名稱劃分文件夾，然后模塊共同點盡可能抽象到有一個ｃｏｍｍｏｎ文件夾，模塊??自有的按照實體類名劃分文件夾，其次共同點再抽象，不同點根據頁面功能命名??文件名。??ｃ）?ＣＳＳ文件和ＪａｖａＳｃｒｉｐｔ文件引入方式，這個是前端比較熟知的統(tǒng)一規(guī)范，??ＣＳＳ放在ＨＴＭＬ頭文件引入，而ＪａｖａＳｃｒｉｐｔ放在文件末尾，防止阻塞頁面加載，??引入的時候按順序加載
【參考文獻】：
期刊論文
[1]基于BootStrap的WEB前端開發(fā)應用研究[J]. 丁蓮,張玲,杜巍. 電子制作. 2016(20)
[2]Web前端性能優(yōu)化方案與實踐[J]. 王成,李少元,鄭黎曉,緱錦,曾梅琴,劉慧敏. 計算機應用與軟件. 2014(12)
[3]互聯(lián)網交通安全服務平臺前端架構設計與研究[J]. 宗欣,全喜偉,何曉亮. 中國公共安全(學術版). 2014(03)
[4]Node.JS平臺下Web前端架構的研究[J]. 鐘強. 無線互聯(lián)科技. 2013(12)
[5]HTML5——下一代Web開發(fā)標準研究[J]. 劉華星,楊庚. 計算機技術與發(fā)展. 2011(08)
[6]基于組件的計算機考試系統(tǒng)研究與實現[J]. 劉相濱,陽波,王勝春,譚劍,楊鐵林. 計算機工程與應用. 2006(05)
碩士論文
[1]Web前端工程組件化的分析與改進[D]. 戴翔宇.吉林大學 2016
[2]通用型英語測試系統(tǒng)的研究與設計[D]. 高峰.中國科學技術大學 2016
[3]面向定制化廣告的前端組件化框架設計與實現[D]. 張佳梁.南京大學 2016
[4]面向Web2.0的web應用前端開發(fā)框架的設計與實現[D]. 劉靖桐.北京郵電大學 2014
[5]知識管理系統(tǒng)前端架構的設計與實現[D]. 韓宗澤.西安電子科技大學 2013
[6]高性能Web框架的分析與應用[D]. 楊穎瑩.北京郵電大學 2012
[7]基于WEB的英語在線考試系統(tǒng)的設計與實現[D]. 鄒宏.電子科技大學 2012
[8]計算機輔助英語考試系統(tǒng)中的現場考試子系統(tǒng)的設計與實現[D]. 王洪敏.中國科學技術大學 2011
[9]Web前端性能優(yōu)化的研究與應用[D]. 張紫微.電子科技大學 2010
[10]基于B/S模式的網絡通用考試系統(tǒng)的研究與實現[D]. 李志奎.浙江工業(yè)大學 2009
本文編號：2931274
本文鏈接：http://sikaile.net/kejilunwen/ruanjiangongchenglunwen/2931274.html
