基于MVVM模式的Vue.js框架在物流软件自动化测试系统中的应用研究

发布时间：2020-09-23 08:00

　　 随着信息技术的不断发展,传统的C/S架构的开发模式已经逐渐被B/S架构模式所取代,前端工程化以及前后端分离的开发方式已经深入人心,选择一套合适的前端框架来进行前端工程的开发,将会大大提高系统性能和用户体验。同时随着互联网及电子商务的飞速发展,物流信息化受到越来越多的物流企业的重视。物流行业的蓬勃发展使得各种各样的物流软件及电子商务网站层出不穷,越来越多样化的需求也导致软件及界面交互复杂程度越来越高,因而迫切需要一套稳定高效的物流软件自动化测试系统来满足日益增长的物流软件自动化测试需求。本文将研究并开发一套基于前后端分离的方式开发的物流软件自动化测试系统,主要研究Vue.js框架在前端工程中的应用。本文利用当下比较流行的基于MVVM的Vue.js来开发物流软件自动化测试系统的前端工程,主要包括测试项目管理、被测系统管理、测试用例管理、功能点管理、元素库管理、对象库管理、脚本管理等主要模块。论文首先对物流软件自动化测试系统前端开发的核心技术进行了深入分析,如前端编程语言、MVVM模式、Vue.js框架、Bootstrap框架、FIS3构建工具等,重点分析了 Vue.js框架的虚拟Dom、Diff算法、响应式系统等关键技术;然后论文从物流软件自动化测试系统的需求分析入手,设计了系统的各个模块;最后,通过全面的测试对该物流软件自动化测试系统的实用性和可行性进行了验证和分析。
【学位单位】：北京邮电大学
【学位级别】：硕士
【学位年份】：2019
【中图分类】：TP311.53;F252
【部分图文】：

ＤＯＭ中文名称是文档对象模型。它是应用于ＨＴＭＬ的应用程序接口［２３］，一逡逑个ＨＴＭＬ页面可以看作一个多层次的ＤＯＭ树，ＤＯＭ树的分支终点即为一个节逡逑点，每个节点都包含着对象，例如图２－２所示的ＨＴＭＬ页面：逡逑？邋丨逡逑１逦＜ｈｔｍｌ＞逡逑２逦＜ｈｅａｄ＞逡逑３逦＜ｔｉｔｌｅ＞ｔｅｓｔ＜／ｔｉｔｌｅ＞逡逑４逦＜／ｈｅａｄ＞逡逑５逦＜ｂｏｄｙ＞逡逑６逦＜ｄｉｖ＞Ｈｅｌｌｏ邋ＤＯＭ！＜／ｄｉｖ＞逡逑７逦＜／ｂｏｄｙ＞逡逑８逦＜／ｈｔｍｌ＞逡逑Ｑ逡逑图２－２邋ＤＯＭ结构代码逡逑这个页面可以用图２－３所示的层次节点图来表示。逡逑ｈｔｍｌ逡逑逦ｈｅａｄ逡逑逦ｔｉｔｌｅ逡逑逦ｂｏｄｙ逦一￣邋ｔｅｓｔ逡逑逦邋ｄｉｖ逡逑逦Ｈｅｌｌｏ邋ＤＯＭ￣逡逑图２－３邋ＤＯＭ结构逡逑ＤＯＭ有三个级别，１级由ＤＯＭ邋ＣＯＲＥ和ＤＯＭ邋ＨＴＭＬ两部分组成，２级在逡逑原来的基础上扩展了鼠标点击和用户界面事件等模块，３级则又对ＤＯＭ进行了逡逑扩展，增加了对文档的统一加载和保存等功能［２４１。逡逑（３）逦ＢＯＭ逡逑ＢＯＭ中文名称为浏览器对象模型［２５１，ｗｉｎｄｏｗ对象是ＢＯＭ的核心，开发者逡逑可以通过ＢＯＭ来对浏览器的窗口进行操控，例如对窗口进行缩放和移动，弹出逡逑新窗口和关闭窗口等，另外还有ｌｏｃａｔｉｏｎ、ｎａｖｉｇａｔｏｒ？等独对象，这些主要用来对逡逑页

