CN115951875A - 一种DSL语言与Vue代码互相转换的解决方法及*** - Google Patents

Abstract

本发明公开了一种DSL语言与Vue代码互相转换的解决方法及***，属于低代码技术领域。本发明解决了需要特殊样式的表单、需要绑定复杂事件的定制组件的问题，达成了灵活支撑个性二次开发的目标，助力用户无需打包编译即可快速二次开发与调试；在复杂的数据处理、个性化的交互事件、特殊的页面元素等场景，用户可以通过编写JavaScript代码块满足业务需要；进而提升了二次开发灵活性和低代码平台的可拓展性。

Description

一种DSL语言与Vue代码互相转换的解决方法及***

技术领域

本发明涉及低代码技术领域，具体涉及一种DSL语言与Vue代码互相转换的解决方法及***。

背景技术

为支撑云网生产智能化调度、云网一点服务敏捷化响应、云网管理一体化协同，通过运营调度低代码平台实现快速构建流程、表单、规则、报表能力。实现新场景及存量场景优化的支撑周期，实现真正敏捷开发，由月缩短到天、由周缩短到天。

针对以往低代码平台在应对用户个性化需求中响应慢、可拓展性差的问题，使得页面设计比较死板。同时无法实现需要有特殊样式的表单、需要绑定复杂事件的组件，从而降低整个低代码平台的可用性，更重要的是，用户基于可视化设计生成的代码进行二次开发后，如何再切换回拖拽的设计器继续进行拖拽式设计而不影响别的功能，是一个亟待解决的问题。为此，提出一种DSL语言与Vue代码互相转换的解决方法及***。

发明内容

本发明所要解决的技术问题在于：如何解决在现有低代码平台中存在特殊样式的表单、需要绑定复杂事件的定制组件和平台中不存在的组件，以及快速开发并发布进行拖拽使用等问题，提供了一种DSL语言与Vue代码互相转换的解决方法。

本发明是通过以下技术方案解决上述技术问题的，本发明包括以下步骤：

S1：可视化页面设计

利用多种设计器进行可视化页面设计，用户通过在设计器中拖拽组件、配置组件参数完成低代码开发；

S2：生成DSL语言包

通过用户在页面进行场景的可视化配置，生成对应业务逻辑描述的DSL语言，经低代码平台整理打包后得到每个场景的DSL语言包；

S3：解析DSL包编译Vue代码

利用低代码DSL语法解析器解析DSL语言包并编译生成页面的Vue代码；

S4：Vue代码反编译成DSL语言包

用户在生成的Vue代码上进行二次开发，低代码平台将用户二次开发的代码***步骤S3的生成Vue代码中，并反编译成DSL语言包；

S5：生成运行态页面并预览

通过DSL语法解析器生成页面Vue代码和表单组件规则，结合业务实例数据实时渲染表单页面。

更进一步的，在所述步骤S1中，多种设计器分别为模型设计器、表单设计器、流程设计器和规则设计器；所述模型设计器用于设计库表模型，所述表单设计器用于设计场景中的信息录入类、详情展示类以及信息查询类的表单，所述流程设计器用于设计场景的主流程和子流程同时支持给环节设置分支条件和参与者；所述规则设计器用于设计表单展示交互、环节组件展示规则。

更进一步的，在所述步骤S1中，模型设计即数据库中的表设计，表单设计包括表单、按钮、弹窗设计，流程设计包括人工环节和自动环节设计，规则设计包含表单展示交互、环节组件展示规则设计。

更进一步的，在所述步骤S2中，DSL语言在低代码平台中为JSON格式或XML格式。

更进一步的，在所述步骤S3中，低代码DSL语法解析器通过使用Vue语法生成分别生成Vue对应的template、Script、Style三段代码；同时提供Vue代码在线编辑器，让用户编辑Script、Style部分代码，Vue代码在线编辑器提供代码检验功能和页面预览功能。

更进一步的，在所述步骤S4中，通过将Script、Style部分代码分别反编译成JSON或XML，生成DSL语言包。

