CN115495081A - 基于json数据的低代码页面组件生成和加载的方法及系统 - Google Patents

Abstract

本发明涉及信息处理技术领域，特别涉及基于JSON数据的低代码页面组件生成和加载的方法及系统；本发明通过针对低代码平台的前端设计器（HTML5页面设计器）实现组件的动态生成和加载而设计的，提供了组件的生命周期管理，包括组件的定义、管理、加载和生成，使用了结构定义、数据解析和组件编译,提供了组件可格式化管理的服务能力，避免前端设计器会随着组件的补充扩展变得越来越臃肿，从而造成不方便加载和不利于组件后期维护等问题，直接将远程JSON数据转换为设计器内部可识别的可视化组件，实现了组件的动态加载与生成。

Description

基于JSON数据的低代码页面组件生成和加载的方法及系统

技术领域

本发明涉及信息处理技术领域，特别涉及基于JSON数据的低代码页面组件生成和加载的方法及系统。

背景技术

随着软件技术的发展和信息化系统建设的深入，越来越多的应用在寻求一种快速创建系统程序的方法，低代码快速开发模式应运而生。

低代码平台需要整合环境、架构、技术，包括自动化构建、高可用的微服务和前端HTML5技术，其中设计一个可在浏览器端通过拖拉拽的方式实现页面的快速生成技术，是低代码平台的关键一环，这便要求开发一个具备丰富的页面组件、灵活的组件属性的HTML5页面设计器。

页面设计器的开发需要结合操作环境、业务应用、用户体验等各方面综合因素，同时满足页面加载的高性能、组件的可扩展性，即浏览器初始加载内容不宜过大，同时根据业务应用，用户可自定义组件的表现形式、运行逻辑和组合复用；页面设计器的应用是满足低代码平台可快速创建软件系统需表现的内容和操作逻辑，从基于桌面应用的窗口组件到目前浏览器端的HTML5元素组件，目的都是为了能够直接拖拽便能实现所见即所得的软件组成。

目前市场上的低代码前端设计器大多数都是根据自身业务特征提供了常用的页面组件，所封装组件的表现形式和可配置的属性逻辑基本是固定的，如基于手机端提供小程序的页面组件、基于办公OA提供流程表单的页面组件，页面元素的组成只能基于已有的组件构成，在应用的过程中需要将组件所有内容一次性加载，页面组件在后续的迭代中有完善和升级，新的组件属性配置和逻辑加载将难以适配原有应用，这便导致目前的很多低代码平台适用性不强、扩展性不高。

发明内容

本发明主要解决的技术问题是提供基于JSON数据的低代码页面组件生成和加载的方法，针对低代码平台的前端设计器（HTML5页面设计器）实现组件的动态生成和加载而设计的，提供了组件的生命周期管理，包括组件的定义、管理、加载和生成，使用了结构定义、数据解析和组件编译，从而满足低代码开发平台需具备高可用的特性；还提供了基于JSON数据的低代码页面组件生成和加载的系统。

为解决上述技术问题，本发明采用的一个技术方案是：提供基于JSON数据的低代码页面组件生成和加载的方法，其特征在于，包括如下步骤：

步骤S1、对JSON数据的结构组件进行数据定义；

步骤S2、对JSON数据的结构组件进行属性配置，配置为树形结构的属性；

步骤S3、发送组件数据请求，将JSON数据转换为组件数据对象；

步骤S4、将组件数据对象编译生成为可由JavaScript语言解析和编译的语法函数，从而生成可动态加载的自定义组件。

作为本发明的一种改进，在步骤S1内，定义JSON数据的结构组件的数据的属性。

作为本发明的进一步改进，在步骤S1内，配置JSON数据的结构组件对应的HTML5元素属性。

作为本发明的更进一步改进，在步骤S1内，定义JSON数据的结构组件在画板上的可操作属性。

作为本发明的更进一步改进，在步骤S1内，定义JSON数据的结构组件的允许嵌套的对象和不允许嵌套的对象。

作为本发明的更进一步改进，在步骤S2内，在JSON数据的结构组件内，下一层的下拉框组件依赖上一层的组件。

作为本发明的更进一步改进，在步骤S3内，向组件管理服务模块发送组件数据请求。

作为本发明的更进一步改进，在步骤S3内，将JSON数据转换为组件数据对象，生成特定组件的待生成数据对象。

作为本发明的更进一步改进，在步骤S4内，将待生成数据对象编译生成为JavaScript可解析的语法函数，从而生成可动态加载的自定义组件。

基于JSON数据的低代码页面组件生成和加载的系统，其中，包括：

定义模块，用于对JSON数据的结构组件进行数据定义；

