低代码可视化平台操作手册第四篇(低代码平台的设计与实现)

一、数据接入

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

组件数据源配置界面

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

低代码可视化平台操作手册第四篇(低代码平台的设计与实现)

数据源结果集

数据源结果集一般作为组件绑定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/DataSoli/1647769418229

假如我们给【多行文本】组件的API数据源添加了一个URL联动参数str

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

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

注:目前URL联动参数功能仅支持GET形式的API请求,POST请求无法使用URL联动参数功能。(预计未来版本会予以支持,敬请期待…)

绑定数据库数据源

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

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

低代码可视化平台操作手册第四篇(低代码平台的设计与实现)

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

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。