绑定数据源

黄健大约 9 分钟进阶使用

PageNow中大部分组件均支持绑定动态数据源，包括API接口、直连数据库等，以【多行文本】组件为例，说明如何绑定数据源。

基本概念

在此之前，先了解一些基本概念，方便后续章节理解。

数据源配置界面

点击功能组件配置表单中的【数据源】页签可打开数据源配置的一级界面：

点击【数据源配置】按钮打开数据源配置的二级界面，即为详细配置界面：

动态数据源、静态数据源

功能组件需要绑定数据源以获取需要展示的源数据或配置展示效果，数据源决定了组件使用何种方式获取数据结果集，PageNow中有两种类型数据源：动态数据源和静态数据源

动态数据源：API、数据库数据源、WebSocket
静态数据源：静态JSON文本、CSV

数据源结果集（数据结果集）

数据源结果集指数据源返回的数据，一般为JSON数据，所有可绑定数据源的功能组件默认使用静态数据结果集（或者叫静态结果集数据）。

例如【多行文本】组件默认绑定的静态数据结果集为：

[
  {
    "value": "基于SpringBoot+Vue构建的数据可视化开发平台..."
  }
]

所有可绑定数据源的功能组件均具有约定的数据结果集格式，只有结果集符合相应的格式，才能被组件解析使用。

结果集过滤器

结果集过滤器可对动态数据源结果集进行二次加工处理，目的是构建符合组件约定的结果集格式用于解析使用，结果集过滤的方式目前有两种：JS脚本方式和数据字段映射。

绑定API数据源

打开【数据源配置】窗口，数据源类型选择API：

接口地址

填写相应的接口地址，必须携带请求协议，例如：http://xxx.xx/getText 。

服务器代理请求

PageNow默认采用AJAX方式调用API接口请求数据，因此会涉及到跨域的问题，跨域问题一般建议编写API接口的时候做好跨域处理，常用的方式是后端开发接口时配置CORS跨域，这里不对后端如何进行跨域配置详细讲解，请自行Google或百度。

PageNow的服务器代理请求可以解决大部分情况下的跨域问题，当你的API接口不支持跨域时，请尝试勾选【服务器代理请求】选项，大致原理是由PageNow的后端服务去请求接口，这样可以一定层度上规避跨域的问题，但目前不保证100%的跨域问题都能够通过此选项解决。

请求方式

目前支持两种请求方式：GET 和 POST，视具体情况选择即可，当选择的请求方式为POST时，可以配置POST请求参数，用于携带提交，POST请求参数中是支持 {{js:}} 语法的。

Headers

此处的配置将会以请求的头数据一起提交，配置必须为严格的JSON格式数据，key值不能带有中文字符，常常用于配置Token等信息，Headers中是支持 {{js:}} 语法的。

URL联动参数

添加URL联动参数可以从当前页面的URL地址中读取相应的URI参数自动添加至API接口地址后以params参数发起请求，下面举例说明【URL联动参数】的使用方法：

当【多行文本】组件采用API形式的数据源，且接口地址配置为：http://localhost:8090/test/getText

页面发布后的访问地址为：http://localhost:8081/pagenow/1647769418229

此时我们给【多行文本】组件的API数据源添加了一个URL联动参数，参数名为：str

那么当我们访问已发布的页面时，地址中添加一个str参数，如：http://localhost:8081/pagenow/1647769418229?str=hello ，那么页面中的【多行文本】组件在请求API数据源时，接口地址就会自动添加上str参数： http://localhost:8090/test/getText?str=hello

注意

目前URL联动参数功能仅支持GET形式的API请求，POST请求无法使用URL联动参数功能。

绑定数据库数据源

注意

未获得后端源码进行本地部署之前，如需使用数据库数据源，请准备好可外网部署的数据库环境以及账号信息，确保数据库的确可外网访问（例如阿里云服务器、云数据库）

项	示例值	注意
备注名称	test	可任意填写
引用名称	test	必须唯一，可以通过点击【检查是否可用】按钮来确认
数据库类型	选择	目前支持的数据库类型为：MySql，Oracle，PGSQL，MSSQL，Sybase等
URL地址	jdbc:mysql://localhost:3306/pagenow_new?useUnicode=true&characterEncoding=utf-8	必须全路径
用户名	root
密码	root

