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

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

上CSDN斥巨資下載幾個評語軟件，沒有一個好用的，要么是課后作業(yè)級別的練習軟件，要么是重復的，且沒有一個能夠支持自定義語句。話說CSDN現在真有點垃圾堆的意思。

我迫切需要合適的評語系統(tǒng)

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

全網第一個基于Node-red的在線評語系統(tǒng)，就這樣誕生了。

Node-red在線點評系統(tǒng)演示，

點擊按鈕，即可生成評語，復制到自己的剪貼板上。

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

接下來，就以評價實習筆記為例，來講講這個在線評語系統(tǒng)是如何開發(fā)出來的吧。

Node-red簡介與安裝

什么是Node-red

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

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

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

安裝Node-red

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

[基于樹莓派/ubuntu]：

安裝Dashboard

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

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

安裝Base64，非必須

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

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

編寫評語文案

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

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

例如：

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

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

界面

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

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

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

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

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

配色網站

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

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

按鈕

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

結果顯示

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

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

顯示圖片

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

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

假如我在D盤放置了名為test.jpg的文件，點擊注入節(jié)點，在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,"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}]

內嵌圖片編碼

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

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

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

函數節(jié)點編寫

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

Global全局傳遞參數

在按鈕節(jié)點后添加函數節(jié)點，用Global全局變量保留某個打分維度的信息。

數據拼接

設置一個按鈕，當按下以后，讀取各個打分維度的信息，然后拼接字符串

在線復制功能

至此已經實現了所有的功能，但是生成的結果復制起來比較麻煩。可以考慮增加在線復制的功能，這也是本系統(tǒng)最復雜的部分。

我的想法是，找一個剪貼板的節(jié)點，向剪貼板節(jié)點輸出文本，未果。

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

我?guī)缀蹩梢源_定，一定會用到Dashboard的Template節(jié)點，因為在此節(jié)點內可以使用代碼實現較高定制化程度的功能。

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

稍加修改，代碼如下

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

第26行，通過輸入數據的ID獲取了內容，

第29行，復制到剪貼板。

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

完整程序，來個合照。

沒錯，這是編程界面，只有“函數”節(jié)點“Template”節(jié)點內，編寫少量代碼，其它的節(jié)點都是拖拽編程，是不是很省心呢

外網使用

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

Node-red界面的默認地址是本地IP的1880端口，如果進行內網穿透，或者擁有公網IP，就可以通過公網訪問。

在618的時候，我花了60塊錢買了一年的華為云服務器，在云服務器上部署了Node-red，然后允許訪問這個1880端口，就可以直接通過IP來使用Node-red的評語系統(tǒng)了。

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

在線評語系統(tǒng)源碼：

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

到此這篇關于基于Node-red的在線評語系統(tǒng)(可視化編程,公網訪問)的文章就介紹到這了,更多相關Node-red在線評語內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

最新評論