
优维低代码技术专栏,是一个全新的、技术为主的专栏,由优维技术委员会成员执笔,基于优维7年低代码技术研发及运维成果,主要介绍低代码相关的技术原理及架构逻辑,目的是给广大运维人提供一个技术交流与学习的平台。
优维低代码实践连载第13期
《对接数据》
▽
「对接数据」
1.1 定义数据源
-
Context(上下⽂数据)是⽤于在多个构件中交换数据的对象, 简单地理解就是数据源。
-
按来源划分,Context 可以分为 Value(静态常量)和 从Provider获取(从接⼝动态获取)两种。
-
我们可以为每⼀ 个⻚⾯设置 Context,所有构件都可以使⽤配置好的 Context 来作为数据源。
前面的篇章中我们也有提到用 Context 管理我们数据,这次我们详细的介绍下怎么用它去对接后台的数据。

我们的左侧的面板底部区域就是数据栏,右上会有添加数据的按钮

我们选择 Provider 或者 Contract 类型,这两个类型本质是一样的都是接口的提供者,其实都可以叫做 Provider ,只是他们实现的形式有所区别,Provider 是通过用构件的形式把接口请求进行了一层包装,而 Contract 是直接通过接口的契约定义直接请求。但 Provider 的调用基本上能够通和 Contract 等价替换,因为 Contract 类型和 Provider 的类型参数调用是一样,使用方式也一样,所以我们可以优选选择 Contract 类型。
1.2 接口文档
我们平台内置了 CMDB 、OSS 对象存储 、云服务等⼀系列开箱即⽤的接口。这么多接口我们怎么知道每一个接口的功能和相应的参数配置呢?同样的我们也提供了相应接口文档信息,对于 Contract 的类型的接口,我们可以直接通过 契约中心 查看每个接口的详情。



接口字段定义需要说明下,我们的字段定义是包含了 uri 中的参数的,如上图所列的路由 v2/object/:objectId/instance/_search中,`objectId` 这个参数也定义在请求体中的,对于我们 uri 中的参数都需要单独占位,剩余的接口 data 参数一起占位,上面接口请求的参数如下写法
- APP # uri 中的 objectId 参数单独占一位,并且按顺序排下来- query: # 剩余就是接口的 data 参数一起占一位 name: $eq: easyops fields: name: true id: true
按照契约的定义,我们就可以定义一个 appList的数据源,关于图中的其他参数说明可以查看 Context 的那一篇章。

同样的如果使用的是 provider 类型的接口,我们也提供了 provider 类型的接口文档,可以通过 provider 文档 查看具体的信息。使用 provider 方式和 Contract 是一致的只要修改名称就好了,我们把 appList改为 provider 类型的话如下所示


1.3 消费数据
定义好数据源之后我们就可以在构件中去消费这个数据,比如我们想在表格中去展示这些 app的相关信息,我们通过新增一个 brick-table 的构件,然后在它的 dataSource 的属性中去使用我们的 appList数据。

至此我们就完成了我们对接数据教程。
「对接第三方数据」
1.1 注册服务
对接第三方数据之前我们首先需要注册后台服务,可通过 API Gateway 微应用去注册,如下图所示


- 路由前缀说明
外部访问服务接口时,先将该前缀作为一级URI,然后再拼凑真实URI。如:服务路由前缀为cmdb-service,URI为/api/user,外部访问时完整URI为/cmdb-service/api/user
新建完成后就添加我们的后台节点,指定对应的IP+PORT,并可配置其转发权重,我们以 api.test.1888为例

上图所示,除了后端节点还有接口列表 显示我们已登记的接口,我们可以对其进行相关配置,也可以登记新的接口

完成后我们就可以发布我们的配置,至此我们就完成了服务的注册。

1.2 登记契约
注册好服务后,我们需要到 契约中心 去登记我们的契约,相关步骤如下

上图中的服务名字需要注意,填写的是我们第一步服务注册时的服务名



填写好相关信息后,我们也可以直接该契约进行调试(前提为存在有效的调试环境),调试完成后我们就可以直接提交保存,这样我们登记契约的流程就完成了。

有了对应的契约,我们就可以直接在编排中使用该契约获取数据了。我们可以通过使用 context 选择 contract 类型去选择我们刚刚创建的契约,也可以直接在契约详情界面复制 provider 的名称然后直接粘贴使用。


至此,我们就完成了整个对接第三方数据的流程。