CN114610301A - 前端代码生成方法、装置、电子设备及存储介质 - Google Patents

Abstract

本申请实施例公开了一种前端代码生成方法、装置、电子设备及存储介质，该方法包括：通过可视化编辑器获取待生成前端代码所对应的页面组件布局；将所述页面组件布局转化为第一结构化数据；根据所述第一结构化数据，生成所述页面组件布局对应的领域特定语言代码；将所述领域特定语言代码转化为目标平台对应的前端代码。本申请由于可以基于可视化编辑器对页面组件布局进行可视化的编辑，并基于编辑结果自动生成前端代码，不需要二次开发，提高了生成代码的准确度，降低了成本。

Description

前端代码生成方法、装置、电子设备及存储介质

技术领域

本申请实施例涉及计算机技术领域，特别是涉及一种前端代码生成方法、装置、电子设备及存储介质。

背景技术

随着互联网技术的发展，越来越多的应用程序需要前端页面来呈现，随着前端页面的增多，不同的前端页面中会有很多重复的组件，为了减少在编写前端代码时的重复工作，可以自动生成前端代码。

现有技术中，在生成前端代码时，可以创建一套自定义的UI(User Interface，用户界面)组件，创建对应的编程语言，并做一个全链路的开发工具，例如SwiftUI、Flutter等，但是这种方式成本过高，需要一个极大的团队来持续维护，而且需要处理各种异常情况，带来的收益并不足够支撑开发消耗的成本；还可以利用机器学习的方式，自动识别设计图中的组件并自动生成相应的代码，但是这种方式准确度不够高，需要人工介入进行二次开发，并且二次开发的工作量并没有较直接开发减少。

发明内容

本申请实施例提供一种前端代码生成方法、装置、电子设备及存储介质，有助于提高生成的前端代码的准确度，并降低成本。

为了解决上述问题，第一方面，本申请实施例提供了一种前端代码生成方法，包括：

通过可视化编辑器获取待生成前端代码所对应的页面组件布局；

将所述页面组件布局转化为第一结构化数据；

根据所述第一结构化数据，生成所述页面组件布局对应的领域特定语言代码；

将所述领域特定语言代码转化为目标平台对应的前端代码。

第二方面，本申请实施例提供了一种前端代码生成装置，包括：

页面组件获取模块，用于通过可视化编辑器获取待生成前端代码所对应的页面组件布局；

数据转化模块，用于将所述页面组件布局转化为第一结构化数据；

领域特定语言代码生成模块，用于根据所述第一结构化数据，生成所述页面组件布局对应的领域特定语言代码；

前端代码生成模块，用于将所述领域特定语言代码转化为目标平台对应的前端代码。

第三方面，本申请实施例还提供了一种电子设备，包括存储器、处理器及存储在所述存储器上并可在处理器上运行的计算机程序，所述处理器执行所述计算机程序时实现本申请实施例所述的前端代码生成方法。

第四方面，本申请实施例提供了一种计算机可读存储介质，其上存储有计算机程序，该程序被处理器执行时实现本申请实施例所述的前端代码生成方法的步骤。

本申请实施例提供的前端代码生成方法、装置、电子设备及存储介质，通过可视化编辑器获取待生成前端代码所对应的页面组件布局，将页面组件布局转化为第一结构化数据，根据第一结构化数据生成页面组件布局对应的领域特定语言代码，将领域特定语言代码转化为目标平台对应的前端代码，由于可以基于可视化编辑器对页面组件布局进行可视化的编辑，并基于编辑结果自动生成前端代码，不需要二次开发，提高了生成代码的准确度，降低了成本。

附图说明

为了更清楚地说明本申请实施例的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本申请的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动性的前提下，还可以根据这些附图获得其他的附图。

图1是本申请实施例一的前端代码生成方法流程图；

图2是本申请实施例中的通过可视化编辑器获取页面组件布局的流程图；

图3是本申请实施例中的前端代码生成方法的实现架构图；

图4是本申请实施例二的前端代码生成装置结构示意图；

图5是本申请实施例三的电子设备的结构示意图。

具体实施方式

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

实施例一

