CN115202626A - 一种支持多技术栈组件的低代码前端开发方法 - Google Patents

Abstract

本发明提供了一种支持多技术栈组件的低代码前端开发方法，在画布设计态逻辑中先通过Web Component技术对多技术栈组件进行统一的收敛转换，在生成代码运行态逻辑中再通过DSL机制进行转译发散生成多技术栈的源码。本发明提供的支持多技术栈组件的低代码前端开发方法，能够突破现有技术的应用局限，满足了在同一低代码平台使用不同技术栈组件，生成不同技术栈源码的需求，保证了平台物料生态的统一。

Description

一种支持多技术栈组件的低代码前端开发方法

技术领域

本发明涉及低代码开发领域，尤其涉及一种支持多技术栈组件的低代码前端开发方法。

背景技术

基于低代码平台的应用软件开发，为用户提供了可视化的业务流程配置工具，可以快速迭代修改流程，以满足个性化的业务需求。低代码开发通过拖拉拽可视化组件，配置组件样式和数据操作内容来搭建前端样式，现有大多数的低代码开发平台为了方便实现和节约成本，通常限定只支持一种技术栈，甚至一套组件库，这种类型的低代码开发往往不提供源码生成，也不需要被其他应用集成，无法满足复杂应用场景的需求。

企业尤其是大型企业，其不同系统很大程度可能会使用不同的技术栈组件进行开发，虽然现有技术中已有通过DSL(Domain Specific Language，领域特定语言)机制来解决生成不同技术栈源码的问题，例如它的应用场景前提是用于搭建前端页面的组件所属技术栈相同，当多种技术栈组件同时被使用于搭建同一页面，且不同技术栈的组件的功能也不同时，仅采用DSL属性映射生成的源码极有可能无法运行。如果面向不同的技术栈打造不同的低代码平台，会导致成本投入大大增大，物料生态割裂的问题。

发明内容

为了解决现有技术的不足，本发明提供了一种支持多技术栈组件的低代码前端开发方法，能够突破现有技术的应用局限，满足了在同一低代码平台使用不同技术栈组件，生成不同技术栈源码的需求，保证了平台物料生态的统一。

本发明为解决其技术问题所采用的技术方案是：提供了一种支持多技术栈组件的低代码前端开发方法，包括以下步骤：

S1、构建集成多技术栈组件的低代码平台物料库，对组件进行标签化存储；

S2、对多技术栈组件进行统一收敛转换；

S3、转译生成多技术栈源码。

步骤S1具体包括以下过程：

S1.1、初始化平台物料库：创建具有分区的物料库，每个分区创建一个初始化的根属性标签、根开发模板和组件库目录，其中根属性标签对应于不同技术栈名称，根开发模板与技术栈一一关联对应，组件库目录初始为空，包括组件类型、组件id和对应组件开发文件目录；

S1.2、定义访问每个物料分区的URL(Uniform Resource Locator，统一资源定位符)，并通过网络配置将URL代理到服务器的物料分区路径中，同时为每个物料分区创建gitlab仓库(基于网络的git仓库管理工具)；

S1.3、将多技术栈组件分区集成到物料库；

S1.4、监听各物料分区的操作指令，若物料分区发生变化，则定向访问对应分区，自动提交完整代码文件到gitlab仓库，实现更新。

步骤S1.3所述的将多技术栈组件分区集成到物料库，根据操作场景包括以下两种集成过程：

a、针对在其他环境中已开发的组件，通过API(Application ProgrammingInterface，程序编程接口)获取组件元素及其开发文件批量导入平台中；

b、针对自定义开发的组件，首先确定组件依赖的技术栈类别，在平台物料库中检索对应的物料分区，然后在物料分区中新建组件目录，创建对应组件的开发源码区，并导入该分区对应的根开发模板，最后依据模板结构完成组件开发。

步骤S2具体包括以下过程：

S2.1、构建基于Web Component(网络原生组件)技术的组件转换规则库：

