一种检测flex布局属性完整性的方法及系统技术方案

本发明专利技术提供一种检测flex布局属性完整性的方法和系统，该方法包括以下步骤：接收待检测的网站地址；访问所述网站地址对应的网页并获取所述网页的源码；从网页源码中查找CSS样式文件；在CSS样式文件中查找是否有flex属性；查找到flex属性，则继续检测flex属性的个数和flex属性的顺序；没查找到flex属性，则退出，并提示没有flex属性；该系统包括：网站地址输入模块，用于接收待检测的网站地址；网页源码获取模块，用于从网站地址对应的网页中获取网页的源代码；CSS文件获取模块，用于从网页源代码中获取CSS样式文件；Flex属性查找模块，用于从CSS样式文件中查找flex属性；Flex属性个数检测模块和Flex属性顺序检测模块，用于检测CSS文件中flex属性的个数和排列顺序。

Method and system for detecting integrality of flex layout attribute

The present invention provides a method and system for detecting flex layout attributes integrity, the method comprises the following steps: receiving the detected website address; access to the website address of the corresponding web page and get the web page from the web page source code for source code; CSS style file; search in the CSS style file is the flex attribute; find the flex attribute, it continues to detect the flex attribute number and flex attribute order; not to search the flex attribute, then exit, and no flex attribute; the system comprises a web address input module for receiving the undetected website address; Web page source code acquisition module, used to obtain the corresponding web page from the web site the address of the page source code; CSS file acquisition module is used for obtaining the CSS style files from the web page source code; Flex attribute lookup module is used from the CSS style file Find the flex property; the Flex property number detection module and the Flex property sequential detection module are used to detect the number of flex attributes in the CSS file and the order of the arrangement.

【技术实现步骤摘要】
一种检测flex布局属性完整性的方法及系统
本专利技术属于计算机互联网
，尤其涉及到一种检测flex布局属性完整性的方法及系统。
技术介绍
随着互联网的发展,用户的体验直接关系到是否能够留住用户，那么前端开发布局直接关系到用户体验，前端开发flex布局对日益复杂的前端开发布局来说是一种利器，并且在不同的屏幕上能实现真正的响应式式布局，可以不再单纯地依赖百分比和float的强拼硬凑来达到需求，并且能弹性的伸缩元素，简洁易维护的代码，所以flex布局受到开发人员的各种青睐。但越来越多的用户通过各种自己喜爱的浏览器进行网页浏览，造成网页开发人员必须具备跨浏览器开发的能力，而flex的除了chrome外其他浏览器兼容性并没有那么好，如果兼容性没有写完整，或者兼容性属性的顺序错乱直接会不起作用，所以检查flex盒模型的写法很有必要。现有的检查技术一般是在开发出来的网页在不同的浏览器中反复测试才能看出是否有问题，这样不管对测试人员测试和开发人员解bug都需要付出大量的时间和精力。
技术实现思路
本专利技术的目的在于提供一种检测flex布局属性完整性的方法及系统，用于解决现有技术中检测flex盒模型兼容性属性的完整性及顺序的正确性所造成的不仅工作量大而且有可能不准确的问题。本专利技术一种检测flex布局属性完整性的方法，所述检测flex布局属性完整性的方法包括：接收待检测的网站地址；访问所述网站地址对应的网页并获取所述网页的源码；从网页源码中查找CSS样式文件；在CSS样式文件中查找是否有flex属性；查找到flex属性，则继续检测flex属性的个数；检测flex属性的顺序；没查找到flex属性，则退出，并提示没有flex属性。其中，所述访问网站地址对应的网页并获取所述网页源代码是通过后台执行完成的。其中，所述flex属性包括：5个display属性，所述5个display属性值分别为-webkit-flex、-moz-box、-moz-flex、-ms-flexbox、flex；6个水平居中属性，分别为-webkit-box-align、-moz-boxx-align、-ms-flex-pack、-webkit-justify-content、-moz-justify-content、justify-content；6个垂直居中属性，分别为-webkit-box-pack、-moz-boxx-pack、-ms-flex-align、-webkit-align-items、-moz-align-items、align-items；4个平铺方式属性，分别为-webkit-box-orient、-webkit-flex-direction、-ms-flex-direction、flex-direction；5个换行属性，分别为-webkit-flex-wrap、-moz-flex-wrap、-ms-flex-wrap、-o-flex-wrap、flex-wrap。其中，所述flex属性的标准属性值放在所有display属性的最后。其中，所述flex布局属性完整性的检测结果以消息框显示，如果所述属性个数不对或所述属性排列顺序不对，显示此时代码行数和CSS文件名；其中，若所述属性个数和所述属性排列顺序都对，显示flex布局属性完整的提示。其中，本专利技术的一种检测flex布局属性完整性的系统，包括：网站地址输入模块，用于接收待检测的网站地址；网页源码获取模块，与所述网站输入模块相连，用于从所述网站输入模块中获取所述网站地址，访问所述网站地点在对应的网页并获取所述网页的源代码；CSS文件获取模块，用于从所述网页源代码中获取CSS样式文件；Flex属性查找模块，用于从CSS样式文件中查找flex属性；Flex属性个数检测模块，用于检测CSS文件中flex属性的个数；Flex属性顺序检测模块，用于检测CSS文件中flex属性中的各display属性的顺序。其中，所述访问网站地址对应的网页并获取所述网页源代码是通过后台执行完成的。其中，所述flex属性包括：5个display属性，所述5个display属性值分别为-webkit-flex、-moz-box、-moz-flex、-ms-flexbox、flex；6个水平居中属性，分别为-webkit-box-align、-moz-boxx-align、-ms-flex-pack、-webkit-justify-content、-moz-justify-content、justify-content；6个垂直居中属性，分别为-webkit-box-pack、-moz-boxx-pack、-ms-flex-align、-webkit-align-items、-moz-align-items、align-items；4个平铺方式属性，分别为-webkit-box-orient、-webkit-flex-direction、-ms-flex-direction、flex-direction；5个换行属性，分别为-webkit-flex-wrap、-moz-flex-wrap、-ms-flex-wrap、-o-flex-wrap、flex-wrap。其中，所述flex属性的标准属性值放在所有display属性的最后。其中，将所述flex布局属性完整性的检测结果以消息框显示，包括：所述属性个数不对或所述属性排列顺序不对或所述属性个数和所述属性排列顺序都不对，显示此时代码行数和CSS文件名；当所述属性个数和属性排列顺序都对，所述显示flex布局属性完整的提示。本专利技术的实施例提供的技术方案可以包括以下有益效果：针对以上特点，本专利技术一种检测flex布局属性完整性的方法和系统，能够快速确定flex盒模型的属性的写法是否完整，编写顺序是否正确，并对错误进行准确的定位提示，从而提高工作效率。附图说明图1是检测flex布局属性完整性的方法流程图。图2是检测flex布局属性完整性的系统框图。具体实施方式以下参考附图，对本专利技术予以进一步地详尽阐述。请参阅附图1，在本实施例中，该一种检测flex布局属性完整性的方法，所述检测flex布局属性完整性的方法包括以下步骤：步骤S1：接收待检测的网站地址；步骤S2：访问所述网站地址对应的网页并获取所述网页的源码；步骤S3：从网页源码中查找CSS样式文件；步骤S4：在CSS样式文件中查找是否有flex属性；步骤S5：查找到flex属性，则继续检测flex属性的个数；步骤S6：检测flex属性的顺序；步骤S7：如果没查找到flex属性，则退出，并提示没有flex属性。其中，步骤S2所述访问网站地址对应的网页并获取所述网页源代码是通过后台执行完成的。其中，步骤4中所述flex属性包括：5个display属性，所述5个display属性值分别为-webkit-flex、-moz-box、-moz-flex、-ms-flexbox、flex；6个水平居中属性，分别为-webkit-box-align、-moz-boxx-align、-ms-flex-pack、-webkit-justify-content、-moz-justify-content、justify-content；6本文档来自技高网...