属性配置模块，用于对JSON数据的结构组件进行属性配置；

浏览器模块，用于向组件管理服务发送组件数据请求；

组件管理服务模块，用于基于JSON格式的结构化管理；

组件解析器，用于将JSON结构数据转换为组件数据对象；

组件编译器，用于将组件数据对象编译生成为JavaScript可解析的语法函数并返回到浏览器模块执行生成可动态加载的自定义组件。

本发明的有益效果是：与现有技术相比，本发明通过针对低代码平台的前端设计器（HTML5页面设计器）实现组件的动态生成和加载而设计的，提供了组件的生命周期管理，包括组件的定义、管理、加载和生成，使用了结构定义、数据解析和组件编译, 提供了组件可格式化管理的服务能力，避免前端设计器会随着组件的补充扩展变得越来越臃肿，从而造成不方便加载和不利于组件后期维护等问题，直接将远程JSON数据转换为设计器内部可识别的可视化组件，实现了组件的动态加载与生成。

附图说明

图1为本发明的方法步骤框图；

图2为本发明的数据结构定义的数据结构类图；

图3为本发明的数据结构属性定义的部分结构图；

图4为本发明的具体逻辑图。

具体实施方式

为了使本发明的目的、技术方案及优点更加清楚明白，以下结合附图及实施例，对本发明进行进一步详细说明。应当理解，此处所描述的具体实施例仅仅用以解释本发明，并不用于限定本发明。

请参照图1至图4，本发明的基于JSON数据的低代码页面组件生成和加载的方法，包括如下步骤：

步骤S1、对JSON数据的结构组件进行数据定义；

步骤S2、对JSON数据的结构组件进行属性配置，配置为树形结构的属性；

步骤S3、发送组件数据请求，将JSON数据转换为组件数据对象；

步骤S4、将组件数据对象编译生成为可由JavaScript语言解析和编译的语法函数，从而生成可动态加载的自定义组件。

在本发明内，通过针对低代码平台的前端设计器（HTML5页面设计器）实现组件的动态生成和加载而设计的，提供了组件的生命周期管理，包括组件的定义、管理、加载和生成，使用了结构定义、数据解析和组件编译, 提供了组件可格式化管理的服务能力，避免前端设计器会随着组件的补充扩展变得越来越臃肿，从而造成不方便加载和不利于组件后期维护等问题，直接将远程JSON数据转换为设计器内部可识别的可视化组件，实现了组件的动态加载与生成。

本发明针对HTML5页面设计器提供一种可定义、可维护和可扩展的JSON数据结构，通过数据的多级继承方法实现页面组件的动态生成和加载，从而满足低代码开发平台需具备高可用的特性，也可以这样说，利用JavaScript/TypeScript语言对JSON数据进行解析和编译，使页面组件具备通用的渲染标准，达到页面组件在实际应用中具有不断完善和补充的能力。

TypeScript是JavaScript的一个超集，支持ECMAScript6标准，在JavaScript的基础上增加了静态类型检查，所以在定义组件的数据结构时，使用TypeScript是最合适的，如使用只读(使用readonly前缀)、可选(使用)、类型(限定Array/string/boolean等类型)等语法，将有助于快速将提供的JSON数据编译为JavaScript可识别和可执行的程序内容。

在步骤S1内，定义JSON数据的结构组件的数据的属性，再配置JSON数据的结构组件对应的HTML5元素属性，及定义JSON数据的结构组件在画板上的可操作属性，而且定义JSON数据的结构组件的允许嵌套的对象和不允许嵌套的对象；具体地讲，在数据结构定义内，JSON数据结构是每个组件采用的数据定义标准，制定该数据标准将有助于定义组件模板和存储组件应用属性，如图2所示，在数据结构类图内组件所需的关键信息和数据的继承、依赖关系，含义如下：

ExactType：额外定义属性，主要用于定义数据的绑定属性，如bindStyle(style的绑定值)，bindClass(class的绑定值)，dataset(数据源，可以制定绑定数据的方式，用于实现foreach循环)；

SettingVO：组件右键下拉菜单，用于定义组件在画板上可触发的右键下拉菜单事件，如text(显示文本)，value(对应之，触发动作时传递的参数)，type(事件类型)，childs(子菜单)；

TemplateVO：组件原生属性，用于配置组件对应的HTML5元素属性，如tag(对应的HTML标签或继承的DOM虚拟标签)，attrs(对应html标签的attribute属性)，style(标签的样式定义)，child(嵌套的子组件)；

TaplateVO：组件操作属性，定义组件在画板上的可操作属性，如component(应用的自定义组件名称)，isDataset(是否允许绑定数据)，noMove(是否允许移动)，noCopy(是否允许复制)，noSelect(是否允许选中)；

