数据源

前言

设计器提供数据源来配合画布上的组件/区块渲染，数据源的配置既可以采取在设计器中静态配置的方式，也可以采取远程 API 请求 JSON 数据动态获取的方式。

目前数据源可便捷地应用于表格组件的表格列，也可灵活地应用于手动调用指定的远程 API。

创建数据源

创建数据源步骤：

1. 选择左边操作栏 - 数据源

2. 点击左上操作区 - 新建数据源

   

3. 配置数据源类型（可选对象数组、树结构），配置数据源名称以及数据源字段

4. 保存数据源

   

表格组件中的应用

数据源主要载体为Collection组件，因此在使用数据源之前需要先在画布中拖放入Collection组件，然后在属性面板中选择需要绑定的数据源

然后需要在Collection组件中放入Grid表格组件，根据提示引入配置数据，就会自动解析出表格列数据

手动调用指定的远程 API

低代码引擎，将所有数据源都挂载到了 dataSourceMap 中，并为每个数据源都提供了 load 方法，用于手动调用场景，比如：点击保存按钮时，需要调用后端的保存接口，提交用户填写的数据，此时可以通过数据源来提交。

使用说明

this.dataSourceMap.xxx.load()

• xxx 为在数据源面板设置的数据源名称
• 支持传入请求参数，可用于覆盖在数据源面板中配置的请求参数（默认请求参数）
• load 方法返回一个 Promise

示例

以会议预订页面为例，为 创建 按钮绑定点击事件（onClick）

绑定点击事件处理器为 createMeeting，补充其实现，主要为 this.dataSourceMap.createMeeting.load(this.state.meeting)。 表示将用户填写的会议信息（this.state.meeting），调用数据源 addMeeting（POST 请求），提交给后端。

其中，数据源 addMeeting 配置示例如下：

完整代码示例如下：

async function createMeeting() {
  try {
    const res = await this.dataSourceMap.addMeeting.load(this.state.meeting)
    console.log('成功创建以下会议：', res)
  } catch {
    this.utils.toast({
      type: 'error',
      title: '创建会议请求失败，请稍候重试或联系客服' 
    })
  }
}

数据源获取远程字段

在使用数据源之前，我们需要向数据源中添加属性字段，可以通过“新建字段”按钮逐个添加。

但某些场景下，有更高效的添加方式，比如：基于已有的 HTTP 接口响应数据，快速地创建数据源的字段。

操作步骤

• 打开数据源面板，新建数据源。点击获取远程数据
• 设置请求地址、请求方式、请求参数、请求结果回调
• 请求成功后获取到接口字段信息，填写字段名后，保存后即可生成数据源字段信息

如果接口请求存在跨域、鉴权等情况，无法通过“发送请求”自动填充响应数据时，可以手动将响应数据（比如：JSON 格式数据），粘贴至下方的“请求结果”编辑器中。

请求完成回调函数示例

• 解析对象数组

function dataHandler(data) {
  return data.map(v => ({
      name: v.nickName,
      status: v.status
    })
  )
}

数据源Mock数据

目前数据源在编辑态时只能使用Mock数据，所以我们可能需要给数据源添加Mock数据

操作步骤

• 打开数据源面板，选中数据源
• 点击新增数据，添加数据并保存

使用数据源Mock数据

• 拖动一个Collection组件到画布中，在Collection组件属性面板上选择数据源
• 拖动格组件到Collection中，表格组件将自动生成数据源中的字段

更新数据源到画布

添加完Mock数据后，画布上绑定的数据源不会同步改变，需要手动更新，操作如下： 选中画布中的数据源，打开属性面板，点击更新数据源