逦＜ｄｉｖ＞Ｈｅｌｌｏ邋ＤＯＭ！＜／ｄｉｖ＞逡逑３逦＜／ｂｏｄｙ＞逡逑图２－７真实ＤＯＭ结构逡逑相应的虚拟ＤＯＭ的伪代码如图２－８：逡逑…１二巡：灄逡逑１逦ｖａｎ邋Ｖｎｏｄｅ＝｛逡逑２逦ｔａｇ：邋ｃｃｂｏｄｙｙ），逡逑３逦ｃｈｉｌｄｒｅｎ：［逡逑４逦｛ｔａｇ：邋“ｄｉｖ＇邋ｔｅｘｔ：邋“Ｈｅｌｌｏ邋ＤＯＭ！’’｝逡逑５逦］逡逑６逦＞逡逑图２－８虚拟ＤＯＭ伪代码逡逑Ｄｉｆｆ算法在进行新旧节点比较时，只会在同一层级进行比较，而不会跨层级逡逑进行，这一过程可以用图２－９来形象的表示：逡逑Ｂｅｆｏｒｅ逦Ａｆｔｅｒ逡逑ｄ逦ｌ0］逡逑［ｑｐｉ——逡逑ＯＧＤＯ逦ＯａＤＯ逡逑Ｉ逦Ｌ＿邋－逦１逦逡逑图２－９邋Ｄｉｆｆ算法比较过程逡逑图２－１０是ｐａｔｃｈ函数的核心部分内容：逡逑ｒｃ？ｘ．－ｔ＾＇逦？逡逑１逦ｆｕｎｃｔｉｏｎ邋ｐａｔｃｈ邋（ｏｌｄＶｎｏｄｅ，邋ｖｎｏｄｅ）邋｛逡逑２逦／／邋ｓｏｍｅ邋ｃｏｄｅ逡逑３逦ｉｆ邋（ｓａｍｅＶｎｏｄｅ（ｏｌｄＶｎｏｄｅ，邋ｖｎｏｄｅ））邋｛逡逑４逦ｐａｔｃｈＶｎｏｄｅ（ｏｌｄＶｎｏｄｅ＾邋ｖｎｏｄｅ）逡逑５逦｝邋ｅｌｓｅ逦｛逡逑６逦ｃｏｎｓｔ邋ｏＥｌ邋＝邋ｏｌｄＶｎｏｄｅ．ｅｌ邋／／邋当前ｏｌｄＶｎｏｄｅＸ，！ｆ＾的Ｈ元敦节点逡逑７逦ｌｅｔ邋ｐａｒｅｎｔＥｌｅ邋＝邋ａｐｉ．ｐａｒｅｎｔＮｏｄｅ（ｏＥｌ）邋／／邋父元若逡逑８逦ｃｐｅａｔｅＥｌｅ（ｖｎｏｄｅ）邋／／邋根物丨Ｖｎｏｄｅ生成新元累？逡逑９逦ｉｆ邋（ｐａｒｅｎｔＥｌｅ邋！＝＝邋ｎｕｌｌ）邋｛逡逑１０逦ａｐｉ．ｉｎｓｅｒｔＢｅｆｏｒｅＣｐａｒｅｎｔＥｌｅ

Ｐａｔｃｈ函数接收ｏｌｄＶｎｏｄｅ和Ｖｎｏｄｅ两个参数，首先判断新旧节点是否需要逡逑对比，如果需要比较则执行ｐａｔｃｈＶｎｏｄｅ，如果不需要则直接用Ｖｎｏｄｅ来替换逡逑ｏｌｄＶｎｏｄｅ。图２－１１是ｓａｍｅＶｎｏｄｅ方法的核心内容。逡逑ｉｎｃｅｘ．ｈｔｎｌ逦？逦＇？！：■逡逑１逦ｆｕｎｃｔｉｏｎ邋ｓａｍｅＶｎｏｄｅ邋（ａ，邋ｂ）邋｛逡逑２逦ｒｅｔｕｒｎ邋｛逡逑３逦ａ．ｋｅｙ邋＝＝＝邋ｂ．ｋｅｙ邋＆＆邋／／邋ｋｅｙ（Ｓ逡逑４逦ａ．ｔａｇ邋＝＝＝邋ｂ．ｔａｇ邋＆＆邋／／邋标签名逡逑５逦ａ．邋ｉｓＣｏｍｍｅｎｔ邋＝＝＝邋ｂ．邋ｉｓＣｏｍｍｅｎｔ邋＆＆邋／／邋是否为注释节点逡逑６逦／／是否都定义了ｄａｔａ，ｄａｔａｉｉｌＶ邋＊些具体信息，例如ｏｎｃｌｉｃｋ邋，邋ｓｔｙｌｅ逡逑７逦ｉｓＤｅｆ（ａ．ｄａｔａ）邋＝＝＝邋ｉｓＤｅｆ（ｂ．ｄａｔａ）邋＆＆逡逑８逦ｓａｍｅＩｎｐｕｔＴｙｐｅ（ａ，邋ｂ）邋／／邋当标签是＜ｉｎｐｕｔ＞的时候，ｔｙｐｅ必须相Ｍ逡逑９逦｝逡逑１０邋｝逡逑图２－１１邋ｓａｍｅＶｎｏｄｅ函数核心代码逡逑如果确定两个节点需要比较，就对这两个节点执行ｐａｔｃｈＶｎｏｄｅ方法，图２－１２逡逑足ｐａｔｃｈ邋Ｖｎｏｄｅ方法的核心内容：逡逑１逦ｆｕｎｃｔｉｏｎ邋ｐａｔｃｈＶｎｏｄｅ邋（ｏｌｄＶｎｏｄｅ，邋ｖｎｏｄｅ）邋｛逡逑２逦ｃｏｎｓｔ邋ｅｌ邋＝邋ｖｎｏｄｅ．ｅｌ邋＝邋ｏｌｄＶｎｏｄｅ．ｅｌ逡逑３逦ｌｅｔ邋ｉ

