CN113672213A - 一种基于构件的低代码编排方法及系统 - Google Patents

Abstract

本发明提供一种基于构件的低代码编排方法及系统，包括：中台服务组件、前端框架组件、可视化编排组件和契约；所述中台服务组件通过服务接口与前端框架组件和可视化编排组件连接；契约通过对接口进行定义，保证中台服务组件、前端框架组件、可视化编排组件的有效连接；由后端开发人员开发出后端基础能力组件，并按照契约的规定定义接口；构件开发人员进行构件的开发，以便可视化编排组件有构件可以使用；可视化编排单元，根据用户的需求，将构件开发单元开发的构件进行拼接，组合成满足要求的应用。本发明通过构件实现低代码可视化编排，使用门槛低，快速配置个性化IT管理工具，赋能人人成为运维开发者，提升开发效能，降低Bug率。

Description

一种基于构件的低代码编排方法及系统

技术领域

本发明涉及软件开发技术领域，具体涉及一种基于构件的低代码编排方法及系统。

背景技术

低代码通常是指APaaS产品，通过为开发者提供可视化的应用开发环境，降低或去除应用开发对原生代码编写的需求量，进而实现便捷构建应用程序的一种解决方案。因此，低代码平台也常被称为APaaS平台。

低代码大致可分为以下三类：

1)数据驱动类，快速表单生成器，以数据表的形式实现增删改功能，可满足简单的场景需求，如常见的一些用于个人信息收集的轻应用，无技术门槛，适合业务人员；

2)代码应用生成器，运用拖拽方式，开发人员打包即可用，但有一定的技术门槛，面向研发人员；

3)领域模型驱动类，包含了核心的业务组件，不是简单的支持增删改查的表格复用，实现业务组件级的复用，满足规模更大、需求更复杂和个性化的企业用户，无技术门槛，同时适用研发人员和业务人员。

现有的技术存在的问题；

1)商业产品难以满足企业个性化需求：用户需求激增，企业场景越来越个性化，标准化的商业产品难以满足企业的个性需求；

2)开发成本高昂：人力及管理成本越来越高，人员流动加快，各行各业都在追求轻资产和高效能；

3)技术门槛制约IT发展：各种技术层出不穷，技术人员学习成本高，见效慢，技术的高速发展给企业带来额外成本及发展瓶颈；

4)缺乏在具体领域的低代码系统平台，比如在运维领域。

发明内容

针对现有技术存在的问题，本发明提供一种基于构件的低代码编排方法及系统。

为实现上述目的，本发明的具体方案如下：

本发明提供一种基于构件的低代码编排系统，包括：

中台服务组件、前端框架组件、可视化编排组件和契约；

所述中台服务组件通过服务接口与前端框架组件和可视化编排组件连接；

契约通过对接口进行定义，保证中台服务组件、前端框架组件、可视化编排组件的有效连接。

优选地，所述中台服务组件遵循契约定义的API格式，通过服务接口对整个系统提供基础能力；

所述中台服务组件包括：配置管理存储单元、持续集成和持续交付单元、监控单元、工具流程单元、云服务单元、第三方平台单元。

优选地，所述前端框架组件，让用户不编写代码，仅使用静态配置，将应用所需要的路由、构件、Provider组合在一起，搭建起针对实际运维场景的应用，为运维平台提供了低代码开发的前端基础；

所述前端框架组件包括构件包和构件容器；

所述构件包包括：原子构件、业务构件、自定义模板和provider；

所述构件容器包括：构件工具套装(brick kit)和动态链接库(DLLs)；

所述原子构件：包括展示和接口方面的构件，不带业务属性，通过typescript基于现有开源lib库封装成一个一个构件，并输出开发文档；

所述业务构件：将原子构件包括provider组合起来，封装成常见可复用的页面，带业务属性，方便一些页面的快速搭建；

所述provider：是将sdk进一步封装，形成的跟普通构件一样操作的后台接口构件。

优选地，所述可视化编排组件，将静态配置(Storyboard)的配置界面化、产品化，降低低代码开发的入门门槛，并提供了一键构建、打包等便捷的工程手段，充分为企业的运维开发人员赋能，实现企业运维应用的快速整合。

