连接API

在如何添加数据源中我们已经给大家介绍了添加数据源的步骤,本文主要介绍一下API 接口的具体设置。

(关于通过传递参数显示不同的数据,请参考该教程 →_→ 如何通过传递参数让大屏展示不同数据

目前,山海鲸可视化支持采用 JSON 返回的 API 形式,推荐大家一个 api 内只返回一组数据。如果返回多组数据,软件也会尝试进行自动识别,不过可能会有一定的误差。

1、在数据源编辑窗口中,在左侧选择“添加数据”选项卡,然后在右侧点击数据库分类中的“API 接口”按钮:

2、软件会弹出输入 API 连接的设置框,我们填入我们的 API 地址,并点击确定按钮。注意目前暂时不支持 JSONP 形式的 API。

山海鲸可视化的 API 接口支持 GET 和 POST,具体设置如下:
image.png
image.png

API 安全机制
添加 API 的时候,可以设置密钥 key,如下图所示:

在发出 API 请求的时候,山海鲸会自动拼上 GET 参数 ts 和 sign,其中 ts 为毫秒时间戳,sign 为使用密钥 key 签名后的字符串,sign 的签名算法如下:

sign = md5(ts + key)

比如 API 地址为http://test.shanhaibi.com/demo.php?a=1,key 设置为 abc123,发送 API 时的毫秒时间戳为 1613906185878,则 sign 为 md5(“1613906185878abc123”)=1873f8026797a3f310dd021e145718f0

最终发出的请求为:
http://test.shanhaibi.com/demo.php?a=1&ts=1613906185878&sign=1873f8026797a3f310dd021e145718f0

3、软件会自动加载 API 中数据,确认没问题,点击确定按钮,一个 API 的数据源便添加成功了。

【温馨提示】API 数据格式可以参考下面的案例。

API 示例链接:http://test.shanhaibi.com/demo.php

该 API 使用 PHP 编写,代码如下,仅供参考:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<?php

$data = [
'示例表格1' => [
'字段1' => 1,
'字段2' => '测试文本',
'字段3' => 1.2,
'字段4' => 0.5,
],
'示例表格2' => [
[
'字段5' => 1,
'字段6' => 1.2,
'字段7' => "测试文本",
],
[
'字段5' => 2,
'字段6' => 2.2,
'字段7' => "测试文本2",
],
[
'字段5' => 5,
'字段6' => 1.3,
'字段7' => "测试文本3",
],
],
];

header("Content-Type:application/json;chartset=uft-8");
echo json_encode($data);

该示例 API 的返回结果,如下图所示:

API 数据和表单对应关系:

“示例表格 1”对应的字段格式,如下所示:

字段 1 字段 2 字段 3 字段 4
1 测试文本 1.2 0.5

添加到软件中格式,如下图所示:

“示例表格 2”对应的字段格式,如下所示:

字段 5 字段 6 字段 7
1 1.2 测试文本
2 2.2 测试文本 2
3 1.3 测试文本 3

添加到软件中格式,如下图所示:

【温馨提示】此处的数据仅支持查看,不支持在线修改,如需修改数据,请直接在 API 源数据中修改,修改完成之后请按照教程刷新数据进行操作。