组件转换规则库包含结构化存储的转换规则定义，转换规则定义的存储格式为{源技术栈，源开发模板，目标开发模板，转换操作}，其中源技术栈与物料库中物料分区的根属性标签呈一一匹配对应关系，源开发模板根据源技术栈关联确定，目标开发模板为基于Web Component技术的组件开发模板，转换操作包括结构化存储的转换操作定义，转换操作定义的存储格式为{源关键词，目标关键词，转换操作代码}，其中源关键词从该转换操作对应的源开发模板的属性关键词组中获取，目标关键词从该转换操作对应的目标开发模板的属性关键词组中获取，转换操作代码是由人工编写的规则脚本代码；

S2.2、基于规则进行组件信息逻辑提取和匹配转换，包括以下过程：

S2.2.1、当用户执行的向画布拖入组件的操作被监听到时，定义并注册一个继承于该组件的Web Component组件元素，并在画布的HTML(HyperText Markup Language，超文本标记语言)代码中声明该Web Component组件；

S2.2.2、获取该添加到画布的物料库组件所在的物料分区，进而获取该物料分区的根属性标签，以该根属性标签作为检索条件，在组件转换规则库的源技术栈字段进行匹配检索，获取该物料分区对应的组件转换规则定义；

S2.2.3、访问该物料分区对应的gitlab仓库，获取该组件的初始完整开发文件，根据获取转换规则定义中的转换操作定义，在该组件开发文件中遍历源关键词，执行对应转换操作代码，生成目标关键词的对应信息内容；同时，在该组件对应的Web Component组件源码中自动遍历识别目标关键词区域，将生成的信息内容匹配填充到该目标关键词区域中，从而实现该组件信息的自动化逻辑提取，和到其对应Web Component组件的信息匹配转换。

步骤S3具体包括以下过程：

S3.1、基于AST(Abstract Syntax Tree，抽象语法树技术)技术解析生成DSL配置文件：接收用户的代码生成指令，获取当前画布的HTML源码，定向识别源码中所有声明的Web Component组件及组件的配置信息内容，基于AST技术，解析生成用于描述当前页面的JSON(JavaScript Object Notation)Schema，即描述JSON的数据格式，用于注解和检验JSON文件，得到DSL配置文件；

S3.2、基于字典递归分析DSL配置文件，转译为多技术栈片段源码，包括以下过程：

S3.2.1、获取DSL配置文件，依据嵌套结构，按照先序递归的中间节点、左节点、右节点的遍历顺序规则，从根节点逐级遍历组件对象；

S3.2.2、字典包括标签字典和属性描述字典，标签字典是不同技术栈下同一组件的标签名称的不同表述方式的集合，属性描述字典是不同技术栈下同一组件的属性值的不同表述方式和对应转换规则的集合；在标签字典和属性描述字典中进行匹配检索，自动获取当前组件对象在不同技术栈中的标签名称、属性赋值；同时，将对应目标技术栈的标签名称和多个属性赋值按照HTML书写规则重新拼接组合在一起，从而得到目标技术栈的单个组件片段源码，直至DSL配置文件中的所有组件对象均转译完成；

S3.3、基于开发模板填充片段源码生成多技术栈源码。

本发明基于其技术方案所具有的有益效果在于：

(1)本发明引入了Web Components技术和DSL机制，提出了一种在低代码开发画布设计态过程中，将多技术栈组件统一收敛转换成Web Components组件，再在生成代码的运行态过程中，将由Web Components组件搭建成的页面基于DSL机制发散生成不同技术栈前端源码的方法。这一方法首先解决了现有低代码开发平台只支持单一技术栈的缺陷，其次，针对现有技术中直接做DSL属性映射来生成不同技术栈源码的方法，其创新的关键在于添加了Web Components作为中间转换工具，从而解决了不同技术栈组件功能不同而无法直接通过DSL转换的问题，一方面实现了在一个低代码平台中共享所有技术栈组件，用户在画布中选择组件时无需考虑技术框架可以选择最合适的UI组件，大大降低了在技术框架之间更改的成本，另一方面实现了使用不同技术栈组件搭建的前端页面能统一转译成目标技术栈的前端源码，具有有益效果。

