开源可视化页面工具——NODE-RED

举报
ttking 发表于 2020/11/30 22:12:00 2020/11/30
【摘要】 通过介绍一款数据展示工具——nodered,简单且完美的展示数据;同时给出一个参考模板供大家使用

node-red是一款基于Node.js的开源可视化界面开发工具。但不需要掌握node.js而通过拖拽即可完成数据的可视化展示。

首先看一下node-red对数据的渲染效果

image.png

你可能认为,必须熟练掌握前端知识才能做出这样的页面,实际上它只需要一下几步拖拽操作即可
image.png

node-red本身就是为MQTT而诞生,因此很适合进行物联网数据展示,支持数据库操作、mqtt协议,同时用户也可以在它的基础上,使用html等进行前端界面修改。如果你想快速而完美的展示你的数据,不妨试一试NODE-RED。当然,你想安装它,也很简单的~~

首先需要安装nodejs(百度上有很多示例,也挺简单的,就不讲解啦),然后 在控制台输入 npm install -g --unsafe-perm node-red 即可;

为了让node-red在后台保持运行,我们使用此命令nohup node-red &

使用示例

展示一下我自己展示温湿度的页面

nede-red这款工具,好用而且简单,很适合初学者。给大家分享一下我的数据展示,附源码(页面交丑,仅供交流学习)
其中包括连接mqtt服务器、数据插入mysql数据库

数据展示页面

image.png

在下面这个界面中,我进行了两个温度、两个湿度数据的展示;当订阅的主题接受到消息后,解析json数据格式,得到温湿度数据并展示在前端

image.png

布局:

注意,在此布局中,有使用到数据库。我使用的是mysql,只是简单的插入数据,仅供参考
image.png

其实实现很简单,就是通过拖拉、然后设置相应的参数,基本上不要求编程能力。而且,只要有数据,就可以通过nodered去展示。

【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。