前端代码生成方法及装置制造方法及图纸

本申请实施例提供一种前端代码生成方法及装置，可用于金融技术领域，方法包括若检测到用户在当前的图形化显示页面中添加预设的目标参数化组件，则自动更新对应的配置文件并输出更新后的配置文件对应的第一预览页面，以在用户自第一预览页面中对目标参数化组件进行编辑后，再次自动更新配置文件；将当前最新更新后的配置文件转译为原生代码；输出原生代码对应的第二预览页面，以在用户自该第二预览页面中对原生代码进行编辑后，得到对应的目标前端代码。本申请能够在满足用户的个性化编辑要求的基础上，有效降低前端代码生成过程中对开发人员的专业度要求、工作量及时间成本，并能够有效提高前端代码生成的灵活程度、智能化程度和自动化程度。

【技术实现步骤摘要】
前端代码生成方法及装置
本申请涉及数据处理
，特别涉及金融
，具体涉及前端代码生成方法及装置。
技术介绍
在目前的前端开发过程中，在页面布局投入的工作量有一半左右，虽然目前已有一些可配置生成页面的工具，但思路是用特定参数化组件对配置信息进行解析，导致使用范围常见于表单之类的场景。由于这类工具的解析工作是由引入的特定参数化组件完成，因此该参数化组件本身的解析能力往往会成为场景适用性的瓶颈，同时增加了开发人员的专业度要求、工作量及时间成本；且若仅将解析得到的代码作为最终的前端代码，虽然满足了自动开发的要求，但却无法满足开发人员对前端代码的个性化定制要求。也就是说，现有的前端代码生成方式无法同时满足用户的个性化编辑要求并符合开发人员传统开发习惯。
技术实现思路
针对现有技术中的问题，本申请提供一种前端代码生成方法及装置，能够在满足用户的个性化编辑要求的基础上，有效降低前端代码生成过程中对开发人员的专业度要求、工作量及时间成本，并能够有效提高前端代码生成的灵活程度、智能化程度和自动化程度。为解决上述技术问题，本申请提供以下技术方案：第一方面，本申请提供一种前端代码生成方法，包括：若检测到用户在当前的图形化显示页面中添加预设的目标参数化组件，则自动更新对应的配置文件并输出更新后的配置文件对应的第一预览页面，以在用户自该第一预览页面中对所述目标参数化组件进行编辑后，再次自动更新所述配置文件；将当前最新更新后的配置文件转译为对应的原生代码；输出所述原生代码对应的第二预览页面，以在用户自该第二预览页面中对所述原生代码进行编辑后，得到对应的目标前端代码。进一步地，所述将当前最新更新后的配置文件转译为对应的原生代码，包括：布局识别步骤：获取当前最新更新后的配置文件对应的布局容器及对应的布局代码；获取各个所述布局容器内参数化组件对应的目标组件代码，其中，所述目标组件代码中包含有参数化组件属性；检测已获取组件代码的各个所述参数化组件中是否包含有其他参数化组件，若是，则返回执行所述布局识别步骤，直至获取全部参数化组件对应的目标组件代码；根据所述布局代码和目标组件代码生成对应的原生代码。进一步地，所述获取当前最新更新后的配置文件对应的布局容器及对应的布局代码，包括：以预设的深度优先方式遍历当前最新更新后的配置文件，并对该配置文件进行布局识别，以得到当前最新更新后的配置文件对应的布局容器；根据当前最新更新后的配置文件对应的布局容器生成对应的布局代码。进一步地，所述获取各个所述布局容器内参数化组件对应的目标组件代码，包括：对各个所述布局容器分别进行参数化组件识别，以得到当前最新更新后的配置文件对应的参数化组件，并对各个所述布局容器分别进行参数化组件属性识别，以得到当前最新更新后的配置文件对应的各个参数化组件的参数化组件属性；根据各个所述参数化组件和各个参数化组件的参数化组件属性，分别生成各个所述参数化组件各自对应的目标组件代码。进一步地，所述根据所述布局代码和目标组件代码生成对应的原生代码，包括：应用所述目标组件代码拼装得到对应的html代码、js代码和CSS代码；根据所述布局代码、目标组件代码、html代码、js代码和CSS代码生成对应的原生代码。进一步地，在所述自动更新对应的配置文件并输出更新后的配置文件对应的第一预览页面之前，还包括：分别生成各个参数化组件，并在预设的图形化显示页面中显示各个所述参数化组件的标识以供用户选择。进一步地，所述布局容器包括：行容器、列容器和表单容器中的至少一个。第二方面，本申请提供一种前端代码生成装置，包括：参数化组件编辑模块，用于若检测到用户在当前的图形化显示页面中添加预设的目标参数化组件，则自动更新对应的配置文件并输出更新后的配置文件对应的第一预览页面，以在用户自该第一预览页面中对所述目标参数化组件进行编辑后，再次自动更新所述配置文件；代码转译模块，用于将当前最新更新后的配置文件转译为对应的原生代码；代码编辑模块，用于输出所述原生代码对应的第二预览页面，以在用户自该第二预览页面中对所述原生代码进行编辑后，得到对应的目标前端代码。第三方面，本申请提供一种电子设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，所述处理器执行所述程序时实现所述前端代码生成方法。第四方面，本申请提供一种计算机可读存储介质，其上存储有计算机程序，该计算机程序被处理器执行时实现所述前端代码生成方法。由上述技术方案可知，本申请提供的一种前端代码生成方法及装置，方法通过若检测到用户在当前的图形化显示页面中添加预设的目标参数化组件，则自动更新对应的配置文件并输出更新后的配置文件对应的第一预览页面，以在用户自该第一预览页面中对所述目标参数化组件进行编辑后，再次自动更新所述配置文件；将当前最新更新后的配置文件转译为对应的原生代码；输出所述原生代码对应的第二预览页面，以在用户自该第二预览页面中对所述原生代码进行编辑后，得到对应的目标前端代码，通过图形化的操作方式对页面布局进行编排并对相关参数化组件进行编辑，通过配置文件的形式与解析器的形式提供预览效果，完成页面编辑后通过转译装置将配置文件转译为原生代码，供开发人员补充业务逻辑或进行个性化改造的方式，能够通过图形化配置的手段完成页面布局的大部分工作，并将页面布局及相关配置信息转译为前端原生代码的形式，供开发人员补充业务逻辑或进行个性化改造，进而能够有效提高前端代码生成的灵活程度和自动化程度，能够在满足用户的个性化编辑要求的基础上，有效降低前端代码生成过程中对开发人员的专业度要求、工作量及时间成本，并能够使得适应性场景更广且无需引入特定参数化组件，且由于最终得到的目标前端代码与开发人员手工编码的产物基本一致，因此对开发人员更加友好，更符合开发人员传统开发习惯的页面快速生成方案，进而能够有效提高开发人员的用户体验。而且无需在项目内引入额外的参数化组件或依赖，避免了原有类似方案的依赖瓶颈问题，同时生成的代码具有统一的代码格式，提高了工程代码的规范程度。附图说明为了更清楚地说明本申请实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图是本申请的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。图1是本申请实施例中的前端代码生成方法的第一种流程示意图。图2是本申请实施例中的前端代码生成方法中第二种流程示意图。图3是本申请实施例中的前端代码生成方法的第三种流程示意图。图4是本申请实施例中的前端代码生成方法中的第四种流程示意图。图5是本申请实施例中的前端代码生成方法中的第五种流程示意图。图6是本申请实施例中的前端代码生成方法中的第六种流程示意图。图7是本申请实施例中的前端代码本文档来自技高网...