(2)本发明搭建了集成多技术栈组件的物料库，物料库按照技术栈不同进行物料分区，具有不同的访问路径，开发人员可直接依据物料分区中的开发模板进行批量组件导入和新建组件，某种程序上解决了低代码开发物料生态割裂的问题，实现了多技术栈组件物料的统一管理和发布。

(3)本发明构建了基于Web Component的组件规则转换库，实现了当用户将组件拖拽到画布中时，系统自动将其转换为Web Component组件，相比于现有技术，该页面中不同技术栈组件的解析预览采用同一技术框架结构，而不用根据技术栈不同设置不同的解析规则，降低了解析成本和解析效率。

(4)在基于DSL机制的多技术栈源码转译过程中，应用了AST抽象语法树，且构建了标签字典和属性描述字典的结构化存储模式，为转译过程提供了规则基础。

附图说明

图1是本发明方法的主要执行过程示意图。

图2是集成多技术栈组件的低代码平台物料库示意图。

图3是多技术栈组件分区集成到物料库过程示意图。

图4是多技术栈组件到Web Component组件的统一转换过程示意图。

图5是基于AST技术解析生成DSL配置文件过程示意图。

图6是DSL配置文件到多技术栈源码的转译过程。

具体实施方式

下面结合附图和实施例对本发明作进一步说明。

本发明提供了一种支持多技术栈组件的低代码前端开发方法，参照图1，主要执行过程是在画布设计态逻辑中先通过Web Component技术对多技术栈组件进行统一的收敛转换，在生成代码运行态逻辑中再通过DSL机制进行转译发散生成多技术栈的源码。前者解决了在一个低代码平台上难以集成多个技术栈组件的问题，实现了用户在低代码开发平台搭建前端页面时，无需考虑不同技术栈组件的兼容适配问题，可自由选择需要的UI组件，同时前端页面的解析预览可以采用统一解析规则，节省解析成本；后者解决了使用不同技术栈组件搭建前端页面生成不同技术栈源码时的技术壁垒问题，实现了需要生成代码时，由于不同技术栈组件已经被统一收敛为相同技术框架下的组件，可以方便的对组件信息进行统一抽取和转译，满足了生成多技术栈源码的需求，并保证了生成源码的可运行性。从而提高了低代码开发在不同系统环境中的可集成性，增强了低代码开发的技术开放性。

本发明包括以下步骤：

S1、参照图2，构建集成多技术栈组件的低代码平台物料库，对组件进行标签化存储。

不同技术栈的UI(User Interface，用户界面)组件具有不同的开发结构和开发规则，该步骤目的是实现组件的分区标签化存储，抽象出不同技术栈UI组件的开发模板，自动化分区统一集成到低代码平台物料库中，作为低代码开发的底层组件元素支撑。主要包括以下几个步骤：

S1.1、初始化平台物料库：在本地服务器端创建必要的物料库运行环境，每个物料库中含有若干分区，每个物料分区创建一个初始化的根属性标签、根开发模板和组件库目录。

所述根属性标签对应于不同技术栈名称，用于识别该分区组件的技术栈类型，如Augular、Vue、React等。所述根开发模板与技术栈一一关联对应，包括属性关键字组{关键字1，关键字2，…，关键字m}和由这些关键词构成的完整开发结构代码模板，对应物料分区内的组件开发源码应当按照该模板进行组件的信息内容填充，以保证组件信息的结构化存储和识别，以Vue技术栈为例，其对应的物料分区根开发模板包括关键字template、script、style，分别用于识别组件的界面展示信息、业务实现信息和界面布局信息。

所述组件库目录初始为空，包括组件类型、组件id和对应组件开发文件目录。

