前端代码及其模板生成方法、电子设备及存储介质技术

本申请公开了一种前端代码生成方法、前端代码模板生成方法、电子设备及计算机可读存储介质。该方法包括：利用生成参数形成输入页面，生成参数包括组件参数和控制参数，控制参数包括业务控制变量，业务控制变量包括各业务功能代码的开关变量，业务功能代码的开关变量表征业务功能代码是否被需要；显示输入页面；接收用户对输入页面的操作；按照操作修改生成参数；根据开关变量确定被需要的业务功能代码；根据被需要的业务功能代码及生成参数生成业务页面的前端代码文件。通过上述方式，能够提高前端开发人员的编写效率，避免不同前端开发人员的编写习惯对前端代码文件的影响。人员的编写习惯对前端代码文件的影响。人员的编写习惯对前端代码文件的影响。

【技术实现步骤摘要】
前端代码及其模板生成方法、电子设备及存储介质


[0001]本申请涉及前端开发
，特别是涉及一种前端代码生成方法、前端代码模板生成方法、电子设备及计算机可读存储介质。

技术介绍

[0002]随着互联网的迅速发展，越来越多用户喜欢使用网页浏览方式，软件系统平台越来越趋向于BS(Browser/Server，浏览器/服务器模式)化。然而前端开发中存在大量重复且规则相似的工作，影响开发人员(用户)的编写效率。并且，由于不同前端开发人员的编写习惯不同，导致最终形成的前端代码文件存在差异，导致后期维护成本高。

技术实现思路

