[发明专利]一种前端代码生成方法

说明书

本发明公开了一种前端代码生成方法，涉及软件系统技术领域，具体包含步骤如下：将UI工程师提供的设计图原稿,一键生成标准前端样式代码，并可在线编辑页面样式，代码实时生成最新；自动生成前端所需的代码，提高了前端代码生成效率，进而提高了前端开发的效率。在线编辑静态页样式，代码实时生成最新；从而提高代码规范和开发效率；本发明可快速生成前端静态页面代码，省去人员的开发，并且可在线编辑及修改页面样式，大大提高效率；本发明快速生成业务代码。实现代码风格统一和结构统一，便于维护开发代码。

技术领域

本发明属于软件系统技术领域，尤其涉及一种前端代码生成方法。

背景技术

现在正常前端开发流程-由设计师出 UI设计图、小前端编写静态页面。页面逻辑相同。工作量重复且开发效率低。通请本文发明公开了一种自动生成前端静态页代码的方法。

现在前端开发存在的问题：

1.前端编写静态页面，页面编写规则相同。重复劳动效率。

2.每个前端开发人员的代码风格和编写方式不一致。代码可读性差。导致后期其它员工维护成本高。

发明内容

本发明所要解决的技术问题是针对背景技术的不足提供一种前端代码生成方法，其实现一键生成标准业务模块代码，及待处理细节代码模块。在线编辑静态页样式，代码实时生成最新；从而提高代码规范和开发效率。

本发明为解决上述技术问题采用以下技术方案

一种前端代码生成方法，具体包含如下步骤；

步骤1，基于现有sketch中imgcook插件将设计原稿解析成为初始UI样式数据；

步骤2，根据预设的解析数据格式规则，对初始UI样式数据进行过滤筛选整合，进而获得与初始UI样式数据所对应的第二前端数据；

步骤3，依据生成的第二前端数据的结果，并基于预设的代码规则转换成与第二前端数据所对应的前端初始化代码；

步骤4，将前端初始化代码加载到用户配置界面；可加载成功的前端页面进行个性化配置；及界面功能的划分；根据个性化配置修改内容对第二前端数据进行重新整合成为最终前端数据；

步骤5，根据预设的代码规则转换成最终开发使用的前端代码。

作为本发明一种前端代码生成方法的进一步优选方案，在步骤2中：所述初始UI样式数据的数据类型为初始UI样式数据中的类型数据和类型参数数据。

作为本发明一种前端代码生成方法的进一步优选方案，所述步骤3具体如下：步骤3.1，获取预先定义好的代码模板，提供对第二前端数据进行转换的规则；

步骤3.2，输出最新的前端初始化代码；

其中，输出前端初始化代码方法包括：使用当前已有技术node中文件读写模块fs统一

进行代码生成到文件夹；代码风格使用现有前端插件perttier 进行代码格式化，实现代码风格统一；步骤3.3，根据生成的第二前端数据和获取预先定义好的代码模板提供对第二前端数据

进行装换规则方法；

步骤3.4，进行匹配生成所需代码； 其中，生成代码方式；使用原生js 操作dom的API方法生成对应的dom节点代码,以及

代码的css样式代码；并且在每一个生成的父级头部放入当前父级下面所有的子节点数据；子节点数据包括：节点的标签节点的展示的值；使用HTML的data-*属性放入父级头部；作为本发明一种前端代码生成方法的进一步优选方案，在步骤4中，用户进行个性化配置方法，具体如下：

步骤4.1，根据生成好的前端页面进行修改文案及个性化方案；