本实施例提供的一种前端代码生成方法，如图1所示，该方法包括：步骤110至步骤140。

步骤110，通过可视化编辑器获取待生成前端代码所对应的页面组件布局。

其中，可视化编辑器是一个组件在线编辑平台，支持对已有的组件进行组合，可以对组件的样式属性进行设置，可以绑定API接口，使用户可以在编辑组件的时候就能看到线上真实数据的样式。

用户可以使用可视化编辑器对待生成前端代码的前端页面所对应的页面组件进行编辑，从而通过可视化编辑器获取到待生成前端代码所对应的页面组件布局，所述页面组件布局与前端代码生成后所显示的前端页面的布局相同。

在本申请的一个实施例中，通过可视化编辑器获取待生成前端代码所对应的页面组件布局，包括：通过可视化编辑器显示已有组件，并获取前端页面待展示的指定已有组件和对应的页面位置，得到所述待生成前端代码所对应的页面组件布局。

用户在使用可视化编辑器编辑前端页面时，可视化编辑器可以显示已有组件，这些已有组件可以包括基础组件和常用的业务组件，用户可以将要使用的指定已有组件拖拽至前端页面编辑框内需要的位置上，从而可视化编辑器获取到前端页面待展示的指定已有组件和与指定已有组件对应的页面位置，获取到的指定已有组件和对应的页面位置即待生成前端代码所对应的页面组件布局。通过可视化编辑器可以方便的对前端页面上的组件进行可视化的编辑，使用户可以在编辑组件的时候就能看到线上真实数据的样式。

在本申请的一个实施例中，在获取前端页面待展示的指定已有组件和对应的页面位置时，还包括下述至少一种：

基于组件组合指令对所述指定已有组件进行组合；

基于对指定已有组件的属性设置指令，设置所述指定已有组件的样式属性；

将指定已有组件绑定至指定的API接口。

通过可视化编辑器，用户可以对多个指定已有组件进行组合，在接收到组件组合指令时对指定已有组件进行组合；通过可视化编辑器，用户还可以对指定已有组件的属性进行设置，若用户对指定已有组件的属性进行了设置，则接收到对指定已有组件的属性设置指令，可以设置该指定已有组件的样式属性；通过可视化编辑器，用户还可以将指定已有组件绑定至指定的API(Application Programming Interface，应用程序编程接口)接口。

可视化编辑器具有多个功能，包括：组件管理、组件列表、结构树、组件拼搭、行为管理、行为绑定、样式管理、样式绑定、埋点绑定、埋点管理、Kotlin编辑器、Web编辑器等。其中，组件管理可以管理已有组件，组件列表用于维护已有组件的列表，结构树用于展示组件拼搭的层级结构方便用户快速定位指定的组件，组件拼搭用于对组件进行组合拼搭，行为管理用于管理各个组件的行为数据，行为绑定用于将组件与行为数据进行绑定，样式管理用于管理各个组件的样式属性，样式绑定用于设置并绑定已有组件的样式属性，埋点绑定用于将埋点与已有组件进行绑定，埋点管理用于管理各个组件的埋点，Kotlin编辑器用于对Kotlin代码进行编辑，Web编辑器用于对Web代码进行编辑。

步骤120，将所述页面组件布局转化为第一结构化数据。

解析所述页面组件布局，并将所述页面组件布局映射为与领域特定语言(DomainSpecific Language，DSL)对应的第一结构化数据。

步骤130，根据所述第一结构化数据，生成所述页面组件布局对应的领域特定语言代码。

基于第一结构化数据与领域特定语言代码的转化关系，将第一结构化数据转化为所述页面组件布局对应的领域特定语言代码。

步骤140，将所述领域特定语言代码转化为目标平台对应的前端代码。

其中，所述目标平台可以包括Web、iOS或Android等。前端代码是前端的用户界面代码。

可以基于领域特定语言代码与目标平台的前端代码的映射关系，将领域特定语言代码转化为目标平台对应的前端代码。可以预先保存领域特定语言代码与多种平台的前端代码的映射关系，这样可以将领域特定语言代码转化为多种不同目标平台对应的前端代码。

