PageNow PageNow
首页
  • 产品简介
  • 快速入门
  • 进阶使用
API
视频教程
联系我们
购买
首页
  • 产品简介
  • 快速入门
  • 进阶使用
API
视频教程
联系我们
购买
  • PageNow产品介绍

    • 产品简介
    • 企业版线上访问
    • 文档阅读说明
  • 快速入门

    • 基本概念
    • 管理工作台使用
    • 快速创建可视化页面
    • 设计器的基本使用
    • 布局块操作与配置
    • 数据接入
      • 基本概念
        • 组件数据源配置界面
        • 数据源结果集
        • 结果集过滤器
        • 定时轮询器
      • 静态JSON
      • 绑定API数据源
        • 请求方式
        • 接口地址
        • 服务器代理请求
        • URL联动参数
      • 绑定数据库数据源
      • 绑定WebSocket数据源
      • 绑定CSV数据源
        • 管理CSV数据源
        • CSV数据源的特点
      • 配置结果集过滤器
        • 过滤器常见使用场景
  • 进阶使用

    • 组件生命周期
    • 组件交互
    • 双大括号语法
    • 内置交互启动器
    • 共享数据源
    • 代码编辑器使用技巧
    • 自定义Echarts图表
    • 数据字段映射
    • 数据源结果集裁剪
    • 在线自定义组件
  • 文档手册
  • 快速入门
PageNow
2022-03-21

数据接入

PageNow中,大部分组件均支持绑定动态数据源,下面将以【多行文本】组件作为案例,讲解说明组件是如何进行数据接入的。

# 基本概念

# 组件数据源配置界面

组件数据源相关配置修改的界面,此界面下点击【数据源配置】按钮可以进入数据源的详细配置表单。

# 数据源结果集

数据源结果集一般作为组件绑定JSON数据,不同组件需要的数据源结果集均不同,且格式固定,不论采用何种数据源类型,返回的数据必须符合组件默认要求的数据源结果集格式。

例如【多行文本】文本组件要求的数据源结果集格式为:

[
  {
    "value": "基于SpringBoot+Vue构建的数据可视化开发平台,满足你对数据大屏页面的一切想象"
  }
]

也有部分组件,例如Echarts图表组件,可以在默认结果集格式的基础上,添加一下属性来实现图表series中对特定数据项的其他配置(例如label、labelLine等),具体说明在后续组件使用章节会有说明。

# 结果集过滤器

结果集过滤器可以对数据源结果集进行二次处理,具体使用请前往配置结果集过滤器查看。

# 定时轮询器

数据源的定时轮询请求,例如当采用API作为数据源时,配置定时器可以实现定时轮询请求API接口。

# 静态JSON

所有可绑定数据源的组件,默认均采用静态JSON作为数据源,可直接在【数据源】页面中直接编辑修改静态JSON

# 绑定API数据源

在数据源配置界面中,数据源类型,选择【API】

然后根据需要填写相应的【接口地址】以及【请求方式】

# 请求方式

目前支持的请求方式有两种:GET请求和POST请求

# 接口地址

填写完地址之后,需要点击编辑框的【提交修改】按钮来使地址生效,GET请求需要的params请写在地址中以URI参数的形式提交,例如:

http://localhost:8090/test/getText?str=hello

当请求方式为POST时,需要提交的data参数请写在【POST请求参数】编辑框内以JSON格式编写

例如:

{
  "str": "hello"
}

# 服务器代理请求

如果API接口本身不支持跨域请求,那么我们可以勾选服务器代理请求来解决跨域请求的问题

# 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联动参数功能。(预计未来版本会予以支持,敬请期待...)

# 绑定数据库数据源

首先企业版用户,需要使用管理员角色用户在管理工作台中添加相应的数据库数据源,如果是普通用户需要在演示系统中使用数据库数据源,可以联系PageNow的技术支持帮助添加,并且要确保您的数据库是可外网访问,且无任何重要敏感数据。

处理完以上操作之后,我们就可以给【多行文本】组件使用数据库数据源了,在组件数据源配置界面中,数据源类型,选择【数据库】