S1.2、定义访问每个物料分区的URL，并通过网络配置将URL代理到服务器的物料分区路径中，同时，创建每个物料分区的gitlab仓库，将其作为对应分区的版本控制工具。

S1.3、将多技术栈组件分区集成到物料库。参照图3，根据操作场景包括以下两种集成过程：

a、针对在其他环境中已开发的组件，可以通过API获取组件元素及其开发文件批量导入平台中，针对任一组件元素，系统将自动依次获取已构建的物料分区x(x＝1，2，…，n)对应的根开发模板属性关键字组{关键字1，关键字2，…，关键字m}，在该组件元素对应开发文件源码中遍历并匹配关键字组，取匹配度最高的根开发模板所属的物料分区，将该组件元素及其开发文件导入对应物料分区中，导入后的组件在物料库中可进行二次开发，开发结构始终依赖所属分区的根开发模板。

b、针对需自定义开发的组件，首先需确定组件依赖的技术栈类别，在平台物料库中检索满足“根属性标签＝技术栈类别”的物料分区，然后在物料分区中新建组件目录，系统将创建对应组件的开发源码区，并导入该分区对应的根开发模板，可直接依据模板结构完成组件开发。

S1.4、系统自动监听各物料分区的操作指令，若物料分区发生变化，则定向访问对应分区，自动提交完整代码文件到gitlab仓库，进行版本更新和管理。低代码开发平台通过api访问不同物料分区路径，将物料库中的所有组件分区可视化呈现在平台中，支持用户通过拖拉拽的方法在画布中添加组件和修改组件属性信息内容。

S2、对多技术栈组件进行统一收敛转换。

用户在低代码开发平台中通过拖拉拽不同组件到画布区域，进行组件的布局设计和属性配置。不同技术栈组件的开发源码框架结构不同，为了解决使用不同技术栈UI组件直接生成的源码存在技术壁垒的问题，当组件被添加到画布时，需要系统自动对隶属不同技术栈的组件进行信息内容的抽取，并将其转换填充到相同的可识别开发模板，从而实现不同技术栈组件以相同开发框架结构添加到画布HTML源码中。

该步骤的目的就是通过Web Component技术，基于开发模板结构模板，建立不同技术栈组件与Web Component组件之间的转换规则，从而实现用户在低代码开发平台中拖拉拽组件到画布中时，不论组件是通过哪个技术栈构建的，都自动统一转换为Web Component组件源码，添加到画布HTML中。主要包括以下几个步骤：

S2.1、构建基于Web Component技术的组件转换规则库：

转换规则库包含若干个转换规则定义，结构化存储为{源技术栈，源开发模板，目标开发模板，转换操作}，其中所述源技术栈与物料库中物料分区的根属性标签呈一一匹配对应关系，需手动选择填充；所述源开发模板与源技术栈绑定，在原技术栈填充后，由系统自动在物料库中匹配识别原技术栈的对应物料分区，并填充为对应物料分区的根开发模板，包括若干属性关键词组{关键字1，关键字2，…，关键字m}和初始定义的完整开发结构模板。

所述目标开发模板为基于Web Component技术的组件开发模板，表示为属性关键词组{defineCustomElement，shadowRoot，HTML templates}和初始定义的完整开发结构模板，其中所述属性关键词defineCustomElement代表自定义Web Component组件元素的创建注册，所述属性关键词shadowRoot代表组件元素内部的DOM(Document Object Model，页面文档对象模型)结构信息内容，是组件的核心配置内容，所述属性关键词HTML templates代表对组件元素的克隆以支持组件元素多个实例的使用更改和自定义组件元素的样式补充，这一开发模板是参考已有的Web Component技术进行定义的。