【相似文献】

相关期刊论文 前10条

1 孙健玮;;高中数学自动化测试系统的建设与应用[J];报刊荟萃;2017年03期

2 刘小梅;;高考总复习“集合”教学设计——“高中数学自动化测试系统”在高三复习中的应用[J];中国信息技术教育;2010年13期

3 刘洋;;一种漏电保护器自动化测试系统的使用方法[J];自动化应用;2017年02期

4 孙魁元;;航空航天与国防电子新形势下自动化测试系统的运用分析[J];电子世界;2017年09期

5 杨巍;;软件自动化测试系统的设计[J];科技传播;2014年18期

6 李忠明,张威;短信自动化测试系统的开发与应用[J];移动通信;2004年06期

7 何文昌;导弹地面测试系统基本型的初探[J];系统工程与电子技术;1989年09期

8 李拉成;高新绪;杨新;陈佳实;;舵机微机自动化测试系统[J];航空兵器;1989年03期

9 谢荣清;侯晓东;;基于仪器库的随钻自动化测试系统的设计与实现[J];科技视界;2018年06期

10 苏永潮;;高中数学自动化测试系统的建设与应用[J];中国信息技术教育;2010年13期

相关会议论文 前7条

1 郭俊峰;苏东林;;基于Labview的电磁环境自动化测试系统设计[A];第十五届全国电磁兼容学术会议论文集[C];2005年

2 孙宇;徐凯;周国全;;基于虚拟仪器的冰箱控制器自动化测试系统设计[A];2016年中国家用电器技术大会论文集[C];2016年

3 王意;张永刚;姬广斌;付金勇;孙剑峰;;汽车CAN总线网络自动化测试系统[A];2014中国汽车工程学会年会论文集[C];2014年

4 黎晓云;傅文杰;;微波炉玻璃转盘应力自动化测试系统的研发[A];第十六届全国微波能应用学术会议专刊（下册）[C];2013年

5 王立敏;;导航接收机自动化测试系统的软件设计与实现[A];卫星导航定位与北斗系统应用2017——深化北斗应用 开创中国导航新局面[C];2017年

6 苗胜;林成文;郭恩全;;测试总线的发展、对比及展望[A];2011下一代自动测试系统学术研讨会论文集[C];2011年

7 姜春荣;谢碧华;王兆永;;信号源相位噪声的自动化测试系统[A];1991年全国微波会议论文集（卷Ⅱ）[C];1991年

相关重要报纸文章 前3条

1 湖北日报全媒记者 王婧 通讯员 余成玲 程林;机器换人，人去哪了[N];湖北日报;2019年

2 赵淑霞;点亮“太空天眼” 播撒“智慧之光”[N];中国航天报;2015年

3 贺瑾;深度开拓铁路大市场[N];中国航天报;2010年

相关硕士学位论文 前10条

1 柴青山;基于MVVM模式的Vue.js框架在物流软件自动化测试系统中的应用研究[D];北京邮电大学;2019年

2 刘q诿

本文编号：2825058