CN117234470A - 一种基于低代码平台的跨端表单开发系统及方法 - Google Patents

Abstract

本发明公开一种基于低代码平台的跨端表单开发系统及方法，所述系统包括渲染模块、驱动模块和解释器模块；所述渲染模块用于提供跨端统一的表单封装组件，并用于在低代码平台的可视化开发模块中通过组件拖拽来设计跨端表单的前端页面；所述驱动模块用于提供跨端统一的表单业务逻辑方法，并用于在在代码平台的业务逻辑模块通过编码配置来实现跨端表单的业务逻辑；所述解释器模块用于在代码平台的部署发布模块将跨端表单的前端页面设计和业务逻辑解析为适用于相应终端的可执行文件。本发明将表单开发分为无业务逻辑的渲染模块和实现业务逻辑的驱动模块，通过结合低代码平台，只需完成单版本的低代码表单开发即可实现跨端适用，极大缩短了开发周期。

Description

一种基于低代码平台的跨端表单开发系统及方法

技术领域

本发明属于软件开发技术领域，尤其涉及一种基于低代码平台的跨端表单开发系统及方法。

背景技术

无论是在Web应用程序，还是本地应用程序中，数据表单无疑是一个重要的组成部分，它为用户提供可视化的交互界面，便于用户的输入，使得各种程序从用户那里收集数据成为可能，而用户的输入正是业务流程的关键所在，在实际情况中几乎所有软件系统的开发都需要创建一个或多个数据表单来展示数据并收集用户的输入。而在实际情况中，应用程序常常需要运行在各种不同类型的终端上，比如传统的PC机，以及各种移动终端等，这就需要对数据表单进行针对性的设计，以适应不同终端。

低代码平台是一种能够帮助开发者更快速、更简单地构建出各类应用程序的软件开发平台，它通过使用图形化界面和少量的编程语言代码，降低了开发门槛，提高了开发效率，是未来应用程序开发的一个重要趋势。目前低代码平台拥有多个端的产品，包括WEB端和各种APP端，对于低代码平台的表单应用，使用者通过表单设计页面设计好表单后会生成格式规范的JSON文件，WEB端和APP端的表单使用页面将会解析JSON文件并呈现设计好的效果。

然而，目前的低代码平台中，同一表单的WEB端和APP端由不同的代码实现，开发人员需要为同一个数据表单设计并开发多个对应不同类型终端的版本，导致大量的重复设计工作，开发周期长且多端统一规范更加困难。

发明内容

为解决上述技术问题，本发明提供一种基于低代码平台的跨端表单开发系统及方法，使得应用于多端的同一低代码表单设计能够用一套代码实现，具体的技术方案如下：

一种基于低代码平台的跨端表单开发系统，包括渲染模块、驱动模块和解释器模块；所述渲染模块用于提供跨端统一的表单封装组件，并用于在低代码平台的可视化开发模块中通过组件拖拽来设计跨端表单的前端页面；所述驱动模块用于提供跨端统一的表单业务逻辑方法，并用于在在代码平台的业务逻辑模块通过编码配置来实现跨端表单的业务逻辑；所述解释器模块用于在代码平台的部署发布模块根据选定的应用终端类型，将跨端表单的前端页面设计和业务逻辑解析为适用于相应终端的可执行文件。

进一步地，所述渲染模块包括组件库、组件容器和表单容器：

所述组件库中包含若干表单组件，所述表单组件由分别在WEB端和APP端中用于实现相同功能的表单组件封装成的具有相同API的表单组件，它不包含表单的配置，也可以在低代码平台的其它模块中使用；

所述组件容器是指用于容纳表单组件和/或其他组件容器的容器，通过将表单组件和/或其他组件容器放置在组件容器中进行布局管理；

所述表单容器是指用于承载表单的容器，用于组织和展示表单组件。

进一步地，所述驱动模块包括总线、抽象组件和插件：

所述总线是包含事件监听、执行方法和全局变量的对象，用于通过监听和处理表单组件的事件实现表单组件之间的信息传递和协调工作，同时，它还负责表单从创建到提交的一系列逻辑操作，它提供的方法还能共享出去，被低代码平台的其它模块使用；

所述抽象组件是表单组件创建后的实例，用于与组件容器进行交互，接收来自总线的事件并执行相应的处理方法；

所述插件是总线用于处理跨组件逻辑的一个或多个对象，这些对象包含所有对表单事件的监听。

进一步地，所述表单容器还用于读取表单配置项，并在表单创建时加载驱动模块，包括以下步骤：