在本申请的一个实施例中，将所述领域特定语言代码转化为目标平台对应的前端代码，包括：调用语言转化器，将所述领域特定语言代码转化为所述目标平台对应的前端代码。

其中，语言转化器包括用于构建用户界面的JavaScript库、JavaScript框架、布局工具、各个目标平台对应的编程语言等，其中，用于构建用户界面的JavaScript库例如可以是React，用于构建用户界面的JavaScript框架例如可以是Vue，布局工具例如可以是Flexbox。

调用语言转化器，通过语言转化器解析领域特定语言代码，并根据解析结果将领域特定语言代码转化为目标平台对应的前端代码。通过调用语言转化器可以快速准确地将领域特定语言代码转化为目标平台对应的前端代码，提高生成的前端代码的准确度。

在生成目标平台对应的前端代码后，可以进行自动化测试，在测试通过后自动进行发布。

本申请实施例提供的前端代码生成方法，通过可视化编辑器获取待生成前端代码所对应的页面组件布局，将页面组件布局转化为第一结构化数据，根据第一结构化数据生成页面组件布局对应的领域特定语言代码，将领域特定语言代码转化为目标平台对应的前端代码，由于可以基于可视化编辑器对页面组件布局进行可视化的编辑，并基于编辑结果自动生成前端代码，不需要二次开发，提高了生成代码的准确度，降低了成本。

在上述技术方案的基础上，在将所述页面组件布局转化为第一结构化数据之前，还包括：通过可视化编辑器将所述页面组件布局转化为第二结构化数据，并将所述第二结构化数据保存至数据库中；

将所述页面组件布局转化为第一结构化数据，包括：将所述数据库中的第二结构化数据转化为所述第一结构化数据。

其中，第二结构化数据是与页面组件布局对应的结构化数据。

通过可视化编辑器获取到页面组件布局后，可视化编辑器将页面组件布局转化为对应的第二结构化数据，通过数据后台将第二结构化数据保存至数据库中，便于后续从数据库中获取第二结构化数据并生成前端代码。在将页面组件布局转化为第一结构化数据时，从数据库中获取页面组件布局对应的第二结构化数据，并对第二结构化数据进行解析，将第二结构化数据映射为与领域特定语言对应的第一结构化数据。通过将页面组件布局转化为第二结构化数据并保存至数据库中，使得获取页面组件布局与后续生成前端代码的过程相互独立，各个部分可以独立的进行扩展，提高了扩展性。

在上述技术方案的基础上，所述方法还包括：通过所述可视化编辑器接收对所述页面组件布局所对应的中间代码的修改，并根据所述修改对所述数据库中的第二结构化数据进行更新。

其中，所述中间代码包括Web组件代码和/或Kotlin组件代码，Kotlin组件代码即是领域特定语言代码。

图2是本申请实施例中的通过可视化编辑器获取页面组件布局的流程图，如图2所示，用户在需要基于模板需求生成前端页面的前端代码时，可以进入可视化编辑器，并编辑组件，在通过可视化编辑器获取到页面组件布局，接收到组件发布指令后，通过可视化编辑器生成页面组件布局对应的Web组件代码，并显示Web组件代码，用户可以对显示的Web组件代码进行审核，如果没有问题则审核通过，如果有问题，用户可以对Web组件代码进行修改，之后通过Web2DB脚本更新数据库中的第二结构化数据，之后通过DB2Kotlin脚本生成Web组件代码对应的Kotlin组件代码，并显示Kotlin组件代码，用户可以对显示的Kotlin组件代码进行审核，如果没有问题则审核通过，如果有问题，用户可以对Kotlin组件代码进行修改，根据该修改对数据库中的第二结构化数据进行更新，Kotlin组件代码审核通过或修改后可以发布该页面组件布局，从而后续自动生成对应的前端代码并发布到线上。其中，Web2DB脚本是将Web组件代码转换为第二结构化数据的脚本，DB2Kotlin脚本是将第二结构化数据转换为Kotlin组件代码的脚本。

通过接收对页面组件布局对应的中间代码的修改，提供了一种兜底方案，使得用户可以对编辑后的页面组件布局进行审核和修改，保证后续生成的前端代码的准确度。

