服务数据集
服务数据集支持将服务请求返回的 JSON 数组,映射为数据模型。支持的请求包括应用内的服务接口,以及 OpenAPI 接口等。
同时,服务数据集还支持通过 JsonPath 配合正则表达式,从请求的 header 或 body 数据中获取返回的记录数、JSON 数组和错误信息。
区别于其他类型的数据集,服务数据集并不是从数据库的角度来获取数据,而是从 API 请求来获取。对于返回列表数据的 API 接口来说,可以通过服务数据集更方便地在前端展示和使用。
添加服务数据集
在动态数据集的右侧,点击+按钮,可以创建新的服务数据集:
保存路径
- 数据集的模型描述文件
xxx.data.m 保存在当前模块的根目录下,比如 main 模块的根目录下:
在 .data.m 文件中,会使用 <class type="sql" 来标识 SQL 数据集:
同时在文件中,也能找到之前定义的内容:
使用服务
选择服务
在服务数据集中,点击“选择 API-服务模型”,弹出选择服务窗口
这里列出了应用内所有服务,以及配置好的租户内其它应用的服务
设置查询参数
选择一个服务后,服务的参数会自动作为数据集参数,注意其中的“是否输入”属性,是否输入为是的参数,可以从前端赋值。
特别说明
- 服务中通常使用 page 和 size 这两个参数获取分页数据
- DBrest 使用 limit 和 offset 请求分页数据
- 因此 page 和 size 这两个参数由系统接管,自动实现从 limit 和 offset 到 page 和 size 的转换,所以是否输入为否
添加数据列
如果服务返回数据集的集合,如下图所示,返回分页数据返回“订单主表”集合
在结构中,点击“自动同步”按钮,可将服务返回数据集的结构作为服务数据集的结构
添加服务数据组件
在前端页面上,可以看到后端定义的服务数据集,添加到页面上使用
给参数赋值
如果服务数据集有输入参数,在服务数据组件上,会列出参数,支持给参数赋值
查询数据
调用数据组件的刷新方法 refreshData 查询数据,limit 和 offset 自动转换为 page 和 size,其它参数正常传递
使用 OpenAPI
设置服务调用
调用 OpenAPI 的接口
选项 | 选项值 |
---|---|
服务名 | 不设置,留空 |
请求路径 | 接口的 Path,相对路径,从 api.json 里边查找,比如 /pet/findByStatus |
HTTP方法 | GET / POST 等 |
API文档 | http全路径,比如 https://petstore3.swagger.io/api/v3/openapi.json |
服务调用的配置,如下图所示
如果此时该 url 需要配置请求参数,但还没有添加参数,保存后点击数据会报错。因此需要根据接口的要求,添加相应的参数。
添加查询参数
以 /pet/findByStatus 接口为例,接口要求传入 status 参数,并且值必须是 available/pending/sold 中的一个。
输入参数名称,参数分类选择查询参数,输入勾选,可以填入默认值。
默认值填入需点击右侧...,进入对话框后输入字符串。需要注意的是,在对话框输入的字符串需要使用 '' 引起来。这样输入后,再后边列表会显示 expr:'available' 的形式。
配置服务返回
除了获取数据列表,如果还需要额外获取总记录数,可以配置服务返回来获取。
服务返回配置说明如下:
- 记录数(total)
数据集总记录数。 header: 使用指定名称的 header 返回总记录数,body: 使用 JsonPath 表达式从返回的 body 中提取总记录数。
- 数据集(dataset)
使用 JsonPath 表达式访问数据集,如果未定义或者 JsonPath 表达式为空,表示以默认的格式返回数据集。也就是默认 body 返回了一个 json 数组,每个元素是数据集的一行,也就是最常用的一种方法。如果不是这种方法,可以自行用 JsonPath 来指定路径。
- 错误(error)
使用 JsonPath 表达式访问服务的错误信息。
设计返回结构
服务数据集要返回的列,可以在结构页签中自行设计。需要快捷操作的话,可以点击自动同步功能,会根据返回的列,自动把结构对应添加上去:
设计完成后,点击页面右上角的保存按钮即可保存。
添加服务数据组件
由于服务数据集只是用来做查询使用的,一般用做数据的查询、统计和展示。
服务数据集,在前端页面会以数据组件的方式来使用。
将数据集拖动到页面后,该数据组件就会在各组件进行绑定使用了。这里和表数据集使用比较类似,这里不再赘述。
给参数赋值
如果在服务数据集设计时定义过查询参数,可以在数据集的过滤条件设置相应的值进行过滤:
返回树形数据
系统支持两种树形数据:二维表数据和 JSON 嵌套数据
二维表树形数据
数据格式
二维表树形数据格式如下图所示,数据中包含主键 fid 和父节点主键 parentId,系统根据这两个值,推导出树形数据
数据加载方式
二维树形数据支持全部加载和懒加载
全部加载
定义一个服务,返回全部数据
使用服务数据集
添加服务数据集
设置为树形数据
在页面上添加服务数据集,服务数据集执行刷新方法 refreshData,就会调用服务,同时将服务返回的数据加载到服务数据集中
运行效果如下图所示
使用服务
添加静态数据集,用于在页面上存储树形数据,提供给树组件使用
静态数据集设置为树形数据
页面上添加服务和静态数据集,在静态数据集的刷新事件中,发送服务请求,将返回的数据加载到数据组件中
静态数据集的刷新事件,代码如下
onTreeAllDataCustomRefresh = (event) => {
event.promise = this.comp("serviceRequest0").send().then(({data})=>{
event.source.loadData(data);
})
}
运行效果如下图所示
懒加载
定义一个服务,传入父 ID 参数,父 ID 为空时,返回根数据,否则返回子节点数据
使用服务数据集
目前暂不支持
使用服务
添加静态数据集,用于在页面上存储树形数据,提供给树组件使用
静态数据集设置为树形数据
页面上添加服务和静态数据集,在静态数据集的刷新事件中,发送服务请求,传入展开的父节点 ID,将返回的子节点数据加载到数据组件中
在树组件的展开收起事件中,获取展开的父节点 ID
静态数据集的刷新事件和树组件的展开收起事件,代码如下
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;
}
}
运行效果如下图所示
JSON 嵌套树形数据
数据格式
JSON 嵌套树形数据格式如下图所示,数据中包括子节点 children,本身已形成树形数据
数据加载方式
JSON 树形数据只支持全部加载
全部加载
定义一个服务,返回 JSON 嵌套数据
使用服务数据集
添加服务数据集
虽然 JSON 嵌套数据,不需要父节点列,但是设置为树形数据需要父节点列,因此添加父节点列
设置为树形数据
在页面上添加服务数据集,子节点列选择 children,如下图所示。服务数据集执行刷新方法 refreshData,就会调用服务,同时将服务返回的数据加载到服务数据集中
运行效果如下图所示
使用服务
添加静态数据集,用于在页面上存储树形数据,提供给树组件使用。虽然 JSON 嵌套数据,不需要父节点列,但是设置为树形数据需要父节点列,因此添加父节点列
静态数据集设置为树形数据
页面上添加服务和静态数据集,在静态数据集的刷新事件中,发送服务请求,将返回的数据加载到数据组件中
静态数据集的刷新事件,代码如下
onJsonDataCustomRefresh = (event) => {
event.promise = this.comp("serviceRequest1").send().then(({data})=>{
event.source.loadData(data,{buildTreeData:true});
})
}
运行效果如下图所示