目錄

• Node-red簡介與安裝
• 什麼是Node-red
• 安裝Node-red
• 安裝Dashboard
• 編寫評語文案
• 介面
• 配色
• 按鈕
• 結果顯示
• 顯示圖片
• 內嵌圖片編碼
• 函式節點編寫
• Global全域性傳遞引數
• 資料拼接
• 線上複製功能
• 外網使用

最近給高校做了實訓，要寫300多份評語。評語稍微有點形式主義，且實在是有點多，而且……我懶。好吧，我承認了。

然而，我並沒有找到合適的評語系統。搜到了AA班級助手，只有小學和中學的評語庫，不適合大學生用。

上CSDN斥巨資下載幾個評語軟體，沒有一個好用的，要麼是課後作業級別的練習軟體，要麼是重複的，且沒有一個能夠支援自定義語句。話說CSDN現在真有點垃圾堆的意思。

我迫切需要合適的評語系統

既然別人的工具用的不順手，那就自己寫吧，沒辦法，有技術就是可以這麼為所欲為。

全網第一個基於Node-red的線上評語系統，就這樣誕生了。

Node-red線上點評系統演示，

點選按鈕，即可生成評語，複製到自己的剪貼簿上。

我部署到了自己的雲伺服器上，通過公網IP，手機端也可以使用哦。

接下來，就以評價實習筆記為例，來講講這個線上評語系統是如何開發出來的吧。

Node-red簡介與安裝

什麼是Node-red

簡單來說，Node-Red是IBM公司開發的一個視覺化的工具，在內程式設計，主要是拖拽控制元件，程式碼量很小。

由於我平時工作偏向硬體，所以對這些華麗的前端技術技術不是很瞭解，但個人認為，node-red技術在搭建具備網路與圖形化功能的上位機、程式設計入門方面有很強的先天優勢，也可以拿來做物聯網資源的擴充套件，或與樹莓派搭配做閘道器功能。

關於Node-red的中文教程，網上資源並不夠多。筆者2018年在CSDN寫過一系列文章，現在來看過於粗糙，而且介面老舊，有重新做一版的想法，但是苦於俗務太多，如果各位觀眾老爺有興趣的話，請多多點贊轉發支援，您的支援是我創作的動力。

安裝Node-red

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

[基於樹莓派/ubuntu]：

安裝Dashboard

Dashboard：儀表板，用於快速建立實施資料儀表板。它的安裝方式與簡介，請參考[官方教程]：

筆者部落格中有關於儀表板的安裝與介紹，可以[移步閱讀]：

安裝Base64，非必須

Base64節點用於將物件打包/解包為base64格式，在評語系統中，用於將圖片轉為Base64格式，然後再顯示。它的安裝與介紹，請參考[官方教程].

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

編寫評語文案

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

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

例如：

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

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

介面

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

整體頁面規劃如圖：

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

不同的評價維度採用不同的分組。每個分組列寬固定，均為單位“2”，每個單位預設是48畫素。

整體滑鼠的移動軌跡為，從上到下，從左到右，老師依次點選每個評價維度的內容，到最右側生成評語，然後到最右下角複製評語。

配色網站

介面是必須考慮美觀的。公司的圖示是紅色的，儀表板預設的主題是Light，主題色是藍色（可修改）。

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

按鈕

規劃好介面與配色後，可以用按鈕來實現每個評價選項，不同評價維度有不同的分組，每個分組內從上到下，評價等級依次提升。設定4組按鈕：

結果顯示

每一次點選按鈕以後，都會發出一個數據包，而載荷正好是我們需要的字串。每組按鈕最下方，設定一個“text”節點顯示當前評價維度的內容。

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

顯示圖片

為了讓介面美觀一些，同時體現公司資訊，因此要顯示一張圖片。圖片本不是評價系統必備的，但是“如何使用Node-red顯示圖片”，中文搜尋無法快速得到答案，此處稍微提一下。

如果已經安裝了base64節點，可以按照下圖編寫測試程式。

假如我在D盤放置了名為test.jpg的檔案，點選注入節點，在http://localhost:1880/ui/地址的text頁面下，即可看到以下現象：

