Node-Red-访客、操作员和管理员登录

1.节点管理

要实现Node-Red识别图片内容，在这里我们需要下载安装有控件：node-red-dashboard。

1. 首先在左上角点击设置，并找到节点管理 ；
2. 在节点管理中点击安装；
3. 在安装界面的查询窗口输入node-red-dashboard控件，查询后选择下载，等待下载完成；

2.案例介绍

本案例主要实现的功能包含有模式选择及输入密码、界面切换、修改密码：在界面可选择访客、操作员、管理员三种模式，输入对应的密码即可跳转对应的操作界面，在管理员界面中可对三种模式进行密码修改，并能使用新密码重新登录。

1.界面切换

界面切换主要使用了ui control 节点，从节点的帮助说明中可以查看到对msg.payload俺找如下规格赋值即可实现Tab、Group的跳转。

举个例子，在我的访客界面有一个text节点显示了一句话，那这个text节点被窝分配的Tab名称为登录系统，Group名称为visitor，当我们需要显示访客界面时，可以使用function节点对msg.payload进行赋值：（其他group仅供参考）

 msg.payload = {
    "group": {
        "hide": [
            "登录系统_admin",
            "登录系统_operator",
            "登录系统_signin"
        ],
        "show": [
            "登录系统_visitor"
        ]
        }

2.模式选择及登录

在这里最最最主要的就是学会使用全局变量。
下面我们来说一下使用到的节点包含有dropdown、text input 、button、change、notification。

• dropdown节点
  dropdown节点就是用来做下拉菜单使用的，首先是Group的命名，名称一定要和 ui control节点使用的一致，Label就是在UI界面横线前显示的提示内容，Placeholder是程序刚执行时还未选中任何Options选项时显示的内容，Options就是我们的重点啦，包含有变量名和对应的标签名，通俗来说，我们在UI界面中只能看到访客、操作员、管理员这一列，当我们选中了访客，那msg.payload中传递的内容就为visitor。
  

• text input
  使用text input节点作为密码的输入，在节点的配置时我们会看到有Mode这个选项，在它的下拉菜单中有很多种模式，Password就是用来显示密文密码的。
  

• change
  下面就是全局变量的保存啦，change节点就是能让我们少些一点点代码而且，可以直接将msg.payload的内容转移到全局变量"pwd"中，等于在function节点中的global.set(“pwd”,msg.payload)。当然change节点的优势在于它可以设定、修改、删除、转移，也可以增加多条规则。
  

• button节点与function节点
  button节点就是用来实现登录的，在button节点后接一个function节点就该对用户和密码进行判断了。

//判断用户名和密码，确认登录信息
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;

那在这里返回值可以看出来我们登录的模式是那种，然后就该在登录成功时切换界面了。
在本案例里一共有四个Group，分别显示登录界面、访客界面、操作员界面、管理员界面，当隐藏另外3个界面只显示其中一个界面时可达到视觉上的界面切换。

if( msg.payload === "admin")
    msg.payload = {
    "group": {
        "hide": [
            "登录系统_visitor",
            "登录系统_operator",
            "登录系统_signin"
        ],
        "show": [
            "登录系统_admin"
        ]
        }
    }
else if( msg.payload === "visitor")
    msg.payload = {
    "group": {
        
        "hide": [
            "登录系统_admin",
            "登录系统_operator",
            "登录系统_signin"
        ],
        "show": [
            "登录系统_visitor"
        ]
        }
    }
else if( msg.payload === "operator")
    msg.payload = {
    "group": {
        
        "hide": [
            "登录系统_admin",
            "登录系统_signin",
            "登录系统_visitor"
        ],
        "show": [
            "登录系统_operator"
        ]
        }
    }
else 
    var msg1 = {payload : "用户或密码错误"}
return [msg,msg1];

• notification
  notification节点就是用来弹窗提示用户或密码错误的，它除了包含有 上左、上右、下左、下右四个方向的提示以外，还有弹窗和可以输入内容的弹窗。Default action Label为必填，填写内容为msg.payload的返回值，Secondary action Label为选填，填写内容也会传递给msg.payload。
  

3.修改密码

管理员界面的设计其实和登录界面相同，过就是又多了一个text input 节点来区分新密码和旧密码，重点还是在function节点中使用全局变量获取用户及密码，并做判断。

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;

全部代码展示文章来源地址https://www.toymoban.com/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            \"登录系统_visitor\",\n            \"登录系统_operator\",\n            \"登录系统_signin\"\n        ],\n        \"show\": [\n            \"登录系统_admin\"\n        ]\n        }\n    }\nelse if( msg.payload === \"visitor\")\n    msg.payload = {\n    \"group\": {\n        \n        \"hide\": [\n            \"登录系统_admin\",\n            \"登录系统_operator\",\n            \"登录系统_signin\"\n        ],\n        \"show\": [\n            \"登录系统_visitor\"\n        ]\n        }\n    }\nelse if( msg.payload === \"operator\")\n    msg.payload = {\n    \"group\": {\n        \n        \"hide\": [\n            \"登录系统_admin\",\n            \"登录系统_signin\",\n            \"登录系统_visitor\"\n        ],\n        \"show\": [\n            \"登录系统_operator\"\n        ]\n        }\n    }\nelse \n    var msg1 = {payload : \"用户或密码错误\"}\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":"//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            \"登录系统_visitor\",\n            \"登录系统_operator\",\n            \"登录系统_admin\"\n        ],\n        \"show\": [\n            \"登录系统_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":"登录系统","icon":"dashboard","order":5,"disabled":false,"hidden":false}]

到了这里，关于Node-Red-访客、操作员和管理员登录的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！