可視化界面開發(fā)Node-RED【03】——框架介紹及數(shù)據(jù)流部署

Node-RED框架介紹及數(shù)據(jù)流部署

Node-RED介紹與登入功能等基礎(chǔ)內(nèi)容在前面已經(jīng)介紹過了，今天我們就來學(xué)習(xí)開源可視化開發(fā)工具Node-RED具體框架介紹以及第一條數(shù)據(jù)流的部署。

1、界面框架介紹

數(shù)據(jù)流的編輯界面由四部分組成。最左邊是已定義的各種node的列表，我們稱之為控件區(qū)。中間是一個工作區(qū)，用戶可以拖放node到工作區(qū)來創(chuàng)建node的實例，Node-Red為每個node實例賦予了唯一的ID，通過雙擊node實例來編輯單個實例，通過連接node的in和out創(chuàng)建數(shù)據(jù)流，node實例會記錄out口連線的信息，每條線會記錄目標(biāo)node實例的信息最右邊是debug node的輸出區(qū)及node的幫助信息顯示區(qū)。右上角有“部署”按鈕，用來把編寫的程序保存到本地并執(zhí)行。

2、第一條數(shù)據(jù)流的部署

基本上所有與編程相關(guān)的教程總是喜歡從hello world開始，所以node-red第一條數(shù)據(jù)流的部署也從此開始。

（1）拖拽輸入與輸出節(jié)點：

進(jìn)入Node-RED后將控件區(qū)內(nèi)的輸入節(jié)點“inject”與輸出節(jié)點“debug”，使用鼠標(biāo)左鍵拖入工作區(qū)內(nèi)。拖入以后發(fā)現(xiàn)“inject”變成了“時間戳”，“debug”變成了“msg.payload”，這是正常現(xiàn)象。如果你的計算機或是樹莓派運行在英文環(huán)境下，理所當(dāng)然，工作區(qū)內(nèi)的節(jié)點的名字會變成英文。

（2）更改節(jié)點配置：

雙擊時間戳節(jié)點，進(jìn)入節(jié)點配置界面。

點擊內(nèi)容選項后的下拉菜單（小三角形），在菜單中選擇文字列，并在輸入框中輸入“hello world”。

可以看到，此時“時間戳”節(jié)點名字顯示成“hello world”。

（3）連接輸入節(jié)點與輸出節(jié)點：

在node-red中用“flow”來表示數(shù)據(jù)的流向，中文意思是“數(shù)據(jù)流”，即為數(shù)據(jù)從輸入節(jié)點流向輸出節(jié)點。使用鼠標(biāo)按住左鍵，從上圖接口1連接到接口2，即可完成輸入輸出的節(jié)點連接。用一條線連接輸入輸出節(jié)點，大概是最簡單最直觀的構(gòu)建數(shù)據(jù)流的方式了。

（4）節(jié)點部署：

部署按鈕位于界面右上角，下拉菜單有如下幾項：

單擊部署后，顯示部署成功。

（5）調(diào)試：

時間戳節(jié)點左側(cè)有一個小按鈕，點擊按鈕可以手動注入消息，注入的消息為輸入節(jié)點的文字列。在點擊時間戳節(jié)點的按鈕之前，必須確保debug節(jié)點是可用的，即按鈕必須是“伸出來”的，如藍(lán)框2，而不是像藍(lán)框3一樣“縮回去”，按鈕“縮回去”的debug節(jié)點不工作。點擊按鈕可以切換節(jié)點是否工作。

點擊時間戳節(jié)點左側(cè)按鈕發(fā)送消息，點擊右上角調(diào)試窗口，即小爬蟲按鈕查看輸出的消息。

3、手動編輯JSON格式輸出

在時間戳節(jié)點中，輸入的內(nèi)容不僅可以選擇輸入文本列、數(shù)字等，還能以JSON格式輸出，手動編輯JSON格式的代碼即可通過JSON格式輸出消息。

點擊圖中內(nèi)容行藍(lán)色框標(biāo)出的三個點處，進(jìn)入JSON編輯器。輸入JSON格式代碼：

輸入后，點擊格式化JSON可檢測是否輸入有誤。完成后點擊部署。點擊時間戳左側(cè)按鈕，發(fā)送JSON格式消息，會在調(diào)試窗口顯示圖中消息。

免責(zé)聲明：本文內(nèi)容由21ic獲得授權(quán)后發(fā)布，版權(quán)歸原作者所有，本平臺僅提供信息存儲服務(wù)。文章僅代表作者個人觀點，不代表本平臺立場，如有問題，請聯(lián)系我們，謝謝！