所述转换操作包括若干条转换操作定义，结构化存储为{源关键词i，目标关键词j，转换操作代码}，其中所述源关键词i是系统自动从该转换操作对应的源开发模板的属性关键词组中获取的，再由人工操作选择的某一关键词i；所述目标关键词j是系统自动从该转换操作对应的目标开发模板的属性关键词组中获取的，再由人工操作选择的某一关键词j；所述转换操作代码是由人工编写的规则脚本代码，表示如何将源关键词i在组件源码文件中的信息内容转换为Web Component组件源码文件中的目标关键词j对应的信息内容，包括信息内容的书写规则和数据类型的转换。

S2.2、基于规则进行组件信息逻辑提取和匹配转换，参照图4，包括以下过程：

S2.2.1、当系统监听到用户执行了在低代码平台画布中拖入一个组件的操作时，系统定义并注册一个继承于该组件的Web Component组件元素，并在画布的HTML代码中声明该Web Component组件。

S2.2.2、系统自动获取该添加到画布的物料库组件所在的物料分区，进而获取该物料分区的根属性标签，以该根属性标签作为检索条件，在组件转换规则库的源技术栈字段进行匹配检索，获取该物料分区对应的组件转换规则定义；

S2.2.3、系统自动访问该物料分区对应的gitlab仓库，获取该组件的初始完整开发文件，根据获取转换规则定义中的转换操作定义，在该组件开发文件中遍历源关键词，执行对应转换操作代码，生成目标关键词的对应信息内容，同时，在该组件对应的WebComponent组件源码中自动遍历识别目标关键词区域，将生成的信息内容匹配填充到该目标关键词区域中，从而实现了该组件信息的自动化逻辑提取，和到其对应Web Component组件的信息匹配转换。上述转换过程完成后，系统自动将生成的Web Component组件属性源码添加到画布HTML代码中，完成初始属性的配置。当用户在低代码画布中自定义修改组件的属性配置时，对应组件属性源码中的配置代码会发生变化。

S3、转译生成多技术栈源码。

该步骤的目的是当用户使用不同技术栈组件在低代码平台中完成应用程序搭建后，平台能够根据用户需求，基于DSL机制输出不同技术栈的前端源码，以支持应用程序的二次开发。参照图5，主要包括以下几个步骤：

S3.1、基于AST技术解析生成DSL配置文件：系统接收用户的代码生成指令，获取当前画布的HTML源码，定向识别源码中所有声明的Web Component组件及组件的配置信息内容，基于AST抽象语法树技术，自动解析生成用于描述当前页面的JSON Schema。

AST抽象语法树技术，是基于系统内置的解析器parser程序，接收当前画布的HTML源码作为输入程序，首先通过词法分析将整体源码进行分割，生成一个tokens列表，然后通过语法分析将tokens转化为具有语法含义的AST抽象语法树，最后通过系统内置的生成器generator程序，将语法树转换以可运行的代码JSON Schema表示。

其中，所述词法分析是对整体进行逐个字符扫描，自动依据已定义的编程语言关键字符进行匹配比较，定向识别并将源码分解成在当前编程语言中有意义的、不可再分割的最小代码块，即词法单元token，最终得到一个tokens列表；所述语法分析是依据源码自动解析获取词法单元token间的嵌套关联关系，并依据该嵌套关联关系，对词法分析得到的tokens进行树结构拼接，从而解析生成一个以元素嵌套的树状层级结构表示源码程序语法结构的语法树，树上每个节点都代表源代码中的一种结构。

所述DSL配置文件，是通过上述AST抽象语法树技术解析编译，最终得到的可运行程序代码JSON Schema，其保留了语法树的树结构，用于描述当前页面的组件关联关系和配置信息内容。

S3.2、基于字典递归分析DSL配置文件，转译为多技术栈片段源码。

组件按组件类别进行归类，不同组件类别下的可配置属性不同，而不同技术栈下的组件类别标签和组件可配置属性值的表述方式存在差异。因此将DSL配置文件转译为不同技术栈的源码需要构建它们的表述方式之间的对应转换规则。如DSL配置文件中“图标”这一组件类别的标签名为“button”，其属性size的赋值为“large/medium/small”；而Vue技术栈中element-ui组件库中对应的组件标签名为“el-button”，对应属性size的赋值为“medium/small/mini”；React技术栈中Ant Design组件库中对应的组件标签名为“Button”，其属性size的赋值为“large/default/small”。