【技术保护点】
一种检测flex布局属性完整性的方法，其特征在于，包括以下步骤：接收待检测的网站地址；访问所述网站地址对应的网页并获取所述网页的源码；从网页源码中查找CSS样式文件；在CSS样式文件中查找是否有flex属性；查找到flex属性，则继续检测flex属性的个数；检测flex属性的顺序；没查找到flex属性，则退出，并提示没有flex属性。

【技术特征摘要】
1.一种检测flex布局属性完整性的方法，其特征在于，包括以下步骤：接收待检测的网站地址；访问所述网站地址对应的网页并获取所述网页的源码；从网页源码中查找CSS样式文件；在CSS样式文件中查找是否有flex属性；查找到flex属性，则继续检测flex属性的个数；检测flex属性的顺序；没查找到flex属性，则退出，并提示没有flex属性。2.根据权利要求1所述的检测flex布局属性完整性的方法，其特征在于，所述访问网站地址对应的网页并获取所述网页源代码是通过后台执行完成的。3.根据权利要求1所述的检测flex布局属性完整性的方法，其特征在于，所述flex属性包括：5个display属性，所述5个display属性值分别为-webkit-flex、-moz-box、-moz-flex、-ms-flexbox、flex；6个水平居中属性，分别为-webkit-box-align、-moz-boxx-align、-ms-flex-pack、-webkit-justify-content、-moz-justify-content、justify-content；6个垂直居中属性，分别为-webkit-box-pack、-moz-boxx-pack、-ms-flex-align、-webkit-align-items、-moz-align-items、align-items；4个平铺方式属性，分别为-webkit-box-orient、-webkit-flex-direction、-ms-flex-direction、flex-direction；5个换行属性，分别为-webkit-flex-wrap、-moz-flex-wrap、-ms-flex-wrap、-o-flex-wrap、flex-wrap。4.根据权利要求3所述的检测flex布局属性完整性的方法，其特征在于，所述flex属性的标准属性值放在所有display属性的最后。5.根据权利要求1所述的检测flex布局属性完整性的方法，其特征在于，将所述flex布局属性完整性的检测结果以消息框显示，包括：没有查找到所述flex属性，显示此布局方法为非flex布局；查找到flex属性，且所述属性个数不对或所述属性排列顺序不对，显示此时代码行数和CSS文件名；查找到flex属性，且所述属性个数和所述属性排列顺序都对，显示flex布局属性完整的提示。6.一种检测flex布局属性完整性的系统，其特征在于，包括：网站地址输入模块，用于接收待检...

【专利技术属性】
技术研发人员：范春燕，袁北林，莫伟雄，罗辉，韩仲亮，谭和华，李耀军，
申请(专利权)人：深圳市赛亿科技开发有限公司，
类型：发明
国别省市：广东,44