CN116679920A - 一种基于低代码的可视化应用开发系统 - Google Patents

Abstract

本发明公开了一种基于低代码的可视化应用开发系统，包括：开发基座系统：其用于页面及组件的加载、解析、渲染和构建，实现页面及组件交互的事件控制以及组件之间的数据通信；标准组件库：给所述开发基座系统提供标准组件；自定义组件设计模块：给所述开发基座系统提供自定义组件；主题设计模块：给所述开发基座系统提供主题；所述开发基座系统，包括：组件解析器、组件渲染器、页面构建器、事件驱动控制：其用于实现页面及组件交互的事件控制和组件通信模块。本发明通过灵活的自定义组件可视化设计，可高度定制的主题可视化设计，结合标准的应用版本规范，通过图形化的用户界面，快速构建个性化的页面应用。

Description

一种基于低代码的可视化应用开发系统

技术领域

本发明涉及一种软件开发技术领域，尤其涉及一种基于低代码的可视化应用开发系统。

背景技术

随着信息技术的迅速发展，越来越多的企业在数字化转型的过程中，不断探索实现企业降本增效的方法，这就导致了企业大量的开发需求和有限的研发人员和成本之间的矛盾日益凸显。企业缓慢滞后的应用迭代速度使得企业无法及时响应市场和用户日新月异的需求变化，市场竞争力不足；同时，企业内各部门各行其是，相同软件或相同功能模块重复开发，存在多份，各团队信息闭塞，造成资源浪费，缺少业界标准软件生产实践，流程与规范也较难落地。

因此，有必要设计一种基于低代码的可视化应用开发系统，速响应业务需求变化，提高软件迭代速度。

发明内容

本发明要解决的技术问题是提供一种基于低代码的可视化应用开发系统，通过灵活的自定义组件可视化设计，可高度定制的主题可视化设计，结合标准的应用版本规范，通过图形化的用户界面，快速构建个性化的页面应用。

本发明为解决上述技术问题而采用的技术方案是提供一种基于低代码的可视化应用开发系统，包括：开发基座系统：其用于页面及组件的加载、解析、渲染和构建，实现页面及组件交互的事件控制以及组件之间的数据通信；标准组件库：其用于和所述开发基座系统交互，给所述开发基座系统提供标准组件；所述标准组件库中保存有标准组件；自定义组件设计模块：其用于和所述开发基座系统交互，给所述开发基座系统提供自定义组件；所述自定义组件设计模块可用于设计和保存自定义的组件；主题设计模块：其用于和所述开发基座系统交互，给所述开发基座系统提供主题；所述主题设计模块可用于设计并保存主题；

其中，所述开发基座系统，包括：组件解析器：其用于加载组件，所述组件解析器读取组件的配置信息，将组件的配置信息解析为可识别的组件数据结构并加载到所述开发基座系统；组件渲染器：其用于将组件的表现形式渲染到页面的应用编辑区或应用预览区中；页面构建器：其用于构建页面上各组件的最终显示和交互行为；事件驱动控制：其用于实现页面及组件交互的事件控制；组件通信模块：其用于实现组件之间的数据通信，所述组件通信模块通过数据中间层实现组件之间的数据通信。

进一步地，所述组件的控制事件包括：主动事件、被动事件和生命周期事件；所述主动事件是可配置动作处理的事件，所述被动事件是被动触发组件内部操作的事件，无需配置处理动作；所述生命周期事件包括组件加载完成和组件销毁。

进一步地，所述组件包括输入和输出，所述输入和输出由数据中间层进行配置，所述数据中间层给所述输入配置数据，所述组件对输入的数据进行解析和响应；所述数据中间层给所述输出配置函数，所述组件对输出的函数中的变量进行更新，并将更新的变量放入全局变量池进行管理。

进一步地，所述标准组件库包括：基础组件：包括形状、线条、图标、图片、文本、按钮、链接、表格、标签和树控件；所述表格、所述标签和所述树控件根据数据源配置展示相应的结构数据；布局组件：包括布局容器、表单容器、组件容器和选型卡，所述布局容器用于完成页面的显示布局配置；所述表单容器用于快速生成表单元素和进行表单操作；所述组件容器用于快速生成组件模板；所述选项卡用于多标签的快速布局；窗体组件：用于需要弹出层的场景，包括弹窗和对话框，所述弹窗用于构建弹出层显示内容，所述对话框用于弹出确认和操作提示；表单组件：包括输入框、文本框、数字框、下拉框、单选框、复选框、穿梭框、日期、日期范围、评分和颜色选择，所述表单组件通过所述表单容器生成复杂的表单；图表组件：包括折线图、柱状图、饼图、散点图、雷达图、漏斗图和仪表盘，用于交互和展示的报表场景。

