基于JSONSchema的页面DSL的格式转换并生成前端源代码的方法与流程

本发明属于计算机软件开发，尤其涉及一种基于json schema的页面dsl的格式转换并生成前端源代码的方法。

背景技术：

1、在现代软件开发中，为提高软件开发的效率，使用低代码技术已成为一种趋势，各种低代码开发平台层出不穷。低代码技术的首要特征是可视化开发，特别是前端页面，支持用户通过拖放的方式快速构建表单及其他页面。为实现页面的可视化快速构建，低代码平台通常基于预定义的页面组件，并使用页面设计器，生成基于json schema的dsl模型描述页面组件的参数及他们之间的关系。页面引擎基于dsl模型在运行时渲染页面。

2、以上提到的页面设计器、页面引擎及基于json schema的dsl是低代码平台的专有技术，不同的低代码平台实现不同，业界没有统一标准。这对用户来说意味着供应商锁定，限制了用户迁移应用的自由，成为低代码平台推广的障碍。为脱离特定低代码平台的限制，用户要求低代码平台的页面设计器能生成vue或react(目前流行的两种前端开发技术)源代码，以便进行灵活的二次开发。低代码平台对此需求有不同解决方案。一部分低代码平台不支持页面生成源码，一部分基于私有dsl实现了自己的生成方案。

3、基于专有页面dsl生成页面vue或react源代码是一项较复杂的工作，需要较大的投入。这也是一部分低代码平台不支持页面生成源码的原因。另一方面，基于私有dsl实现的源代码生成方案，不具有通用性，用户仍然会有供应商锁定的顾虑。

技术实现思路

1、鉴于以上现有技术的不足，发明的目的在于提供基于json schema的页面dsl的格式转换并生成前端源代码的方法，提供一种低代码平台实现页面源码生成的新思路，能够更快地实现基于页面dsl生成vue或react源代码，同时为用户提供一个通用的页面描述方法，消除供应商锁定顾虑。

2、本发明，基于json schema的页面dsl的格式转换并生成前端源代码的方法，包括如下步骤：

3、s1.为每一种低代码表单组件建立uidl模板,并定义模板参数；

4、s2.在表单生成过程中维护一个变量池；

5、s3.从变量池读取所需参数，再将所需参数传入至表单顶级组件的uidl模板中；

6、s4.依次处理表单顶级组件的子组件，每个不同类型的子组件都对应不同的uidl模板；

7、s5.若子组件是数据组件，执行步骤s6，若子组件是布局组件，执行步骤s7；

8、s6.使用对应表单组件的uidl模板，传入从变量池中读取的所需参数，生成表单组件的uidl描述，并将其加入父组件的uidl描述的children列表；

9、s7.使用对应布局组件的uidl模板，传入从变量池中读取的所需参数，生成布局组件的uidl描述，并将其加入父组件的uidl描述的children列表；

10、s8.对布局组件的子组件重复s4～s7，将专有dsl转换成uidl标准格式，通过现有代码生成工具将uidl描述生成对应的前端页面源代码。

11、进一步地，所述低代码表单组件基于vue组件实现。

12、进一步地，所述表单组件包括布局组件和数据组件。

13、进一步地，所述布局组件用于编排其他组件的显示位置，包括栅格、表格、卡片、页签。

14、进一步地，所述数据组件用于录入或展示数据，包括文本框、下拉列表、单选框、复选框、日期选择。

15、进一步地，所述变量池包含外部传入的全局参数，并按层级存储包含从表单顶级组件到当前组件的相关配置。

16、进一步地，所述s3中的表单uidl不包含子组件。

17、进一步地，所述s8中，源代码包括ui组件的渲染逻辑、数据绑定、事件处理。

18、进一步地，所述s8中，通过现有代码生成工具将uidl描述生成对应的前端页面源代码具体包括如下步骤：

19、s9.验证组件uidl描述的合法性；

20、s10.将通用uidl定义解析为特定语言框架的内容，使用不同的语言框架映射，将uidl解析为不同语言框架的组件；