字典包括标签字典和属性描述字典。签字典是不同技术栈下同一组件的标签名称的不同表述方式的集合，组件标签用于识别特定组件类别，存储在低代码平台的底层数据库中，存储结构为{组件类别id，标签含义，{技术栈1，标签名称}，{技术栈2，标签名称}，…，{技术栈n，标签名称}}。属性描述字典是不同技术栈下同一组件的属性值的不同表述方式和对应转换规则的集合，存储在低代码平台的底层数据库中，存储结构为：

DSL配置文件采用对象形式，一个组件对象包括了该组件元素的类别标签、属性名称和对应属性赋值。系统获取DSL配置文件，依据嵌套结构，按照先序递归的中间节点、左节点、右节点的遍历顺序规则，从根节点逐级遍历组件对象，以某一组件对象为例，获取组件对象的类别标签、属性名、属性赋值，分别在标签词典和属性描述字典中进行匹配检索，自动获取当前组件对象在不同技术栈中的标签名称、属性赋值，同时，系统自动将对应目标技术栈的标签名称和多个属性赋值按照html书写规则重新拼接组合在一起，从而得到目标技术栈的单个组件片段源码，直至DSL配置文件中的所有组件对象均转译完成。

S3.2.1、获取DSL配置文件，依据嵌套结构，按照先序递归的中间节点、左节点、右节点的遍历顺序规则，从根节点逐级遍历组件对象；

S3.2.2、字典包括标签字典和属性描述字典，标签字典是不同技术栈下同一组件的标签名称的不同表述方式的集合，属性描述字典是不同技术栈下同一组件的属性值的不同表述方式和对应转换规则的集合；在标签字典和属性描述字典中进行匹配检索，自动获取当前组件对象在不同技术栈中的标签名称、属性赋值；同时，将对应目标技术栈的标签名称和多个属性赋值按照HTML书写规则重新拼接组合在一起，从而得到目标技术栈的单个组件片段源码，直至DSL配置文件中的所有组件对象均转译完成。

S3.3、基于开发模板填充片段源码生成多技术栈源码。

参照图6，系统自动获取目标技术栈的代码生成指令，在平台物料库中检索对应技术栈所在的物料分区，获取其根开发模板，依据已定义的开发模板结构，将S32得到的同一目标技术栈的转译片段填充到模板中的对应位置，即可实现DSL配置文件到多个目标技术栈源码的转译过程。

本发明提供的一种支持多技术栈组件的低代码前端开发方法能够突破现有技术的应用局限，满足了在同一低代码平台使用不同技术栈组件，生成不同技术栈源码的需求，保证了平台物料生态的统一。

Claims (5)

1.一种支持多技术栈组件的低代码前端开发方法，其特征在于包括以下步骤：

S1、构建集成多技术栈组件的低代码平台物料库，对组件进行标签化存储；

S2、对多技术栈组件进行统一收敛转换；

S3、转译生成多技术栈源码。

2.根据权利要求1所述的支持多技术栈组件的低代码前端开发方法，其特征在于：步骤S1具体包括以下过程：

S1.1、初始化平台物料库：创建具有分区的物料库，每个分区创建一个初始化的根属性标签、根开发模板和组件库目录，其中根属性标签对应于不同技术栈名称，根开发模板与技术栈一一关联对应，组件库目录初始为空，包括组件类型、组件id和对应组件开发文件目录；

S1.2、定义访问每个物料分区的URL，并通过网络配置将URL代理到服务器的物料分区路径中，同时为每个物料分区创建gitlab仓库；

S1.3、将多技术栈组件分区集成到物料库；

S1.4、监听各物料分区的操作指令，若物料分区发生变化，则定向访问对应分区，自动提交完整代码文件到gitlab仓库，实现更新。