进一步地，所述自定义组件设计模块，用于构建标准组件库之外的基于用户业务需求的组件，包括：组件模板：用于存储自定义的组件，可将编辑区中自定义的组件保存为组件模板，还可将在同一布局中的多个组件的组合保存为组件模板；自定义组件面板：用于进行自由布局，可将任意组件拖拽到该面板的任意位置进行布局，所述自定义组件面板可对内部组件的属性、样式和事件配置进行聚合，所述自定义组件面板可通过数据集和调用动作将数据和视图对应设置。

进一步地，所述主题设计模块，用于自定义应用的页面显示效果，包括：预设主题：用于存储预设的主题，通过调用预设主题快速完成应用的主题设置；自定义主题：使用自定义主题设计器模块，在设计面板中通过配置项模式或源码模式，对标准组件库中的各类组件进行主题定制化样式修改。

本发明对比现有技术有如下的有益效果：本发明提供的基于低代码的可视化应用开发系统，能有效的提升业务定制开发的效率，提供拖拽式应用交互构建，开箱即用的标准组件，内置事件驱动引擎，更契合用户交互习惯，内置数据通信，降低应用运行资源消耗，借助所见即所得的设计能力，应对灵活多变的应用场景需求，极大缩短业务定制周期，应用的质量也大大的得到了提升；开发的应用能快速地响应需求变化，结合高可定制化的自定义组件设计模块和主题设计模块，通过产品经理或者实施人员就能在可视化界面中就能完成需求变更处理，而不需要反馈给开发人员进行修改后再测试上线，减少了需求传递带来的信息误差和协调工作，需求响应速度得到了大大提升；实现IT资产高水平复用，开发者可以设计和发布各类组件模板、主题和应用，用户通过模板的导入导出可实现组件级、页面级或应用级的多维复用，用户仅需要对数据源进行调整就能实现功能迁移，这样即大大提升了复用性，也降低了功能迁移的复杂度。

附图说明

图1为本发明实施例中的基于低代码的可视化应用开发系统结构示意图；

图2为本发明实施例中的基于低代码的可视化应用开发系统应用流程图。

具体实施方式

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

图1为本发明实施例中基于低代码的可视化应用开发系统结构示意图。

请参见图1，本发明实施例的基于低代码的可视化应用开发系统，包括：

开发基座系统：其用于页面及组件的加载、解析、渲染和构建，实现页面及组件交互的事件控制以及组件之间的数据通信；

标准组件库：其用于和所述开发基座系统交互，给所述开发基座系统提供标准组件；所述标准组件库中保存有标准组件；

自定义组件设计模块：其用于和所述开发基座系统交互，给所述开发基座系统提供自定义组件；所述自定义组件设计模块可用于设计和保存自定义的组件；

主题设计模块：其用于和所述开发基座系统交互，给所述开发基座系统提供主题；所述主题设计模块可用于设计并保存主题；

其中，所述开发基座系统，包括：

组件解析器：其用于加载组件，所述组件解析器读取组件的配置信息，将组件的配置信息解析为可识别的组件数据结构并加载到所述开发基座系统；

组件渲染器：其用于将组件的表现形式渲染到页面的应用编辑区或应用预览区中；

页面构建器：其用于构建页面上各组件的最终显示和交互行为；

事件驱动控制：其用于实现页面及组件交互的事件控制；

组件通信模块：其用于实现组件之间的数据通信，所述组件通信模块通过数据中间层实现组件之间的数据通信。

具体地，所述组件的控制事件包括：主动事件、被动事件和生命周期事件；所述主动事件是可配置动作处理的事件，所述被动事件是被动触发组件内部操作的事件，无需配置处理动作；所述生命周期事件包括组件加载完成和组件销毁。

优选地，所述组件包括输入和输出，所述输入和输出由数据中间层进行配置，所述数据中间层给所述输入配置数据，所述组件对输入的数据进行解析和响应；所述数据中间层给所述输出配置函数，所述组件对输出的函数中的变量进行更新，并将更新的变量放入全局变量池进行管理。

