dukDukz

21.04.20 login - Add user 페이지 본문

웹 개발/Node JS

21.04.20 login - Add user 페이지

헤일리_HJ 2021. 4. 20. 17:04

코드

더보기

index.js

const express = require('express');
const nunjucks = require('nunjucks');
const bodyParser = require('body-parser');

const app = express();


nunjucks.configure('views',{
    express:app,
    autoescape:true,
});
app.set('view engine', 'html');

app.use(bodyParser.urlencoded({extended:false}));


app.get('/',(req,res)=>{
    res.render('index.html',{
        id : req.query.id,
        pw : req.query.pw
    });
});

app.get('/addUser.html',(req,res)=>{
    
    res.render('addUser.html',{
        id : req.query.id,
        pw : req.query.pw,
        name : req.query.name,
        age : req.query.age
    });
});

app.post('/',(req,res)=>{
    console.log(req.body);
    //res.send('post?');
});

app.post('/addUser.html',(req,res)=>{
    console.log(req.body);
});


app.listen(3000,()=>{
    console.log('server is opened');
});

 

 

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>login</title>
</head>
<body>
    <h1>login</h1>
    <form method="POST" action="http://localhost:3000">
        아이디 : <input type="text" name="id"><br>
        패스워드 : <input type="password" name="pw"><br>
        <input type="submit" value="로그인 확인" name="">  
        <input type="button" value="Join Page" onclick="location.href='/addUser.html'">  
    </form>
</body>
</html>

 

 

addUser.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Add user</title>
</head>
<body>
    <h1>Add user</h1>
    <form method="POST" action="http://localhost:3000/addUser.html">

        아이디 : <input type="text" name="id"><br>
        패스워드 : <input type="password" name="pw"><br>
        이름 : <input type="text" name="name"><br>
        나이 : <input type="text" name="age"><br>

        <input type="submit" value="Join" name="">
        <input type="button" value="login Page" onclick="location.href='/'">
    </form>
</body>
</html>
npm init
npm install express
npm install nunjucks chokidar
npm install body-parser

node index.js
ctrl + c

 

 

1. localhost:3000 로그인 페이지

여기서 값을 입력해서 로그인 확인 버튼을 누르면 submit 되면서

콘솔창에

이러한 값이 뜬다.

 

Join Page 버튼을 누르면 다른 html 파일로 넘어가게 된다

 

 

2. localhost:3000/addUser.html     Add user 페이지

값을 쓰고 Join 버튼 누르면 콘솔창에 이렇게 뜨고

login Page 버튼을 누르면 다시 로그인 페이지로 돌아간다.

'웹 개발 > Node JS' 카테고리의 다른 글

21.04.27 Router로 파일 쪼개기 2  (0) 2021.04.27
21.04.27 Router 로 파일 쪼개기  (0) 2021.04.27
21.04.26 게시판 번호 처리  (0) 2021.04.27
21.04.20 get , post - html 파일 열기  (0) 2021.04.20
21.04.19 Node JS  (6) 2021.04.19
'웹 개발/Node JS' Related Articles more