生成表单实例；

读取表单配置项及当前数据；

加载表单总线，同时加载插件；

执行总线的钩子函数，监听表单事件并传入总线，使总线在获取表单事件后执行相应的方法；

当表单数据更新时调用插件中的相应方法；

当表单数据填写完成时调用总线中的相应方法。

进一步地，所述总线还用于实现事件的发布和订阅机制：不同表单组件通过总线注册对特定事件的监听，并在事件触发时接收到通知，从而实现组件之间的通信；所述总线还用于实现数据共享：不同表单组件通过总线提供的接口来获取和更新共享的数据，实现数据在表单组件之间的传递和同步。

进一步地，所述跨端统一的表单封装组件和跨端统一的表单业务逻辑方法均基于JavaScript编程语言实现。

进一步地，所述可执行文件为JSON文件。

一种跨端表单的开发方法，包括以下步骤：

确定表单需求：明确表单的功能和用户需求；

设计表单布局：设计表单的布局结构，包括表单页面的组件、位置和层次关系；

定义表单字段：在表单中添加需要的字段，并设置字段的属性、规则和验证方式；

组件选择和配置：根据表单需求，在代码平台的可视化开发模块中通过拖拽渲染模块中的表单容器、组件容器和组件库中的表单组件来完成跨端表单的前端页面；

数据模型定义：根据表单字段的结构和约束定义数据模型，包括字段的类型、长度、默认值以及字段之间的关联关系；

表单逻辑设置：根据表单需求，在代码平台的业务逻辑模块通过驱动模块中总线、抽象组件和插件的编码配置来实现跨端表单的业务逻辑；

编辑和调试：对表单进行编辑和调试，实时预览和调整表单的外观和行为；

发布和部署：完成表单开发后，选定应用终端的类型，在代码平台的部署发布模块应用解释器模块将跨端表单的前端页面设计和业务逻辑解析为适用于该应用终端的可执行文件。

本发明的有益效果：

本发明将表单开发分为无业务逻辑的渲染模块和实现业务逻辑的驱动模块，渲染模块用于提供封装成在WEB端和APP端具有相同API的跨端表单组件，这些API通过驱动模块提供的表单业务逻辑方法来进行调用，实现具体的表单的读取，表单组件的显示隐藏等操作，驱动模块在任何端的实现是完全相同的，由于渲染模块无逻辑但提供相同的API，而驱动模块在任何端完全一致，保证了不同端一模一样的呈现方式。本发明通过结合低代码平台，只需完成一个版本的低代码表单开发即可适用于不同类型的应用终端，极大地缩短了开发周期。它还为低代码平台的其它模块提供现成的组件和方法，其它地方需要类似表单中的组件或直接使用表单功能，可以非常方便引用即可，无需二次开发或者修改后使用。

附图说明

附图用来提供对本发明的进一步理解，并且构成说明书的一部分，与本发明的实施例一起用于解释本发明，并不构成对本发明的限制。

图1是本发明一实施例提供的跨端表单开发系统的框架示意图；

图2是本发明一实施例提供的跨端表单开发方法的流程示意图。

具体实施方式

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

低代码平台一般都包括可视化开发模块、业务逻辑模块和部署发布模块等基础支持模块，其中，可视化开发模块是低代码平台的核心模块之一，可以通过直观的组件拖拽和配置来创建应用程序的前端页面或用户交互界面，使开发者无需编写大量代码，只通过可视化操作即可完成应用程序的界面设计。业务逻辑模块则用于编写和管理应用程序的业务逻辑，开发者可以通过配置规则、条件和触发器来定义应用程序的行为和业务流程，实现数据的处理和逻辑的执行。部署发布模块用于将开发好的应用程序部署到不同的环境中，并进行发布和更新。开发者可以通过该模块选择目标平台、配置运行环境，并进行应用程序的打包、发布和版本管理。然而，为了实现WEB端和APP端同时有需求的表单业务，开发者需要分别开发对应不同终端类型的表单，导致开发成本高、周期长，且需要大量的人工干预才能保持多端逻辑一致。

为此本发明提供一种基于低代码平台的跨端表单开发系统，如图1所示，该跨端表单开发系统主要包括无业务逻辑的渲染模块和实现业务逻辑的驱动模块。低代码平台的WEB端和APP端均由JavaScript语言实现，本发明在WEB端和APP端提供相同的JavaScript的表单组件API（即跨端统一的表单封装组件），再通过一套跨端统一的表单业务逻辑方法调用这些API，并为通用代码提供一套相同的JavaScript执行的环境，即可实现表单跨端的目的。具体地，渲染模块具体又包括组件库、组件容器和表单容器，而驱动模块则又具体包括总线、抽象组件和插件。

