2015년 1월 4일 일요일

[node 웹페이지 만들기] 3.ejs 등록,실행, 페이지 간 값 넘기기

app.js에서...

  • 저는 이전에 만들어 놨던 페이지(회원가입)등을 member에서 관리를 할것입니다. 때문에 app.js에 등록을 하고 route파일을 만들고 ejs파일을 등록하는 식으로 진행 하겠습니다.

1
2
3
4
5
6
7
...
var routes = require('./routes/index');
var users = require('./routes/users');
...
app.use('/', routes);
app.use('/users', users);
...


  • app.js에서 이곳에 member route를 추가로 등록 하겠습니다.

1
2
3
4
5
6
7
8
9
...
var routes = require('./routes/index');
var users = require('./routes/users');
var member = require('./routes/member');
...
app.use('/', routes);
app.use('/users', users);
app.use('/member', member);
...


  • /member route에 등록된 모든 url은 주소:3000/member에 등록됬습니다.

member.js


1
2
3
4
5
6
7
8
9
var express = require('express');
var router = express.Router();

/* GET home page. */
router.get('/join', function(req, res) {
  res.render('member/join');
});

module.exports = router;



  • view/member/join.ejs는 주소:3000/member/join 의 url을 가지게 됩니다.
  • 다음은 ejs파일 넣어주는 일만이 남았습니다.

EJS 파일로 변경하기

  • [node 웹페이지 만들기] 1번이였던 join.html을 join.ejs로 바꿔줍니다. 끝
    • 제가 만들어 줬던 join페이지는 동적으로 구성할 필요가 없기 때문에 바꿔줄 것이 없습니다.
  • 또한 관련된 js와css를 public 내의 알맞는 위치에 넣어줍니다.

실행해보기

  • 정겨운 콘솔로 프로젝트 디렉터리에 들어가 node bin/www로 실행시켜 봅시다.
  • 그리고 127.0.0.1:3000/member/join 으로 들어가면

  • 알맞는 위치에 잘 작동하는 것을 알수 있습니다.

값넘기기


  • 회원가입에서 가입 버튼을 누르면 form에 등록된 주소로 값을 넘겨보도록 하겠습니다.
  • 값이 넘어갈 페이지를 members.ejs를 간단히 만들어 봤습니다.


 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
32
33
34
35
36
37
38
39
40
41
<!DOCTYPE html>
<html lang='ko'>
<head>
 <meta charset='utf-8'/>
 <title>Members</title>
 <link rel="stylesheet" type="text/css" href="../style/mycss2.css">
 <script type="text/javascript" src="../js/jquery-1.9.1.min.js"></script>
 <script type="text/javascript" src="../js/myscript2.js"></script>
</head>
<body>
 <header></header>
 <div class = "body">
  <div class ="wrapper_table">
   <table>
    <thead>
     <tr>
      <td>아이디</td>
      <td>비밀번호</td>
      <td>이름</td>
      <td>생년월일</td>
      <td>휴대전화</td>
      <td>성별</td>
      <td>이메일</td>
     </tr>
    </thead>
    <tbody>
     <tr>
      <td><%= m_id %></td>
      <td><%= m_pass %></td>
      <td><%= m_name %></td>
      <td><%= m_tel %></td>
      <td><%= m_date %>
      <td><%= m_gender %></td>
      <td><%= m_email %></td>
     </tr>
    </tbody>
   </table>
  </div>
 </div>
</body>
</html>

  • 따라서 route파일(member.js)에도 추가하겠습니다.


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
var express = require('express');
var router = express.Router();

/* GET home page. */
router.get('/join', function(req, res) {
  res.render('join');
});

router.post('/members', function(req,res){
 console.log(req);
 res.render('members');
});
module.exports = router;

  • 프로젝트 1장에서 설명했듯이 회원가입과 같이 DB의 값을 입력,수정,삭제 하는 경우는 post로 처리해야 하기 때문에 route.post로 처리합니다.
  • 그리고 넘어오는 값이 어떤식으로 구성되어 있는지 아직 모르기 때문에 request(req)을 통채로 읽어보도록 하겠습니다.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