在上述技术方案的基础上，所述方法还包括：获取对所述领域特定语言代码的修改；根据所述修改，对所述修改所对应的页面组件进行更新，并将所述更新同步至所述可视化编辑器中。

对于一个编辑完成的页面组件布局，在生成对应的领域特定语言代码后，用户可以对该领域特定语言代码进行修改，在获取到用户对领域特定语言代码的修改后，对所述修改所对应的页面组件进行更新，并将页面组件的更新同步至可视化编辑器中，并同步修改数据库中的第二结构化数据。通过基于对领域特定语言代码的修改，对页面组件进行更新，实现了对可视化编辑器中页面组件的反向修改。

在上述技术方案的基础上，所述方法还包括：获取对所述领域特定语言代码的添加代码；生成与所述添加代码对应的页面组件，并将生成的页面组件添加至所述可视化编辑器中。

对于一个编辑完成的页面组件布局，在生成对应的领域特定语言代码后，用户还可以在该领域特定语言代码的基础上添加代码，在获取到用户对领域特定语言代码的添加代码后，生成与添加代码对应的页面组件，并将生成的页面组件添加至可视化编辑器中，同时转化为对应的第二结构化数据并保存至数据库中。通过基于对领域特定语言代码的添加代码，添加对应的页面组件，实现了对可视化编辑器中页面组件的反向添加。

图3是本申请实施例中的前端代码生成方法的实现架构图，如图3所示，前端代码生成方法依托于前端代码生成系统来实现，前端代码生成系统包括可视化编辑器、数据后台、脚本平台、DSL工程、以及编辑和发布工具这几个模块，各个模块是独立的模块，可以相对独立的并行开发，同时各个模块完全解耦，使得前端代码生成系统的可扩展性更强，可以很容易的支持更多的前端代码生成。

其中，可视化编辑器，是一个组件在线编辑平台，支持对已有的组件进行组合，可以对组件的样式属性进行设置，可以绑定API接口，使用户可以在编辑组件的时候就能看到线上真实数据的样式，从而得到页面组件布局。可视化编辑器包括：组件管理、组件列表、结构树、组件拼搭、行为管理、行为绑定、样式管理、样式绑定、埋点绑定、埋点管理、Kotlin编辑器、Web编辑器等。

数据后台，用于把页面组件布局转化成第二结构化数据保存，支持可视化编辑器添加组件，也支持DSL工程反向添加组件，可以通过API接口自动生成DSL的可执行代码，即生成领域特定语言代码。数据后台包括：模板表、模板关系表、样式表、样式关系表、行为表、埋点表、埋点组合表、埋点关系表，其中，模板表用于存储页面组件布局模板，模板关系表用于存储页面组件布局模板之间的关系，样式表用于存储页面组件的样式属性，样式关系表用于存储页面组件的样式属性之间的关系，行为表用于存储页面组件的行为数据，埋点表用于存储页面组件的埋点，埋点组合表用于存储页面组件的埋点组合关系，埋点关系表用于存储页面组件各埋点之间的关系。

脚本平台，用于提供第一结构化数据与领域特定语言代码的映射关系，提供领域特定语言代码与各种前端代码的映射关系。其中，领域特定语言代码可以是利用Kotlin的语法糖自定义的一套DSL编写的代码，可以使用Kotlin编译。

DSL工程，提供一个可编译的DSL语言对组件进行编辑，可以反向生成前端页面对应的第二结构化数据，也可以直接生成前端页面使用的前端代码，当整个工具链路不完整的时候，可以作为核心串联各个模块，从而基于可视化编辑器编辑到的页面组件布局生成对应的领域特定语言代码，也可以基于领域特定语言代码更新或添加可视化编辑器中的页面组件。DSL工程可以分为布局(Layout)、行为(Action)、样式(Style)、超链接(Pingback)等方面对组件进行编译。

编译和发布工具，可以对脚本生成的领域特定语言代码进行编译，编译出各种平台的前端页面所对应的前端代码，经过自动化测试流程后，自动发布到线上。编译和发布工具将领域特定语言(DSL)代码转转化为XML格式的动态布局描述文件，并且可以将动态布局描述文件转化为iOS的前端代码或者Android的前端代码，并进行编译和发布，从而可以直接发布到线上。