（一）渲染模块

组件库：表单组件是构建表单界面的不包含业务逻辑的可复用组件，用于收集用户的数据并进行展示，如输入框、选择框、按钮、文件上传等。由于WEB端和APP端的UI并不相同，且WEB端和APP端均有自身的SDK包，为实现跨端统一，需要将这些SDK包中的表单组件封装成在WEB端和APP端具有相同API的表单组件，这些封装后的表单组件共同构成组件库，由于不包含表单配置，这些组件还可以被低代码平台的其它模块所使用。

组件容器：是指用于容纳表单组件和其他组件容器的容器，它提供了布局功能，能够控制表单组件的位置、大小和相对关系，可以定义表单的整体样式和结构。通过将表单组件放置在容器中，用户可以方便地进行布局管理。

表单容器：是指用于承载表单的容器，可以是页面、对话框、面板等。它通常包含一个或多个组件容器，用于组织和展示表单组件。同时提供通用API，负责读取表单的配置和字段以及其他的表单配置项，在表单创建时加载驱动模块，具体步骤如下：

1、生成表单实例；

2、读取表单配置项，以及当前表单的数据；

3、加载表单总线，同时加载插件；

4、执行总线的钩子函数，如表单的显示/隐藏，开始监听表单事件，并传入总线，总线获取事件后执行相关方法；

5、当表单数据更新时调用插件方法；

6、当表单数据填写完成时调用总线方法。

总线的钩子函数用于在特定的生命周期阶段执行相应的操作，例如：created（在总线实例创建完成之后调用的钩子函数，一般在这个阶段可以做一些与后端交互的操作，初始化总线所需的数据），mounted（在总线实例挂载完成后调用的钩子函数，可以在这个阶段进行一些与DOM元素相关的操作，例如获取DOM节点、绑定事件监听等），updated（在总线实例更新完成后调用的钩子函数，可以在这个阶段进行一些与更新后的数据相关的操作，例如重新渲染页面、更新DOM元素等）。通过在不同的生命阶段使用这些钩子函数，可以实现在特定时机执行相应的操作，实现总线的控制和协调作用。

（二）驱动模块

总线：是包含事件监听、执行方法和全局变量的JavaScript对象，负责整个表单容器的操作。当表单容器加载完总线后，总线内有一个专门存储事件的数组和方法，表单容器会在触发事件（或者表单执行到某个步骤）时调用总线关于该事件的执行方法，比如表单数据要传递给表单组件时，会调用对应的事件处理方法。总线负责表单从创建到提交的一系列逻辑操作，它提供的方法还能共享出去，被低代码平台的其它模块使用。

总线通过监听和处理表单组件的事件，实现组件之间的信息传递和协调工作。具体来说，总线可以进行以下操作：

1、控制表单的运行：总线作为表单的核心处理逻辑，当表单容器加载总线时，就开始执行总线的逻辑，包括读取、分析JSON，将JSON处理成组件可识别的格式，并对表单数据按处理好的格式进行转化，进行权限处理，控制是否显示组件等。

2、事件发布与订阅：总线可以实现事件的发布和订阅机制，不同组件可以通过总线注册对特定事件的监听，并在事件触发时接收到通知，从而实现组件之间的通信。例如，当某个组件的状态发生变化时，可以通过总线发布对应的事件，其他需要关注该变化的组件可以通过订阅该事件来获取最新状态。

3、数据共享：总线可以作为一个中央数据存储和管理的角色，用于共享数据。不同组件可以通过总线来获取和更新共享的数据，实现数据在组件之间的传递和同步。通过总线提供的接口，组件可以读取和写入数据，实现数据的共享和协调。

4、组件之间的调度和协调：总线可以在组件之间进行调度和协调，确保它们按照一定的逻辑和顺序进行工作。例如，当多个组件需要按照一定的流程依次执行时，总线可以负责控制组件的调度顺序，确保每个组件在适当的时机执行。

总的来说，总线在跨端表单开发中起到了组件之间的桥梁作用，通过事件的发布和订阅、数据的共享以及组件的调度和协调，实现了组件之间的通信和协作。总线使得不同组件可以解耦并独立开发，提高了开发效率和代码的可维护性。