21、s11.生成基本组件，以抽象语法树的形式表示；

22、s12.在基本组件的抽象语法树基础上通过插件方式执行操作，包括传入参数定义、样式、将样式提取到css文件；

23、s13.合并所有结果，返回标准格式代码。

24、进一步地，所述语言框架的组件包括vue、react、html。

25、本发明有益效果如下：

26、本发明提供的方法实现了将专有的基于json schema的页面dsl转换为uidl标准格式，并且能够生成与vue或react框架兼容的前端源代码，可以提高开发效率：利用uidl格式已有的工具、代码生成机制，以较低投入实现页面源代码生成，节省了开发时间，并且推进标准化，通过uidl作为标准的页面描述语言，为低代码平台用户提供了通用的页面抽象描述层，独立于低代码平台特定实现，可消除用户对低代码平台供应商锁定的顾虑，具有灵活性和可扩展性，可以将专有json schema页面dsl转换为uidl，可以利用uidl的灵活性和可扩展性，满足不同项目的需求，除了vue和react，还可以生成更多类型的前端源代码，并且可以确保一致性，通过使用uidl标准格式作为中间表示，可以确保生成的源代码与现有的vue或react框架具有一致的结构和规范。

技术特征：

1.基于json schema的页面dsl的格式转换并生成前端源代码的方法，其特征在于，包括如下步骤：

2.根据权利要求1所述的基于json schema的页面dsl的格式转换并生成前端源代码的方法，其特征在于，所述低代码表单组件基于vue组件实现。

3.根据权利要求1所述的基于json schema的页面dsl的格式转换并生成前端源代码的方法，其特征在于，所述表单组件包括布局组件和数据组件。

4.根据权利要求3所述的基于json schema的页面dsl的格式转换并生成前端源代码的方法，其特征在于，所述布局组件用于编排其他组件的显示位置，包括栅格、表格、卡片、页签。

5.根据权利要求3所述的基于json schema的页面dsl的格式转换并生成前端源代码的方法，其特征在于，所述数据组件用于录入或展示数据，包括文本框、下拉列表、单选框、复选框、日期选择。

6.根据权利要求2所述的基于json schema的页面dsl的格式转换并生成前端源代码的方法，其特征在于，所述变量池包含外部传入的全局参数，并按层级存储包含从表单顶级组件到当前组件的相关配置。

7.根据权利要求1所述的基于json schema的页面dsl的格式转换并生成前端源代码的方法，其特征在于，所述s3中的表单uidl不包含子组件。

8.根据权利要求1所述的基于json schema的页面dsl的格式转换并生成前端源代码的方法，其特征在于，所述s8中，源代码包括ui组件的渲染逻辑、数据绑定、事件处理。

9.根据权利要求1所述的基于json schema的页面dsl的格式转换并生成前端源代码的方法，其特征在于，所述s8中，通过现有代码生成工具将uidl描述生成对应的前端页面源代码具体包括如下步骤：

10.根据权利要求9所述的基于json schema的页面dsl的格式转换并生成前端源代码的方法，其特征在于，所述语言框架的组件包括vue、react、html。

技术总结
本发明涉及一种基于JSON Schema的页面DSL的格式转换并生成前端源代码的方法，属于计算机软件开发技术领域，包括如下步骤：为每一种低代码表单组件建立UIDL模板，并定义模板参数；在表单生成过程中维护一个变量池；若子组件是数据组件，生成数据组件的UIDL描述，若子组件是布局组件，生成布局组件的UIDL描述，将专有DSL转换成UIDL标准格式，通过现有代码生成工具将UIDL描述生成对应的前端页面源代码。本发明提供的方法实现了将专有的基于JSON Schema的页面DSL转换为UIDL标准格式，并且能够生成与Vue或React框架兼容的前端源代码，可以提高开发效率：利用UIDL格式已有的工具、代码生成机制，以较低投入实现页面源代码生成，节省了开发时间。

技术研发人员：靳宇平
受保护的技术使用者：中电信数智科技有限公司
技术研发日：
技术公布日：2024/3/4