本发明涉及互联网,尤其是涉及一种前端页面设计校验方法、装置、设备及存储介质。
背景技术:
1、在网页开发领域,需要确保网页设计遵循统一的设计规范,验证设计遵循了既定的样式和布局规范,一旦发现不一致性,能够明确指出偏差所在并提供修改建议。目前,设计人员普遍采用人工比对的方法来核对设计中的网页与设计规范之间的差异。该过程涉及对网页的各个页面、组件、文字和插图进行逐一检查,以确保两者之间的高度一致性。
2、然而,当网页内容复杂,包含大量页面、组件、文字和插图时,人工比对的方法将变得极其耗时且效率低下。设计人员需要投入大量的时间和精力来完成比对工作,这不仅增加了项目的时间成本,而且由于人工操作的局限性,还可能导致比对结果的准确性降低。
技术实现思路
1、有鉴于此,本发明提供了一种前端页面设计校验方法,解决现有技术中需要人工校验设计图是否遵循既定的设计规范,增加人力成本且准确率低的技术问题。
2、根据本发明的第一方面,提供了一种前端页面设计校验方法,包括:
3、获取设计图数据文件,其中,设计图数据文件包括设计元素标识、元素样式、元素属性和数据字段;
4、基于解析模版,解析设计图数据文件,获取元素标识与元素属性、元素样式的映射关系,其中,解析模版用于描述数据字段与元素标识、元素样式、元素属性对应关系;
5、根据第一校验规则和映射关系,校验设计元素对应的元素样式是否满足对应元素属性的设计规则,以生成校验结果,其中,第一校验规则为元素属性对应的设计规则,校验结果为与元素标识对应的校验结果标识;
6、根据元素标识与元素属性、元素样式的映射关系以及校验结果,加载页面模版,生成设计预览页面。
7、根据本发明的第二方面,提供了一种前端页面设计校验装置,包括:
8、获取模块,用于获取设计图数据文件,其中,设计图数据文件包括设计元素标识、元素样式、元素属性和数据字段;
9、解析模块,用于基于解析模版,解析设计图数据文件,获取元素标识与元素属性、元素样式的映射关系,其中,解析模版用于描述数据字段与元素标识、元素样式、元素属性对应关系;
10、校验模块,用于根据第一校验规则和所述映射关系,校验设计元素对应的元素样式是否满足对应元素属性的设计规则,以生成校验结果,其中,第一校验规则为元素属性对应的设计规则,校验结果为与元素标识对应的校验结果标识;
11、渲染模块,用于根据元素标识与元素属性、元素样式的映射关系以及校验结果,加载页面模版,生成设计预览页面。
12、根据本发明的第三方面,提供了一种计算机设备,包括存储器、处理器以及存储在存储器中并可在处理器上运行的计算机程序,处理器执行计算机程序时实现上述前端页面设计校验方法的步骤。
13、根据本发明的第四方面,提供了一种计算机可读存储介质,计算机可读存储介质存储有计算机程序,计算机程序被处理器执行时实现上述前端页面设计校验方法的步骤。
14、借由上述技术方案,本发明提供的一种前端页面设计校验方法、装置、设备及存储介质,通过获取设计图数据文件,基于解析模版解析设计图数据文件,获取元素标识与元素属性、元素样式的映射关系,根据第一校验规则和映射关系,校验设计元素对应的元素样式是否满足对应元素属性的设计规则,以生成校验结果,根据映射关系以及校验结果,加载页面模版,生成设计预览页面。本发明实现了前端设计稿的自动校验,提高了设计稿与设计规范之间的比对效率,减少了人工干预,提高了比对准确率,提升了前端页面设计的效率。
15、上述说明仅是本发明技术方案的概述,为了能够更清楚了解本发明的技术手段,并可依照说明书的内容予以实施,并且为了让本发明的上述和其它目的、特征和优点能够更明显易懂,以下特举本发明的具体实施方式。
1.一种前端页面设计校验方法,其特征在于,包括:
2.根据权利要求1所述的前端页面设计校验方法,其特征在于,所述根据元素标识与元素属性、元素样式的映射关系以及所述校验结果,加载页面模版,生成设计预览页面的步骤之前,包括:
3.根据权利要求2所述的前端页面设计校验方法,所述根据元素标识与元素属性、元素样式的映射关系以及所述校验结果,加载页面模版,生成设计预览页面的步骤,包括:
4.根据权利要求1所述的前端页面设计校验方法,其特征在于,根据所述基于解析模版,解析所述设计图数据文件,获取元素标识与元素属性、元素样式的映射关系的步骤之前,包括:
5.根据权利要求1所述的前端页面设计校验方法,其特征在于,所述基于解析模版,解析所述设计图数据文件,获取元素标识与元素属性、元素样式的映射关系的步骤,包括:
6.根据权利要求3所述的前端页面设计校验方法,其特征在于,所述根据元素标识与元素属性、元素样式的映射关系,修改html模版文件中对应元素标识的元素样式的步骤,包括:
7.根据权利要求1所述的前端页面设计校验方法,其特征在于,所述设计图数据文件的格式包括json、xml、yaml和toml。
8.一种前端页面设计校验装置,其特征在于,包括:
9.一种计算机设备,包括存储器、处理器以及存储在所述存储器中并可在所述处理器上运行的计算机程序,其特征在于,所述处理器执行所述计算机程序时实现如权利要求1至7中任一项所述前端页面设计校验方法的步骤。
10.一种计算机可读存储介质,所述计算机可读存储介质存储有计算机程序,其特征在于,所述计算机程序被处理器执行时实现如权利要求1至7中任一项所述前端页面设计校验方法的步骤。