页面生成方法、装置、服务器及存储介质与流程

本申请涉及金融页面开发，尤其涉及一种页面生成方法、装置、服务器及存储介质。

背景技术：

1、在金融系统中，不管是车险或者非车险，根据业务需求，都需要制定很多个性化ui(user interface，用户界面)产品。前端技术人员根据ui设计人员提供的设计稿进行页面开发，目前在工作中前端技术人员开发完页面需要让ui设计人员对开发效果进行审核，指出开发中的不足，该方法不仅工作效率低，也容易导致设计稿的细节被遗漏，导致最终设计的页面存在较多缺陷。

技术实现思路

1、本申请提供了一种页面生成方法、装置、服务器及存储介质，旨在解决现有在工作中前端技术人员开发完页面需要让ui设计人员对开发效果进行审核，指出开发中的不足，该方法不仅工作效率低，也容易导致设计稿的细节被遗漏，导致最终设计的页面存在较多缺陷的问题。

2、第一方面，本申请提供了一种页面生成方法，所述方法包括：

3、获取根据设计图像所开发的原始页面；

4、获取原始页面的文档对象模型树，解析文档对象模型树获取文档对象模型树的各个节点对应的层叠样式表信息；

5、根据层叠样式表信息生成原始页面对应的页面图像；

6、将页面图像与设计图像进行特征比对，生成页面图像与设计图像的差异化信息；

7、根据差异化信息修改文档对象模型树的各个节点对应的层叠样式表信息，根据修改后的文档对象模型树渲染生成对应的页面。

8、第二方面，本申请提供了一种页面生成装置，包括：

9、页面获取模块，用于获取根据设计图像所开发的原始页面；

10、解析获取模块，用于获取所述原始页面的文档对象模型树，解析所述文档对象模型树获取所述文档对象模型树的各个节点对应的所述层叠样式表信息；

11、图像生成模块，用于根据所述层叠样式表信息生成所述原始页面对应的页面图像；

12、差异生成模块，用于将所述页面图像与所述设计图像进行特征比对，生成所述页面图像与所述设计图像的差异化信息；

13、渲染生成模块，用于根据所述差异化信息修改所述文档对象模型树的各个节点对应的所述层叠样式表信息，根据修改后的所述文档对象模型树渲染生成对应的页面。

14、第三方面，本申请提供了一种页面生成方法，所述方法包括：

15、获取根据设计图像所开发的原始页面，获取所述原始页面的文档对象模型树；

16、获取所述设计图像的层叠样式表信息，根据所述层叠样式表信息生成预设文档对象模型树，所述预设文档对象模型树的结构与所述文档对象模型树的结构相同；

17、将所述预设文档对象模型树的各个节点对应的所述层叠样式表信息与所述原始页面的文档对象模型树的各个节点对应的所述层叠样式表信息进行比对，生成差异化信息；

18、根据所述差异化信息修改所述原始页面的文档对象模型树的各个节点对应的所述层叠样式表信息，根据修改后的所述文档对象模型树渲染生成对应的页面。

19、第四方面，本申请提供了一种页面生成装置，包括：

20、模型获取模块，用于获取根据设计图像所开发的原始页面，获取所述原始页面的文档对象模型树；

21、信息获取模块，用于获取所述设计图像的层叠样式表信息，根据层叠样式表信息生成预设文档对象模型树，所述预设文档对象模型树的结构与所述文档对象模型树的结构相同；

22、信息比对模块，用于将所述预设文档对象模型树的各个节点对应的所述层叠样式表信息与所述原始页面的文档对象模型树的各个节点对应的所述层叠样式表信息进行比对，生成差异化信息；

23、渲染生成模块，用于根据所述差异化信息修改所述原始页面的文档对象模型树的各个节点对应的所述层叠样式表信息，根据修改后的所述文档对象模型树渲染生成对应的页面。