通过上述各个模块实现前端代码的自动生成，而且生成的代码准确率高，可以直接生成线上可用的前端代码，不需要开发人员进行二次编辑，各个模块可以分布迭代开发，并且可以生成iOS、Android和Web等平台的前端代码。

实施例二

本实施例提供的一种前端代码生成装置，如图4所示，所述前端代码生成装置400包括：

页面组件获取模块410，用于通过可视化编辑器获取待生成前端代码所对应的页面组件布局；

第一数据转化模块420，用于将所述页面组件布局转化为第一结构化数据；

领域特定语言代码生成模块430，用于根据所述第一结构化数据，生成所述页面组件布局对应的领域特定语言代码；

前端代码生成模块440，用于将所述领域特定语言代码转化为目标平台对应的前端代码。

可选的，所述页面组件获取模块具体用于：

通过可视化编辑器显示已有组件，并获取前端页面待展示的指定已有组件和对应的页面位置，得到所述待生成前端代码所对应的页面组件布局。

可选的，所述页面组件获取模块还用于执行下述至少一种：

基于组件组合指令对所述指定已有组件进行组合；

基于对指定已有组件的属性设置指令，设置所述指定已有组件的样式属性；

将指定已有组件绑定至指定的API接口。

可选的，所述装置还包括：

第二数据转化模块，用于通过可视化编辑器将所述页面组件布局转化为第二结构化数据，并将所述第二结构化数据保存至数据库中；

所述第一数据转化模块具体用于：

将所述数据库中的第二结构化数据转化为所述第一结构化数据。

可选的，所述装置还包括：

数据更新模块，用于通过所述可视化编辑器接收对所述页面组件布局所对应的中间代码的修改，并根据所述修改对所述数据库中的第二结构化数据进行更新。

可选的，所述装置还包括：

代码修改获取模块，用于获取对所述领域特定语言代码的修改；

组件反向更新模块，用于根据所述修改，对所述修改所对应的页面组件进行更新，并将所述更新同步至所述可视化编辑器中。

可选的，所述装置还包括：

添加代码获取模块，用于获取对所述领域特定语言代码的添加代码；

组件反向添加模块，用于生成与所述添加代码对应的页面组件，并将生成的页面组件添加至所述可视化编辑器中。

可选的，所述前端代码生成模块具体用于：

调用语言转化器，将所述领域特定语言代码转化为所述目标平台对应的前端代码。

本申请实施例提供的前端代码生成装置，用于实现本申请实施例一中所述的前端代码生成方法的各步骤，装置的各模块的具体实施方式参见相应步骤，此处不再赘述。

本申请实施例提供的前端代码生成装置，通过可视化编辑器获取待生成前端代码所对应的页面组件布局，将页面组件布局转化为第一结构化数据，根据第一结构化数据生成页面组件布局对应的领域特定语言代码，将领域特定语言代码转化为目标平台对应的前端代码，由于可以基于可视化编辑器对页面组件布局进行可视化的编辑，并基于编辑结果自动生成前端代码，不需要二次开发，提高了生成代码的准确度，降低了成本。

实施例三

本申请实施例还提供了一种电子设备，如图5所示，该电子设备500可以包括一个或多个处理器510以及与处理器510连接的一个或多个存储器520。电子设备500还可以包括输入接口530和输出接口540，用于与另一装置或系统进行通信。被处理器510执行的程序代码可存储在存储器520中。

电子设备500中的处理器510调用存储在存储器520的程序代码，以执行上述实施例中的前端代码生成方法。

本申请实施例还提供了一种计算机可读存储介质，其上存储有计算机程序，该程序被处理器执行时实现如本申请实施例一所述的前端代码生成方法的步骤。

本说明书中的各个实施例均采用递进的方式描述，每个实施例重点说明的都是与其他实施例的不同之处，各个实施例之间相同相似的部分互相参见即可。对于装置实施例而言，由于其与方法实施例基本相似，所以描述的比较简单，相关之处参见方法实施例的部分说明即可。

