快捷導航

基于Node-red的在線評語系統(tǒng)(可視化編程,公網(wǎng)訪問)

更新時間：2022年01月28日 14:08:19 作者：yummy說電子

Node-Red是IBM公司開發(fā)的一個可視化的編程工具，在網(wǎng)頁內(nèi)編程，主要是拖拽控件，代碼量很小,這篇文章主要介紹了基于Node-red的在線評語系統(tǒng)(可視化編程,公網(wǎng)訪問),需要的朋友可以參考下

Node-red簡介與安裝

什么是Node-red

簡單來說，Node-Red是IBM公司開發(fā)的一個可視化的編程工具，在網(wǎng)頁內(nèi)編程，主要是拖拽控件，代碼量很小。

由于我平時工作偏向硬件，所以對這些華麗的前端技術(shù)技術(shù)不是很了解，但個人認為，node-red技術(shù)在搭建具備網(wǎng)絡(luò)與圖形化功能的上位機、編程入門方面有很強的先天優(yōu)勢，也可以拿來做物聯(lián)網(wǎng)資源的擴展，或與樹莓派搭配做網(wǎng)關(guān)功能。

關(guān)于Node-red的中文教程，網(wǎng)上資源并不夠多。筆者2018年在CSDN寫過一系列文章，現(xiàn)在來看過于粗糙，而且界面老舊，有重新做一版的想法，但是苦于俗務(wù)太多，如果各位觀眾老爺有興趣的話，請多多點贊轉(zhuǎn)發(fā)支持，您的支持是我創(chuàng)作的動力。

安裝Node-red

安裝過程可以參考官方教程，[基于windows]：

[基于樹莓派/ubuntu]：

安裝Dashboard

Dashboard：儀表板，用于快速創(chuàng)建實施數(shù)據(jù)儀表板。它的安裝方式與簡介，請參考[官方教程]：

筆者博客中有關(guān)于儀表板的安裝與介紹，可以[移步閱讀]：

安裝Base64，非必須

Base64節(jié)點用于將對象打包/解包為base64格式，在評語系統(tǒng)中，用于將圖片轉(zhuǎn)為Base64格式，然后再顯示。它的安裝與介紹，請參考[官方教程].

這一步是非必須的，因為如果圖片是固定的，可以手動解碼，然后放置在注入節(jié)點中，以避免圖片依賴本地路徑，造成部署不方便。后續(xù)有詳細解釋。

編寫評語文案

個人感覺，編寫文案其實是最困難的部分。以評價實習筆記為例，我設(shè)計了：內(nèi)容、格式、體現(xiàn)、總結(jié)，4個評價維度，他們的具體評語如下：

內(nèi)容	格式	表現(xiàn)	總結(jié)
略顯單薄，應(yīng)該忽略	略顯凌亂，理性層次	完整記錄了實訓的過程、數(shù)據(jù)與現(xiàn)象	基本
言簡意賅，略感惜字如金	結(jié)構(gòu)分明，標題正文一目了然	掌握了理論知識，完成了動手操作	詳細
詳略得當，符合筆記要求	工工整整，層次分明	聽課認真，及時練習，總結(jié)到位	充分
準確翔實，真實記錄了鍛煉過程	整齊劃一，編排合理	認真聽講，勤于思考，總結(jié)總結(jié)	完全
洋洋灑灑，理論與實踐結(jié)合	評論好看，方便閱讀	學習認真，積極上進，不懂就問	深入
面面俱到，詳細記錄了實習過程	井然有序，邏輯清楚	思維思考，提出問題，并主動尋找解決辦法	綜合
應(yīng)有盡有，可以比范本	貝聯(lián)珠貫穿，完整、連貫且美觀	心思細膩，文筆流程，邏輯嚴謹	徹底

它的用法為：本實訓手冊內(nèi)容內(nèi)容，格式格式；從手冊中，可以體現(xiàn)出該同學體現(xiàn) ，總結(jié) 了解了實習工作的工程背景，方案和實踐，充分考慮了社會、健康、安全、法律以及文化等多方面因素。

例如：

本實習手冊內(nèi)容詳略得當，符合筆記要求，格式整潔美觀，方便閱讀，從手冊中，可以體現(xiàn)出該同學‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍思維活躍，善于提問，并主動尋找解決辦法‍‍‍‍‍‍‍‍‍‍‍‍‍‍，深入了解了實習工作的工程背景，方案和實踐；充分考慮了社會、健康、安全、法律以及文化等多方面因素。

