Node.js - express form (body-parser)

form

{% extends "layout/base.html" %}

{% block content -%}
    <form action="" method="post">
        <table class="table table-bordered">
            <tr>
                <th>제품명</th>
                <td><input type="text" name="name" class="form-control"/></td>
            </tr>
            <tr>
                <th>가격</th>
                <td><input type="text" name="price" class="form-control"/></td>
            </tr>
            <tr>
                <th>설명</th>
                <td><input type="text" name="description" class="form-control"/></td>
            </tr>
        </table>
        <button class="btn btn-primary">작성하기</button>
    </form>

{% endblock %}

• 위와 같은 html 코드가 있다고 하자. 이 때 form 태그는 버튼을 눌렀을 때 특정 요청을 보낼 수 있도록 해준다.
• 위 코드에서는 form의 method를 'post'로 설정했으므로, POST 요청이 수행된다.
• action은 해당 요청의 대상을 결정하는데, 해당 부분이 비어있을 경우 현재 주소를 대상으로 한다.
• 물론 해당 주소의 POST 요청에 대한 설정이 코드 상에 존재해야 정상적으로 작업이 수행된다.
• cf. base.html에는 코드의 기반으로 부트스크랩이 적용되어 있다.

---

body-parser

const bodyParser = require('body-parser');
app.use( bodyParser.json() );
app.use( bodyParser.urlencoded({ extended : false });

• 미들웨어로서 body-parser를 불러와 사용한다.
• node.js 내장모듈이기 때문에 따로 설치할 필요는 없다.
• 해당 모듈을 활용하면 POST 요청에서 받아온 값들을 사용할 수 있게 된다.
• 이를 활용해 POST 요청을 작성해보겠다.

router.post('/products/write', ( req , res ) => {
    res.send(req.body);
});

• POST 요청이 들어왔을 때 다음 콜백을 수행한다.
• 여기서 req.body 안에 POST 요청에 담긴 정보들이 들어있다. (위 코드대로라면 name, price, description에 대한 정보 소유)

• 따라서 위와 같이 작성 후 버튼을 클릭해 POST 요청을 보내면

• 위와 같은 결과가 화면에 띄워진다.
• cf. name, price, description 각각도 req.body.name과 같은 방식으로 접근하여 출력할 수 있다.