[0003]本申请提供一种前端代码生成方法、前端代码模板生成方法、电子设备及计算机可读存储介质，能够解决前端开发人员的编写效率低、编写习惯不同而影响前端代码文件的问题。
[0004]为解决上述技术问题，本申请采用的一个技术方案是：提供一种前端代码生成方法。该方法包括：利用生成参数形成输入页面，生成参数包括组件参数和控制参数，控制参数包括业务控制变量，业务控制变量包括各业务功能代码的开关变量，业务功能代码的开关变量表征业务功能代码是否被需要；显示输入页面；接收用户对输入页面的操作；按照操作修改生成参数；根据开关变量确定被需要的业务功能代码；根据被需要的业务功能代码及生成参数生成业务页面的前端代码文件。
[0005]为解决上述技术问题，本申请采用的一个技术方案是：提供一种前端代码模板生成方法。该方法包括：收集业务页面包括的页面元素，并对页面元素封装得到组件及组件参数；收集业务页面包括的业务功能，并为各业务功能编写标准代码，得到各业务功能代码；将组件参数和控制参数打包得到生成参数，控制参数包括业务控制变量，业务控制变量包括各业务功能代码的开关变量，业务功能代码的开关变量表征业务功能代码是否被需要。
[0006]为解决上述技术问题，本申请采用的另一个技术方案是：提供一种电子设备，该电子设备包括处理器、与处理器连接的存储器，其中，存储器存储有程序指令；处理器用于执行存储器存储的程序指令以实现上述方法。
[0007]为解决上述技术问题，本申请采用的又一个技术方案是：提供一种计算机可读存储介质，存储有程序指令，该程序指令被执行时能够实现上述方法。
[0008]通过上述方式，一方面，本申请由于预先已经生成前端代码模板(业务功能代码以及生成参数)，在有业务页面的前端代码文件的生成需求时，用户仅需通过输入页面进行操作以修改生成参数，就可以实现业务页面的前端代码文件的生成。从而，用户无需在每次有前端代码文件的生成需求的时候，重复编写前端代码，能够降低用户的工作量，提高编写效率，避免不同用户的编写习惯引起对前端代码文件的影响。另一方面，由于控制参数中包含各业务功能代码的开关变量，开关变量表征业务功能代码是否被需要，因此用户可以根据
需求设置开关变量来选择需要的各功能业务代码。从而，前端代码模板能够迎合用户不同的业务功能需求，通用性高。
附图说明
[0009]图1是本申请前端代码模板生成方法一实施例的流程示意图；
[0010]图2是查询列表业务场景下的一业务页面示意图；
[0011]图3是图2对应的添加功能的业务页面的示意图；
[0012]图4是本申请前端代码生成方法一实施例的流程示意图；
[0013]图5是本申请前端代码生成方法另一实施例的流程示意图；
[0014]图6是图2所示业务页面对应的公共参数的输入页面A示意图；
[0015]图7是图2所示业务页面对应的生成参数的输入页面B的示意图；
[0016]图8是图3所示业务页面对应的生成参数的输入页面C的一示意图；
[0017]图9是图2所示业务页面的最终预览结果的示意图；
[0018]图10是图3所示业务页面对应的最终的预览结果的示意图；
[0019]图11是数据库中数据记录的示意图；
[0020]图12是前端代码文件生成装置的一示意图；
[0021]图13是目标产品对应的菜单以及数据记录的示意图；
[0022]图14是本申请电子设备一实施例的结构示意图；
[0023]图15是本申请计算机可读存储介质一实施例的结构示意图；
具体实施方式
[0024]下面将结合本申请实施例中的附图，对本申请实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅是本申请的一部分实施例，而不是全部的实施例。基于本申请中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本申请保护的范围。
[0025]本申请中的术语“第一”、“第二”、“第三”仅用于描述目的，而不能理解为指示或暗示相对重要性或者隐含指明所指示的技术特征的数量。由此，限定有“第一”、“第二”、“第三”的特征可以明示或者隐含地包括至少一个该特征。本申请的描述中，“多个”的含义是至少两个，例如两个，三个等，除非另有明确具体的限定。
[0026]在本文中提及“实施例”意味着，结合实施例描述的特定特征、结构或特性可以包含在本申请的至少一个实施例中。在说明书中的各个位置出现该短语并不一定均是指相同的实施例，也不是与其它实施例互斥的独立的或备选的实施例。本领域技术人员显式地和隐式地理解的是，在不冲突的情况下，本文所描述的实施例可以与其它实施例相结合。
[0027]本申请的前端代码生成方法分为两个阶段，一个是前端代码模板生成阶段，另一个是应用前端代码模板生成前端代码文件的阶段。应用阶段可以应用编写好的前端代码模板，生成前端代码文件。
[0028]如下先介绍前端代码模板生成阶段：
[0029]图1是本申请前端代码模板生成方法一实施例的流程示意图。需注意的是，若有实质上相同的结果，本实施例并不以图1所示的流程顺序为限。如图1所示，本实施例可以包
括：
[0030]S11：收集业务页面包括的页面元素，并对页面元素封装得到组件及组件参数。
[0031]S12：收集业务页面包括的业务功能，并为各业务功能编写标准代码，得到各业务功能代码。
[0032]S13：将组件参数和控制参数打包得到生成参数。
[0033]控制参数包括业务控制变量，业务控制变量包括各业务功能代码的开关变量，业务功能代码的开关变量表征业务功能代码是否被需要。
[0034]上述S11～S13中，业务页面可以包括添加、删除、修改、查看、查询功能等等业务功能。一业务页面可以包括一业务场景下所有类型的业务功能，以适用于该业务场景。或者，一业务页面可以包括多个业务场景下所有类型的业务功能，以适用于多个业务场景。业务功能代码即实现业务功能逻辑所需的代码。
[0035]生成参数可以包括组件参数和控制参数。组件参数是业务页面包括的组件的参数。业务页面包括的组件可以是列表、表单、文本、图片、音频、视频等等，不同组件中相同属性的参数的名称相同，不同组件的参数和个数可以不同。结合参阅图2和图3对列表组件参数本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种前端代码生成方法，其特征在于，包括：利用生成参数形成输入页面，所述生成参数包括组件参数和控制参数，所述控制参数包括业务控制变量，所述业务控制变量包括各业务功能代码的开关变量，所述业务功能代码的开关变量表征所述业务功能代码是否被需要；显示所述输入页面；接收用户对所述输入页面的操作；按照所述操作修改所述生成参数；根据所述开关变量确定被需要的所述业务功能代码；根据被需要的所述业务功能代码及所述生成参数生成业务页面的所述前端代码文件。2.根据权利要求1所述的方法，其特征在于，在所述按照操作修改生成参数之后，所述方法还包括：根据至少部分所述组件参数生成模拟数据；根据所述模拟数据和所述生成参数生成并显示所述业务页面的预览结果。3.根据权利要求2所述的方法，其特征在于，在所述接收用户对所述输入页面的操作之后，所述方法还包括：将所述生成参数和所述模拟数据作为一数据记录存入数据库。4.根据权利要求3所述的方法，其特征在于，所述方法还包括：将与目标产品相关的所述数据记录组织形成若干个级别的菜单，一所述数据记录对应一个级别的菜单项；基于所述若干个级别的菜单下的数据记录，生成所述目标产品的前端代码文件。5.根据权利要求1所述的方法，其特征在于，所述业务功能代码是收集所述业务页面包括的业务功能，并为所述业务功能编写标准代码得到的；和/或初始的所述生成参数是收集所述业务页面包括的页面元素，并对所述页面元素封装得到组件及所...

【专利技术属性】
技术研发人员：黄雪红，
申请(专利权)人：浙江大华技术股份有限公司，
类型：发明
国别省市：