Node.js - form 전송 post로 받아 josn으로 출력/ 기본 예제

---

form을 이용한 기본 예제

---

안녕하세요.

고코더 입니다.

이전에 라우터와 뷰단에 소스를 만들고

어떻게 사용하는지 아주 기초적인 방법을 배웠습니다.

이번 시간에는 form으로 전송한 데이터를

node.js에서 받아 간단하게 josn으로 출력하도록 코딩을 해보겠습니다.

---

● 1. views에서 form 태그를입력

---

● 1-1. form.ejs 에 아래 HTML을 추가 합니다. 이전에 입력되어 있는 HTML 밑에 추가합니다. 

소스는 폼태그를 이용해서 이름,블로,홈페이지를 입력하는 input 박스에 입력을 받게 됩니다.

form.zip

<form id="Form" action="/form" method="post">
    <table width="400">
        <tr>
            <th>이름</th>
            <td><input type="text" name="name" id="name" size="10" maxLength="10"></td>
        </tr>
        <tr>
            <th>블로그</th>
            <td><input type="text" name="blog" id="blog" size="20" maxLength="20"></td>
        </tr>
        <tr>
            <th>홈페이지</th>
            <td><input type="text" name="homepage" id="homepage" size="20" maxLength="20"></td>
        </tr>
        <tr>
            <th>전송</th>
            <td><input type="submit"></td>
        </tr>
    </table>
</form>

● 1-2. 코드 리뷰 

14라인 : action 값은 /form 입니다. 이전 시간에 만든 라우터로 전송할 것 입니다.

15라인 : Method는 post 이어야 합니다. get은 이미 이전에 라우터에 사용중입니다. 

30라인 : submit 버튼은 자동으로 해당 form을 전송해주는 역할을 합니다. 

● 1-3. 제출 버튼을 누르면 자가호출로 form.js로 데이터를 전송합니다.

---

● 2.라우터에서 해당 POST 값을 받아 json으로 출력

---

● 2-1. form에서 넘어온 값을 받아와서 라우터에서 프로그래밍 하여

JSON으로 처리하는 방법을 다룹니다. 

form.js에 아래 코드를 추가로 입력해주세요.

form.zip

router.post('/',function(req,res,next){
    res.json(req.body);}
);

● 2-2. 코드 리뷰 

12라인 : method를 post로 전송하기에 post로 받아야 합니다. 같은 루트로 접근된다고 하더라도 post인지 get인지에 따라 달라집니다.

13라인 : 해당 데이터를 josn 함수를 자동으로 json 형식으로 노출 시킵니다. 

● 2-3. 코딩에 대한 결과 값을 확인하면 요청한 데이터가 json으로 출력 되고 있습니다.

자가 호출로 get 일 경우에는 데이터를 보내는 페이지이고

post일 경우에는 로직을 처리하는 페이지로 개발 되었습니다. 

---

마무리

---

슬슬 생각보다 쉽다는 

자신감이 생길거라 생각 됩니다.

---

아메리카노 한잔으로 배우는 Node.js Express 기본편

---

해당 내용은 제가 집필한 책에 일부를 발취한 내용입니다.

도움이 되셨으면 후원에 마음으로 제 책을 전국 온라인 서점에서 구매해보세요.

교보문고

예스24

알라딘

네이버북

리디북스

원스토어

북큐브