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

移动开发 2023-06-11 22:45:11 阅读次数: 0

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;

全部代码展示

[{
    
    "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}]

猜你喜欢

转载自blog.csdn.net/weixin_43195420/article/details/126966018
今日推荐
基于大语言模型的开源知识库问答系统 MaxKB GitHub Star 数量突破 5,000 个！
美国拟限制 AI 大模型出口中国和俄罗斯
苹果将与 OpenAI 达成协议，将 ChatGPT 应用于 iPhone
openKylin 社区生态委员会第六次会议圆满召开
阿里云正式发布通义千问 2.5
Python 3.13 发布首个 Beta：实验性自由线程模式和 JIT、改进交互式解释器
Stack Overflow 拿我的代码去训练 AI 大模型，还封了我的账号
Pop!_OS 的 COSMIC 桌面完成 App Store 上架工作
报告：Django 仍然是 74% 开发者的首选
《2024 年一季度互联网投融资运行情况》研究报告
15 年前上了“FFmpeg 耻辱柱”，今天他还得谢谢咱——腾讯QQPlayer一雪前耻？
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
周排行
BPM为企业带来的实际利益
好程序员web前端分享css常用属性缩写
Java文件下载（excel）
css样式的动态添加及显示和隐藏等零碎用法
axios全局配置以及拦截器
使用Logstash来实时同步MySQL和log日志数据到ES
C++获取当前时间（年月日、时分秒、毫秒）
Odoo产品分析 (四) -- 工具板块(11) -- 网站即时聊天(1)
Java环境配置正确，但是java、javac、java -version均返回“不是内部或外部命令，也不是可运行的程序或批处理文件”？
01 官网下载各种CentOS教程（超详细版）
每日归档
更多
2024-05-14(0)
2024-05-13(18)
2024-05-12(0)
2024-05-11(38)
2024-05-10(38)
2024-05-09(35)
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022