1.首先看一下node-red對(duì)數(shù)據(jù)的渲染效果

你可能認(rèn)為，必須熟練掌握前端知識(shí)才能做出這樣的頁面，實(shí)際上它只需要一下幾步拖拽操作即可

node-red本身就是為MQTT而誕生，因此很適合進(jìn)行物聯(lián)網(wǎng)數(shù)據(jù)展示，支持?jǐn)?shù)據(jù)庫(kù)操作、mqtt協(xié)議,同時(shí)用戶也可以在它的基礎(chǔ)上，使用html等進(jìn)行前端界面修改。如果你想快速而完美的展示你的數(shù)據(jù)，不妨試一試NODE-RED。當(dāng)然，你想安裝它，也很簡(jiǎn)單的~~

2.安裝

首先需要安裝nodejs（百度上有很多示例，也挺簡(jiǎn)單的，就不講解啦）,然后 在控制臺(tái)輸入 npm install -g --unsafe-perm node-red 即可；

為了讓node-red在后臺(tái)保持運(yùn)行，我們使用此命令：nohup node-red &

完整的安裝步驟如下

• 安裝nodejs環(huán)境

sudo apt-get install nodejs 

• 安裝node-red

sudo apt-get install npm 
sudo npm install -g node-red 

• 普通運(yùn)行

node-red 

• 后臺(tái)持續(xù)運(yùn)行

nohup node-red & 

3.使用示例

展示一下我自己展示溫濕度的頁面

nede-red這款工具，好用而且簡(jiǎn)單，很適合初學(xué)者。給大家分享一下我的數(shù)據(jù)展示，附源碼（頁面交丑，僅供交流學(xué)習(xí)）其中包括連接mqtt服務(wù)器、數(shù)據(jù)插入mysql數(shù)據(jù)庫(kù)

數(shù)據(jù)展示頁面

在下面這個(gè)界面中，我進(jìn)行了兩個(gè)溫度、兩個(gè)濕度數(shù)據(jù)的展示；當(dāng)訂閱的主題接受到消息后，解析json數(shù)據(jù)格式，得到溫濕度數(shù)據(jù)并展示在前端

布局：

注意，在此布局中，有使用到數(shù)據(jù)庫(kù)。我使用的是mysql，只是簡(jiǎn)單的插入數(shù)據(jù)，僅供參考。

- 紫色的方塊為訂閱的MQTT消息，需要配置相應(yīng)的參數(shù)

- 綠色為調(diào)試信息；

- 藍(lán)色方塊為布局的展示，不同部件，展示的效果不同

- 黃色方塊為信息格式轉(zhuǎn)化，主要是為了方便折線圖的展示；

- 橙色方塊為數(shù)據(jù)庫(kù)操作，需要連接自己的數(shù)據(jù)庫(kù)；

其實(shí)實(shí)現(xiàn)很簡(jiǎn)單，就是通過拖拉、然后設(shè)置相應(yīng)的參數(shù)，基本上不要求編程能力。而且，只要有數(shù)據(jù)，就可以通過nodered去展示。