抽象组件：是表单组件创建后的实例，表单组件创建时会同时生成一个抽象组件的实例，然后执行抽象组件的创建处理方法，此时可以进行事件监听。抽象组件可以与组件容器进行交互，接收来自总线的事件，并执行相应的处理方法，以便在数据变化时进行相应的处理。抽象组件和总线类似，总线是表单容器的核心逻辑处理对象，抽象组件则是具体组件容器的处理对象。一般来说，组件容器会暴露一些控制组件显示/隐藏等功能的API给抽象组件使用，以帮助实现特定的效果和功能。这些API使得抽象组件可以更加灵活地与组件容器进行交互和通信。

插件：插件是总线用于处理跨组件逻辑的一个或多个JavaScript对象，这些对象和总线一样包含所有对表单事件的监听。和总线不同的是，插件主要负责维护与自身逻辑相关的操作，总线则负责整个表单容器的操作。插件之间互不干扰，不会影响整个表单的操作。

在实现跨端表单的开发中，渲染模块和驱动模块的各组件和对象之间相互配合：表单组件被组件容器和表单容器包裹，组件容器提供布局功能，表单容器用于承载整个表单。总线负责处理跨组件逻辑，与抽象组件和插件进行通信和协调。抽象组件处理数据变化和事件监听，而插件维护自身相关的逻辑操作。

以下为具体实施时部分代码示例：

//引入驱动模块(form-driver)为驱动模块

import { createBus, plugins } from ‘form-driver’

//引入表单组件

import * as FormComponents from ‘fomr-components’;

//创建表单容器

function createFormDataEditor(props) {

// 表单定义

this.formConfig = props.formConfig

// 表单数据

this.formData = props.formData

// 创建bus

const bus = createBus(this)

// 读取插件

bus.load(plugins)

// bus控制是否读取表单组件

this.components = FormComponents.filter(bus.filter)

// 渲染(render由低代码平台提供)

render(this)

}

// 表单组件内容

// 读取抽象组件

import { createInputComponent } from ‘form-driver’;

export function createInputComponent (props) {

this.value = props.value

this.bus = props.bus

const core = createComponent(this)

// 将具体表单时间委托给抽象组件

this.on = core.on

// 控制是否显示隐藏

this.visible = core.visible

// 渲染

render(this)

}

// 总线

export const createBus(form) {

const plugins = []

// 钩子: 钩子是为不同地方调用bus特定功能而存储的API集合，比如实现显示隐藏，钩子会把所有的显示隐藏处理的方法通过register存储进来，待渲染或者处理事件的时候调用。

const hooks = {

// 显示/隐藏

visible_funs = [],

}

return {

register(name, fun) {

// 添加钩子

hooks[name].push(fun)

},

load(_plugins) {

plugins = _plugins

}

}

}

// 抽象组件

export const createInputComponent(comoent) {

const bus = component.bus

return {

on(event) {

// 监听事件

}

}

}

为实现跨端表单开发完成后能够应用于相应终端，本发明开发系统还包括解释器模块，用于配合低代码平台将跨端表单的前端页面设计和业务逻辑解析为适用于应用终端的可执行JSON文件。

基于上述跨端表单开发系统，本发明还提供一种跨端表单的开发方法，如图2所示，具体包括以下步骤：

确定表单需求：首先需要明确表单的功能和用户需求。

设计表单布局：根据需求设计表单的布局结构，包括表单页面的组件、位置和层次关系。

定义表单字段：在表单中添加需要的字段，并设置字段的属性、规则和验证方式。

组件选择和配置：根据表单需求，在代码平台的可视化开发模块中通过拖拽渲染模块中的表单容器、组件容器和组件库中的表单组件来完成跨端表单的前端页面设计；

数据模型定义：根据表单字段的结构和约束定义数据模型，包括字段的类型、长度、默认值以及字段之间的关联关系。可以设置组件的样式、交互行为和数据绑定。

表单逻辑设置：根据具体需求，在代码平台的业务逻辑模块通过驱动模块中总线、抽象组件和插件的编码配置来实现跨端表单的业务逻辑。

编辑和调试：在低代码平台上对表单进行编辑和调试，可以实时预览和调整表单的外观和行为。通过模拟不同平台和设备来测试表单的兼容性和适配性。

发布和部署：完成表单开发后，选定应用终端的类型，在代码平台的部署发布模块应用解释器模块将跨端表单的前端页面设计和业务逻辑解析为适用于该应用终端的可执行文件。

