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

绑定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文件大小不能超过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)

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

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

[

{

"value": "hello world"

}

]

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

let newData = [

{

value: 'new value'

}

]

ds_resultObj = newData

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

[

{

"text": "hello world"

}

]

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

let newData = [

{

value: ds_resultObj[0].text

}

]

ds_resultObj = newData

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

(0)
上一篇 2024年7月8日 下午4:52
下一篇 2024年7月8日 下午5:03

相关推荐

  • 2020家具行业管理软件排行榜(2020家具行业管理软件排行榜最新)

    2020家具行业管理软件排行榜(2020家具行业管理软件排行榜最新) 2020家具行业管理软件排行情况如何?随着全球经济的复苏,人们的生活水平的不断改善,越来越的人开始关注家具。家…

    科研百科 2024年3月22日
    127
  • 农科院绩效考核办法

    农科院绩效考核办法 近年来,随着农业现代化进程的不断推进,农科院作为农业科研单位之一,其重要性和影响力也日益增加。为了更好地推动农科院的发展,提高科研成果的实用性和经济效益,农科院…

    科研百科 2024年10月9日
    26
  • 科研项目管理系统(项目管理系统)

    项目管理系统项目管理系统是指依据项目管理制定项目,包括执行与控制的模块,包括内容、项目管理的设置与处理、项目管理的方法等。它是指制定项目管理的、项目管理的项目管理工具,包括项目管理…

    科研百科 2024年7月30日
    51
  • 哈尔滨软件开发公司

    哈尔滨软件开发公司 哈尔滨软件开发公司是一家专注于软件开发领域的公司,致力于为客户提供高质量的软件产品和解决方案。公司拥有一支专业的技术团队,具有丰富的软件开发经验和成功案例。 作…

    科研百科 2024年10月23日
    0
  • 项目信息管理系统结构

    项目信息管理系统结构 项目信息管理系统是一种用于管理项目信息的软件系统。在现代商业环境中,项目信息管理系统对于组织而言非常重要,可以帮助组织更高效地管理项目,提高项目的成功率和绩效…

    科研百科 2024年12月26日
    0
  • 合同管理厂商

    合同管理厂商 合同管理厂商是帮助企业进行合同管理的第三方服务提供商。合同管理对于企业非常重要,因为合同是企业与供应商,客户以及其他相关方之间的主要沟通工具。如果合同管理不当,可能会…

    科研百科 2024年9月20日
    23
  • 华阴市罗敷镇党委:念好“三字诀”抓实党员教育培训管理

    “高举旗帜、响应号召、奋进新时代、启航新征程”主题实践活动深入开展以来,罗敷镇党委积极转变工作方法,创新形式,不断提升党员教育培训覆盖面,将党员教育放在基层党建工作的重要位置,采用…

    科研百科 2023年1月29日
    199
  • 干部提拔归档材料

    干部提拔归档材料 干部提拔是组织部门的一项重要工作,归档材料是对这些提拔干部的工作成绩、业绩、贡献等方面进行总结、归纳、整理后形成的文档。这些材料可以帮助我们更好地了解干部提拔的 …

    科研百科 2024年11月9日
    0
  • 使用TS开发微信小程序(3):网络请求封装

    引言 结合业务需求和技术需求,目前使用TS开发小程序,之前已经发过了TypeScript开发微信小程序的环境搭建。虽然现在也有很多第三方开发框架,但是大部分都是基于vue,有一定的…

    科研百科 2023年4月3日
    680
  • 全方位的数字规划工具Visual Components 4.0 数字化工厂仿真软件(数字化工厂仿真软件哪个最好)

    Visual Components 是全方位的数字规划工具。无论从制程规划、生产到营销都能够整合在同一个平台上作业,有助于内部的技术沟通及外部营销。此外,Visual Compon…

    科研百科 2023年4月28日
    302