具体地，标准组件库包括：

基础组件：包括形状、线条、图标、图片、文本、按钮、链接、表格、标签和树控件；所述表格、所述标签和所述树控件根据数据源配置展示相应的结构数据；

布局组件：包括布局容器、表单容器、组件容器和选型卡，所述布局容器用于完成页面的显示布局配置；所述表单容器用于快速生成表单元素和进行表单操作；所述组件容器用于快速生成组件模板；所述选项卡用于多标签的快速布局；

窗体组件：用于需要弹出层的场景，包括弹窗和对话框，所述弹窗用于构建弹出层显示内容，所述对话框用于弹出确认和操作提示；

表单组件：包括输入框、文本框、数字框、下拉框、单选框、复选框、穿梭框、日期、日期范围、评分和颜色选择，所述表单组件通过所述表单容器生成复杂的表单；

图表组件：包括折线图、柱状图、饼图、散点图、雷达图、漏斗图和仪表盘，用于交互和展示的报表场景。

具体地，自定义组件设计模块用于构建标准组件库之外的基于用户业务需求的组件，包括：

组件模板：用于存储自定义的组件，可将编辑区中自定义的组件保存为组件模板，还可将在同一布局中的多个组件的组合保存为组件模板；

自定义组件面板：用于进行自由布局，可将任意组件拖拽到该面板的任意位置进行布局，所述自定义组件面板可对内部组件的属性、样式和事件配置进行聚合，所述自定义组件面板可通过数据集和调用动作将数据和视图对应设置。

具体地，主题设计模块用于自定义应用的页面显示效果，包括：

预设主题：用于存储预设的主题，通过调用预设主题快速完成应用的主题设置；

自定义主题：使用自定义主题设计器模块，在设计面板中通过配置项模式或源码模式，对标准组件库中的各类组件进行主题定制化样式修改。

本发明实施例的基于低代码的可视化应用开发系统，通过开发基座系统加载标准组件库实现基础的低代码可视化开发能力，然后通过加载自定义组件设计模块和主题设计模块扩展和丰富了低代码的可视化开发功能，实现业务定制开发的完备能力。

请参见图2，本发明实施例的基于低代码的可视化应用开发系统，在具体实施时，包括如下步骤：

首先，加载组件配置信息，是将标准组件库、组件模板和自定义组件的配置信息从相应的存储位置加载到系统中；其中标准组件库需要根据组件版本生成最终的组件数据结构体，组件模板和自定义组件通过获取标准组件库的版本数据再生成相应的组件数据结构；最后，实例化组件结构体并出现在可视化应用设计器的UI组件中；

通过拖拽的方式将组件拖拽到应用设计画布内，此时，系统会对组件的布局、属性、样式、事件进行初始化后显示在应用设计画布上。当拖动组件在画布中的布局位置时，系统会将布局相关数据缓存起来。配置组件的属性后，系统会根据数据集配置或是组件属性配置分类将相关数据进行缓存。进行组件的样式主题设计，能实时在画布上修改组件的显示效果，系统最后会将组件的样式进行缓存。通过配置组件事件的动作处理行为，可以创建组件之间的关联关系再通过绑定全局变量，将事件内容缓存起来。

系统通过按照一定的缓存读取策略，按照上述组件的缓存内容进行分类，将缓存推送到远端系统进行数据持久化保存。

综上所述，本发明实施例的基于低代码的可视化应用开发系统，能有效的提升业务定制开发的效率，提供拖拽式应用交互构建，开箱即用的标准组件，内置事件驱动引擎，更契合用户交互习惯，内置数据通信，降低应用运行资源消耗，借助所见即所得的设计能力，应对灵活多变的应用场景需求，极大缩短业务定制周期，应用的质量也大大的得到了提升；开发的应用能快速地响应需求变化，结合高可定制化的自定义组件设计模块和主题设计模块，通过产品经理或者实施人员就能在可视化界面中就能完成需求变更处理，而不需要反馈给开发人员进行修改后再测试上线，减少了需求传递带来的信息误差和协调工作，需求响应速度得到了大大提升；实现IT资产高水平复用，开发者可以设计和发布各类组件模板、主题和应用，用户通过模板的导入导出可实现组件级、页面级或应用级的多维复用，用户仅需要对数据源进行调整就能实现功能迁移，这样即大大提升了复用性，也降低了功能迁移的复杂度。