优选地，所述契约即接口定义，前后端就API相关的内容，包括路径、参数、类型达成一致，并且让双方都能够实时的跟踪最新的API，然后再基于该契约直接生成前端的SDK和后端的框架代码及后端的SDK及API文档，这样前后端都强制遵循契约精神，保证各方统一。

本发明还提供一种基于构件的低代码编排方法包括如下步骤，

S1，后端开发人员开发出后端基础能力组件，并按照契约的规定定义接口；

S2，构件开发人员进行构件的开发，以便可视化编排组件有构件可以使用；

S3，可视化编排单元，根据用户的需求，将构件开发单元开发的构件进行拼接，组合成满足要求的应用。

优选地，步骤S3具体包括如下步骤，

S31，创建微应用项目；

S32，创建微应用的首页和其他页面；

S33，对接后台数据；

S34，建立事件与交互；

S35，建立页面跳转；

S36，获取输入和更新页面显示。

优选地，步骤S32具体包括如下步骤：

S321，进入路由视图，在左侧菜单栏找到微应用的路由视图入口，点击添加路由，并配置路由间的跳转关系；

S322，创建路由首页，点击创建按钮跳转到创建路由页面；设置路由别名为首页，并设置路径，点击保存；

S323，对首页进行编排，在可视化编辑器界面，为页面添加构件；

S324，按照上面的步骤创建其他页面；

其中，步骤S323的具体步骤为：

S3231，将构件拖拽到页面之中；

S3232，点击构件，在属性标签页里填入构件的属性，分别设置构件的主标题文字、结果状态、图标和颜色；

S3233，在设置标签设置构件的别名；

S3234，保存构件后，返回画布；

S3235，点击构建并推送按钮，完成修改。

优选地，步骤S33，对接后台数据，的具体步骤为：

S331，点击工具栏的数据视图，点击添加数据，添加一个上下文数据，设置所使用的Provider和参数；

S332，搜索并拖动表格构件到画布的插槽；

修改表格构件的属性，定义出表格的列，定义id、昵称、电话、email、创建时间、状态共6列，修改对应的属性及数据来源，构建并推送后，访问用户列表页的URL，对接后台接口后，获取用户数据并动态渲染在表格中进行展示。

优选地，步骤S34，建立事件与交互，的具体步骤为：

S341，添加搜索框构件，进行属性设置，实现搜索功能；

S342，修改表格构件id属性为user-table；

S343，为搜索框添加新的事件处理器，

S344，构建并推送后，刷新用户列表页，输入搜索关键字并回车，实现用户搜索功能；

步骤S35，建立页面跳转，具体步骤为：

S351，进入首页的可视化编辑器，添加一个通用按钮构件到画布中；

S352，点击按钮构建进行配置，设置按钮的显示名称为用户管理，并设置跳转到用户管理的路径；

S353，进入用户管理页面的可视化编辑器，再添加一个通用按钮构件到画布中；

S354，点击按钮构建进行配置，设置按钮的显示名称为返回，并设置跳转到需要返回页面的路径；

S355，其他页面参照首页进行构建并推送，点按钮可以实现页面的跳转；

步骤S36，获取输入和更新页面显示，的具体步骤为：

S361，在首页中添加一个表单构建，在表单里面再放一个普通输入框和一个表单提交按钮，在表单下面，再添加一个通用LABEL构件；

S362，配置普通输入框控件、表单提交按钮控件、通用LABEL控件，并修改相关控件的属性；

S363，测试预览效果，输入用户名，点提交按钮之后，看会否显示在下面的LABEL栏处。

采用本发明的技术方案，具有以下有益效果：

本发明提供一种基于构件的低代码编排方法及系统，包括：中台服务组件、前端框架组件、可视化编排组件和契约；所述中台服务组件通过服务接口与前端框架组件和可视化编排组件连接；契约通过对接口进行定义，保证中台服务组件、前端框架组件、可视化编排组件的有效连接；由后端开发人员开发出后端基础能力组件，并按照契约的规定定义接口；构件开发人员进行构件的开发，以便可视化编排组件有构件可以使用；可视化编排单元，根据用户的需求，将构件开发单元开发的构件进行拼接，组合成满足要求的应用。本发明通过构件实现低代码可视化编排，使用门槛低，快速配置个性化IT管理工具，赋能人人成为运维开发者，提升开发效能，降低Bug率。

