[NodeJS] - Express, POST 방식을 이용한 form 데이터 전달

NodeJS

Riucc 2018. 10. 15. 17:08

○ Express, POST 방식을 이용한 form 데이터 전달

<form> 태그 안에서의 name 으로 지정한 값들을

req.body.name 으로 가져와 사용한다 !!!

(post 방식은 header가 아니라 body에 데이터를 싣기 때문)

post 방식을 사용하기 위해 아래와 같이 모듈을 가져오고 사용한다고 해줘야한다!

var bodyParser = require('body-parser');

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

res.render() : ejs(html) 파일을 보여줄 때 사용

res.send() : 지정한 값을 뿌려줄 때 사용

// form.ejs

<!DOCTYPE html>

<html>

<head>

<title>Document</title>

</head>

<body>

<form action="/form_receiver" method="post"> // method="post" : post 방식

</form>

</body>

</html>

// app.js

var express = require('express');

var app = express(); // 위에서 가져온 express 모듈이 함수여서, 이렇게 가져와 사용한다

var ejs = require('ejs'); // html 랜더링

var bodyParser = require('body-parser'); // post 전송방식 사용하기 위해

app.set("views", __dirname); // ejs 파일 가져올 폴더 지정(프로젝트명) 및 ejs 관련 설정

app.set("view engine", "ejs");

app.engine("ejs", ejs.renderFile);

app.use(bodyParser.urlencoded({extend : false})); // use() 를 통해 연결 시킨다! (사용하기 위해)

app.get('/', function(req, res){

res.send("3050 포트에 연결 성공했어요!");

});

app.get('/form', function(req, res){

res.render('form.ejs'); // ejs(html)파일 보여줄 때 이렇게 render() 사용

});

app.post('/form_receiver', function(req, res){

var title = req.body.title;

var desc = req.body.desc;

res.send("제목 : " + title + "\n" + "내용 : " + desc); // 사용자에게 지정한 값을 응답해줌

});

app.listen(3050, function(){

console.log("3050번 포트에 연결 성공!");

}); // 3050번 포트를 listening, 리스닝 성공 시 콜백메소드 실행하여 메시지 출력