Node.js | Express에 의한 요청 처리 기본 | 양식(form) 전송

Tags:

클라이언트에서의 정보 전송 기본은 역시 ‘폼(form)‘일 것이다. 폼에서 전송되는 처리도 Express는 매우 간단다다. 이것은 다음의 두 포인트에 정리된다.

POST 전송은 router.post으로 등록

Express에는 공개된 주소와 거기에 접근했을 때의 처리를 등록할 수 있게 되어 있었다. 지금까지 routes안에 제공하는 스크립트는 “router.get"을 사용하여 이 등록 작업을 해 왔다. 하지만 POST 전송 대상의 주소는 “router.post"을 사용해야 하다.

"Router".post(주소, 호출하는 함수);

이렇게 호출하여, 지정된 주소에 POST으로 액세스할 수 있다. 기본적으로 router.get을 router.post으로 작성할 뿐, 사용법은 동일하므로 바로 알 것이다.

전송 폼의 값을 body에서 얻기

전송된 폼의 값은, Request의 ‘body’라는 속성에 정리하고 있다. 이것은 다음과 같이 사용한다.

var 변수 = "Request".body[얻는 이름];

얻는 이름은 폼의 입력용 태그의 name 속성에 작성한 이름을 지정한다. 그럼 이것도 실제로 간단한 예제는 만들어 보자. 아래에 필요한 스크립트를 정리해 두었다. 이번에도 /helo 관계의 파일을 다시 작성한다.

helo.ejs

  <body>
    <h1><%= title %></h1>
    <%= msg %>
    <form method="post" action="/form">
        <input type="text" name="input1"
            value="<%= input %>">
        <input type="submit">
    </form>
  </body>

helo.js

var express = require('express');
var router = express.Router();
 
/* GET helo page. */
router.get('/', function(req, res, next) {
    var p1 = req.query["p1"];
    var p2 = req.query.p2;
    var msg = p1 == undefined ? "" : p1 + "," + p2;
    res.render('helo', 
        {
            title: 'HELO Page',
            msg: msg,
            input: ''
        }
    );
});
 
/* POST helo page. */
router.post('/', function(req, res, next) {
var str = req.body['input1'];
    res.render('helo', 
        {
            title: 'HELO Page',
            msg: "you typed: " + str,
            input: str
        }
    );
});
 
module.exports = router;

수정되면 Node.js를 시작하고, / helo에 접근해 본다. 입력 필드가 하나만 있는 폼이 표시된다.

적당히 뭔가 써서 전송하면, 보낸 텍스트를 폼에 표시된다. 또한 필드에 작성된 텍스트도 그대로 유지되는 것을 알 수 있다.

제출 양식에는 <form method="post" action="/helo">라고 작성하고 있다. 즉, /helo에는 GET과 POST 모두 대응이 필요하다. routes/helo.js을 보면, router.get과 router.post 모두가 준비되어 있는 것을 알 수 있을 것이다.

폼을 얻는 처리하는 router.post 부분에서는 이렇게 보내진 값을 얻을 수 있다.

var str = req.body['input1'];

이것으로 <input type="text" name="input1"> 태그의 value를 변수로 추출할 수 있다. 다음에 그것을 사용한 처리를 실행하면 된다. 알고 보면 매우 간단하다!

최종 수정 : 2018-07-16