服务数据集

服务数据集支持将服务请求返回的 JSON 数组,映射为数据模型。支持的请求包括应用内的服务接口,以及 OpenAPI 接口等。

同时,服务数据集还支持通过 JsonPath 配合正则表达式,从请求的 header 或 body 数据中获取返回的记录数、JSON 数组和错误信息。

区别于其他类型的数据集,服务数据集并不是从数据库的角度来获取数据,而是从 API 请求来获取。对于返回列表数据的 API 接口来说,可以通过服务数据集更方便地在前端展示和使用。

添加服务数据集

在动态数据集的右侧,点击+按钮,可以创建新的服务数据集:

1705921166008

1705921166008

保存路径

  • 数据集的模型描述文件

xxx.data.m 保存在当前模块的根目录下,比如 main 模块的根目录下:

image-20240123113830801

在 .data.m 文件中,会使用 <class type="sql" 来标识 SQL 数据集:

image-20240123113811207

同时在文件中,也能找到之前定义的内容:

image-20240123113947013

使用服务

选择服务

在服务数据集中,点击“选择 API-服务模型”,弹出选择服务窗口

1721986400509

这里列出了应用内所有服务,以及配置好的租户内其它应用的服务

1721986478141

设置查询参数

选择一个服务后,服务的参数会自动作为数据集参数,注意其中的“是否输入”属性,是否输入为是的参数,可以从前端赋值。

特别说明

  • 服务中通常使用 page 和 size 这两个参数获取分页数据
  • DBrest 使用 limit 和 offset 请求分页数据
  • 因此 page 和 size 这两个参数由系统接管,自动实现从 limit 和 offset 到 page 和 size 的转换,所以是否输入为否

1721986521788

添加数据列

如果服务返回数据集的集合,如下图所示,返回分页数据返回“订单主表”集合

1721986555918

在结构中,点击“自动同步”按钮,可将服务返回数据集的结构作为服务数据集的结构

1721986583760

添加服务数据组件

在前端页面上,可以看到后端定义的服务数据集,添加到页面上使用

1721986624952

给参数赋值

如果服务数据集有输入参数,在服务数据组件上,会列出参数,支持给参数赋值

1721986678437

查询数据

调用数据组件的刷新方法 refreshData 查询数据,limit 和 offset 自动转换为 page 和 size,其它参数正常传递

1721986738573

使用 OpenAPI

设置服务调用

调用 OpenAPI 的接口

选项 选项值
服务名 不设置,留空
请求路径 接口的 Path,相对路径,从 api.json 里边查找,比如 /pet/findByStatus
HTTP方法 GET / POST 等
API文档 http全路径,比如 https://petstore3.swagger.io/api/v3/openapi.json

服务调用的配置,如下图所示

image-20240123095810715

如果此时该 url 需要配置请求参数,但还没有添加参数,保存后点击数据会报错。因此需要根据接口的要求,添加相应的参数。

添加查询参数

以 /pet/findByStatus 接口为例,接口要求传入 status 参数,并且值必须是 available/pending/sold 中的一个。

image-20240123112111255

输入参数名称,参数分类选择查询参数,输入勾选,可以填入默认值。

1705921166008

默认值填入需点击右侧...,进入对话框后输入字符串。需要注意的是,在对话框输入的字符串需要使用 '' 引起来。这样输入后,再后边列表会显示 expr:'available' 的形式。

image-20240123114249723

配置服务返回

除了获取数据列表,如果还需要额外获取总记录数,可以配置服务返回来获取。

image-20240123113011870

1705921166008

服务返回配置说明如下:

  • 记录数(total)

数据集总记录数。 header: 使用指定名称的 header 返回总记录数,body: 使用 JsonPath 表达式从返回的 body 中提取总记录数。

  • 数据集(dataset)

使用 JsonPath 表达式访问数据集,如果未定义或者 JsonPath 表达式为空,表示以默认的格式返回数据集。也就是默认 body 返回了一个 json 数组,每个元素是数据集的一行,也就是最常用的一种方法。如果不是这种方法,可以自行用 JsonPath 来指定路径。

  • 错误(error)

使用 JsonPath 表达式访问服务的错误信息。

设计返回结构

服务数据集要返回的列,可以在结构页签中自行设计。需要快捷操作的话,可以点击自动同步功能,会根据返回的列,自动把结构对应添加上去:

image-20240102175929386

image-20240123113528521

