12-23 00:00
Notice
Recent Posts
Recent Comments
Link
«   2024/12   »
일 월 화 수 목 금 토
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31
Tags more
Archives
Today
Total
관리 메뉴

Scientific Computing & Data Science

[Programming / WebApp] Form Data 전송 본문

Programming/Web App

[Programming / WebApp] Form Data 전송

cinema4dr12 2016. 9. 4. 09:49

Express Framework에서 Form을 구성하고, Form Data를 전송하는 방법에 대해 간단하게 살펴보고자 한다.

우선 Form Data를 위해 필요한 Node Packages는 JSON 및 URL-encoded Data를 파싱(Parsing)하기 위해 필요한 body-parser와 Multi-part Form Data를 파싱하기 위한 multer이다.

이 패키지들을 설치하려면 Command Line Tool에 다음과 같이 입력한다:

$ npm install --save body-parser
$ npm install --save multer


참고로 body-parser는 express-generator를 통해 Express 프로젝트를 생성하였다면 이미 설치가 되어있을 것이다.

Express 프로젝트의 views 경로에 "form-test.pug" 파일을 작성하자.

(만약 Pug Template Engine에 대하여 접해보지 않은 분들은 Express Template Engine / Pug를 참고하기 바란다.)

[{Express-Project-Root}/views/form-tester.pug]

html
    head
        title #{title}
    body
        form(action="/form-tester", method="POST")
            div
                label(for="name") Your Name : &nbsp
                input(name="name" value="Your Name")
            br
            div
                label(for="nickname") Your Nickname : &nbsp
                input(name="nickname" value="Your Nickname")
            br
            button(type="submit") Send my names


상기 Pug 파일은 다음 이미지와 같은 페이지로 렌더링 될 것이다.


즉 form-tester.pug는 다음의 HTML 파일로 변환되기 때문이다.

<html>
<head>
    <title>Form Tester</title>
</head>
<body>
    <form action="/form-tester" method="POST">
        <div>
            <label for="name">Your Name : &nbsp;</label>
            <input name="name" value="Your Name">
        </div>
        <br>
        <div>
            <label for="nickname">Your Nickname : &nbsp;</label>
            <input name="nickname" value="Your Nickname">
        </div>
        <br>
        <button type="submit">Send my names</button>
    </form>
</body>
</html>


이제 Express 프로젝트의 routes 경로에 "form-tester.js" 파일을 작성하도록 하자.

[{Express-Project-Root}/routes/form-tester.js]

var express = require('express');
var router = express.Router();

/* GET home page. */
router.get('/', function (req, res) {
  res.render('form-tester', {
    title: 'Form Tester'
  } );
} );

router.post('/', function (req, res) {
  console.log(req.body);
  var str = "Your name is " + req.body.name + " and your nickname is " + req.body.nickname;
  res.send(str);
} );

module.exports = router;


form-test.pug에서 볼 수 있듯이 Form의 데이터는 POST 방식으로 전송되며, 그 데이터는 req.body(일종의 Payload로 생각하면 된다)에 포함되며, JSON 형식으로 전달된다 (이를 위해 body-parser가 필요하다).

마지막으로 "app.js" 파일에 다음 코드를 추가하도록 한다.

[{Express-Project-Root}/app.js]

var express = require('express');
var bodyParser = require('body-parser');
var multer = require('multer');
var upload = multer();
var formTester = require('./routes/form-tester');

var app = express();

app.set('view engine', 'pug');
app.set('views', './views');

app.use(bodyParser.json()); // for parsing application/json
app.use(bodyParser.urlencoded({ extended: true })); // for parsing application/x-www-form-urlencoded
app.use(upload.array()); // for parsing multipart/form-data
app.use(express.static('public'));

app.use('/form-tester', formTester);


예를 들어, name에 "Geol Choi"를, nickname에 "cinema4d"를 입력하고 "Send my names" 버튼을 클릭하면 다음과 같은 결과가 나온다.


console.log() 명령에 의한 Command Line Tool의 출력은 다음과 같다.

{ name: 'Geol Choi', nickname: 'cinema4d' }


'Programming > Web App' 카테고리의 다른 글

[Programming / WebApp] Express-Cookies  (0) 2016.09.15
[Programming / WebApp] Express-MongoDB 활용  (0) 2016.09.05
[Programming / WebApp] Express Template Engine / Pug  (0) 2016.09.03
[Programming / WebApp] 스크롤 시 메뉴 콘텐츠 고정하기  (1) 2016.08.17
[Programming / WebApp] CSS 전처리기 – Sass  (0) 2016.08.15
공유하기 링크
'Programming/Web App' Related Articles more
Comments