# 门户页面集成第三方数据分页展示

来源快照：`result_data_new_260518.json`

- 来源 ID：`1969811490748550639`
- 模块：低代码平台e-builder
- 目录：专题学习 - 场景专题 - 页面（仪表盘）专题
- space ID：`1157961794811633670`
- 原文链接：未提供
- 产品基线：未提供

## 正文

** ****1.****编写目的**

集成门户项目建设中需要动态分页获取第三方系统的企业通知等数据统一展示在我们的门户页面上，且不需要将数据存入到本系统的数据库中，本期为大家讲解如何实现门户页面集成第三方接口数据。

![](https://weapp.eteams.cn/papi/file/preview?fileId=1157694759631921196&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

![](https://site-admin.eteams.cn/js/ueditor/themes/default/images/spacer.gif)

* * *

**2.****思路分析**

ESB中心连接器功能统一维护第三方接口调用方式

![](https://weapp.eteams.cn/papi/file/preview?fileId=1157695309272973370&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

![](https://site-admin.eteams.cn/js/ueditor/themes/default/images/spacer.gif)

动作流可调用连接器维护好的接口，实现输入输出参数的内容映射

![](https://weapp.eteams.cn/papi/file/preview?fileId=1157695859204947980&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

![](https://site-admin.eteams.cn/js/ueditor/themes/default/images/spacer.gif)

门户页面搭建时数据展示组件的数据源可通过业务模块-动作流，设置为调用第三方数据查询接口的动作流，将接口响应结果输出展示在页面上

![](https://weapp.eteams.cn/papi/file/preview?fileId=1157696408960761898&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

![](https://site-admin.eteams.cn/js/ueditor/themes/default/images/spacer.gif)

* * *

**3.****操作步骤**

**3.1****集成前提：** 第三方数据查询接口支持分页检索和返回数据总数

**3.2ESB****中心维护第三方接口调用方式**

新建连接信息，连接地址维护到域名即可

![](https://weapp.eteams.cn/papi/file/preview?fileId=1157696954329333810&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

![](https://site-admin.eteams.cn/js/ueditor/themes/default/images/spacer.gif)

图1 新建连接器

参照第三方接口文档，维护接口名称、请求地址、请求方式、请求参数、响应参数和执行成功条件等

![](https://weapp.eteams.cn/papi/file/preview?fileId=1157697504007708712&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

![](https://site-admin.eteams.cn/js/ueditor/themes/default/images/spacer.gif)

图2 维护接口基本信息

![](https://weapp.eteams.cn/papi/file/preview?fileId=1157698053746745379&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

![](https://site-admin.eteams.cn/js/ueditor/themes/default/images/spacer.gif)

图3 维护请求参数

![](https://weapp.eteams.cn/papi/file/preview?fileId=1157698603652816907&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

![](https://site-admin.eteams.cn/js/ueditor/themes/default/images/spacer.gif)

图4 维护响应参数

![](https://weapp.eteams.cn/papi/file/preview?fileId=1157699148979445800&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

![](https://site-admin.eteams.cn/js/ueditor/themes/default/images/spacer.gif)

图5 维护接口调用成功的条件

**3.3****设计自定义触发动作流**

添加输入参数，接收页面数据展示组件的分页大小和当前查看页码

![](https://weapp.eteams.cn/papi/file/preview?fileId=1157699698777940086&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

![](https://site-admin.eteams.cn/js/ueditor/themes/default/images/spacer.gif)

图6 自定义动作流输入参数

添加执行组件调用维护好的连接器接口，映射输入参数

![](https://weapp.eteams.cn/papi/file/preview?fileId=1157700248577638413&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

![](https://site-admin.eteams.cn/js/ueditor/themes/default/images/spacer.gif)

图7 获取接口调用的其他请求参数

![](https://weapp.eteams.cn/papi/file/preview?fileId=1157700794002989095&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

![](https://site-admin.eteams.cn/js/ueditor/themes/default/images/spacer.gif)

图8 调用维护好的几口

  


![](https://weapp.eteams.cn/papi/file/preview?fileId=1157701343827853327&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

![](https://site-admin.eteams.cn/js/ueditor/themes/default/images/spacer.gif)

图9 从上文获取其他请求参数

![](https://weapp.eteams.cn/papi/file/preview?fileId=1157701893642387472&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

![](https://site-admin.eteams.cn/js/ueditor/themes/default/images/spacer.gif)

图10 从触发组件获取分页请求参数

添加输出组件将接口响应数据返回到门户页面上，其中**返回数据总数的参数名称只能是total，否则参数输出时页面组件无法计算分页数量，实现不了翻页时请求下一页数据的功能**

![](https://site-admin.eteams.cn/js/ueditor/themes/default/images/spacer.gif)

![](https://weapp.eteams.cn/papi/file/preview?fileId=1157702988647391233&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

图11 输出第三方数据查询总数

![](https://weapp.eteams.cn/papi/file/preview?fileId=1157702988647391249&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

![](https://site-admin.eteams.cn/js/ueditor/themes/default/images/spacer.gif)

图12 用明细表将接口响应数据输出

**3.4****设计门户页面**

添加数据展示类组件列表，数据源选择业务模块-动作流，上一步骤创建的自定义触发动作

![](https://weapp.eteams.cn/papi/file/preview?fileId=1157703538430312488&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

![](https://site-admin.eteams.cn/js/ueditor/themes/default/images/spacer.gif)

图13 门户页面的数据展示组件数据源关联接口调用动作流

从输出字段中选择显示字段

![](https://weapp.eteams.cn/papi/file/preview?fileId=1157704088245731330&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

![](https://site-admin.eteams.cn/js/ueditor/themes/default/images/spacer.gif)

图14 显示页面从输出参数中选择

筛选条件中设置输入参数是系统参数当前组件的分页大小和查看页码

![](https://weapp.eteams.cn/papi/file/preview?fileId=1157704633764413472&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

![](https://site-admin.eteams.cn/js/ueditor/themes/default/images/spacer.gif)

图15 数据过滤设置中进行输入参数映射