附图说明

图1是本发明具体实施方式的低代码编排系统整体框架图；

图2是本发明具体实施方式的整体流程图；

图3是使用本发明创建应用的具体流程图。

具体实施方式

以下结合附图和具体实施例，对本发明进一步说明。

结合图1-图3对本发明进行具体说明

本发明提供一种基于构件的低代码编排方法及系统，包括：中台服务组件、前端框架组件、可视化编排组件和契约；所述中台服务组件通过服务接口与前端框架组件和可视化编排组件连接；契约通过对接口进行定义，保证中台服务组件、前端框架组件、可视化编排组件的有效连接。

中台服务组件包括：CMDB、CI/CD、监控、工具流程、云服务、第三方厂商等运维中台，遵循契约定义的API格式，将其各自能力通过服务接口的方式对外暴露出来，构成了运维平台的能力基础。

Brick Next：前端框架组件，作为新一代的前端框架，Brick Next允许用户不编写代码，仅使用静态配置(Storyboard)，将运维工具/应用所需要的路由、构件、Provider等组合在一起，快速搭建起针对实际运维场景的各类应用，为运维平台提供了低代码开发的前端基础。

契约：(即接口定义)是连接中台服务和前端页面的桥梁，基于契约可以直接生成前端的SDK(Provider)，使开发人员无需编写接口请求代码即可请求中台服务。前后端就API相关的内容，包括路径、参数、类型等达成一致，并且要让双方都能够实时的跟踪最新的API。然后再基于该契约直接生成前端的SDK(provider)和后端的框架代码及后端的SDK(go，python)及API文档。这样，前后台都强制遵循契约精神，保证各方统一。

Next Builder：可视化编排组件，通过可视化编排的方式，将Storyboard的配置界面化、产品化，大大降低了低代码开发的入门门槛，并提供了一键构建、打包等便捷的工程手段，充分为企业的运维开发人员赋能，实现企业运维应用的快速整合。

Storyboard：是微应用的核心配置，定义了微应用的用户界面，包括路由的组织、界面使用的构件及其属性和事件配置等。开发人员在Next Builder上的配置，最终都会形成一个Storyboard并存放在CMDB。页面加载时，浏览器会向后端请求读取微应用的Storyboard，然后对其进行解析，进而渲染出页面。

Brick Next主要组成包括：

·Brick Package(构件包)是包含了一组构件(Brick)的包，其中的每个构件都是具有特定业务属性的UI模块。

·Brick Container(构件容器)是整个系统的底层平台，它通过Brick Kit根据Micro Apps的配置信息，渲染对应的用户界面，并通过DLLs为Brick Package提供一些公共依赖。

形成最终的产品，

Micro App(微应用)指的是小产品包，它通过Storyboard定义该产品的用户界面，包括路由的组织、界面使用的构件及其属性和事件配置等。

如果把该系统和乐高作类比：

·Brick对应单个积木块儿

·Brick Package对应一小包某类积木块儿

·Micro App对应一个具体的积木拼搭产品

·Storyboard对应产品组装说明书

·Brick Kit构件工具套装则是根据说明书自动挑选积木并组装成最终产品的机器人。

我们将构件做了分层，分为：原子构件和业务构件(或称为业务模板)

原子构件：主要包括展示和接口方面的构件，不带业务属性。这里是构件开发者的阵地，构件开发者通过typescript基于现有开源lib库(如antd、echart等)封装成一个一个构件，并输出文档到构件开发者中心。

业务构件：将原子构件(包括provider)组合起来，封装成常见可复用的页面，带业务属性(比如告警列表)，方便一些页面的快速搭建。

原子构件即展示构件，它只管展示而不包含具体的数据请求，需要通过Provider(下面会讲到)等方式把数据进行输入。业务构件相比原子构件，增加了具体的数据请求，所以一般不需要Provider来请求数据，通常对应具体业务场景，具有业务属性。例如，表格是原子构件，CMDB实例列表则是在表格基础上对接了CMDB接口，是业务构件。