程式碼如下，可自行匯入觀察效果。

[{"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,"templatewww.cppcns.comScope":"local","x":1000,"y":440,"wires":[[]]},{"id":"e15b65de.f75f98","type":"base64","name":"Encode","action":"","property":"payload","x":760,"wires":[["e90b9e5.8d1a76"]]},{"id":"813f5fbc.785a7","type":"file in","name":"","filename":"D:test.jpg","format程式設計客棧":"stream","chunk":false,"sendError":false,"encoding":"none","allProps":false,"x":540,"wires":[["e15b65de.f75f98"]]},{"id":"2909d426.407b4c","type":"inject","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":370,"wires":[["813f5fbc.785a7"]]},{"id":"efcf5006.15dae","type":"ui_group","name":"test","tab":"65324def.436554","order":8,"disp":true,gwqBFS"width":"6","collapse":false},{"id":"65324def.436554","type":"ui_tab","icon":"dashboard","disabled":false,"hidden":false}]

內嵌圖片編碼

這種做法要求D盤必須有個test.jpg檔案，我最後部署在雲伺服器上，懶得在雲伺服器中的D盤放一個圖片（其實也沒有D盤），而是把圖片轉為Base64編碼，放在注入節點中。

[有些網站]能將圖片轉為Base64編碼，如下。Chrome瀏覽器也可以，具體教程請自行搜尋。

然後把獲取的Base64編碼作為注入節點的載荷即可。

函式節點編寫

按下按鈕會產生一個message，message相當於引數，傳遞給後邊的函式節點。函式節點內部申請的所有變數，都是區域性變數，在函式的呼叫結束後，區域性變數的值就被釋放了，無法保留。因此要用一種特殊的機制，來儲存某個維度的打分資訊，可以使用global，將引數設定為全域性的。詳細講解可以參考[我的部落格](https://yatao.blog.csdn.net/article/details/80751284)。

Global全域性傳遞引數

在按鈕節點後新增函式節點，用Global全域性變數保留某個打分維度的資訊。

資料拼接

設定一個按鈕，當按下以後，讀取各個打分維度的資訊，然後拼接字串

線上複製功能

至此已經實現了所有的功能，但是生成的結果複製起來比較麻煩。可以考慮增加線上複製的功能，這也是本系統最複雜的部分。

我的想法是，找一個剪貼簿的節點，向剪貼簿節點輸出文字，未果。

或者應用Node的機制，複製頁面的內容，可能比較複雜，暫未嘗試。

我幾乎可以確定，一定會用到Dashboard的Template節點，因為在此節點內可以使用程式碼實現較高定製化程度的功能。

我以clipboard與Template為關鍵字，在官方的論壇中找到了這麼一個[帖子]，解決了問題

稍加修改，程式碼如下

第13行，將輸入的內容設定為了載荷，

第26行，通過輸入資料的ID獲取了內容，

第29行，複製到剪貼簿。

第30行，用彈窗顯示被複制的文字，我把彈窗關掉了。

完整程式，來個合照。

沒錯，這是程式設計介面，只有“函式”節點“Template”節點內，編寫少量程式碼，其它的節點都是拖拽程式設計，是不是很省心呢

外網使用

負責教務的小姐姐說，不會安裝Node-red，能不能不安裝，遠端操作？

Node-red介面的預設地址是本地IP的1880埠，如果進行內網穿透，或者擁有公網IP，就可以通過公網訪問。

在618的時候，我花了60塊錢買了一年的華為雲伺服器，在雲伺服器上部署了Node-red，然後允許訪問這個1880埠，就可以直接通過IP來使用Node-red的評語系統了。

之前演示的手機訪問，用的就是公網哦。

線上評語系統原始碼：

連結: https://pan.baidu.com/s/1iPV958WLe7nwW6-jGtOI9A?pwd=hjcx
提取碼: hjcx

到此這篇關於基於Node-red的線上評語系統(視覺化程式設計,公網訪問)的文章就介紹到這了,更多相關Node-red線上評語內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！