前端代码的生成方法、装置及计算机设备与流程

技术特征：
1.一种前端代码的生成方法，其特征在于，包括：获取ui设计稿文件，并按照预设的文件解析规则解析所述ui设计稿文件，获取ui界面中各个组件元素的第一前端数据；基于深度优先算法并根据所述第一前端数据生成各个所述组件元素的第一组件结构化数据；根据预设验证规则对所述第一组件结构化数据进行正确性验证，若判定所述第一组件结构化数据通过所述正确性验证，则基于预设的代码转换规则将所述第一组件结构化数据转换为所述ui设计稿文件对应的前端代码。2.根据权利要求1所述的方法，其特征在于，所述基于预设的代码转换规则将所述第一组件结构化数据转换为所述ui设计稿文件对应的前端代码，包括：解析所述第一组件结构化数据，以获取所述ui界面中至少一组件元素的组件信息，以及任意两个组件元素的组件关联关系，其中，所述组件信息包括：组件唯一标识、组件类型、组件元素在所述ui界面中的坐标、尺寸及外观属性；根据所述组件唯一标识以及所述组件类型在预设代码描述库中筛选与组件元素匹配的第一代码描述；利用逻辑配置模板生成所述组件关联关系对应的第二代码描述；将所述第一代码描述以及所述第二代码描述通过代码编译器编译生成所述ui设计稿文件对应的前端代码。3.根据权利要求2所述的方法，其特征在于，所述利用逻辑配置模板生成所述组件关联关系对应的第二代码描述，包括：在第一预设映射表中提取与所述组件关联关系对应的逻辑配置模板，其中，所述第一预设映射表包括所述组件关联关系与所述逻辑配置模板的对应关系；根据所确定出的逻辑配置模板生成对应的代码描述，并将所述组件元素在所述ui界面中的坐标、所述尺寸及外观属性添加至所述代码描述中，得到所述组件关联关系对应的第二代码描述。4.根据权利要求2所述的方法，其特征在于，所述将所述第一代码描述以及所述第二代码描述通过代码编译器编译生成所述ui设计稿文件对应的前端代码，包括：按照预设组合规则组合所述第一代码描述以及所述第二代码描述，得到所述ui设计稿文件对应ui界面的目标代码描述；将所述目标代码描述载入不同的代码编译器，生成对应不同平台的前端代码。5.根据权利要求1所述的方法，其特征在于，所述第一前端数据包括画布元素、控件信息、用户通过控件修改的信息、图层关系、布局信息、图层样式信息以及组件配置信息；所述按照预设的文件解析规则解析所述ui设计稿文件，获取ui界面中各个组件元素的第一前端数据，包括：读取并解析所述ui设计稿文件，提取画布元素和控件信息；利用组件元素的组件唯一标识在所述控件信息中查取控件节点，并对所述控件节点进行还原处理，还原用户通过控件修改的信息；根据所述画布元素中的节点布局尺寸确定图层关系和布局信息；将所述画布元素中的节点样式描述按照css样式规则转化为图层样式信息；
根据所述画布元素中的节点名称确定所需要生成代码的元素组件类型，并根据第二预设映射表以及所述元组组件类型提取组件配置信息，所述第二预设映射表中创建有元组组件类型与组件配置信息间的映射关系。6.根据权利要求1所述的方法，其特征在于，所述基于深度优先算法并根据所述第一前端数据生成各个所述组件元素的第一组件结构化数据，包括：按照深度优先搜索算法递归遍历所述第一前端数据中各个组件元素的所有路径，计算路径中每条边的权值之和，得出权值之和最大的路径；将所述权值之和最大的路径作为主干路径，倒置所有路径的时序关系，生成多叉树结构；按照自顶向下的顺序逐层读取所述多叉树各节点，将对象树序列化成json格式，得到第一组件结构化数据。7.根据权利要求1所述的方法，其特征在于，所述方法还包括：将基于所述第一组件结构化数据转换的所述前端代码加载到用户配置界面；若接收到所述用户配置页面上传的配置修改内容，则根据所述配置修改内容将所述第一前端数据调整为第二前端数据；基于深度优先算法并根据所述第二前端数据生成各个所述组件元素的第二组件结构化数据；根据预设的代码转换规则将所述第二组件结构化数据转换为所述ui设计稿文件对应的前端代码。8.一种前端代码的生成装置，其特征在于，包括：解析模块，用于获取ui设计稿文件，并按照预设的文件解析规则解析所述ui设计稿文件，获取ui界面中各个组件元素的第一前端数据；第一生成模块，用于基于深度优先算法并根据所述第一前端数据生成各个所述组件元素的第一组件结构化数据；第一转换模块，用于根据预设验证规则对所述第一组件结构化数据进行正确性验证，若判定所述第一组件结构化数据通过所述正确性验证，则基于预设的代码转换规则将所述第一组件结构化数据转换为所述ui设计稿文件对应的前端代码。9.一种存储介质，其上存储有计算机程序，其特征在于，所述程序被处理器执行时实现权利要求1至7中任一项所述的前端代码的生成方法。10.一种计算机设备，包括存储介质、处理器及存储在存储介质上并可在处理器上运行的计算机程序，其特征在于，所述处理器执行所述程序时实现权利要求1至7中任一项所述的前端代码的生成方法。

技术总结
本申请公开了一种前端代码的生成方法、装置及计算机设备，涉及计算机技术领域，可解决目前前端代码的生成方式存在重复劳动部分，导致代码生成效率低、工作量大的技术问题。包括：获取UI设计稿文件，并按照预设的文件解析规则解析所述UI设计稿文件，获取UI界面中各个组件元素的第一前端数据；基于深度优先算法并根据所述第一前端数据生成各个所述组件元素的第一组件结构化数据；根据预设验证规则对所述第一组件结构化数据进行正确性验证，若判定所述第一组件结构化数据通过所述正确性验证，则基于预设的代码转换规则将所述第一组件结构化数据转换为所述UI设计稿文件对应的前端代码。本申请适用于前端代码的自动化生成。本申请适用于前端代码的自动化生成。本申请适用于前端代码的自动化生成。


技术研发人员：梁雪超
受保护的技术使用者：平安国际智慧城市科技股份有限公司
技术研发日：2021.09.26
技术公布日：2021/12/16