更进一步的，在所述步骤S5中，规则指的是利用规则思想、开发中的条件分支判断思想，抽象出通用判断模型，对判断的结构控件、条件元素进行自由组合；结合实例数据计算出表达式值实现表单组件展示判断。

更进一步的，在所述步骤S5中，通过操控表单中dom元素属性，使用Vue提供的watch、computed属性以及v-if指令进而切换表单元素的状态，实现动态渲染表单页面。

本发明还提供了一种DSL语言与Vue代码互相转换的解决***，利用上述的解决方法进行DSL语言与Vue代码的互相转换工作，包括：

设计模块，用于利用多种设计器进行可视化页面设计，用户通过在设计器中拖拽组件、配置组件参数完成低代码开发；

生成模块，用于通过用户在页面进行场景的可视化配置，生成对应业务逻辑描述的DSL语言，经低代码平台整理打包后得到每个场景的DSL语言包；

编译模块，用于利用低代码DSL语法解析器解析DSL语言包并编译生成页面的Vue代码；

反编译模块，用于用户在生成的Vue代码上进行二次开发，低代码平台将用户二次开发的代码***步骤S3的生成Vue代码中，并反编译成DSL语言包；

预览模块，用于通过DSL语法解析器生成页面Vue代码和表单组件规则，结合业务实例数据实时渲染表单页面。

本发明相比现有技术具有以下优点：该DSL语言与Vue代码互相转换的解决方法，解决了需要特殊样式的表单、需要绑定复杂事件的定制组件的问题，达成了灵活支撑个性二次开发的目标，助力用户无需打包编译即可快速二次开发与调试；在复杂的数据处理、个性化的交互事件、特殊的页面元素等场景，用户可以通过编写JavaScript代码块满足业务需要；进而提升了二次开发灵活性和低代码平台的可拓展性。

附图说明

图1是本发明实施例一中DSL语言与Vue代码互相转换的解决方法的流程示意图；

图2是本发明实施例二中Vue代码组件拖拽入设计器的解决方法的流程示意图。

具体实施方式

下面对本发明的实施例作详细说明，本实施例在以本发明技术方案为前提下进行实施，给出了详细的实施方式和具体的操作过程，但本发明的保护范围不限于下述的实施例。

如图1所示，本实施例提供一种技术方案：一种DSL语言与Vue代码互相转换的解决方法，包括以下步骤：

S1：可视化页面设计

利用多种设计器进行可视化页面设计，包含了模型设计器、表单设计器、流程设计器、规则设计器等，用户通过在设计器中拖拽组件、配置组件参数等完成低代码开发；

S2：生成DSL语言包

低代码设计态通过用户在页面进行场景的可视化配置，生成对应业务逻辑描述的DSL语言，经低代码平台整理打包后得到每个场景的DSL语言包；

S3：解析DSL包编译Vue代码

利用低代码DSL语法解析器解析DSL语言包并编译生成页面的Vue代码，用户在Vue代码在线编辑器中编辑Vue代码，支持实时预览和代码检测功能；

S4：Vue代码反编译成DSL语言包并在低代码设计态展示

用户在生成的Vue代码上进行二次开发，二次开发的代码也能被反编译成DSL语言包；

S5：生成运行态页面并预览

运行态通过DSL语法解析器生成页面Vue代码和表单组件规则，结合业务实例数据实时动态渲染表单页面。

在所述步骤S1中，模型设计即数据库中的表设计，表单设计包括表单、按钮、弹窗设计，流程设计包括人工环节和自动环节设计，规则设计包含表单展示交互、环节组件展示等规则配置。

在所述步骤S2中，DSL语言为领域特定语言，其在低代码平台中为JSON格式或XML格式。

在本实施例中，JSON格式和XML格式都是一种数据格式。