虽然本发明已以较佳实施例揭示如上，然其并非用以限定本发明，任何本领域技术人员，在不脱离本发明的精神和范围内，当可作些许的修改和完善，因此本发明的保护范围当以权利要求书所界定的为准。

Claims (6)

1.一种基于低代码的可视化应用开发系统，其特征在于，包括：

开发基座系统：其用于页面及组件的加载、解析、渲染和构建，实现页面及组件交互的事件控制以及组件之间的数据通信；

标准组件库：其用于和所述开发基座系统交互，给所述开发基座系统提供标准组件；所述标准组件库中保存有标准组件；

自定义组件设计模块：其用于和所述开发基座系统交互，给所述开发基座系统提供自定义组件；所述自定义组件设计模块可用于设计和保存自定义的组件；

主题设计模块：其用于和所述开发基座系统交互，给所述开发基座系统提供主题；所述主题设计模块可用于设计并保存主题；

其中，所述开发基座系统，包括：

组件解析器：其用于加载组件，所述组件解析器读取组件的配置信息，将组件的配置信息解析为可识别的组件数据结构并加载到所述开发基座系统；

组件渲染器：其用于将组件的表现形式渲染到页面的应用编辑区或应用预览区中；

页面构建器：其用于构建页面上各组件的最终显示和交互行为；

事件驱动控制：其用于实现页面及组件交互的事件控制；

组件通信模块：其用于实现组件之间的数据通信，所述组件通信模块通过数据中间层实现组件之间的数据通信。

2.如权利要求1所述的基于低代码的可视化应用开发系统，其特征在于，所述组件的控制事件包括：主动事件、被动事件和生命周期事件；所述主动事件是可配置动作处理的事件，所述被动事件是被动触发组件内部操作的事件，无需配置处理动作；所述生命周期事件包括组件加载完成和组件销毁。

3.如权利要求1所述的基于低代码的可视化应用开发系统，其特征在于，所述组件包括输入和输出，所述输入和输出由数据中间层进行配置，所述数据中间层给所述输入配置数据，所述组件对输入的数据进行解析和响应；所述数据中间层给所述输出配置函数，所述组件对输出的函数中的变量进行更新，并将更新的变量放入全局变量池进行管理。

4.如权利要求1所述的基于低代码的可视化应用开发系统，其特征在于，所述标准组件库包括：

基础组件：包括形状、线条、图标、图片、文本、按钮、链接、表格、标签和树控件；所述表格、所述标签和所述树控件根据数据源配置展示相应的结构数据；

布局组件：包括布局容器、表单容器、组件容器和选型卡，所述布局容器用于完成页面的显示布局配置；所述表单容器用于快速生成表单元素和进行表单操作；所述组件容器用于快速生成组件模板；所述选项卡用于多标签的快速布局；

窗体组件：用于需要弹出层的场景，包括弹窗和对话框，所述弹窗用于构建弹出层显示内容，所述对话框用于弹出确认和操作提示；

表单组件：包括输入框、文本框、数字框、下拉框、单选框、复选框、穿梭框、日期、日期范围、评分和颜色选择，所述表单组件通过所述表单容器生成复杂的表单；

图表组件：包括折线图、柱状图、饼图、散点图、雷达图、漏斗图和仪表盘，用于交互和展示的报表场景。

5.如权利要求1所述的基于低代码的可视化应用开发系统，其特征在于，所述自定义组件设计模块，用于构建标准组件库之外的基于用户业务需求的组件，包括：

组件模板：用于存储自定义的组件，可将编辑区中自定义的组件保存为组件模板，还可将在同一布局中的多个组件的组合保存为组件模板；

自定义组件面板：用于进行自由布局，可将任意组件拖拽到该面板的任意位置进行布局，所述自定义组件面板可对内部组件的属性、样式和事件配置进行聚合，所述自定义组件面板可通过数据集和调用动作将数据和视图对应设置。

6.如权利要求1所述的基于低代码的可视化应用开发系统，其特征在于，所述主题设计模块，用于自定义应用的页面显示效果，包括：

预设主题：用于存储预设的主题，通过调用预设主题快速完成应用的主题设置；

自定义主题：使用自定义主题设计器模块，在设计面板中通过配置项模式或源码模式，对标准组件库中的各类组件进行主题定制化样式修改。