CN111124380A - 一种前端代码生成方法 - Google Patents

Abstract

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

Description

一种前端代码生成方法

技术领域

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

背景技术

现在正常前端开发流程-由设计师出 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，根据生成好的前端页面进行修改文案及个性化方案；

步骤4.2，点击生成页面的页面块；

步骤4.3，通过html getAttribute方法获取生成代码过程中放在父级头部的所有子节点数据；并且在用户可操作区域渲染操作区--渲染操作区使用提前定义好的操作区代码模板渲染操作区域；

步骤4.4，用户修改区域参数，进而获得当前代码块最新的数据参数。 作为本发明一种前端代码生成方法的进一步优选方案，所述步骤5具体如下，

步骤5.1，获取用户修改区域最终数据；

步骤5.2，将步骤5.1获取的用户修改区域最终数据与步骤3中前端第二参数进行修改，生成最新的前端第二参数；

步骤5.3，使用步骤4生成代码规则输出最新的代码模块，进行实时刷新。

本发明采用以上技术方案与现有技术相比，具有以下技术效果：

1、本发明可快速生成前端静态页面代码，省去人员的开发，并且可在线编辑及修改页面样式，大大提高效率；

2、本发明快速生成业务代码。实现代码风格统一和结构统一，便于维护开发代码。

附图说明

图1是本发明代码生成整体逻辑示意图；

图2是本发明用户点击页面块逻辑示意图。

具体实施方式

下面结合附图对本发明的技术方案做进一步的详细说明：

下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。

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

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

一种前端代码生成方法，如图1所示，具体包含如下步骤:

步骤1，根据UI设计师提供的设计师原稿;基于现有sketch 中imgcook插件 可以将设计原稿解析成为初始UI样式数据；

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

根据预设的解析数据格式规则，对初始UI样式数据进行过滤筛选整合。获得与初始UI样式数据所对应的第二前端数据。包括：

遍历所述初始UI样式数据。查找所需的数据类型和数据参数进行重新组装。所需数据类型为初始UI样式数据中的类型数据和类型参数数据。 获得初始UI样式数据所对应的第二前端数据；

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

获取预先定义好的代码模板；代码模板如字典库-提供对第二前端数据进行转换的规则；并且输出最新的前端初始化代码;

提供对第二前端数据进行装换规则方法包括：

根据生成的第二前端数据-和获取预先定义好的代码模板；进行匹配生成所需代码；

生成代码方式；使用原生js 操作dom的API方法 生成对应的dom节点代码,以及代码的css样式代码。并且在每一个生成的父级头部放入当前父级下面所有的子节点数据。子节点数据包括：节点的标签节点的展示的值；使用HTML的data-*属性放入父级头部；

输出前端初始化代码方法包括：使用当前已有技术node中fs(文件读写模块)统一进行代码生成到文件夹；代码风格使用 现有前端插件perttier 进行代码格式化。实现代码风格统一；

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

用户进行个性化配置方法包括：

生成好的前端页面-用户可进行修改文案及个性化方案。如图2所示，用户可点击生成页面的页面块；点击页面块 通过 现有方法 html getAttribute方法可以获取生成代码过程中放在父级头部的所有子节点数据；并且在用户可操作区域渲染操作区--渲染操作区使用提前定义好的操作区代码模板渲染操作区域；

用户修改区域参数-可以获得当前代码块最新的数据参数。

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

获取用户修改区域最终数据

并且与步骤3中前端第二参数 进行修改；生成最新的前端第二参数；并且再次使用步骤4生成代码规则输出最新的代码模块；进行实时刷新。

本技术领域技术人员可以理解的是，除非另外定义，这里使用的所有术语（包括技术术语和科学术语）具有与本发明所属领域中的普通技术人员的一般理解相同的意义。还应该理解的是，诸如通用字典中定义的那些术语应该被理解为具有与现有技术的上下文中的意义一致的意义，并且除非像这里一样定义，不会用理想化或过于正式的含义来解释。

以上实施例仅为说明本发明的技术思想，不能以此限定本发明的保护范围，凡是按照本发明提出的技术思想，在技术方案基础上所做的任何改动，均落入本发明保护范围之内。上面对本发明的实施方式作了详细说明，但是本发明并不限于上述实施方式，在本领域普通技术人员所具备的知识范围内，还可以再不脱离本发明宗旨的前提下做出各种变化。

Claims (5)

1.一种前端代码生成方法，其特征在于：具体包含如下步骤；

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

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

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

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

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

2.根据权利要求1所述的一种前端代码生成方法，其特征在于：在一个优选的实施方式中，在步骤2中：所述初始UI样式数据的数据类型为初始UI样式数据中的类型数据和类型参数数据。

3.根据权利要求1所述的一种前端代码生成方法，其特征在于：在一个优选的实施方式中，所述步骤3具体如下：步骤3.1，获取预先定义好的代码模板，提供对第二前端数据进行转换的规则；

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

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

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

步骤3.4，进行匹配生成所需代码； 其中，生成代码方式；使用原生js 操作dom的API方法生成对应的dom节点代码,以及代码的css样式代码；并且在每一个生成的父级头部放入当前父级下面所有的子节点数据；子节点数据包括：节点的标签节点的展示的值；使用HTML的data-*属性放入父级头部。

4.根据权利要求1所述的一种前端代码生成方法，其特征在于：在一个优选的实施方式中，在步骤4中，用户进行个性化配置方法，具体如下：

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

步骤4.2，点击生成页面的页面块；

步骤4.3，通过html getAttribute方法获取生成代码过程中放在父级头部的所有子节点数据；并且在用户可操作区域渲染操作区--渲染操作区使用提前定义好的操作区代码模板渲染操作区域；

步骤4.4，用户修改区域参数，进而获得当前代码块最新的数据参数。

5.根据权利要求1所述的一种前端代码生成方法，其特征在于：在一个优选的实施方式中，所述步骤5具体如下，

步骤5.1，获取用户修改区域最终数据；

步骤5.2，将步骤5.1获取的用户修改区域最终数据与步骤3中前端第二参数进行修改，生成最新的前端第二参数；

步骤5.3，使用步骤4生成代码规则输出最新的代码模块，进行实时刷新。

Images