Node-RED에서 CSS를 사용하여 로그인 화면을 만들어 보았다.
6853 단어 node-red
소개
Node-RED로 웹 앱을 만들려고 생각해, 우선은 로그인 인증일까라고 하는 것으로 만들어 보았다.
그리고 Node-RED는 HTML과 CSS를 어떻게 쓰면 좋을지 몰랐기 때문에 그것도 해결하기 위해 만들어 보았습니다.
화면
이번은 DB나 파일은 사용하지 않고, 유저명은 admin 패스워드는 password로 해, 그것과 일치할까 하지 않는지로 화면을 갱신한다고 느낌으로 만들었습니다.
최초 액세스 시
처음 로그인 화면에 액세스했을 때의 상태입니다.
인증 오류 시
사용자 이름 또는 암호가 일치하지 않을 때의 상태입니다.
성공시
인증에 성공했을 때의 상태입니다.
소스 코드
[{"id":"e1e4140f.642ff8","type":"tab","label":"認証","disabled":false,"info":""},{"id":"e6fbc85d.8de168","type":"http in","z":"e1e4140f.642ff8","name":"","url":"list/login","method":"get","upload":false,"swaggerDoc":"","x":110,"y":100,"wires":[["b460f33.4f4451"]]},{"id":"7490cb78.28d3e4","type":"comment","z":"e1e4140f.642ff8","name":"ログイン画面","info":"","x":110,"y":60,"wires":[]},{"id":"b460f33.4f4451","type":"template","z":"e1e4140f.642ff8","name":"css.login","field":"css.login","fieldType":"msg","format":"css","syntax":"mustache","template":".login-container{\n margin-top: 5%;\n margin-bottom: 5%;\n}\n.login-form-1{\n padding: 5%;\n box-shadow: 0 5px 8px 0 rgba(0, 0, 0, 0.2), 0 9px 26px 0 rgba(0, 0, 0, 0.19);\n}\n.login-form-1 h3{\n text-align: center;\n color: #333;\n}\n.login-container form{\n padding: 10%;\n}\n.btnSubmit\n{\n width: 50%;\n border-radius: 1rem;\n padding: 1.5%;\n border: none;\n cursor: pointer;\n}\n.login-form-1 .btnSubmit{\n font-weight: 600;\n color: #fff;\n background-color: #0062cc;\n}\n.login-form-1 .ForgetPwd{\n color: #0062cc;\n font-weight: 600;\n text-decoration: none;\n}\n","output":"str","x":640,"y":100,"wires":[["6125a63e.859578"]]},{"id":"6125a63e.859578","type":"template","z":"e1e4140f.642ff8","name":"html","field":"payload","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"<link href=\"//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css\" rel=\"stylesheet\" id=\"bootstrap-css\">\n<script src=\"//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js\"></script>\n<script src=\"//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js\"></script>\n<!------ Include the above in your HEAD tag ---------->\n</html>\n <header>\n <meta http-equiv=\"Content-Type\" content=\"text/html;charset=UTF-8\" />\n <title>login</title>\n <style type=\"text/css\">{{{css.login}}}</style>\n </header>\n <body>\n <center>\n <div class=\"container login-container\">\n <div class=\"row\">\n <div class=\"col-md-6 login-form-1\">\n <h3>Login</h3>\n <form method=\"post\" action = \"./search\">\n <div class=\"form-group\">\n <input type=\"text\" name=\"user\" class=\"form-control\" placeholder=\"User *\" value=\"\" />\n </div>\n <div class=\"form-group\">\n <input type=\"password\" name=\"password\" class=\"form-control\" placeholder=\"Password *\" value=\"\" />\n </div>\n <div class=\"form-group\">\n <input type=\"submit\" class=\"btnSubmit\" value=\"Login\" />\n </div>\n <div class=\"form-group\">\n {{{payload.message}}}\n </div>\n </form>\n </div>\n </div>\n </div>\n </center>\n </body>\n</html>","output":"str","x":930,"y":100,"wires":[["8d16b9cf.5d3518"]]},{"id":"8d16b9cf.5d3518","type":"http response","z":"e1e4140f.642ff8","name":"","statusCode":"200","headers":{},"x":1120,"y":100,"wires":[]},{"id":"51a4f497.bec43c","type":"function","z":"e1e4140f.642ff8","name":"","func":"if (msg.payload.user!==\"admin\" | msg.payload.password !==\"password\" )\n{\n msg.payload.message = \"<label>ユーザーまたはパスワードが登録情報と一致しません。</label>\";\n} else {\n msg.payload.message = \"<label>ログインに成功しました。</label>\";\n}\n\nreturn msg;","outputs":1,"noerr":0,"x":330,"y":200,"wires":[["b460f33.4f4451"]]},{"id":"80685a8e.6d0b08","type":"http in","z":"e1e4140f.642ff8","name":"","url":"list/search","method":"post","upload":false,"swaggerDoc":"","x":120,"y":200,"wires":[["51a4f497.bec43c"]]},{"id":"1204f788.7e5db8","type":"comment","z":"e1e4140f.642ff8","name":"ログイン処理","info":"","x":110,"y":160,"wires":[]}]
Reference
이 문제에 관하여(Node-RED에서 CSS를 사용하여 로그인 화면을 만들어 보았다.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/sekiya-don/items/ca20cf05598475b4db86
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
이번은 DB나 파일은 사용하지 않고, 유저명은 admin 패스워드는 password로 해, 그것과 일치할까 하지 않는지로 화면을 갱신한다고 느낌으로 만들었습니다.
최초 액세스 시
처음 로그인 화면에 액세스했을 때의 상태입니다.
인증 오류 시
사용자 이름 또는 암호가 일치하지 않을 때의 상태입니다.
성공시
인증에 성공했을 때의 상태입니다.
소스 코드
[{"id":"e1e4140f.642ff8","type":"tab","label":"認証","disabled":false,"info":""},{"id":"e6fbc85d.8de168","type":"http in","z":"e1e4140f.642ff8","name":"","url":"list/login","method":"get","upload":false,"swaggerDoc":"","x":110,"y":100,"wires":[["b460f33.4f4451"]]},{"id":"7490cb78.28d3e4","type":"comment","z":"e1e4140f.642ff8","name":"ログイン画面","info":"","x":110,"y":60,"wires":[]},{"id":"b460f33.4f4451","type":"template","z":"e1e4140f.642ff8","name":"css.login","field":"css.login","fieldType":"msg","format":"css","syntax":"mustache","template":".login-container{\n margin-top: 5%;\n margin-bottom: 5%;\n}\n.login-form-1{\n padding: 5%;\n box-shadow: 0 5px 8px 0 rgba(0, 0, 0, 0.2), 0 9px 26px 0 rgba(0, 0, 0, 0.19);\n}\n.login-form-1 h3{\n text-align: center;\n color: #333;\n}\n.login-container form{\n padding: 10%;\n}\n.btnSubmit\n{\n width: 50%;\n border-radius: 1rem;\n padding: 1.5%;\n border: none;\n cursor: pointer;\n}\n.login-form-1 .btnSubmit{\n font-weight: 600;\n color: #fff;\n background-color: #0062cc;\n}\n.login-form-1 .ForgetPwd{\n color: #0062cc;\n font-weight: 600;\n text-decoration: none;\n}\n","output":"str","x":640,"y":100,"wires":[["6125a63e.859578"]]},{"id":"6125a63e.859578","type":"template","z":"e1e4140f.642ff8","name":"html","field":"payload","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"<link href=\"//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css\" rel=\"stylesheet\" id=\"bootstrap-css\">\n<script src=\"//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js\"></script>\n<script src=\"//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js\"></script>\n<!------ Include the above in your HEAD tag ---------->\n</html>\n <header>\n <meta http-equiv=\"Content-Type\" content=\"text/html;charset=UTF-8\" />\n <title>login</title>\n <style type=\"text/css\">{{{css.login}}}</style>\n </header>\n <body>\n <center>\n <div class=\"container login-container\">\n <div class=\"row\">\n <div class=\"col-md-6 login-form-1\">\n <h3>Login</h3>\n <form method=\"post\" action = \"./search\">\n <div class=\"form-group\">\n <input type=\"text\" name=\"user\" class=\"form-control\" placeholder=\"User *\" value=\"\" />\n </div>\n <div class=\"form-group\">\n <input type=\"password\" name=\"password\" class=\"form-control\" placeholder=\"Password *\" value=\"\" />\n </div>\n <div class=\"form-group\">\n <input type=\"submit\" class=\"btnSubmit\" value=\"Login\" />\n </div>\n <div class=\"form-group\">\n {{{payload.message}}}\n </div>\n </form>\n </div>\n </div>\n </div>\n </center>\n </body>\n</html>","output":"str","x":930,"y":100,"wires":[["8d16b9cf.5d3518"]]},{"id":"8d16b9cf.5d3518","type":"http response","z":"e1e4140f.642ff8","name":"","statusCode":"200","headers":{},"x":1120,"y":100,"wires":[]},{"id":"51a4f497.bec43c","type":"function","z":"e1e4140f.642ff8","name":"","func":"if (msg.payload.user!==\"admin\" | msg.payload.password !==\"password\" )\n{\n msg.payload.message = \"<label>ユーザーまたはパスワードが登録情報と一致しません。</label>\";\n} else {\n msg.payload.message = \"<label>ログインに成功しました。</label>\";\n}\n\nreturn msg;","outputs":1,"noerr":0,"x":330,"y":200,"wires":[["b460f33.4f4451"]]},{"id":"80685a8e.6d0b08","type":"http in","z":"e1e4140f.642ff8","name":"","url":"list/search","method":"post","upload":false,"swaggerDoc":"","x":120,"y":200,"wires":[["51a4f497.bec43c"]]},{"id":"1204f788.7e5db8","type":"comment","z":"e1e4140f.642ff8","name":"ログイン処理","info":"","x":110,"y":160,"wires":[]}]
Reference
이 문제에 관하여(Node-RED에서 CSS를 사용하여 로그인 화면을 만들어 보았다.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/sekiya-don/items/ca20cf05598475b4db86
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
[{"id":"e1e4140f.642ff8","type":"tab","label":"認証","disabled":false,"info":""},{"id":"e6fbc85d.8de168","type":"http in","z":"e1e4140f.642ff8","name":"","url":"list/login","method":"get","upload":false,"swaggerDoc":"","x":110,"y":100,"wires":[["b460f33.4f4451"]]},{"id":"7490cb78.28d3e4","type":"comment","z":"e1e4140f.642ff8","name":"ログイン画面","info":"","x":110,"y":60,"wires":[]},{"id":"b460f33.4f4451","type":"template","z":"e1e4140f.642ff8","name":"css.login","field":"css.login","fieldType":"msg","format":"css","syntax":"mustache","template":".login-container{\n margin-top: 5%;\n margin-bottom: 5%;\n}\n.login-form-1{\n padding: 5%;\n box-shadow: 0 5px 8px 0 rgba(0, 0, 0, 0.2), 0 9px 26px 0 rgba(0, 0, 0, 0.19);\n}\n.login-form-1 h3{\n text-align: center;\n color: #333;\n}\n.login-container form{\n padding: 10%;\n}\n.btnSubmit\n{\n width: 50%;\n border-radius: 1rem;\n padding: 1.5%;\n border: none;\n cursor: pointer;\n}\n.login-form-1 .btnSubmit{\n font-weight: 600;\n color: #fff;\n background-color: #0062cc;\n}\n.login-form-1 .ForgetPwd{\n color: #0062cc;\n font-weight: 600;\n text-decoration: none;\n}\n","output":"str","x":640,"y":100,"wires":[["6125a63e.859578"]]},{"id":"6125a63e.859578","type":"template","z":"e1e4140f.642ff8","name":"html","field":"payload","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"<link href=\"//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css\" rel=\"stylesheet\" id=\"bootstrap-css\">\n<script src=\"//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js\"></script>\n<script src=\"//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js\"></script>\n<!------ Include the above in your HEAD tag ---------->\n</html>\n <header>\n <meta http-equiv=\"Content-Type\" content=\"text/html;charset=UTF-8\" />\n <title>login</title>\n <style type=\"text/css\">{{{css.login}}}</style>\n </header>\n <body>\n <center>\n <div class=\"container login-container\">\n <div class=\"row\">\n <div class=\"col-md-6 login-form-1\">\n <h3>Login</h3>\n <form method=\"post\" action = \"./search\">\n <div class=\"form-group\">\n <input type=\"text\" name=\"user\" class=\"form-control\" placeholder=\"User *\" value=\"\" />\n </div>\n <div class=\"form-group\">\n <input type=\"password\" name=\"password\" class=\"form-control\" placeholder=\"Password *\" value=\"\" />\n </div>\n <div class=\"form-group\">\n <input type=\"submit\" class=\"btnSubmit\" value=\"Login\" />\n </div>\n <div class=\"form-group\">\n {{{payload.message}}}\n </div>\n </form>\n </div>\n </div>\n </div>\n </center>\n </body>\n</html>","output":"str","x":930,"y":100,"wires":[["8d16b9cf.5d3518"]]},{"id":"8d16b9cf.5d3518","type":"http response","z":"e1e4140f.642ff8","name":"","statusCode":"200","headers":{},"x":1120,"y":100,"wires":[]},{"id":"51a4f497.bec43c","type":"function","z":"e1e4140f.642ff8","name":"","func":"if (msg.payload.user!==\"admin\" | msg.payload.password !==\"password\" )\n{\n msg.payload.message = \"<label>ユーザーまたはパスワードが登録情報と一致しません。</label>\";\n} else {\n msg.payload.message = \"<label>ログインに成功しました。</label>\";\n}\n\nreturn msg;","outputs":1,"noerr":0,"x":330,"y":200,"wires":[["b460f33.4f4451"]]},{"id":"80685a8e.6d0b08","type":"http in","z":"e1e4140f.642ff8","name":"","url":"list/search","method":"post","upload":false,"swaggerDoc":"","x":120,"y":200,"wires":[["51a4f497.bec43c"]]},{"id":"1204f788.7e5db8","type":"comment","z":"e1e4140f.642ff8","name":"ログイン処理","info":"","x":110,"y":160,"wires":[]}]
Reference
이 문제에 관하여(Node-RED에서 CSS를 사용하여 로그인 화면을 만들어 보았다.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/sekiya-don/items/ca20cf05598475b4db86텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
