1.節(jié)點(diǎn)管理

要實(shí)現(xiàn)Node-Red識(shí)別圖片內(nèi)容，在這里我們需要下載安裝有控件：node-red-dashboard。

1. 首先在左上角點(diǎn)擊設(shè)置，并找到節(jié)點(diǎn)管理 ；
2. 在節(jié)點(diǎn)管理中點(diǎn)擊安裝；
3. 在安裝界面的查詢窗口輸入node-red-dashboard控件，查詢后選擇下載，等待下載完成；

2.案例介紹

本案例主要實(shí)現(xiàn)的功能包含有模式選擇及輸入密碼、界面切換、修改密碼：在界面可選擇訪客、操作員、管理員三種模式，輸入對(duì)應(yīng)的密碼即可跳轉(zhuǎn)對(duì)應(yīng)的操作界面，在管理員界面中可對(duì)三種模式進(jìn)行密碼修改，并能使用新密碼重新登錄。

1.界面切換

界面切換主要使用了ui control 節(jié)點(diǎn)，從節(jié)點(diǎn)的幫助說明中可以查看到對(duì)msg.payload俺找如下規(guī)格賦值即可實(shí)現(xiàn)Tab、Group的跳轉(zhuǎn)。

舉個(gè)例子，在我的訪客界面有一個(gè)text節(jié)點(diǎn)顯示了一句話，那這個(gè)text節(jié)點(diǎn)被窩分配的Tab名稱為登錄系統(tǒng)，Group名稱為visitor，當(dāng)我們需要顯示訪客界面時(shí)，可以使用function節(jié)點(diǎn)對(duì)msg.payload進(jìn)行賦值：（其他group僅供參考）

 msg.payload = {
    "group": {
        "hide": [
            "登錄系統(tǒng)_admin",
            "登錄系統(tǒng)_operator",
            "登錄系統(tǒng)_signin"
        ],
        "show": [
            "登錄系統(tǒng)_visitor"
        ]
        }

2.模式選擇及登錄

在這里最最最主要的就是學(xué)會(huì)使用全局變量。
下面我們來說一下使用到的節(jié)點(diǎn)包含有dropdown、text input 、button、change、notification。

• dropdown節(jié)點(diǎn)
  dropdown節(jié)點(diǎn)就是用來做下拉菜單使用的，首先是Group的命名，名稱一定要和 ui control節(jié)點(diǎn)使用的一致，Label就是在UI界面橫線前顯示的提示內(nèi)容，Placeholder是程序剛執(zhí)行時(shí)還未選中任何Options選項(xiàng)時(shí)顯示的內(nèi)容，Options就是我們的重點(diǎn)啦，包含有變量名和對(duì)應(yīng)的標(biāo)簽名，通俗來說，我們在UI界面中只能看到訪客、操作員、管理員這一列，當(dāng)我們選中了訪客，那msg.payload中傳遞的內(nèi)容就為visitor。
  

• text input
  使用text input節(jié)點(diǎn)作為密碼的輸入，在節(jié)點(diǎn)的配置時(shí)我們會(huì)看到有Mode這個(gè)選項(xiàng)，在它的下拉菜單中有很多種模式，Password就是用來顯示密文密碼的。
  

• change
  下面就是全局變量的保存啦，change節(jié)點(diǎn)就是能讓我們少些一點(diǎn)點(diǎn)代碼而且，可以直接將msg.payload的內(nèi)容轉(zhuǎn)移到全局變量"pwd"中，等于在function節(jié)點(diǎn)中的global.set(“pwd”,msg.payload)。當(dāng)然change節(jié)點(diǎn)的優(yōu)勢在于它可以設(shè)定、修改、刪除、轉(zhuǎn)移，也可以增加多條規(guī)則。
  

• button節(jié)點(diǎn)與function節(jié)點(diǎn)
  button節(jié)點(diǎn)就是用來實(shí)現(xiàn)登錄的，在button節(jié)點(diǎn)后接一個(gè)function節(jié)點(diǎn)就該對(duì)用戶和密碼進(jìn)行判斷了。

//判斷用戶名和密碼，確認(rèn)登錄信息
var pwd = global.get('pwd');
var jur = global.get('jur');
var apwd = global.get('apwd')||"aaa";
var vpwd = global.get('vpwd')||"vvv";
var opwd = global.get('opwd')||"ooo";

if((pwd ===apwd)&&(jur==="admin"))
    {msg.payload = "admin";}
else if((pwd ===vpwd)&&(jur==="visitor"))
    {msg.payload = "visitor";}
else if((pwd ===opwd)&&(jur==="operator"))
    {msg.payload = "operator";}   
else 
    msg.payload = "nosign"
return msg;

那在這里返回值可以看出來我們登錄的模式是那種，然后就該在登錄成功時(shí)切換界面了。
在本案例里一共有四個(gè)Group，分別顯示登錄界面、訪客界面、操作員界面、管理員界面，當(dāng)隱藏另外3個(gè)界面只顯示其中一個(gè)界面時(shí)可達(dá)到視覺上的界面切換。

if( msg.payload === "admin")
    msg.payload = {
    "group": {
        "hide": [
            "登錄系統(tǒng)_visitor",
            "登錄系統(tǒng)_operator",
            "登錄系統(tǒng)_signin"
        ],
        "show": [
            "登錄系統(tǒng)_admin"
        ]
        }
    }
else if( msg.payload === "visitor")
    msg.payload = {
    "group": {
        
        "hide": [
            "登錄系統(tǒng)_admin",
            "登錄系統(tǒng)_operator",
            "登錄系統(tǒng)_signin"
        ],
        "show": [
            "登錄系統(tǒng)_visitor"
        ]
        }
    }
else if( msg.payload === "operator")
    msg.payload = {
    "group": {
        
        "hide": [
            "登錄系統(tǒng)_admin",
            "登錄系統(tǒng)_signin",
            "登錄系統(tǒng)_visitor"
        ],
        "show": [
            "登錄系統(tǒng)_operator"
        ]
        }
    }
else 
    var msg1 = {payload : "用戶或密碼錯(cuò)誤"}
return [msg,msg1];

• notification
  notification節(jié)點(diǎn)就是用來彈窗提示用戶或密碼錯(cuò)誤的，它除了包含有 上左、上右、下左、下右四個(gè)方向的提示以外，還有彈窗和可以輸入內(nèi)容的彈窗。Default action Label為必填，填寫內(nèi)容為msg.payload的返回值，Secondary action Label為選填，填寫內(nèi)容也會(huì)傳遞給msg.payload。
  

3.修改密碼

管理員界面的設(shè)計(jì)其實(shí)和登錄界面相同，過就是又多了一個(gè)text input 節(jié)點(diǎn)來區(qū)分新密碼和舊密碼，重點(diǎn)還是在function節(jié)點(diǎn)中使用全局變量獲取用戶及密碼，并做判斷。

var apwd = global.get('apwd')||"aaa";
var vpwd = global.get('vpwd')||"vvv";
var opwd = global.get('opwd')||"ooo";
var ajur = global.get('ajur');
var oldpwd = global.get('oldpwd');
var newpwd = global.get('newpwd');
var m1 = "新密碼與舊密碼一致，請重新輸入！";
var m2 = "密碼修改成功";
if((ajur == "admin")&&(oldpwd == apwd))
{
    if(newpwd == apwd)
        msg.payload = m1;
    else
    {
        global.set('apwd',newpwd);  
        msg.payload =m2
    }
}
else if((ajur== "visitor")&&(oldpwd == vpwd))
{
    if(newpwd == vpwd)
        msg.payload = m1
    else
    {
        global.set('vpwd',newpwd);  
        msg.payload = m2
    }
}
else if((ajur == "operator")&&(oldpwd == opwd))
{
    if(newpwd == opwd)
        msg.payload = m1
    else
    {
        msg.payload = m2
        global.set('opwd',newpwd);  
    }
}
else   msg.payload = "密碼不正確，請重新輸入！"
return msg;

全部代碼展示文章來源地址http://www.zghlxwxcb.cn/news/detail-403959.html

[{"id":"e0eb24f6bda9dc5e","type":"tab","label":"用戶登錄","disabled":false,"info":"","env":[]},{"id":"b5276c309352769a","type":"ui_dropdown","z":"e0eb24f6bda9dc5e","name":"","label":"用戶","tooltip":"","place":"","group":"9c415ed962b1d4b0","order":3,"width":6,"height":1,"passthru":true,"multiple":false,"options":[{"label":"訪客","value":"visitor","type":"str"},{"label":"操作員","value":"operator","type":"str"},{"label":"管理員","value":"admin","type":"str"}],"payload":"","topic":"jur","topicType":"str","className":"","x":330,"y":160,"wires":[["aefaf2147bd0f49d"]]},{"id":"a4648e3cc52af777","type":"ui_text_input","z":"e0eb24f6bda9dc5e","name":"","label":"密碼：","tooltip":"","group":"9c415ed962b1d4b0","order":5,"width":6,"height":1,"passthru":true,"mode":"password","delay":300,"topic":"pwd","sendOnBlur":true,"className":"","topicType":"str","x":330,"y":220,"wires":[["1e06ee513842087a"]]},{"id":"5238e84bf30b60bb","type":"ui_button","z":"e0eb24f6bda9dc5e","name":"","group":"9c415ed962b1d4b0","order":7,"width":6,"height":1,"passthru":false,"label":"登錄","tooltip":"","color":"","bgcolor":"","className":"","icon":"","payload":"OK","payloadType":"str","topic":"topic","topicType":"msg","x":330,"y":340,"wires":[["39df9e3ff4fca603","895de1ef5072762f"]]},{"id":"0bb8d3d32a8b2f12","type":"debug","z":"e0eb24f6bda9dc5e","name":"","active":false,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","statusVal":"","statusType":"auto","x":790,"y":380,"wires":[]},{"id":"39df9e3ff4fca603","type":"function","z":"e0eb24f6bda9dc5e","name":"判斷用戶和密碼 確定登錄信息","func":"var pwd = global.get('pwd');\nvar jur = global.get('jur');\nvar apwd = global.get('apwd')||\"aaa\";\nvar vpwd = global.get('vpwd')||\"vvv\";\nvar opwd = global.get('opwd')||\"ooo\";\n\nif((pwd ===apwd)&&(jur===\"admin\"))\n    {msg.payload = \"admin\";}\nelse if((pwd ===vpwd)&&(jur===\"visitor\"))\n    {msg.payload = \"visitor\";}\nelse if((pwd ===opwd)&&(jur===\"operator\"))\n    {msg.payload = \"operator\";}   \nelse \n    msg.payload = \"nosign\"\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":570,"y":340,"wires":[["0bb8d3d32a8b2f12","6805958aaea24b7e"]]},{"id":"82620c25da61de55","type":"ui_ui_control","z":"e0eb24f6bda9dc5e","name":"","events":"all","x":1040,"y":340,"wires":[[]]},{"id":"6805958aaea24b7e","type":"function","z":"e0eb24f6bda9dc5e","name":"登錄后切換界面","func":"\nif( msg.payload === \"admin\")\n    msg.payload = {\n    \"group\": {\n        \n        \"hide\": [\n            \"登錄系統(tǒng)_visitor\",\n            \"登錄系統(tǒng)_operator\",\n            \"登錄系統(tǒng)_signin\"\n        ],\n        \"show\": [\n            \"登錄系統(tǒng)_admin\"\n        ]\n        }\n    }\nelse if( msg.payload === \"visitor\")\n    msg.payload = {\n    \"group\": {\n        \n        \"hide\": [\n            \"登錄系統(tǒng)_admin\",\n            \"登錄系統(tǒng)_operator\",\n            \"登錄系統(tǒng)_signin\"\n        ],\n        \"show\": [\n            \"登錄系統(tǒng)_visitor\"\n        ]\n        }\n    }\nelse if( msg.payload === \"operator\")\n    msg.payload = {\n    \"group\": {\n        \n        \"hide\": [\n            \"登錄系統(tǒng)_admin\",\n            \"登錄系統(tǒng)_signin\",\n            \"登錄系統(tǒng)_visitor\"\n        ],\n        \"show\": [\n            \"登錄系統(tǒng)_operator\"\n        ]\n        }\n    }\nelse \n    var msg1 = {payload : \"用戶或密碼錯(cuò)誤\"}\nreturn [msg,msg1];","outputs":2,"noerr":0,"initialize":"","finalize":"","libs":[],"x":820,"y":340,"wires":[["82620c25da61de55"],["82e214904e8275a8"]]},{"id":"895de1ef5072762f","type":"function","z":"e0eb24f6bda9dc5e","name":"密碼清空","func":"if(msg.payload === \"OK\")\n    msg.payload = '';\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":340,"y":280,"wires":[["a4648e3cc52af777"]]},{"id":"028f887a4cbf1fbe","type":"ui_dropdown","z":"e0eb24f6bda9dc5e","name":"","label":"用戶","tooltip":"","place":"","group":"292639834938b442","order":1,"width":0,"height":0,"passthru":true,"multiple":false,"options":[{"label":"訪客","value":"visitor","type":"str"},{"label":"操作員","value":"operator","type":"str"},{"label":"管理員","value":"admin","type":"str"}],"payload":"","topic":"jur","topicType":"str","className":"","x":450,"y":700,"wires":[["1c23520f6b8adc76"]]},{"id":"4a0b7d7baee2c88c","type":"ui_text_input","z":"e0eb24f6bda9dc5e","name":"","label":"舊密碼：","tooltip":"","group":"292639834938b442","order":3,"width":0,"height":0,"passthru":true,"mode":"text","delay":300,"topic":"topic","sendOnBlur":true,"className":"","topicType":"msg","x":460,"y":740,"wires":[["62331e021298e5a7"]]},{"id":"4dcd62ac0e6c3413","type":"ui_text_input","z":"e0eb24f6bda9dc5e","name":"","label":"新密碼：","tooltip":"","group":"292639834938b442","order":6,"width":0,"height":0,"passthru":true,"mode":"text","delay":300,"topic":"topic","sendOnBlur":true,"className":"","topicType":"msg","x":460,"y":780,"wires":[["acc48c02f199f63c"]]},{"id":"b981f26450448d71","type":"ui_button","z":"e0eb24f6bda9dc5e","name":"","group":"292639834938b442","order":7,"width":3,"height":1,"passthru":false,"label":"修改密碼","tooltip":"","color":"","bgcolor":"","className":"","icon":"","payload":" OK","payloadType":"str","topic":"topic","topicType":"msg","x":460,"y":820,"wires":[["50ad6ac47529403f","23250ecadcf138af"]]},{"id":"50ad6ac47529403f","type":"function","z":"e0eb24f6bda9dc5e","name":"","func":"var apwd = global.get('apwd')||\"aaa\";\nvar vpwd = global.get('vpwd')||\"vvv\";\nvar opwd = global.get('opwd')||\"ooo\";\nvar ajur = global.get('ajur');\nvar oldpwd = global.get('oldpwd');\nvar newpwd = global.get('newpwd');\nvar m1 = \"新密碼與舊密碼一致，請重新輸入！\";\nvar m2 = \"密碼修改成功\";\nif((ajur == \"admin\")&&(oldpwd == apwd))\n{\n    if(newpwd == apwd)\n        msg.payload = m1;\n    else\n    {\n        global.set('apwd',newpwd);  \n        msg.payload =m2\n    }\n}\nelse if((ajur== \"visitor\")&&(oldpwd == vpwd))\n{\n    if(newpwd == vpwd)\n        msg.payload = m1\n    else\n    {\n        global.set('vpwd',newpwd);  \n        msg.payload = m2\n    }\n}\nelse if((ajur == \"operator\")&&(oldpwd == opwd))\n{\n    if(newpwd == opwd)\n        msg.payload = m1\n    else\n    {\n        msg.payload = m2\n        global.set('opwd',newpwd);  \n    }\n}\nelse   msg.payload = \"密碼不正確，請重新輸入！\"\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":640,"y":820,"wires":[["b960eb4669c602af"]]},{"id":"1c23520f6b8adc76","type":"change","z":"e0eb24f6bda9dc5e","name":"","rules":[{"t":"move","p":"payload","pt":"msg","to":"ajur","tot":"global"}],"action":"","property":"","from":"","to":"","reg":false,"x":650,"y":700,"wires":[[]]},{"id":"62331e021298e5a7","type":"change","z":"e0eb24f6bda9dc5e","name":"","rules":[{"t":"move","p":"payload","pt":"msg","to":"oldpwd","tot":"global"}],"action":"","property":"","from":"","to":"","reg":false,"x":650,"y":740,"wires":[[]]},{"id":"acc48c02f199f63c","type":"change","z":"e0eb24f6bda9dc5e","name":"","rules":[{"t":"move","p":"payload","pt":"msg","to":"newpwd","tot":"global"}],"action":"","property":"","from":"","to":"","reg":false,"x":650,"y":780,"wires":[[]]},{"id":"b960eb4669c602af","type":"ui_toast","z":"e0eb24f6bda9dc5e","position":"dialog","displayTime":"3","highlight":"","sendall":true,"outputs":1,"ok":"OK","cancel":"","raw":false,"className":"","topic":"","name":"","x":900,"y":820,"wires":[[]]},{"id":"23250ecadcf138af","type":"function","z":"e0eb24f6bda9dc5e","name":"清空舊密碼和新密碼","func":"http://if(msg.payload === \"OK\")\n    msg.payload = null;\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":700,"y":860,"wires":[["4d0de7ba3facdad8"]]},{"id":"c997054b6b286cb6","type":"link in","z":"e0eb24f6bda9dc5e","name":"","links":["4d0de7ba3facdad8"],"x":335,"y":740,"wires":[["4a0b7d7baee2c88c","4dcd62ac0e6c3413"]]},{"id":"4d0de7ba3facdad8","type":"link out","z":"e0eb24f6bda9dc5e","name":"","mode":"link","links":["c997054b6b286cb6"],"x":835,"y":860,"wires":[]},{"id":"ea984ca0da207a7f","type":"ui_button","z":"e0eb24f6bda9dc5e","name":"","group":"292639834938b442","order":10,"width":3,"height":1,"passthru":false,"label":"返回","tooltip":"","color":"","bgcolor":"","className":"","icon":"","payload":"","payloadType":"str","topic":"topic","topicType":"msg","x":790,"y":200,"wires":[["6f6938940b939960"]]},{"id":"d51a708161e5f2e4","type":"ui_button","z":"e0eb24f6bda9dc5e","name":"","group":"ce5f5597c359d608","order":22,"width":2,"height":1,"passthru":false,"label":"返回","tooltip":"","color":"","bgcolor":"","className":"","icon":"","payload":"","payloadType":"str","topic":"topic","topicType":"msg","x":790,"y":240,"wires":[["6f6938940b939960"]]},{"id":"e6fbed360a975816","type":"ui_button","z":"e0eb24f6bda9dc5e","name":"","group":"40f7f98fd46f8dad","order":6,"width":0,"height":0,"passthru":false,"label":"返回","tooltip":"","color":"","bgcolor":"","className":"","icon":"","payload":"","payloadType":"str","topic":"topic","topicType":"msg","x":790,"y":280,"wires":[["6f6938940b939960"]]},{"id":"6f6938940b939960","type":"function","z":"e0eb24f6bda9dc5e","name":"返回按鈕切換界面","func":"\nmsg.payload = {\n    \"group\": {\n        \n        \"hide\": [\n            \"登錄系統(tǒng)_visitor\",\n            \"登錄系統(tǒng)_operator\",\n            \"登錄系統(tǒng)_admin\"\n        ],\n        \"show\": [\n            \"登錄系統(tǒng)_signin\"\n        ]\n        }\n    }\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":970,"y":240,"wires":[["82620c25da61de55"]]},{"id":"82e214904e8275a8","type":"ui_toast","z":"e0eb24f6bda9dc5e","position":"dialog","displayTime":"3","highlight":"","sendall":true,"outputs":1,"ok":"OK","cancel":"啊","raw":false,"className":"","topic":"","name":"","x":1050,"y":400,"wires":[["61cfb764836ae678"]]},{"id":"1e06ee513842087a","type":"change","z":"e0eb24f6bda9dc5e","name":"","rules":[{"t":"move","p":"payload","pt":"msg","to":"pwd","tot":"global"}],"action":"","property":"","from":"","to":"","reg":false,"x":550,"y":220,"wires":[[]]},{"id":"aefaf2147bd0f49d","type":"change","z":"e0eb24f6bda9dc5e","name":"","rules":[{"t":"move","p":"payload","pt":"msg","to":"jur","tot":"global"}],"action":"","property":"","from":"","to":"","reg":false,"x":550,"y":160,"wires":[[]]},{"id":"de42ac941d2d159a","type":"inject","z":"e0eb24f6bda9dc5e","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":true,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":780,"y":160,"wires":[["6f6938940b939960"]]},{"id":"8f58eaf62485a22b","type":"ui_switch","z":"e0eb24f6bda9dc5e","name":"操作員界面","label":"開門","tooltip":"","group":"40f7f98fd46f8dad","order":1,"width":0,"height":0,"passthru":true,"decouple":"false","topic":"feng","topicType":"str","style":"","onvalue":"true","onvalueType":"bool","onicon":"","oncolor":"","offvalue":"false","offvalueType":"bool","officon":"","offcolor":"","animate":false,"className":"","x":390,"y":580,"wires":[[]]},{"id":"565455f68866d650","type":"ui_text","z":"e0eb24f6bda9dc5e","group":"ce5f5597c359d608","order":12,"width":0,"height":0,"name":"","label":"訪客界面信息查看","format":"{{msg.payload}}","layout":"row-spread","className":"","x":410,"y":500,"wires":[]},{"id":"61cfb764836ae678","type":"debug","z":"e0eb24f6bda9dc5e","name":"debug 21","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","statusVal":"","statusType":"auto","x":1210,"y":420,"wires":[]},{"id":"9c415ed962b1d4b0","type":"ui_group","name":"signin","tab":"05aafc2b1c4dbf20","order":1,"disp":true,"width":"6","collapse":false,"className":""},{"id":"292639834938b442","type":"ui_group","name":"admin","tab":"05aafc2b1c4dbf20","order":2,"disp":true,"width":"6","collapse":false,"className":""},{"id":"ce5f5597c359d608","type":"ui_group","name":"visitor","tab":"05aafc2b1c4dbf20","order":3,"disp":true,"width":"13","collapse":false,"className":""},{"id":"40f7f98fd46f8dad","type":"ui_group","name":"operator","tab":"05aafc2b1c4dbf20","order":4,"disp":true,"width":"6","collapse":false,"className":""},{"id":"05aafc2b1c4dbf20","type":"ui_tab","name":"登錄系統(tǒng)","icon":"dashboard","order":5,"disabled":false,"hidden":false}]

到了這里，關(guān)于Node-Red-訪客、操作員和管理員登錄的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！