form을 이용한 기본 예제


안녕하세요.
고코더 입니다.


이전에 라우터와 뷰단에 소스를 만들고
어떻게 사용하는지 아주 기초적인 방법을 배웠습니다.
이번 시간에는 form으로 전송한 데이터를
node.js에서 받아 간단하게 josn으로 출력하도록 코딩을 해보겠습니다.



 1. views에서 form 태그를입력


 1-1. form.ejs 에 아래 HTML을 추가 합니다. 이전에 입력되어 있는 HTML 밑에 추가합니다. 
소스는 폼태그를 이용해서 이름,블로,홈페이지를 입력하는 input 박스에 입력을 받게 됩니다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<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에 아래 코드를 추가로 입력해주세요.
1
2
3
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 기본편



해당 내용은 제가 집필한 책에 일부를 발취한 내용입니다.
도움이 되셨으면 후원에 마음으로 제 책을 전국 온라인 서점에서 구매해보세요.



댓글을 달아 주세요


views 개발 기초 


안녕하세요.
고코더 입니다.


이전 시간에 라우터를 생성 하였습니다.
이제 라우터와 맵핑하여 프론트에게 보여줄
뷰단을 생성 해보겠습니다.



 1. ejs 파일 만들기


 1-1. views 폴더에서 new 그리고 file을 누릅니다. 


 1-2. 그리고 form.ejs 로 입력하고 확인을 누릅니다. 


 1-3. ejs 안에 내용을 아래처럼 채우겠습니다. 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html>
<head>
    <title>기본 예제 테스트</title>
</head>
<body>
    <h1>이름</h1>
      <p<%name %></p>
    <h1>블로그</h1>
        <p<%blog %></p>
    <h1>홈페이지</h1>
     <p<%homepage %></p>
</body>
</html>
cs





 2. 라우터 파일 form.js 수정 하기 


 2-1. 그리고 전 시간에 개발하였던 form.js 를 수정 해보겠습니다.
1
2
3
4
5
6
7
8
9
10
11
var express = require('express');
var router = express.Router();
router.get('/'function (req, res, next) {
    res.render('form', {
        name'Lee Jin Hyun',
        blog: 'gocoder.tistory.com',
        homepage: 'gocoder.net'
    });
});
 
module.exports = router;
cs


 2-2. 해당 라우터에 해당 URI로 접근 경로를 적는 곳입니다.
get, post로 받을 수 있습니다.  
router.get('/',

 2-3. 변수에 데이터를 담아  views에 render 해주는 역할을 합니다. ejs 안에 <%%> 태그안에 담길 변수입니다.
name: 'Lee Jin Hyun',
blog: 'gocoder.tistory.com',
homepage: 'gocoder.net'



 3. 결과 화면 


으로 브라우저로 접속해보세요.
라우터에 변수명에 담긴 내용들이 제대로 출력 되었습니다. 




마무리


더 쉬운 구조에 MVC 패턴 입니다.



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



해당 내용은 제가 집필한 책에 일부를 발취한 내용입니다.
도움이 되셨으면 후원에 마음으로 제 책을 전국 온라인 서점에서 구매해보세요.




댓글을 달아 주세요

  • 송바 2019.09.27 14:50  댓글주소  수정/삭제  댓글쓰기

    예제를 다 따라하고 http://localhost:3000/form 에 접속하기 위해 웹스톰에서 서버를 실행시켰는데 실행시키자 마자
    Process finished with exit code 0 라는 출력과 함께 서버가 바로 꺼지네요.. 해당 문제를 해결 할 수 있는 방법이 있을까요?