providers：在常见的开发模式下，我们会将后台接口封装成sdk或lib，然后在js里面调用他。在Brick Next框架中，我们做了进一步封装，将sdk进一步封装成Provider构件，这样对于后台接口的操作就跟普通构件一样了。因此在页面中Provider也是以html元素的形式存在。

广义来说，Provider、Custom Template都是构件，它们最终都会形成构件包进行部署。

API文档：前后端的合作，API文档就会作为两方沟通的桥梁而存在。API文档是后端对所提供服务的说明，前端开发者通常作为API文档的消费者，下面我就从一个消费者的角度谈谈什么样的API文档是好用的。简单来说它就是对所有API的调用和其中涉及到的参数的清晰的解释说明。说具体一点，就是每个API可以做什么，以及对API中每个参数的解释，包括它们的类型、格式、可能的取值、验证规则、是否必需等。

下面我们使用上述系统具体搭建一个微应用：

一、WEB应用的构成

一个WEB应用，一般由多个可以互联跳转的页面构成。

每个页面又由可见的“url地址”，“页面布局”，“页面构件”，“数据”，和不可见的“交互”及“事件”等内容构成。

二、第一个微应用

1.创建微应用项目

进入Next Builder首页，点击右上角的新建按钮，填写微应用的基本信息。

点击保存，创建成功。

2.创建微应用的首页

新建了微应用工程后，需要开发它的页面，我们先从首页开始。

微应用的页面，又叫做路由，也即我们常说的URL，每个URL对应微应用中的一个页面。

(1)进入路由视图

在左侧菜单栏找到User Flow，它是微应用的路由视图入口，在此可以添加路由，配置路由间的跳转关系。

通过User Flow，编排者能够以拓扑视图的方式直观地了解这个应用的规模、页面间的跳转情况，也能更好地去设计和思考产品流程。

(2)创建路由(首页)

点击右上角[Create Route]按钮跳转到创建路由页面。