...
body:
      { id_ch: 'true',
 pass_ch: 'true',
 email_ch: 'true',
 m_tel: '010-1234-5678',
 m_id: 'GilDong',
 m_pass: 'password1',
 m_pass_ch: 'password1',
 m_name: '홍길동',
 m_date: '2000-01-01',
 tel1: '010',
 m_tel2: '1234',
 m_tel3: '5678',
 m_gender: '남',
 m_email: 'GilDong@Hong.com' },
...
  • 이런식으로 콘솔창에 출력된 것을 알수 있었습니다. 브라우저에는 변수값이 입력되지 않아 출력이 되지 않습니다.
  • 우리가 원하는 정보는 req.body에 있다는 것을 알았습니다.
  • 보낸 값을 member.ejs에 출력을 하기 위해 member.js의 11번 라인을 수정해 줍시다.


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
var express = require('express');
var router = express.Router();

router.get('/join', function(req, res) {
  res.render('join');
});

router.post('/members', function(req,res){
 // console.log(req);
 res.render('members',req.body);
});
module.exports = router;

  • 이제 서버를 리부트 해서 다시 해봅시다.
  • 이렇게 전송하여


  • 이런식으로 결과를 얻어 제대로 전송됬음을 확인했습니다.
  • 만약 파라미터 값들의 이름을 페이지마다, 그리고 나중의 DB와 다르게 할 경우 다시 맵핑하여 입력해야 하는 번거로움이 생기므로 일치시키는게 좋습니다.
작성자: 시간:
라벨: , , ,

댓글 7개:

  1. 익명2015년 2월 22일 오후 10:28

    아직 기본 개념이 부족해서 따라하고있는데 그게 잘 안되네요..
    지금 문제가 되고있는 부분이 myscript2.js인데 myscript2.js가 웹페이지 만들기 1에서 자바스크립트 부분 아닌가요?
    맞다면 node.js에서는 ajax를 못쓰는걸로 알고있는데 어떻게 작성하신건지 알려주시면 감사하겠습니다.

    답글삭제
  2. 익명2016년 4월 3일 오후 9:25

    그대로 따라하고 있는데 제가 폴더설정을 잘못한건지 회원가입 폼 다 작성후 버튼 누르면 결과가 전송이 안돼네요.....ㅠㅠ

    답글삭제
    답글
    1. 익명2016년 4월 3일 오후 9:43

      아 아니네요 제대로 됐습니다ㅠㅠ 슬레쉬(/)를 안넣은걸 발견 못하고 있었네요 ㅠㅠ 매우 도움이 되는 글입니다 감사해요~

      삭제
  3. 익명2016년 4월 29일 오전 12:10

    body 부분이 빈채로 넘어가는 이유가 뭘까요 ㅠ input에 id랑 name 줬는데 불구하고
    저는 따로 jquery로 submit하지않았는데..

    답글삭제
    답글
    1. ignocide2016년 5월 20일 오후 2:03

      이것만 보고서는 잘 모르겠어요 ㅠ

      삭제
  4. Unknown2016년 5월 5일 오전 1:35

    안녕하세요 예제 잘 보았습니다. 저도 예저처럼 따라해보았는데, 왜 제가 만든 javascript function 파일은 ejs 로 실행시키면 동작하지 않는 이유가 뭘까요;; 단순히 html 에서는 동작을 잘만하는데 이상하네요

    답글삭제
  5. ignocide2016년 5월 20일 오후 2:03

    ejs는 템플릿엔진이기 때문에 node.js를 통하여 랜더링해야하기 때문이죠. 원래는 ejs는 동적 템플릿이기 때문에 적절히 랜더링하여 여러 동적페이지를 만들수 있지만 위의 예제에서는 동적 변수가 없기 때문에 일반 html처럼 보이고 실행됩니다.

    답글삭제

피드 구독하기: 댓글 (Atom)