最近給高校做了實(shí)訓(xùn)，要寫(xiě)300多份評(píng)語(yǔ)。評(píng)語(yǔ)稍微有點(diǎn)形式主義，且實(shí)在是有點(diǎn)多，而且……我懶。好吧，我承認(rèn)了。

然而，我并沒(méi)有找到合適的評(píng)語(yǔ)系統(tǒng)。搜到了AA班級(jí)助手，只有小學(xué)和中學(xué)的評(píng)語(yǔ)庫(kù)，不適合大學(xué)生用。

上CSDN斥巨資下載幾個(gè)評(píng)語(yǔ)軟件，沒(méi)有一個(gè)好用的，要么是課后作業(yè)級(jí)別的練習(xí)軟件，要么是重復(fù)的，且沒(méi)有一個(gè)能夠支持自定義語(yǔ)句。話(huà)說(shuō)CSDN現(xiàn)在真有點(diǎn)垃圾堆的意思。

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

既然別人的工具用的不順手，那就自己寫(xiě)吧，沒(méi)辦法，有技術(shù)就是可以這么為所欲為。

全網(wǎng)第一個(gè)基于Node-red的在線(xiàn)評(píng)語(yǔ)系統(tǒng)，就這樣誕生了。

Node-red在線(xiàn)點(diǎn)評(píng)系統(tǒng)演示，

點(diǎn)擊按鈕，即可生成評(píng)語(yǔ)，復(fù)制到自己的剪貼板上。

我部署到了自己的云服務(wù)器上，通過(guò)公網(wǎng)IP，手機(jī)端也可以使用哦。

接下來(lái)，就以評(píng)價(jià)實(shí)習(xí)筆記為例，來(lái)講講這個(gè)在線(xiàn)評(píng)語(yǔ)系統(tǒng)是如何開(kāi)發(fā)出來(lái)的吧。

Node-red簡(jiǎn)介與安裝

什么是Node-red

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

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

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

安裝Node-red

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

[基于樹(shù)莓派/ubuntu]：

安裝Dashboard

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

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

安裝Base64，非必須

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

這一步是非必須的，因?yàn)槿绻麍D片是固定的，可以手動(dòng)解碼，然后放置在注入節(jié)點(diǎn)中，以避免圖片依賴(lài)本地路徑，造成部署不方便。后續(xù)有詳細(xì)解釋。

編寫(xiě)評(píng)語(yǔ)文案

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

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

例如：

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

寫(xiě)評(píng)語(yǔ)真的是搜腸刮肚，黔驢技窮，一滴個(gè)詞都沒(méi)有了。

界面

甭管功能怎么樣，界面一定要好看。沒(méi)辦法，這就是個(gè)看臉的世界。

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

在一個(gè)頁(yè)面中，進(jìn)行手冊(cè)的點(diǎn)評(píng)。

不同的評(píng)價(jià)維度采用不同的分組。每個(gè)分組列寬固定，均為單位“2”，每個(gè)單位默認(rèn)是48像素。

整體鼠標(biāo)的移動(dòng)軌跡為，從上到下，從左到右，老師依次點(diǎn)擊每個(gè)評(píng)價(jià)維度的內(nèi)容，到最右側(cè)生成評(píng)語(yǔ)，然后到最右下角復(fù)制評(píng)語(yǔ)。

配色網(wǎng)站

界面是必須考慮美觀(guān)的。公司的圖標(biāo)是紅色的，儀表板默認(rèn)的主題是Light，主題色是藍(lán)色（可修改）。

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

按鈕

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

結(jié)果顯示

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

在最右側(cè)，“生成”分組下，也是用一個(gè)“text”節(jié)點(diǎn)來(lái)顯示完整的評(píng)語(yǔ)。

顯示圖片

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

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

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

代碼如下，可自行導(dǎo)入觀(guā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盤(pán)必須有個(gè)test.jpg文件，我最后部署在云服務(wù)器上，懶得在云服務(wù)器中的D盤(pán)放一個(gè)圖片（其實(shí)也沒(méi)有D盤(pán)），而是把圖片轉(zhuǎn)為Base64編碼，放在注入節(jié)點(diǎn)中。

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

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

函數(shù)節(jié)點(diǎn)編寫(xiě)

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

Global全局傳遞參數(shù)

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

數(shù)據(jù)拼接

設(shè)置一個(gè)按鈕，當(dāng)按下以后，讀取各個(gè)打分維度的信息，然后拼接字符串

在線(xiàn)復(fù)制功能

至此已經(jīng)實(shí)現(xiàn)了所有的功能，但是生成的結(jié)果復(fù)制起來(lái)比較麻煩。可以考慮增加在線(xiàn)復(fù)制的功能，這也是本系統(tǒng)最復(fù)雜的部分。

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

或者應(yīng)用Nodejs的機(jī)制，復(fù)制頁(yè)面的內(nèi)容，可能比較復(fù)雜，暫未嘗試。

我?guī)缀蹩梢源_定，一定會(huì)用到Dashboard的Template節(jié)點(diǎn)，因?yàn)樵诖斯?jié)點(diǎn)內(nèi)可以使用代碼實(shí)現(xiàn)較高定制化程度的功能。

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

稍加修改，代碼如下

第13行，將輸入的內(nèi)容設(shè)置為了載荷，

第26行，通過(guò)輸入數(shù)據(jù)的ID獲取了內(nèi)容，

第29行，復(fù)制到剪貼板。

第30行，用彈窗顯示被復(fù)制的文本，我把彈窗關(guān)掉了。

完整程序，來(lái)個(gè)合照。

沒(méi)錯(cuò)，這是編程界面，只有“函數(shù)”節(jié)點(diǎn)“Template”節(jié)點(diǎn)內(nèi)，編寫(xiě)少量代碼，其它的節(jié)點(diǎn)都是拖拽編程，是不是很省心呢

外網(wǎng)使用

負(fù)責(zé)教務(wù)的小姐姐說(shuō)，不會(huì)安裝Node-red，能不能不安裝，遠(yuǎn)程操作？

Node-red界面的默認(rèn)地址是本地IP的1880端口，如果進(jìn)行內(nèi)網(wǎng)穿透，或者擁有公網(wǎng)IP，就可以通過(guò)公網(wǎng)訪(fǎng)問(wèn)。

在618的時(shí)候，我花了60塊錢(qián)買(mǎi)了一年的華為云服務(wù)器，在云服務(wù)器上部署了Node-red，然后允許訪(fǎng)問(wèn)這個(gè)1880端口，就可以直接通過(guò)IP來(lái)使用Node-red的評(píng)語(yǔ)系統(tǒng)了。

之前演示的手機(jī)訪(fǎng)問(wèn)，用的就是公網(wǎng)哦。

在線(xiàn)評(píng)語(yǔ)系統(tǒng)源碼：

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

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

最新評(píng)論