本文档说明中我们基于本地开发环境,添加了一个Mysql数据源localhost,然后【选择数据库】下拉中选中数据源,之后就可以编写相应的SQL语句查询数据了

我们测试数据源中有一个张测试表pn_test

之后我们写一条sql语句查询出这张表的第一条数据,那么基于【多行文本】组件要求的数据源结果集格式,我们这条sql语句则可以这么编写:

select text as value from pn_test LIMIT 1

这条语句查询的结果集为:

[
  {
    "value": "hello1"
  }
]

注:不支持存储过程!

# 绑定WebSocket数据源

在组件数据源配置界面中,数据源类型,选择【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文件进行解析,表单中我们提供了一个示例,假如您需要一个如下的数据源结果集:

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

那么您的CSV文件应该编辑如下图所示:

注:CSV文件大小不能超过5MB,且文件编码应为UTF-8

添加了CSV数据源之后,我们就可以选择对应的数据源来绑定给组件了。

# 管理CSV数据源

可以在管理工作台中管理我们的CSV数据源,可以对某个CSV数据源的解析结果进行再编辑。

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

# CSV数据源的特点

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

# 配置结果集过滤器

当我们在使用动态数据源时,会面临非标准的数据结果集接入的场景,此时可通过结果集过滤器进行字段类型变更、数值去零、字段拆分、字段重组等数据格式转换以及一些简单的逻辑运算。

如果只是简单的字段绑定,而不需要对结果集字段进行计算逻辑,可直接使用 数据字段映射 功能进行配置。

结果集过滤器采用标准JS语法,JS语法参考:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript (opens new window)

PageNow中基于JS标准语法之上,定义了自己的编写标准,过滤器中通过ds_resultObj变量来存储结果集对象,我们只需要对ds_resultObj进行重构赋值即可

下面将以【多行文本】组件作为示例,说明结果集过滤器如何编写,首先【多行文本】组件要求的结果集格式为:

[
  {
    "value": "hello world"
  }
]

PageNow中 标准的过滤器写法 为:

let newData = [
  {
    value: 'new value'
  }
]
ds_resultObj = newData

假设我们使用了API接口作为数据源,接口返回的结果集为:

[
  {
    "text": "hello world"
  }
]

以上结果集是无法正常被【多行文本】组件解析的,这时候我们就可以通过过滤器去构建新的结果集数据:

let newData = [
  {
    value: ds_resultObj[0].text
  }
]
ds_resultObj = newData

# 过滤器常见使用场景

下面将整理一些常见的过滤器使用场景,在编写过程中,可以举一反三,将结果集过滤器的功能使用得更得心应手。

以下均以【多行文本】组件的结果集格式要求作为参考

# 1、字段类型转换

当组件要求的结果集格式为数值型,而数据源返回的为字符串时,可通过滤器进行后期转换

例如以下value字段为字符串,需转换为数值型

[
  {
    "value": "188"
  }
]

过滤器写法

let newData = ds_resultObj.map(o => ({...o, value: parseInt(o.value)}))
ds_resultObj = newData

# 2、取部分值

当数据源返回的数据冗余,只需其中部分的字段时,可通过过滤器进行字段摘取

例如取以下数据中的value值

[
  {
    "name": "zhangsan",
    "age": 30,
    "introduction": {
      "value": "我是张三,我今年30岁了"
    }
  }
]

过滤器写法

let newData = [{value: ds_resultObj[0].introduction.value}]
da_resultObj = newData

# 3、简单运算

当需要从原始结果集中取多个值进行计算获取新值,可通过过滤器进行简单计算或拼接

例如从下面数据中取score1和score2进行相加

[
  {
    "score1": 100,
    "score2": 200
  }
]

过滤器写法

let newData = [{value: ds_resultObj.score1 + ds_resultObj.score2}]
da_resultObj = newData
布局块操作与配置
组件生命周期

← 布局块操作与配置 组件生命周期→

Theme by Vdoing | Copyright © 2021-2023 PageNow数据可视化 桂ICP备2021000260号
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式
×