【技术保护点】
1.一种前端代码生成方法，其特征在于，包括：/n若检测到用户在当前的图形化显示页面中添加预设的目标参数化组件，则自动更新对应的配置文件并输出更新后的配置文件对应的第一预览页面，以在用户自该第一预览页面中对所述目标参数化组件进行编辑后，再次自动更新所述配置文件；/n将当前最新更新后的配置文件转译为对应的原生代码；/n输出所述原生代码对应的第二预览页面，以在用户自该第二预览页面中对所述原生代码进行编辑后，得到对应的目标前端代码。/n

【技术特征摘要】
1.一种前端代码生成方法，其特征在于，包括：
若检测到用户在当前的图形化显示页面中添加预设的目标参数化组件，则自动更新对应的配置文件并输出更新后的配置文件对应的第一预览页面，以在用户自该第一预览页面中对所述目标参数化组件进行编辑后，再次自动更新所述配置文件；
将当前最新更新后的配置文件转译为对应的原生代码；
输出所述原生代码对应的第二预览页面，以在用户自该第二预览页面中对所述原生代码进行编辑后，得到对应的目标前端代码。


2.根据权利要求1所述的前端代码生成方法，其特征在于，所述将当前最新更新后的配置文件转译为对应的原生代码，包括：
布局识别步骤：获取当前最新更新后的配置文件对应的布局容器及对应的布局代码；
获取各个所述布局容器内参数化组件对应的目标组件代码，其中，所述目标组件代码中包含有参数化组件属性；
检测已获取组件代码的各个所述参数化组件中是否包含有其他参数化组件，若是，则返回执行所述布局识别步骤，直至获取全部参数化组件对应的目标组件代码；
根据所述布局代码和目标组件代码生成对应的原生代码。


3.根据权利要求2所述的前端代码生成方法，其特征在于，所述获取当前最新更新后的配置文件对应的布局容器及对应的布局代码，包括：
以预设的深度优先方式遍历当前最新更新后的配置文件，并对该配置文件进行布局识别，以得到当前最新更新后的配置文件对应的布局容器；
根据当前最新更新后的配置文件对应的布局容器生成对应的布局代码。


4.根据权利要求2所述的前端代码生成方法，其特征在于，所述获取各个所述布局容器内参数化组件对应的目标组件代码，包括：
对各个所述布局容器分别进行参数化组件识别，以得到当前最新更新后的配置文件对应的参数化组件，并对各个所述布局容器分别进行参数化组件属性识别，以得到当前最新更新后的配置文件对应的各个参数化组件的参数化组件属性；
根据各个所...

【专利技术属性】
技术研发人员：刘泱，郑凯，杨再同，詹娇淑，
申请(专利权)人：中国工商银行股份有限公司，
类型：发明
国别省市：北京;11