前端架构工程化设计与在英语通用考试系统中的应用
发布时间：2020-12-22 06:07
随着互联网的普及,国内外很多大型考试都采用了在线考试方式,这些在线考试系统针对单个需求设计,开发时一次性完成,但是后续维护时,试题类型固定,扩展困难。随着Web2.0的兴起,系统多样化和用户体验方面的需求不断更新,导致系统前端频繁升级,复杂度持续提升,系统性能逐渐降低,很多同类在校考试系统都存该问题。为了解决这一问题,本文从前端框架开发和性能优化的角度出发,计划设计一款前端开发架构,可用于各类考试系统的前端开发。本文首先基于英语通用考试系统进行需求分析,总结发现目前通用性操作主要表现在前端方面,试题类型多样,引起前端代码冗余、性能变差,同类Web应用都存在此类问题,因此计划将前端架构设计工程化,降低重复开发,提高开发效率。设计时前端采用MVC架构,降低前端结构层、表现层和行为层的耦合度,采用WebPack模块化打包工具、React组件化框架和后端模板引擎Twig,实现前端的模块化和组件化。目标是设计出一款开发效率高、易扩展、易维护、用户体验及Web性能良好的前端架构。本文将该前端架构应用于Web版本的英语通用考试系统,对教师出题、组卷和学生现场考试等功能进行设计开发,最后通过相应的测试...
【文章来源】：中国科学技术大学安徽省 211工程院校 985工程院校
【文章页数】：77 页
【学位级别】：硕士
【部分图文】：
图２．１?Ｒｅａｃｔ虚拟ＤＯＭ原理图??
??根据３．２．１中的设计思想，设计出了本文前端系统架构图如图３．１所示。??１?ｒ＼?产、ｔ?代码规范??前端模块?ＣＳＳ，ＪａｖａＳｃｒ．ｐｔ?卜?＾１＿＿＿??一以?＿?｜?模板引ｆ??＼１?ｍＬｙ?ｎ?Ｉ前端开发??流?Ｗｅｂ?ｐａｃｋ工具１?ｄ候坎：心?、丁程化，??冋?ｓ?＾ｎ＾?（＼??后?卜?Ｒｅａｃｔ框架?Ｉ?＾组件化??＿?而????分?＾?自动化测试工?????离?一‘具，打包〗５缩＝Ｚ＾＞项尚部署」??￣?＼ｙ?Ｉ工具?１????！／使用?ＰＨＰ?的?Ｓｙｍｆｏｎｙ?框架，Ｎｏｄｅ．ｊｓ???１????数￥库??图３．〗系统架构图??从架构图可以看到总体一分为二，前后端分离。整体来看，后端是数据逻辑??处理的核心，采用的开发语言是ＰＨＰ和Ｎｏｄｅ．ｊｓ。ＰＨＰ是近几年特别受欢迎的后??台开发语言，因其易学，开发过程快，编译资源消耗少等特点受开发人员亲睐，??也符合本文设计的前端架构对轻、快、易学、性能良好的要求。架构的逻辑处理??中采用了?Ｓｙｍｆｏｎｙ框架
￥?ＱｙｅｓＪｏｎ?Ｑ?ｑｕｅｓｔｉｏｎ－ｔｙｐｅ＿ｅｄｉｔｊｓ??图３．２?ＨＴＭＬ文件结构图３．３?ＣＳＳ、ＪａｖａＳｃｒｉｐｔ文件结构??文件夹安排的核心思想是首先项目下面的第一层共同点抽象，不同点根据模??块名称划分文件夹，然后模块共同点尽可能抽象到有一个ｃｏｍｍｏｎ文件夹，模块??自有的按照实体类名划分文件夹，其次共同点再抽象，不同点根据页面功能命名??文件名。??ｃ）?ＣＳＳ文件和ＪａｖａＳｃｒｉｐｔ文件引入方式，这个是前端比较熟知的统一规范，??ＣＳＳ放在ＨＴＭＬ头文件引入，而ＪａｖａＳｃｒｉｐｔ放在文件末尾，防止阻塞页面加载，??引入的时候按顺序加载
【参考文献】：
期刊论文
[1]基于BootStrap的WEB前端开发应用研究[J]. 丁莲,张玲,杜巍. 电子制作. 2016(20)
[2]Web前端性能优化方案与实践[J]. 王成,李少元,郑黎晓,缑锦,曾梅琴,刘慧敏. 计算机应用与软件. 2014(12)
[3]互联网交通安全服务平台前端架构设计与研究[J]. 宗欣,全喜伟,何晓亮. 中国公共安全(学术版). 2014(03)
[4]Node.JS平台下Web前端架构的研究[J]. 钟强. 无线互联科技. 2013(12)
[5]HTML5——下一代Web开发标准研究[J]. 刘华星,杨庚. 计算机技术与发展. 2011(08)
[6]基于组件的计算机考试系统研究与实现[J]. 刘相滨,阳波,王胜春,谭剑,杨铁林. 计算机工程与应用. 2006(05)
硕士论文
[1]Web前端工程组件化的分析与改进[D]. 戴翔宇.吉林大学 2016
[2]通用型英语测试系统的研究与设计[D]. 高峰.中国科学技术大学 2016
[3]面向定制化广告的前端组件化框架设计与实现[D]. 张佳梁.南京大学 2016
[4]面向Web2.0的web应用前端开发框架的设计与实现[D]. 刘靖桐.北京邮电大学 2014
[5]知识管理系统前端架构的设计与实现[D]. 韩宗泽.西安电子科技大学 2013
[6]高性能Web框架的分析与应用[D]. 杨颖莹.北京邮电大学 2012
[7]基于WEB的英语在线考试系统的设计与实现[D]. 邹宏.电子科技大学 2012
[8]计算机辅助英语考试系统中的现场考试子系统的设计与实现[D]. 王洪敏.中国科学技术大学 2011
[9]Web前端性能优化的研究与应用[D]. 张紫微.电子科技大学 2010
[10]基于B/S模式的网络通用考试系统的研究与实现[D]. 李志奎.浙江工业大学 2009
本文编号：2931274
【文章来源】：中国科学技术大学安徽省 211工程院校 985工程院校
【文章页数】：77 页
【学位级别】：硕士
【部分图文】：
图２．１?Ｒｅａｃｔ虚拟ＤＯＭ原理图??
??根据３．２．１中的设计思想，设计出了本文前端系统架构图如图３．１所示。??１?ｒ＼?产、ｔ?代码规范??前端模块?ＣＳＳ，ＪａｖａＳｃｒ．ｐｔ?卜?＾１＿＿＿??一以?＿?｜?模板引ｆ??＼１?ｍＬｙ?ｎ?Ｉ前端开发??流?Ｗｅｂ?ｐａｃｋ工具１?ｄ候坎：心?、丁程化，??冋?ｓ?＾ｎ＾?（＼??后?卜?Ｒｅａｃｔ框架?Ｉ?＾组件化??＿?而????分?＾?自动化测试工?????离?一‘具，打包〗５缩＝Ｚ＾＞项尚部署」??￣?＼ｙ?Ｉ工具?１????！／使用?ＰＨＰ?的?Ｓｙｍｆｏｎｙ?框架，Ｎｏｄｅ．ｊｓ???１????数￥库??图３．〗系统架构图??从架构图可以看到总体一分为二，前后端分离。整体来看，后端是数据逻辑??处理的核心，采用的开发语言是ＰＨＰ和Ｎｏｄｅ．ｊｓ。ＰＨＰ是近几年特别受欢迎的后??台开发语言，因其易学，开发过程快，编译资源消耗少等特点受开发人员亲睐，??也符合本文设计的前端架构对轻、快、易学、性能良好的要求。架构的逻辑处理??中采用了?Ｓｙｍｆｏｎｙ框架
￥?ＱｙｅｓＪｏｎ?Ｑ?ｑｕｅｓｔｉｏｎ－ｔｙｐｅ＿ｅｄｉｔｊｓ??图３．２?ＨＴＭＬ文件结构图３．３?ＣＳＳ、ＪａｖａＳｃｒｉｐｔ文件结构??文件夹安排的核心思想是首先项目下面的第一层共同点抽象，不同点根据模??块名称划分文件夹，然后模块共同点尽可能抽象到有一个ｃｏｍｍｏｎ文件夹，模块??自有的按照实体类名划分文件夹，其次共同点再抽象，不同点根据页面功能命名??文件名。??ｃ）?ＣＳＳ文件和ＪａｖａＳｃｒｉｐｔ文件引入方式，这个是前端比较熟知的统一规范，??ＣＳＳ放在ＨＴＭＬ头文件引入，而ＪａｖａＳｃｒｉｐｔ放在文件末尾，防止阻塞页面加载，??引入的时候按顺序加载
【参考文献】：
期刊论文
[1]基于BootStrap的WEB前端开发应用研究[J]. 丁莲,张玲,杜巍. 电子制作. 2016(20)
[2]Web前端性能优化方案与实践[J]. 王成,李少元,郑黎晓,缑锦,曾梅琴,刘慧敏. 计算机应用与软件. 2014(12)
[3]互联网交通安全服务平台前端架构设计与研究[J]. 宗欣,全喜伟,何晓亮. 中国公共安全(学术版). 2014(03)
[4]Node.JS平台下Web前端架构的研究[J]. 钟强. 无线互联科技. 2013(12)
[5]HTML5——下一代Web开发标准研究[J]. 刘华星,杨庚. 计算机技术与发展. 2011(08)
[6]基于组件的计算机考试系统研究与实现[J]. 刘相滨,阳波,王胜春,谭剑,杨铁林. 计算机工程与应用. 2006(05)
硕士论文
[1]Web前端工程组件化的分析与改进[D]. 戴翔宇.吉林大学 2016
[2]通用型英语测试系统的研究与设计[D]. 高峰.中国科学技术大学 2016
[3]面向定制化广告的前端组件化框架设计与实现[D]. 张佳梁.南京大学 2016
[4]面向Web2.0的web应用前端开发框架的设计与实现[D]. 刘靖桐.北京邮电大学 2014
[5]知识管理系统前端架构的设计与实现[D]. 韩宗泽.西安电子科技大学 2013
[6]高性能Web框架的分析与应用[D]. 杨颖莹.北京邮电大学 2012
[7]基于WEB的英语在线考试系统的设计与实现[D]. 邹宏.电子科技大学 2012
[8]计算机辅助英语考试系统中的现场考试子系统的设计与实现[D]. 王洪敏.中国科学技术大学 2011
[9]Web前端性能优化的研究与应用[D]. 张紫微.电子科技大学 2010
[10]基于B/S模式的网络通用考试系统的研究与实现[D]. 李志奎.浙江工业大学 2009
本文编号：2931274
本文链接：https://www.wllwen.com/kejilunwen/ruanjiangongchenglunwen/2931274.html