组件绑定数据库

以【多行文本】组件为例讲解组件如何绑定数据库数据源请求数据并解析，假设我们的测试数据库中有一张测试表pn_test，如下所示：

打开组件的数据源配置界面，数据源类型选择数据库：

然后点击选择数据库下拉选项，选中所需要的数据库：

选好后，即可编写我们的SQL查询语句查询相应的数据，根据测试表中的数据，我们录入如下SQL语句，查询第一条记录的text值：

select text as value from pn_test LIMIT 1

此语句的查询结果为：

[
  {
    "value": "hello1"
  }
]

至此，即完成了组件绑定数据库数据源的操作，由于SQL语句查询的结果符合多行文本约定的结果集格式，因此可以正常被组件正常解析并显示。

绑定WebSocket数据源

打开组件的数据源配置界面，数据源类型选择WebSocket：

在此之前，我们先创建一个测试用例，这里使用NodeJs编写了一个测试用例：

const WebSocket = require('ws');

const wss2 = new WebSocket.Server({ port: 8083 });

wss2.on('onopen', function () {
  console.log('open')
})

wss2.on('connection', function connection(ws) {
  ws.on('message', function incoming(message) {
    console.log('received: %s', message);
  });

  setInterval(() => {

    ws.send(JSON.stringify([{
      value: '我是消息'+Math.ceil(Math.random()*100)
    }]))

  }, 1000)
});

此测试用例中，模拟了每隔一秒发送一次【多行文本】组件所需的结果集JSON数据串，然后我们填写【WS地址】为：ws://localhost:8083

WebSocket数据源在设计器编辑模式下是不会发起链接的，只有在预览或发布模式下访问页面才能看到效果，如果我们想要在设计器模式下测试是否链接成功，我们可以点击【测试链接】，如下图所示，当我们点击测试链接之后，可以看到组件已经成功与WebSocket建立了链接，且接收到了推送过来的消息：

WebSocket数据源需要注意以下几点

使用WebSocket数据源后，组件将无法使用【定时轮训器】
默认情况下，WebSocket数据源只能接收数据，无法推送数据（当然我们可以通过一些手段实现数据推送，这会在后续的进阶使用中有说明）
WS接口返回的数据建议使用纯字符串形式的数据，可以注意到，我们的WebSocket测试用例中，返回的就是使用 JSON.stringify 格式化后的JSON数据

ws.send(JSON.stringify([{
  value: '我是消息'+Math.ceil(Math.random()*100)
}]))

绑定CSV数据源

CSV数据源本质上就是一种静态数据源，只是数据来源是来自CSV数据文件，打开组件的数据源配置界面，数据源类型选择CSV文件：

点击【新建】按钮打开CSV数据源编辑界面：

我们也可以在管理控制台中【我的数据】->【CSV数据源】预先准备我们的CSV数据源

假设上传的CSV文件内容如下：

那么上传解析后，则得到一串如下的解析结果：

[
  {
    "label":"南宁",
    "value":10
  },
  {
    "label":"柳州",
    "value":20
  }
]

上传解析好CSV数据源后，即可在【选择CSV数据源】下拉列表中去选择使用了。

管理CSV数据源

在管理控制台中【我的数据】->【CSV数据源】管理我们的CSV数据源，可以对某个CSV数据源的解析结果进行再编辑

组件绑定CSV数据源是动态绑定的，也就是说，如果我们管理控制台中对某个CSV数据源的解析结果进行再编辑后保存，那么我们所有页面中所有绑定了这个CSV数据源的组件在访问的时候也会更新至最新的编辑状态。

CSV数据源的特点说明

CSV数据源本质上与静态JSON数据源是一样的，只是CSV数据源是通过解析CSV文件得到的结果集，但是与静态数据源不同的是，组件绑定了指定的CSV数据源之后，每次加载数据，都会动态获取平台数据库中的CSV数据源结果集，因此，当我们需要为多个组件绑定同一个静态数据结果集，同时又希望能够在一个统一的地方去修改这个结果集时，就可以给组件去绑定CSV数据源，这样就能通过修改CSV数据源来实现同步多个组件的效果。