寫評語真的是搜腸刮肚，黔驢技窮，一滴個詞都沒有了。

界面

甭管功能怎么樣，界面一定要好看。沒辦法，這就是個看臉的世界。

整體頁面規(guī)劃如圖：

在一個頁面中，進行手冊的點評。

不同的評價維度采用不同的分組。每個分組列寬固定，均為單位“2”，每個單位默認是48像素。

整體鼠標的移動軌跡為，從上到下，從左到右，老師依次點擊每個評價維度的內(nèi)容，到最右側(cè)生成評語，然后到最右下角復(fù)制評語。

配色網(wǎng)站

界面是必須考慮美觀的。公司的圖標是紅色的，儀表板默認的主題是Light，主題色是藍色（可修改）。

我找了一個[配色網(wǎng)站](http://www.peisebiao.cn/)，以紅色為主題，進行色相配色，找到了幾個自以為好看的顏色。

按鈕

規(guī)劃好界面與配色后，可以用按鈕來實現(xiàn)每個評價選項，不同評價維度有不同的分組，每個分組內(nèi)從上到下，評價等級依次提升。設(shè)置4組按鈕：

結(jié)果顯示

每一次點擊按鈕以后，都會發(fā)出一個數(shù)據(jù)包，而載荷正好是我們需要的字符串。每組按鈕最下方，設(shè)置一個“text”節(jié)點顯示當前評價維度的內(nèi)容。

在最右側(cè)，“生成”分組下，也是用一個“text”節(jié)點來顯示完整的評語。

顯示圖片

為了讓界面美觀一些，同時體現(xiàn)公司信息，因此要顯示一張圖片。圖片本不是評價系統(tǒng)必備的，但是“如何使用Node-red顯示圖片”，中文搜索無法快速得到答案，此處稍微提一下。

如果已經(jīng)安裝了base64節(jié)點，可以按照下圖編寫測試程序。

假如我在D盤放置了名為test.jpg的文件，點擊注入節(jié)點，在http://localhost:1880/ui/地址的text頁面下，即可看到以下現(xiàn)象：

代碼如下，可自行導入觀察效果。

[{"id":"e90b9e5.8d1a76","type":"ui_template","z":"a27b80b1c2d45b59","group":"efcf5006.15dae","name":"Display image","order":4,"width":"6","height":"6","format":"\n","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":false,"templateScope":"local","x":1000,"y":440,"wires":[[]]},{"id":"e15b65de.f75f98","type":"base64","z":"a27b80b1c2d45b59","name":"Encode","action":"","property":"payload","x":760,"y":440,"wires":[["e90b9e5.8d1a76"]]},{"id":"813f5fbc.785a7","type":"file in","z":"a27b80b1c2d45b59","name":"","filename":"D:test.jpg","format":"stream","chunk":false,"sendError":false,"encoding":"none","allProps":false,"x":540,"y":440,"wires":[["e15b65de.f75f98"]]},{"id":"2909d426.407b4c","type":"inject","z":"a27b80b1c2d45b59","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":370,"y":440,"wires":[["813f5fbc.785a7"]]},{"id":"efcf5006.15dae","type":"ui_group","name":"test","tab":"65324def.436554","order":8,"disp":true,"width":"6","collapse":false},{"id":"65324def.436554","type":"ui_tab","name":"test","icon":"dashboard","disabled":false,"hidden":false}]

內(nèi)嵌圖片編碼

這種做法要求D盤必須有個test.jpg文件，我最后部署在云服務(wù)器上，懶得在云服務(wù)器中的D盤放一個圖片（其實也沒有D盤），而是把圖片轉(zhuǎn)為Base64編碼，放在注入節(jié)點中。

[有些網(wǎng)站]能將圖片轉(zhuǎn)為Base64編碼，如下。Chrome瀏覽器也可以，具體教程請自行搜索。

然后把獲取的Base64編碼作為注入節(jié)點的載荷即可。

函數(shù)節(jié)點編寫

按下按鈕會產(chǎn)生一個message，message相當于參數(shù)，傳遞給后邊的函數(shù)節(jié)點。函數(shù)節(jié)點內(nèi)部申請的所有變量，都是局部變量，在函數(shù)的調(diào)用結(jié)束后，局部變量的值就被釋放了，無法保留。因此要用一種特殊的機制，來保存某個維度的打分信息，可以使用global，將參數(shù)設(shè)置為全局的。