3.根据权利要求2所述的支持多技术栈组件的低代码前端开发方法，其特征在于：步骤S1.3所述的将多技术栈组件分区集成到物料库，根据操作场景包括以下两种集成过程：

a、针对在其他环境中已开发的组件，通过API获取组件元素及其开发文件批量导入平台中；

b、针对自定义开发的组件，首先确定组件依赖的技术栈类别，在平台物料库中检索对应的物料分区，然后在物料分区中新建组件目录，创建对应组件的开发源码区，并导入该分区对应的根开发模板，最后依据模板结构完成组件开发。

4.根据权利要求1所述的支持多技术栈组件的低代码前端开发方法，其特征在于：步骤S2具体包括以下过程：

S2.1、构建基于Web Component技术的组件转换规则库：

组件转换规则库包含结构化存储的转换规则定义，转换规则定义的存储格式为{源技术栈，源开发模板，目标开发模板，转换操作}，其中源技术栈与物料库中物料分区的根属性标签呈一一匹配对应关系，源开发模板根据源技术栈关联确定，目标开发模板为基于WebComponent技术的组件开发模板，转换操作包括结构化存储的转换操作定义，转换操作定义的存储格式为{源关键词，目标关键词，转换操作代码}，其中源关键词从该转换操作对应的源开发模板的属性关键词组中获取，目标关键词从该转换操作对应的目标开发模板的属性关键词组中获取，转换操作代码是由人工编写的规则脚本代码；

S2.2、基于规则进行组件信息逻辑提取和匹配转换，包括以下过程：

S2.2.1、当用户执行的向画布拖入组件的操作被监听到时，定义并注册一个继承于该组件的Web Component组件元素，并在画布的HTML代码中声明该Web Component组件；

S2.2.2、获取该添加到画布的物料库组件所在的物料分区，进而获取该物料分区的根属性标签，以该根属性标签作为检索条件，在组件转换规则库的源技术栈字段进行匹配检索，获取该物料分区对应的组件转换规则定义；

S2.2.3、访问该物料分区对应的gitlab仓库，获取该组件的初始完整开发文件，根据获取转换规则定义中的转换操作定义，在该组件开发文件中遍历源关键词，执行对应转换操作代码，生成目标关键词的对应信息内容；同时，在该组件对应的Web Component组件源码中自动遍历识别目标关键词区域，将生成的信息内容匹配填充到该目标关键词区域中，从而实现该组件信息的自动化逻辑提取，和到其对应Web Component组件的信息匹配转换。

5.根据权利要求1所述的支持多技术栈组件的低代码前端开发方法，其特征在于：步骤S3具体包括以下过程：

S3.1、基于AST技术解析生成DSL配置文件：接收用户的代码生成指令，获取当前画布的HTML源码，定向识别源码中所有声明的Web Component组件及组件的配置信息内容，基于AST技术，解析生成用于描述当前页面的JSON Schema，得到DSL配置文件；

S3.2、基于字典递归分析DSL配置文件，转译为多技术栈片段源码，包括以下过程：

S3.2.1、获取DSL配置文件，依据嵌套结构，按照先序递归的中间节点、左节点、右节点的遍历顺序规则，从根节点逐级遍历组件对象；

S3.2.2、字典包括标签字典和属性描述字典，标签字典是不同技术栈下同一组件的标签名称的不同表述方式的集合，属性描述字典是不同技术栈下同一组件的属性值的不同表述方式和对应转换规则的集合；在标签字典和属性描述字典中进行匹配检索，自动获取当前组件对象在不同技术栈中的标签名称、属性赋值；同时，将对应目标技术栈的标签名称和多个属性赋值按照HTML书写规则重新拼接组合在一起，从而得到目标技术栈的单个组件片段源码，直至DSL配置文件中的所有组件对象均转译完成；

S3.3、基于开发模板填充片段源码生成多技术栈源码。

Images