在所述步骤S3中，低代码DSL语法解析器为自研，通过使用Vue语法生成分别生成Vue对应的template、Script、Style三段代码；同时提供Vue代码在线编辑器，让用户编辑Script、Style部分代码，Vue代码在线编辑器提供代码检验功能和页面预览功能，让用户边开发边预览效果。

在所述步骤S4中，通过将Script、Style部分代码分别反编译成JSON格式或XML格式，生成DSL语言包。

在所述步骤S5中，规则指的是利用规则思想、开发中的条件分支判断思想，抽象出通用判断模型，对判断的结构控件、条件元素进行自由组合；结合实例数据计算出表达式值实现表单组件展示判断等；通过操控表单中dom元素属性，使用Vue提供的watch、computed属性以及v-if指令进而切换表单元素的状态，实现动态渲染表单页面。

本实施例还提供了一种DSL语言与Vue代码互相转换的解决***，采用上述的方法进行DSL语言与Vue代码的互相转换工作，包括：

可视化设计模块，用于提供低代码设计态的几个设计器，分别是模型设计器、表单设计器、流程设计器和规则设计器，模型设计器可以设计库表模型；表单设计器可以设计场景中的信息录入类、详情展示类以及信息查询类的表单；流程设计器可以设计场景的主流程和子流程同时支持给环节设置分支条件和参与者；规则设计器可以设计表单展示交互、环节组件展示规则；可视化设计产出符合低代码DSL语法的JSON或XML；

DSL编译模块，用于编译用户可视化设计产出的JSON或XML，生成Vue代码；

Vue代码编辑模块，用于提供Vue代码在线编辑器供用户在线二次开发代码，并提供代码检测和实时预览功能；

Vue代码反编译模块，基于DSL编译模块产生的Vue代码以及用户二次开发的代码反编译成JSON格式，生成DSL语言包；

预览模块，用于生成运行态页面并预览。

实施例二

如图2所示，本实施例提供了一种Vue代码组件拖拽入设计器的解决方法，包括如下步骤：

步骤S1、本地开发Vue代码组件：

在本地编辑器开发一个符合低代码平台规范的Vue文件，并上传至低代码平台由反编译器生成DSL规范的JSON代码。

步骤S2、Vue组件拖拽到画布中：

用户拖拽该Vue组件，低代码平台通过调用API获取用户上传的Vue文件获取到JSON代码，将其回显到设计器的画布中。

步骤S3、预览页面：

点击预览按钮可预览设计好的页面，低代码DSL编译器利用Vue.component方法将Vue代码组件挂载到页面上，实现回显。

所述步骤S2中，API指的是低代码平台提供的统一规范接口，返回的数据是Vue组件的相关配置信息。

所述步骤S3中，Vue.component指的是Vue前端框架提供的原生动态注册组件的方式。

值得注意的是，上述***实施例中，所包括的各个单元只是按照功能逻辑进行划分的，但并不局限于上述的划分，只要能够实现相应的功能即可；另外，各功能单元的具体名称也只是为了便于相互区分，并不用于限制本发明的保护范围。

另外，本领域普通技术人员可以理解实现上述各实施例方法中的全部或部分步骤是可以通过程序来指令相关的硬件来完成，相应的程序可以存储于一计算机可读取存储介质中。

综上所述，上述实施例的DSL语言与Vue代码互相转换的解决方法及***，解决了需要特殊样式的表单、需要绑定复杂事件的定制组件的问题，达成了灵活支撑个性二次开发的目标，助力用户无需打包编译即可快速二次开发与调试；在复杂的数据处理、个性化的交互事件、特殊的页面元素等场景，用户可以通过编写JavaScript代码块满足业务需要；进而提升了二次开发灵活性和低代码平台的可拓展性。

尽管上面已经示出和描述了本发明的实施例，可以理解的是，上述实施例是示例性的，不能理解为对本发明的限制，本领域的普通技术人员在本发明的范围内可以对上述实施例进行变化、修改、替换和变型。

Claims (9)

1.一种DSL语言与Vue代码互相转换的解决方法，其特征在于，包括以下步骤：

S1：可视化页面设计