24、第五方面，本申请提供了一种服务器，所述服务器包括处理器、存储器、以及存储在所述存储器上并可被所述处理器执行的计算机程序，所述存储器存储有策略模型，其中所述计算机程序被所述处理器执行时，实现如本申请任一实施例所提供的页面生成方法。

25、第六方面，本申请提供了一种计算机可读存储介质，所述计算机可读存储介质上存储有计算机程序，所述计算机程序被处理器执行时使所述处理器实现如本申请任一实施例所提供的页面生成方法。

26、本申请提供了一种页面生成方法、装置、服务器及存储介质，方法通过获取根据设计图像所开发的原始页面；获取原始页面的文档对象模型树，解析文档对象模型树获取文档对象模型树的各个节点对应的层叠样式表信息；根据层叠样式表信息生成原始页面对应的页面图像；将页面图像与设计图像进行特征比对，生成页面图像与设计图像的差异化信息；根据差异化信息修改文档对象模型树的各个节点对应的层叠样式表信息，根据修改后的文档对象模型树渲染生成对应的页面。进而能通过获取原始页面的文档对象模型树的各个节点对应的层叠样式表信息生成原始页面对应的页面图像，将页面图像与ui设计师所提供的设计图像进行特征比对，根据差异化信息修改文档对象模型树的各个节点对应的层叠样式表信息，根据修改后的文档对象模型树渲染生成对应的页面，使得前端开发人员能够自己比对设计稿差异，从而节省ui设计人员以及测试人员不必要工作，在提高所设计的页面的准确性的同时也提升了相关工作人员的工作效率。

27、应当理解的是，以上的一般描述和后文的细节描述仅是示例性和解释性的，并不能限制本申请。

技术特征：

1.一种页面生成方法，其特征在于，所述方法包括：

2.根据权利要求1所述的方法，其特征在于，所述根据所述层叠样式表信息生成所述原始页面对应的页面图像，包括：

3.根据权利要求1所述的方法，其特征在于，所述根据所述层叠样式表信息生成所述原始页面对应的页面图像之前，还包括：

4.根据权利要求1所述的方法，其特征在于，所述根据所述层叠样式表信息生成所述原始页面对应的页面图像，还包括：

5.根据权利要求4所述的方法，其特征在于，所述将所述页面图像与所述设计图像进行特征比对，包括：

6.一种页面生成装置，其特征在于，包括：

7.一种页面生成方法，其特征在于，所述方法包括：

8.一种页面生成装置，其特征在于，包括：

9.一种服务器，其特征在于，所述服务器包括处理器、存储器、以及存储在所述存储器上并可被所述处理器执行的计算机程序，所述存储器存储有策略模型，其中所述计算机程序被所述处理器执行时，实现如权利要求1至5中任一项所述的页面生成方法，或，实现如权利要求7所述的页面生成方法。

10.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质上存储有计算机程序，所述计算机程序被处理器执行时使所述处理器实现如权利要求1至5中任一项所述的页面生成方法，或，实现如权利要求7所述的页面生成方法。

技术总结
本申请提供了一种页面生成方法、装置、服务器及存储介质，方法通过获取根据设计图像所开发的原始页面；获取原始页面的文档对象模型树，解析文档对象模型树获取文档对象模型树的各个节点对应的层叠样式表信息；根据层叠样式表信息生成原始页面对应的页面图像；将页面图像与设计图像进行特征比对，生成页面图像与设计图像的差异化信息；根据差异化信息修改文档对象模型树的各个节点对应的层叠样式表信息，根据修改后的文档对象模型树渲染生成对应的页面。进而使得前端开发人员能够自己比对设计稿差异，从而节省UI设计人员以及测试人员不必要工作，在提高所设计的页面的准确性的同时也提升了相关工作人员的工作效率。

技术研发人员：郑黎明
受保护的技术使用者：中国平安财产保险股份有限公司
技术研发日：
技术公布日：2024/4/17