最后应说明的是：在本发明的思路下，以上实施例或者不同实施例中的技术特征之间也可以进行组合，步骤可以以任意顺序实现，并存在如上所述的本发明的不同方面的许多其它变化；尽管参照前述实施例对本发明进行了详细的说明，本领域的普通技术人员应当理解：其依然可以对前述各实施例所记载的技术方案进行修改，或者对其中部分技术特征进行等同替换；而这些修改或者替换，并不使相应技术方案的本质脱离本申请各实施例技术方案的范围。

Claims (8)

1.一种基于低代码平台的跨端表单开发系统，其特征在于，包括渲染模块、驱动模块和解释器模块；所述渲染模块用于提供跨端统一的表单封装组件，并用于在低代码平台的可视化开发模块中通过组件拖拽来设计跨端表单的前端页面；所述驱动模块用于提供跨端统一的表单业务逻辑方法，并用于在在代码平台的业务逻辑模块通过编码配置来实现跨端表单的业务逻辑；所述解释器模块用于在代码平台的部署发布模块根据选定的应用终端类型，将跨端表单的前端页面设计和业务逻辑解析为适用于相应终端的可执行文件。

2.如权利要求1所述的跨端表单开发系统，其特征在于，所述渲染模块包括组件库、组件容器和表单容器：

所述组件库中包含若干表单组件，所述表单组件由分别在WEB端和APP端中用于实现相同功能的表单组件封装成的具有相同API的表单组件；

所述组件容器是指用于容纳表单组件和/或其他组件容器的容器，通过将表单组件和/或其他组件容器放置在组件容器中进行布局管理；

所述表单容器是指用于承载表单的容器，用于组织和展示表单组件。

3.如权利要求1所述的跨端表单开发系统，其特征在于，所述驱动模块包括总线、抽象组件和插件：

所述总线是包含事件监听、执行方法和全局变量的对象，用于通过监听和处理表单组件的事件实现表单组件之间的信息传递和协调工作，同时，它还负责表单从创建到提交的一系列逻辑操作，它提供的方法还能共享出去，被低代码平台的其它模块使用；

所述抽象组件是表单组件创建后的实例，用于与组件容器进行交互，接收来自总线的事件并执行相应的处理方法；

所述插件是总线用于处理跨组件逻辑的一个或多个对象，这些对象包含所有对表单事件的监听。

4.如权利要求2所述的跨端表单开发系统，其特征在于，所述表单容器还用于读取表单配置项，并在表单创建时加载驱动模块，包括以下步骤：

生成表单实例；

读取表单配置项及当前数据；

加载表单总线，同时加载插件；

执行总线的钩子函数，监听表单事件并传入总线，使总线在获取表单事件后执行相应的方法；

当表单数据更新时调用插件中的相应方法；

当表单数据填写完成时调用总线中的相应方法。

5.如权利要求3所述的跨端表单开发系统，其特征在于，所述总线还用于实现事件的发布和订阅机制：不同表单组件通过总线注册对特定事件的监听，并在事件触发时接收到通知，从而实现组件之间的通信；所述总线还用于实现数据共享：不同表单组件通过总线提供的接口来获取和更新共享的数据，实现数据在表单组件之间的传递和同步。

6.如权利要求1所述的跨端表单开发系统，其特征在于，所述跨端统一的表单封装组件和跨端统一的表单业务逻辑方法均基于JavaScript编程语言实现。

7.如权利要求1所述的跨端表单开发系统，其特征在于，所述可执行文件为JSON文件。

8.一种跨端表单的开发方法，其特征在于，包括以下步骤：

确定表单需求：明确表单的功能和用户需求；

设计表单布局：设计表单的布局结构，包括表单页面的组件、位置和层次关系；

定义表单字段：在表单中添加需要的字段，并设置字段的属性、规则和验证方式；

组件选择和配置：根据表单需求，在代码平台的可视化开发模块中通过拖拽渲染模块中的表单容器、组件容器和组件库中的表单组件来完成跨端表单的前端页面；

数据模型定义：根据表单字段的结构和约束定义数据模型，包括字段的类型、长度、默认值以及字段之间的关联关系；

表单逻辑设置：根据表单需求，在代码平台的业务逻辑模块通过驱动模块中总线、抽象组件和插件的编码配置来实现跨端表单的业务逻辑；

编辑和调试：对表单进行编辑和调试，实时预览和调整表单的外观和行为；

发布和部署：完成表单开发后，选定应用终端的类型，在代码平台的部署发布模块应用解释器模块将跨端表单的前端页面设计和业务逻辑解析为适用于该应用终端的可执行文件。