Jeongmin Seo

Update login

1 "use strict"; 1 "use strict";
2 //모듈 2 //모듈
3 const express = require("express"); 3 const express = require("express");
4 +const bodyParser = require("body-parser");
4 const app = express(); 5 const app = express();
5 //라우팅 6 //라우팅
6 const home = require("./src/routes/home"); 7 const home = require("./src/routes/home");
...@@ -8,6 +9,9 @@ const home = require("./src/routes/home"); ...@@ -8,6 +9,9 @@ const home = require("./src/routes/home");
8 app.set("views", "./src/views"); 9 app.set("views", "./src/views");
9 app.set("view engine", "ejs"); 10 app.set("view engine", "ejs");
10 app.use(express.static(`${__dirname}/src/public`)); 11 app.use(express.static(`${__dirname}/src/public`));
12 +app.use(bodyParser.json());
13 +//url통해 전달되는 데이터에 한글, 공백 등의 문자 오류 해결
14 +app.use(bodyParser.urlencoded({extended: true}));
11 15
12 app.use("/", home); //미들웨어 등록해주는 method 16 app.use("/", home); //미들웨어 등록해주는 method
13 17
......
1 { 1 {
2 - "requires": true, 2 + "name": "login",
3 + "version": "1.0.0",
3 "lockfileVersion": 1, 4 "lockfileVersion": 1,
5 + "requires": true,
4 "dependencies": { 6 "dependencies": {
5 "accepts": { 7 "accepts": {
6 "version": "1.3.8", 8 "version": "1.3.8",
......
...@@ -6,12 +6,13 @@ ...@@ -6,12 +6,13 @@
6 "login": "www.js" 6 "login": "www.js"
7 }, 7 },
8 "dependencies": { 8 "dependencies": {
9 + "body-parser": "^1.20.0",
9 "ejs": "^3.1.8", 10 "ejs": "^3.1.8",
10 "express": "^4.18.1" 11 "express": "^4.18.1"
11 }, 12 },
12 "devDependencies": {}, 13 "devDependencies": {},
13 "scripts": { 14 "scripts": {
14 - "start": "node ./bin/www.js", 15 + "start": "nodemon ./bin/www.js",
15 "test": "echo \"Error: no test specified\" && exit 1" 16 "test": "echo \"Error: no test specified\" && exit 1"
16 }, 17 },
17 "author": "", 18 "author": "",
......
1 +'use strict';
2 +
3 +class UserStorage {
4 + //더미데이터
5 + // # = private 변수로 은닉화
6 + static #users = {
7 + id: ["jeongmin", "jumi"],
8 + password: ["1234", "1234"],
9 + name: ["정민", "주미"],
10 + };
11 +
12 + static getUsers(...fields) {
13 + const users = this.#users;
14 + const newUsers = fields.reduce((newUsers, field) => {
15 + if (users.hasOwnProperty(field)) {
16 + newUsers[field] = users[field];
17 + }
18 + return newUsers;
19 + }, {});
20 + return newUsers;
21 + }
22 +}
23 +
24 +module.exports = UserStorage;
...\ No newline at end of file ...\ No newline at end of file
1 'use strict'; 1 'use strict';
2 2
3 -console.log("hello");
...\ No newline at end of file ...\ No newline at end of file
3 +const id = document.querySelector("#id"),
4 + password = document.querySelector("#password"),
5 + loginBtn = document.querySelector("button");
6 +
7 +loginBtn.addEventListener("click", login);
8 +
9 +function login() {
10 + const req = {
11 + id : id.value,
12 + password : password.value,
13 + };
14 +
15 + fetch("/login", {
16 + method: "POST",
17 + headers: {
18 + "Content-Type": "application/json"
19 + },
20 + body: JSON.stringify(req),
21 + })
22 + .then((res) => res.json())
23 + .then((res) => {
24 + if (res.success) {
25 + //성공하면 이동
26 + location.href = "/";
27 + } else {
28 + alert(res.msg);
29 + }
30 + })
31 + .catch((err) => {
32 + console.error("로그인 중 에러 발생");
33 + });
34 +}
...\ No newline at end of file ...\ No newline at end of file
......
1 "use strict"; 1 "use strict";
2 2
3 -const hello = (req, res) => { 3 +const UserStorage = require("../../models/UserStorage");
4 - res.render("home/index"); 4 +
5 +const output = {
6 + hello: (req, res) => {
7 + res.render("home/index");
8 + },
9 +
10 + login: (req, res) => {
11 + res.render("home/login");
12 + },
5 }; 13 };
6 14
7 -const login = (req, res) => { 15 +const process = {
8 - res.render("home/login"); 16 + login: (req, res) => {
17 + const id = req.body.id,
18 + password = req.body.password;
19 + const users = UserStorage.getUsers("id", "password");
20 + // console.log(UserStorage.getUsers("id", "password","name"));
21 + const response = {};
22 +
23 + if (users.id.includes(id)) {
24 + const idx = users.id.indexOf(id);
25 + if (users.password[idx] === password) {
26 + response.success = true;
27 + return res.json(response);
28 + }
29 + }
30 +
31 + response.success = false;
32 + response.msg = "로그인에 실패하였습니다."
33 + return res.json(response);
34 + },
9 }; 35 };
10 36
11 module.exports = { 37 module.exports = {
12 - hello, 38 + output,
13 - login, 39 + process,
14 }; 40 };
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -5,7 +5,8 @@ const router = express.Router(); ...@@ -5,7 +5,8 @@ const router = express.Router();
5 5
6 const ctrl = require("./home.ctrl"); 6 const ctrl = require("./home.ctrl");
7 7
8 -router.get("/", ctrl.hello); 8 +router.get("/", ctrl.output.hello);
9 -router.get("/login", ctrl.login); 9 +router.get("/login", ctrl.output.login);
10 +router.post("/login", ctrl.process.login);
10 11
11 module.exports = router; 12 module.exports = router;
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -4,12 +4,12 @@ ...@@ -4,12 +4,12 @@
4 <meta charset="UTF-8" /> 4 <meta charset="UTF-8" />
5 <meta http-equiv="X-UA-Compatible" content="IE=edge" /> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge" />
6 <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7 - <script src="/js/home/login.js"></script> 7 + <script src="/js/home/login.js" defer></script>
8 <title>Document</title> 8 <title>Document</title>
9 </head> 9 </head>
10 <body> 10 <body>
11 - <input type="text" placeholder="아이디" /><br /> 11 + <input id="id" type="text" placeholder="아이디" /><br />
12 - <input type="text" placeholder="비밀번호" /><br /> 12 + <input id="password" type="text" placeholder="비밀번호" /><br />
13 <button>로그인</button> 13 <button>로그인</button>
14 </body> 14 </body>
15 </html> 15 </html>
......