利用多种设计器进行可视化页面设计，用户通过在设计器中拖拽组件、配置组件参数完成低代码开发；

S2：生成DSL语言包

通过用户在页面进行场景的可视化配置，生成对应业务逻辑描述的DSL语言，经低代码平台整理打包后得到每个场景的DSL语言包；

S3：解析DSL包编译Vue代码

利用低代码DSL语法解析器解析DSL语言包并编译生成页面的Vue代码；

S4：Vue代码反编译成DSL语言包

用户在生成的Vue代码上进行二次开发，低代码平台将用户二次开发的代码***步骤S3的生成Vue代码中，并反编译成DSL语言包；

S5：生成运行态页面并预览

通过DSL语法解析器生成页面Vue代码和表单组件规则，结合业务实例数据实时渲染表单页面。

2.根据权利要求1所述的一种DSL语言与Vue代码互相转换的解决方法，其特征在于：在所述步骤S1中，多种设计器分别为模型设计器、表单设计器、流程设计器和规则设计器；所述模型设计器用于设计库表模型，所述表单设计器用于设计场景中的信息录入类、详情展示类以及信息查询类的表单，所述流程设计器用于设计场景的主流程和子流程同时支持给环节设置分支条件和参与者；所述规则设计器用于设计表单展示交互、环节组件展示规则。

3.根据权利要求2所述的一种DSL语言与Vue代码互相转换的解决方法，其特征在于：在所述步骤S1中，模型设计即数据库中的表设计，表单设计包括表单、按钮、弹窗设计，流程设计包括人工环节和自动环节设计，规则设计包含表单展示交互、环节组件展示规则设计。

4.根据权利要求3所述的一种DSL语言与Vue代码互相转换的解决方法，其特征在于：在所述步骤S2中，DSL语言在低代码平台中为JSON格式或XML格式。

5.根据权利要求4所述的一种DSL语言与Vue代码互相转换的解决方法，其特征在于：在所述步骤S3中，低代码DSL语法解析器通过使用Vue语法生成分别生成Vue对应的template、Script、Style三段代码；同时提供Vue代码在线编辑器，让用户编辑Script、Style部分代码，Vue代码在线编辑器提供代码检验功能和页面预览功能。

6.根据权利要求5所述的一种DSL语言与Vue代码互相转换的解决方法，其特征在于：在所述步骤S4中，通过将Script、Style部分代码分别反编译成JSON或XML，生成DSL语言包。

7.根据权利要求6所述的一种DSL语言与Vue代码互相转换的解决方法，其特征在于：在所述步骤S5中，规则指的是利用规则思想、开发中的条件分支判断思想，抽象出通用判断模型，对判断的结构控件、条件元素进行自由组合；结合实例数据计算出表达式值实现表单组件展示判断。

8.根据权利要求7所述的一种DSL语言与Vue代码互相转换的解决方法，其特征在于：在所述步骤S5中，通过操控表单中dom元素属性，使用Vue提供的watch、computed属性以及v-if指令进而切换表单元素的状态，实现动态渲染表单页面。

9.一种DSL语言与Vue代码互相转换的解决***，其特征在于，利用如权利要求1～8任一项所述的解决方法进行DSL语言与Vue代码的互相转换工作，包括：

设计模块，用于利用多种设计器进行可视化页面设计，用户通过在设计器中拖拽组件、配置组件参数完成低代码开发；

生成模块，用于通过用户在页面进行场景的可视化配置，生成对应业务逻辑描述的DSL语言，经低代码平台整理打包后得到每个场景的DSL语言包；

编译模块，用于利用低代码DSL语法解析器解析DSL语言包并编译生成页面的Vue代码；

反编译模块，用于用户在生成的Vue代码上进行二次开发，低代码平台将用户二次开发的代码***步骤S3的生成Vue代码中，并反编译成DSL语言包；

预览模块，用于通过DSL语法解析器生成页面Vue代码和表单组件规则，结合业务实例数据实时渲染表单页面。

Images