UITemplate：组件模版属性，设计器核心传递对象，如dProps(组件上下文传递属性)，dAttrs(组件的默认html属性)，dEvents(组件的事件定义)，dSlots(组件嵌入子组件的分发定义)；

CompProperty：组件属性字段，如type(值类型，取值string、number、boolean等)，text(显示文本)，min(最小值，当type类型为number时有效)，ismutil(是否允许多选)；

AllowVO：组件允许嵌套和不允许嵌套的对象，如allows(允许插入的组件列表)，noAll(不允许嵌套所有子组件)，noAllows(不允许插入的组件列表)；

CompEvent：组件操作事件，如params(参数字段)，premark(参数说明)，discript(描述文字)；

OptionVO：选项定义，主要用于存在多数据选项的组件，如text(显示文本)，value(值)，isgroup(是否分组)，children(如果分组，则包含的子选项)。

在步骤S2内，在JSON数据的结构组件内，下一层的下拉框组件依赖上一层的组件；具体地讲，组件的属性继承是使用树形结构定义，对组件的属性数据进行配置，配置的数据具备复制/扩展/覆盖的特点，属性定义是一个树形结构，如图3所示，主要逻辑为：

_global：全局定义节点，主要包括了通用的标签属性(dAttrs)，标签可操作属性(dDomProps)，通用事件(dEvents)；

_input_global/_text_global/_media_global：依赖于_global的分支属性，定义了了不同组件类型的通用属性；

select/input/checkbox：表单输入组件的相关属性，在父节点_input_global的基础上，定义了自身相关的操作属性；

checkbox-select/multi-select：依赖于select组件的自定义组件，如提供包含复选框或可多选的下拉框组件。

在本发明内，每层继承关系都只关系自身所需要的数据。

在步骤S3内，向组件管理服务模块发送组件数据请求，将JSON数据转换为组件数据对象，生成特定组件的待生成数据对象；在步骤S4内，将待生成数据对象编译生成为JavaScript可解析的语法函数，从而生成可动态加载的自定义组件；具体地讲，由于组件要实现按需加载和渲染，则需要建设独立的组件管理服务，为组件的JSON结构维护提供支撑，然后JSON数据是一份执行父节点，只包含自身特定属性的数据内容，所以需要提供组件解析器，实现将JSON结构数据转换为组件定义的标准对象结构，然后通过对该结构的解析生成可页面渲染的组件；

浏览器：即实现HTML5渲染的引擎，包括桌面端、移动端，在页面设计器需要使用扩展组件时，向组件管理服务发送组件数据请求；组件管理服务：为组件提供基于JSON格式的结构化管理，可基于现有组件的扩展/修改/维护等操作，同时对外提供请求服务；组件解析器：将JSON结构数据转换为组件数据对象，该对象通过多级继承方法实现属性数据的补充/覆盖，生成特定组件的待生成数据对象；组件编译器：由于浏览器端只能渲染标准的HTML5标签格式，所以基于虚拟DOM技术，将组件数据对象编译生成为JavaScript可解析的语法函数，并返回到浏览器执行；通过上述步骤，最终生成可动态加载的自定义组件。

本发明实现页面组件的动态生成和加载，在页面设计阶段能够根据JSON属性定义来动态生成可拖拽的组件元素，在软件应用阶段能够根据JSON数据内容按需加载组件的代码、生成组件的属性和绑定组件的数据。一方面，按需加载的方式减少了页面加载的内容提高了页面渲染效率，另一方面，通过组件的数据继承，为组件的封装和扩展、为低代码平台的落地应用提供了无限可能。

本发明还提供基于JSON数据的低代码页面组件生成和加载的系统，包括：

定义模块，用于对JSON数据的结构组件进行数据定义；

属性配置模块，用于对JSON数据的结构组件进行属性配置；

浏览器模块，用于向组件管理服务发送组件数据请求；

组件管理服务模块，用于基于JSON格式的结构化管理；

组件解析器，用于将JSON结构数据转换为组件数据对象；

组件编译器，用于将组件数据对象编译生成为JavaScript可解析的语法函数并返回到浏览器模块执行生成可动态加载的自定义组件。

本发明提供一个实施例，实施例中的页面的区域内容为设计器当前的所有可拖拽组件，这些组件都通过读取组件服务进行动态生成，在该区域可看到随着适配应用场景的不断补充和深化，该设计器的组件将成量级增加；页面的区域是设计器的画板，提供拖拽组件到指定位置并渲染生成，由于组件数据都是一种格式化的JSON结构数据，所以在该区域中将动态生成可视化组件，并渲染到指定位置，形成页面可操作的具体组件；该页面的区域是选择画板组件后对应该组件的可配置属性，也可以从该区域看到，组件的可配置项很多、很复杂，本发明所定义的多级数据继承结构便是简化组件的结构定义，使组件具备复用属性、覆盖属性、扩展属性的能力。

