Showing
8 changed files
with
103 additions
and
14 deletions
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 | ... | ... |
... | @@ -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": "", | ... | ... |
jeongmin/login/app/src/models/UserStorage.js
0 → 100644
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> | ... | ... |
-
Please register or login to post a comment