以上对本申请实施例提供的一种前端代码生成方法、装置、电子设备及存储介质进行了详细介绍，本文中应用了具体个例对本申请的原理及实施方式进行了阐述，以上实施例的说明只是用于帮助理解本申请的方法及其核心思想；同时，对于本领域的一般技术人员，依据本申请的思想，在具体实施方式及应用范围上均会有改变之处，综上所述，本说明书内容不应理解为对本申请的限制。

通过以上的实施方式的描述，本领域的技术人员可以清楚地了解到各实施方式可借助软件加必需的通用硬件平台的方式来实现，当然也可以通过硬件实现。基于这样的理解，上述技术方案本质上或者说对现有技术做出贡献的部分可以以软件产品的形式体现出来，该计算机软件产品可以存储在计算机可读存储介质中，如ROM/RAM、磁碟、光盘等，包括若干指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)执行各个实施例或者实施例的某些部分所述的方法。

Claims (11)

1.一种前端代码生成方法，其特征在于，包括：

通过可视化编辑器获取待生成前端代码所对应的页面组件布局；

将所述页面组件布局转化为第一结构化数据；

根据所述第一结构化数据，生成所述页面组件布局对应的领域特定语言代码；

将所述领域特定语言代码转化为目标平台对应的前端代码。

2.根据权利要求1所述的方法，其特征在于，通过可视化编辑器获取待生成前端代码所对应的页面组件布局，包括：

通过可视化编辑器显示已有组件，并获取前端页面待展示的指定已有组件和对应的页面位置，得到所述待生成前端代码所对应的页面组件布局。

3.根据权利要求2所述的方法，其特征在于，在获取前端页面待展示的指定已有组件和对应的页面位置时，还包括下述至少一种：

基于组件组合指令对所述指定已有组件进行组合；

基于对指定已有组件的属性设置指令，设置所述指定已有组件的样式属性；

将指定已有组件绑定至指定的API接口。

4.根据权利要求1-3任一项所述的方法，其特征在于，在将所述页面组件布局转化为第一结构化数据之前，还包括：

通过可视化编辑器将所述页面组件布局转化为第二结构化数据，并将所述第二结构化数据保存至数据库中；

将所述页面组件布局转化为第一结构化数据，包括：

将所述数据库中的第二结构化数据转化为所述第一结构化数据。

5.根据权利要求4所述的方法，其特征在于，还包括：

通过所述可视化编辑器接收对所述页面组件布局所对应的中间代码的修改，并根据所述修改对所述数据库中的第二结构化数据进行更新。

6.根据权利要求1-3任一项所述的方法，其特征在于，还包括：

获取对所述领域特定语言代码的修改；

根据所述修改，对所述修改所对应的页面组件进行更新，并将所述更新同步至所述可视化编辑器中。

7.根据权利要求1-3任一项所述的方法，其特征在于，还包括：

获取对所述领域特定语言代码的添加代码；

生成与所述添加代码对应的页面组件，并将生成的页面组件添加至所述可视化编辑器中。

8.根据权利要求1-3任一项所述的方法，其特征在于，将所述领域特定语言代码转化为目标平台对应的前端代码，包括：

调用语言转化器，将所述领域特定语言代码转化为所述目标平台对应的前端代码。

9.一种前端代码生成装置，其特征在于，包括：

页面组件获取模块，用于通过可视化编辑器获取待生成前端代码所对应的页面组件布局；

数据转化模块，用于将所述页面组件布局转化为第一结构化数据；

领域特定语言代码生成模块，用于根据所述第一结构化数据，生成所述页面组件布局对应的领域特定语言代码；

前端代码生成模块，用于将所述领域特定语言代码转化为目标平台对应的前端代码。

10.一种电子设备，包括存储器、处理器及存储在所述存储器上并可在处理器上运行的计算机程序，其特征在于，所述处理器执行所述计算机程序时实现权利要求1至8任意一项所述的前端代码生成方法。

11.一种计算机可读存储介质，其上存储有计算机程序，其特征在于，该程序被处理器执行时实现权利要求1至8任意一项所述的前端代码生成方法的步骤。

Images