本发明是一款针对低代码平台的前端设计器，提供一种可定义、可维护和可扩展的JSON数据结构，通过数据的多级继承方法实现页面组件的动态生成和加载，本发明是一款专门针对低代码平台前端设计器而设计的，目的是使设计器的组件可扩展，使前端页面具备更多业务场景的设计能力，也是一款组件定义的标准化数据结构，一方面简化数据请求的数据大小提高传输效率，另一方面使用该数据结构可以使前端设计器具备组件的扩展能力；其通过JSON多级数据继承的方式，形成设计器组件的整体树形结构，方便数据的检索和嵌套；而且通过组件数据的异步请求形成组件数据获取、解析、编译到组件渲染生成的全过程。

本发明有以下几个优点：

（1）本发明根据定义的数据结构标准，提供了组件可格式化管理的服务能力，避免前端设计器会随着组件的补充扩展变得越来越臃肿，从而造成不方便加载和不利于组件后期维护等问题。

（2）本发明通过组件解析器和组件生成器，可直接将远程JSON结构数据转换为设计器内部可识别的可视化组件，实现了组件的动态加载与生成，区别于目前设计器组件一次加载和渲染的问题。

（3）本发明使组件的可定义、可维护、可扩展能力和低代码平台能够适应更多、更广阔的应用场景，不仅仅局限于某个行业应用、某类前端应用（如小程序端、pc端），从而解决目前大部分低代码平台实用性不强的问题。

以上所述仅为本发明的实施方式，并非因此限制本发明的专利范围，凡是利用本发明说明书及附图内容所作的等效结构或等效流程变换，或直接或间接运用在其他相关的技术领域，均同理包括在本发明的专利保护范围内。

Claims (10)

1.基于JSON数据的低代码页面组件生成和加载的方法，其特征在于，包括如下步骤：

步骤S1、对JSON数据的结构组件进行数据定义；

步骤S2、对JSON数据的结构组件进行属性配置，配置为树形结构的属性；

步骤S3、发送组件数据请求，将JSON数据转换为组件数据对象；

步骤S4、将组件数据对象编译生成为可由JavaScript语言解析和编译的语法函数，从而生成可动态加载的自定义组件。

2.根据权利要求1所述的基于JSON数据的低代码页面组件生成和加载的方法，其特征在于，在步骤S1内，定义JSON数据的结构组件的数据的属性。

3.根据权利要求2所述的基于JSON数据的低代码页面组件生成和加载的方法，其特征在于，在步骤S1内，配置JSON数据的结构组件对应的HTML5元素属性。

4.根据权利要求3所述的基于JSON数据的低代码页面组件生成和加载的方法，其特征在于，在步骤S1内，定义JSON数据的结构组件在画板上的可操作属性。

5.根据权利要求4所述的基于JSON数据的低代码页面组件生成和加载的方法，其特征在于，在步骤S1内，定义JSON数据的结构组件的允许嵌套的对象和不允许嵌套的对象。

6.根据权利要求5所述的基于JSON数据的低代码页面组件生成和加载的方法，其特征在于，在步骤S2内，在JSON数据的结构组件内，下一层的下拉框组件依赖上一层的组件。

7.根据权利要求6所述的基于JSON数据的低代码页面组件生成和加载的方法，其特征在于，在步骤S3内，向组件管理服务模块发送组件数据请求。

8.根据权利要求7所述的基于JSON数据的低代码页面组件生成和加载的方法，其特征在于，在步骤S3内，将JSON数据转换为组件数据对象，生成特定组件的待生成数据对象。

9.根据权利要求8所述的基于JSON数据的低代码页面组件生成和加载的方法，其特征在于，在步骤S4内，将待生成数据对象编译生成为JavaScript可解析的语法函数，从而生成可动态加载的自定义组件。

10.基于JSON数据的低代码页面组件生成和加载的系统，其特征在于，包括：

定义模块，用于对JSON数据的结构组件进行数据定义；

属性配置模块，用于对JSON数据的结构组件进行属性配置；

浏览器模块，用于向组件管理服务发送组件数据请求；

组件管理服务模块，用于基于JSON格式的结构化管理；

组件解析器，用于将JSON结构数据转换为组件数据对象；

组件编译器，用于将组件数据对象编译生成为JavaScript可解析的语法函数并返回到浏览器模块执行生成可动态加载的自定义组件。

Images