设计完成后,点击页面右上角的保存按钮即可保存。

添加服务数据组件

由于服务数据集只是用来做查询使用的,一般用做数据的查询、统计和展示。

服务数据集,在前端页面会以数据组件的方式来使用。

image-20240123114732558

将数据集拖动到页面后,该数据组件就会在各组件进行绑定使用了。这里和表数据集使用比较类似,这里不再赘述。

给参数赋值

如果在服务数据集设计时定义过查询参数,可以在数据集的过滤条件设置相应的值进行过滤:

image-20240123115041167

image-20240123115107653

返回树形数据

系统支持两种树形数据:二维表数据和 JSON 嵌套数据

二维表树形数据

数据格式

二维表树形数据格式如下图所示,数据中包含主键 fid 和父节点主键 parentId,系统根据这两个值,推导出树形数据

1722304594868

数据加载方式

二维树形数据支持全部加载和懒加载

全部加载

定义一个服务,返回全部数据

1722319639004

使用服务数据集

添加服务数据集

1722322460352

设置为树形数据

1722322549103

在页面上添加服务数据集,服务数据集执行刷新方法 refreshData,就会调用服务,同时将服务返回的数据加载到服务数据集中

1722322842383

运行效果如下图所示

1722322776148

使用服务

添加静态数据集,用于在页面上存储树形数据,提供给树组件使用

1722321635627

静态数据集设置为树形数据

1722321710952

页面上添加服务和静态数据集,在静态数据集的刷新事件中,发送服务请求,将返回的数据加载到数据组件中

1722321848644

静态数据集的刷新事件,代码如下

    onTreeAllDataCustomRefresh = (event) => {
        event.promise = this.comp("serviceRequest0").send().then(({data})=>{
            event.source.loadData(data);
        })
    }

运行效果如下图所示

1722322159240

懒加载

定义一个服务,传入父 ID 参数,父 ID 为空时,返回根数据,否则返回子节点数据

1722323296878

使用服务数据集

目前暂不支持

使用服务

添加静态数据集,用于在页面上存储树形数据,提供给树组件使用

1722321635627

静态数据集设置为树形数据

1722321710952

页面上添加服务和静态数据集,在静态数据集的刷新事件中,发送服务请求,传入展开的父节点 ID,将返回的子节点数据加载到数据组件中

1722323473460

在树组件的展开收起事件中,获取展开的父节点 ID

1722323630030

静态数据集的刷新事件和树组件的展开收起事件,代码如下

    onTreeLevelDataCustomRefresh = (event) => {
        event.promise = this.comp("serviceRequest2").send({
            parentId:this.expandedKey
        }).then(({data})=>{
            event.source.loadData(data,{parentRow:this.expandedKey});
        })
    }

    onTree4Expand = ({expandedKeys,extra}) => {
        if(extra.expanded){
            this.expandedKey = extra.node.fid;
        }
    }

运行效果如下图所示

1722324607899

JSON 嵌套树形数据

数据格式

JSON 嵌套树形数据格式如下图所示,数据中包括子节点 children,本身已形成树形数据

1722305219490

数据加载方式

JSON 树形数据只支持全部加载

全部加载

定义一个服务,返回 JSON 嵌套数据

1722324820330

使用服务数据集

添加服务数据集

1723010750222

虽然 JSON 嵌套数据,不需要父节点列,但是设置为树形数据需要父节点列,因此添加父节点列

1723011230718

设置为树形数据

1723010850049

在页面上添加服务数据集,子节点列选择 children,如下图所示。服务数据集执行刷新方法 refreshData,就会调用服务,同时将服务返回的数据加载到服务数据集中

1723011334804

运行效果如下图所示

1723011029251

使用服务

添加静态数据集,用于在页面上存储树形数据,提供给树组件使用。虽然 JSON 嵌套数据,不需要父节点列,但是设置为树形数据需要父节点列,因此添加父节点列

1722324922911

静态数据集设置为树形数据

1722324966027

页面上添加服务和静态数据集,在静态数据集的刷新事件中,发送服务请求,将返回的数据加载到数据组件中

1722325559294

静态数据集的刷新事件,代码如下

    onJsonDataCustomRefresh = (event) => {
        event.promise = this.comp("serviceRequest1").send().then(({data})=>{
            event.source.loadData(data,{buildTreeData:true});
        })
    }

运行效果如下图所示

1722325795078

results matching ""

    No results matching ""