设置路由的Alias(别名)为首页，Path留空(仅保留${APP.homepage}，表示微应用的首页，通常是http://{{你的服务器IP}}/next/{{微应用ID}})。

点击保存，这样我们就把微应用的首页新建好了。

(3)对首页进行编排

成功新建了首页路由，会自动跳转到它的可视化编辑器界面。

可视化编辑器拥有非常友好的拖拽交互，它可以帮助我们快速搭建出符合业务需求的应用页面，是微应用编排的“主战场”。

我们可以为首页添加一个构件，用于欢迎用户来到我们的第一个微应用。

构件(brick)是Next Builder中的基本页面元素，比如一个表格、输入框、描述文字、折线图等等。

把微应用比作一个乐高模型的话，那构件就是各种各样的零部件，编排者可以随心所欲地搭建出汽车、洋房、钢铁侠等各种东西。

基于DevOps实践经验，Next Builder总结提炼了一个丰富而强大的构件库，极大地提高了编排者的开发效率。

点击可视化编辑器的右上角的“+”号，找到“结果提示”构件，并拖拽到页面之中。

点击画布中的构件，在Properties标签页里填入构件的customTitle和status属性，分别设置构件的主标题文字和结果状态，决定图标和颜色。(更多的属性说明，可以在Documents标签页中查阅构件的示例文档)

在Settings标签设置构件的别名，方便识别。

保存构件后，返回画布。

再点击顶部右侧工具栏的“构建并推送”按钮(或者使用CTRL+B快捷键)，就成功完成了一次微应用的修改。

再点击顶部右侧工具栏的“预览”，即可在新开的浏览器窗口里预览当前的页面效果。

我们的第一个微应用上线了。

三、对接后台数据

在上一篇文档，我们新建了第一个微应用，实现了一个纯静态的首页。

下面，我们尝试对接后台接口，动态获取平台上所有用户的基本信息，并在表格中展示。

准备工作：参考首页，创建一个新页面，别名为：用户列表，路径为${APP.homepage}/users。

1.配置Context获取后台数据

Context是用于在多个构件中交换数据的对象，简单理解就是数据源。

按来源划分，Context可以分为Value(静态常量)和从Provider获取(从接口动态获取)两种，这个例子里我们将使用第二种。

我们可以为每一个页面设置Context，所有构件都可以使用配置好的Context来作为数据源。

点击左侧工具栏的数据视图，点击添加数据。

添加一个叫userList的上下文数据，设置所使用的Provider和参数Args.

Provider顾名思义，即数据的提供者，是专门承载对接后台接口能力的一种特殊构件。在常见的开发模式下，我们会将后台接口封装成sdk或lib，而Provider就是NextBuilder基于后台接口封装的。

平台内置了CMDB、OSS对象存储、云服务等一系列开箱即用的Provider，

除了已有的Provider，我们还可以自由地对接第三方数据。

2.使用Context渲染构件

搜索并拖动表格构件brick-table到画布的content插槽。

修改表格构件的columns属性，定义出表格的列。这里我们需要id、昵称、电话、email、创建时间、状态6列。

修改表格构件的dataSource属性，使用刚才声明的userList作为数据源。

<％CTX.userList％>

修改表格构件的shouldUpdateUrlParams属性为false，表示翻页时不更新URL参数，采用前端分页/排序。

<％CTX.userList％>是Next Builder使用的语法，称为Evaluate Placeholders求值占位符，也称为表达式。

求值占位符提供了一种便利的方式，使得编排者可以灵活地在路由、构件的配置中使用Context数据、URL参数、构件事件、应用配置等信息。

构建并推送后，访问用户列表页的URL，例如http://{{服务器IP}}/next/your-first-app/users

顺利对接后台接口，获取用户数据并动态渲染在表格中进行展示。

四、事件与交互

前面，我们成功对接了后台接口，获取平台的用户数据并渲染到表格当中。

下面，我们尝试通过事件来实现页面交互。

思考这么一个业务需求：当平台用户数比较多的时候，通过上下翻页来查找用户是一件很耗时的事情。希望可以通过用户的id快速检索出用户信息。可以简单画出业务流程图：

开始→用户在搜索框中键入关键字→根据关键字向后台发送请求→重新渲染页面→结束

因此，在用户输入搜索关键字后，需要通知并触发后台请求，请求到新数据后重新渲染表格。这样的页面及页面交互，我们可以借助构件的事件来实现。

1、添加输入框

添加搜索框构件，设置placeholder为搜索用户ID，设置shouldUpdateUrlParams为false。

实现搜索功能

事件是一种触发&响应机制。用户的交互会触发构件的特定事件，例如每次在搜索框输入一个字符，都会触发query.change事件，按下搜索或者键盘回车，会触发filter.update。每个构件拥有的事件是不一样的，根据构件自身特点来决定。

在了解了事件的机制后，我们可以思考一下如何实现开头的业务流程。

首先，修改表格构件id属性为user-table。

构件的id是它在页面中的唯一标识，可以通过#your-brick-id的方式指定构件。id命名遵循kebab-case(短横线)命名法则。

接着，为搜索框添加新的事件处理器：

构建并推送后，刷新用户列表页，输入搜索关键字并回车，观察表格展示的变化。

表格中的数据已经根据用户搜索产生了变化，成功实现了用户搜索功能。

五、页面跳转

我们现有已经创建了两个页面。

一个是首页“/192.168.100.140/next/ray-test/”；

一个是用户列表页”/192.168.100.140/ray-test/users/”。

目前这两个页面都需要通过独立的URL才能够访问，我们希望在页面中增加跳转的按钮，以便可以在两个页面中来回的切换。

进入首页的可视化编辑器，添加一个“通用按钮(general-button)”构件到画布中。

点击按钮构建进行配置。设置buttonName和buttonUrl两个属性。第一个属性为按钮的显示名称“用户管理”。第二个为按钮点击之后需要跳转的目的路径“/ray-test/users/”。

进入用户管理页面的可视化编辑器，同样添加一个“通用按钮(general-button)”构件到画布中。

点击按钮构建进行配置。设置buttonName和buttonUrl两个属性。第一个属性为按钮的显示名称“返回”。第二个为按钮点击之后需要跳转的目的路径“/ray-test/”。

构建并推送后，现在两个页面中都增加了按钮，点按钮可以实现两个页面中的跳转。

六、获取输入和更新页面显示

这一小节，我们来尝试一下创建输入表单，并获取用户输入的信息以便更新页面。

在首页中添加以下构件：

添加一个表单构建：“普通表单”forms.general-form。在表单里面再放一个“普通输入框”forms.general-input，和一个“表单提交按钮”forms.general-buttons。

在表单下面，再添加一个“通用LABEL”构件。

添加完后布局如下：

配置“普通输入框”控件，修改以下两个属性：name、label

配置“表单提交按钮”控件，修改以下4个属性：submit text、show cancelbutton、cancel text、name

配置“通用LABEL”控件，修改以下2个属性：ID、text

forms.general-buttons点击后会自动触发general-form的validate方法，从而会触发general-form的validate.success(校验成功)或validate.success(校验失败)事件，并且在这个事件的detail会吐出其表单内的所有表单项数据出来。从而我们在

general-form订阅该事件处理函数即可获的form表单的所有数据。

配置“普通表单”控件的事件处理内容。

预览效果，

输入的用户名，点“提交”按钮之后，会显示在下面的LABEL栏处。

七、事件处理的语法说明

每一个页面的构件都可以响应事件并进行页面处理。不同的构件支持不同的事件，具体支持的事件和触发的时机可以在构件的“Document”说明页中进行查询。

事件支持3种不同的处理逻辑：

A.执行内置动作(action)，例如console.log等；

B.调用接口(useProvider)来获取数据；

C.指定构件(target)进行属性更新或触发事件执行等。

在一个事件处理里面可以同时执行3种不同的处理，也可以同一种处理逻辑执行多次。

八、Provider配置的语法说明

页面需要通过接口动态的获取数据时，就需要配置“Context”，并添加provider的配置。

Context上下文的调用格式为<％CRX.xxxxxxx％>。其中XXXXXX替换为之前配置的Name值：cmdbHostList。

九、数据query的语法说明

当我们在配置provider和事件的处理逻辑时，如果需要对获取到的数据进行逻辑过滤，就需要使用到query语法。在query语法中我们常用的检索逻辑有：$eq$ne$like，在like里用％表示模糊匹配。另外还有$and和$or表示与或。

具体的query应用例子：

1、查询name属性中值为myName的记录：

2、查询属性值中包含name关键值的记录(模糊匹配)：

前后都有％，会模糊匹配这些：AAAnameBBB，nameBBB，AAAname。还可以使用关键字$nlike是$like取反。

3、查询值等于myName或不等于myName的记录(相等$eq/不相等/$ne)

4、查询name等于myName并且title为空(与$and/或$or)

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

Claims (10)

1.一种基于构件的低代码编排系统，其特征在于包括：

中台服务组件、前端框架组件、可视化编排组件和契约；

所述中台服务组件通过服务接口与前端框架组件和可视化编排组件连接；

契约通过对接口进行定义，保证中台服务组件、前端框架组件、可视化编排组件的有效连接。

2.根据权利要求1所述的基于构件的低代码编排系统，其特征在于，

所述中台服务组件遵循契约定义的API格式，通过服务接口对整个系统提供基础能力；

所述中台服务组件包括：配置管理存储单元、持续集成和持续交付单元、监控单元、工具流程单元、云服务单元、第三方平台单元。

3.根据权利要求1所述的基于构件的低代码编排系统，其特征在于，

所述前端框架组件，让用户不编写代码，仅使用静态配置，将应用所需要的路由、构件、Provider组合在一起，搭建起针对实际运维场景的应用，为运维平台提供了低代码开发的前端基础；

所述前端框架组件包括构件包和构件容器；

所述构件包包括：原子构件、业务构件、自定义模板和provider；

所述构件容器包括：构件工具套装和动态链接库；

所述原子构件：包括展示和接口方面的构件，不带业务属性，通过typescript基于现有开源lib库封装成一个一个构件，并输出开发文档；

所述业务构件：将原子构件包括provider组合起来，封装成常见可复用的页面，带业务属性，方便一些页面的快速搭建；

所述provider：是将sdk进一步封装，形成的跟普通构件一样操作的后台接口构件。

4.根据权利要求1所述的基于构件的低代码编排系统，其特征在于，

所述可视化编排组件，将静态配置Storyboard的配置界面化、产品化，降低低代码开发的入门门槛，并提供了一键构建、打包的工程手段，实现企业运维应用的快速整合。

5.根据权利要求1所述的基于构件的低代码编排系统，其特征在于，

所述契约即接口定义，前后端就API相关的内容，包括路径、参数、类型达成一致，并且让双方都能够实时的跟踪最新的API，然后再基于该契约直接生成前端的SDK和后端的框架代码及后端的SDK及API文档，这样前后端都强制遵循契约精神，保证各方统一。

6.一种基于构件的低代码编排方法，其特征在于，包括如下步骤，

S1，后端开发人员开发出后端基础能力组件，并按照契约的规定定义接口；

S2，构件开发人员进行构件的开发，以便可视化编排组件有构件可以使用；

S3，可视化编排单元，根据用户的需求，将构件开发单元开发的构件进行拼接，组合成满足要求的应用。

7.根据权利要求6所述的基于构件的低代码编排方法，其特征在于，

步骤S3具体包括如下步骤，

S31，创建微应用项目；

S32，创建微应用的首页和其他页面；

S33，对接后台数据；

S34，建立事件与交互；

S35，建立页面跳转；

S36，获取输入和更新页面显示。

8.根据权利要求7所述的基于构件的低代码编排方法，其特征在于，

步骤S32具体包括如下步骤：

S321，进入路由视图，在左侧菜单栏找到微应用的路由视图入口，点击添加路由，并配置路由间的跳转关系；

S322，创建路由首页，点击创建按钮跳转到创建路由页面；设置路由别名为首页，并设置路径，点击保存；

S323，对首页进行编排，在可视化编辑器界面，为页面添加构件；

S324，按照上面的步骤创建其他页面；

其中，步骤S323的具体步骤为：

S3231，将构件拖拽到页面之中；

S3232，点击构件，在属性标签页里填入构件的属性，分别设置构件的主标题文字、结果状态、图标和颜色；

S3233，在设置标签设置构件的别名；

S3234，保存构件后，返回画布；

S3235，点击构建并推送按钮，完成修改。

9.根据权利要求7所述的基于构件的低代码编排方法，其特征在于，

步骤S33，对接后台数据，的具体步骤为：

S331，点击工具栏的数据视图，点击添加数据，添加一个上下文数据，设置所使用的Provider和参数；

S332，搜索并拖动表格构件到画布的插槽；

修改表格构件的属性，定义出表格的列，定义id、昵称、电话、email、创建时间、状态共6列，修改对应的属性及数据来源，构建并推送后，访问用户列表页的URL，

对接后台接口后，获取用户数据并动态渲染在表格中进行展示。

10.根据权利要求7所述的基于构件的低代码编排方法，其特征在于，

步骤S34，建立事件与交互，具体步骤为：

S341，添加搜索框构件，进行属性设置，实现搜索功能；

S342，修改表格构件id属性为user-table；

S343，为搜索框添加新的事件处理器，

S344，构建并推送后，刷新用户列表页，输入搜索关键字并回车，实现用户搜索功能；

步骤S35，建立页面跳转，具体步骤为：

S351，进入首页的可视化编辑器，添加一个通用按钮构件到画布中；

S352，点击按钮构建进行配置，设置按钮的显示名称为用户管理，并设置跳转到用户管理的路径；

S353，进入用户管理页面的可视化编辑器，再添加一个通用按钮构件到画布中；

S354，点击按钮构建进行配置，设置按钮的显示名称为返回，并设置跳转到需要返回页面的路径；

S355，其他页面参照首页进行构建并推送，点按钮可以实现页面的跳转；

步骤S36，获取输入和更新页面显示，的具体步骤为：

S361，在首页中添加一个表单构建，在表单里面再放一个普通输入框和一个表单提交按钮，在表单下面，再添加一个通用LABEL构件；

S362，配置普通输入框控件、表单提交按钮控件、通用LABEL控件，并修改相关控件的属性；

S363，测试预览效果，输入用户名，点提交按钮之后，看会否显示在下面的LABEL栏处。

Images