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개:
라벨: , , ,

[node 웹페이지 만들기] 2.node+express+ejs - 2

EJS 뜯어보기

  • 전에 기본 예제를 실행해 보겠습니다.

EJS 예제

  • ejs의 start는 node bin/www 로 시작합니다.


1
2
C:\web\EJS>node bin/www
  • ????
  • 서버가 시작된겁니다.
localhost:3000
  • 로컬서버 인 만큼 주소는 localhost:3000(127.0.01:3000)으로 접속하면 예제 페이지를 볼수 있습니다.

드디어 뜯어보기

  • 시작이 bin 폴더의 www이니까 www파일 부터 살펴보겠습니다.


1
2
3
4
5
6
7
8
9
#!/usr/bin/env node
var debug = require('debug')('EJS');
var app = require('../app');

app.set('port', process.env.PORT || 3000);

var server = app.listen(app.get('port'), function() {
  debug('Express server listening on port ' + server.address().port);
});


  • 2번 라인 : 디버깅을 위한것
  • 3번라인 : ../app을 불러오는 것입니다.
  • 5번 라인 : port번호를 3000으로 설정합니다.
  • 7번~ : 서버를 시작하는 (클라이언트를 기다리는) 명령어가 되겠습니다. 
    • 8번 라인에 console.log('server star'); 를 넣어 서버가 시작됨을 알수 있습니다.


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
#!/usr/bin/env node
var debug = require('debug')('EJS');
var app = require('../app');

app.set('port', process.env.PORT || 3000);

var server = app.listen(app.get('port'), function() {
 console.log("server start");
  debug('Express server listening on port ' + server.address().port);
});
  • 이렇게 한다면 서버를 구동할경우

1
2
C:\web\EJS>node bin/www
server start

  • server start를 확인 할수 있습니다.
  • 다음은 ../app 파일을 알아보겠습니다.


 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
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
var express = require('express');
var path = require('path');
var favicon = require('serve-favicon');
var logger = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');

var routes = require('./routes/index');
var users = require('./routes/users');

var app = express();

// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');

// uncomment after placing your favicon in /public
//app.use(favicon(__dirname + '/public/favicon.ico'));
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));

app.use('/', routes);
app.use('/users', users);

// catch 404 and forward to error handler
app.use(function(req, res, next) {
    var err = new Error('Not Found');
    err.status = 404;
    next(err);
});

// error handlers

// development error handler
// will print stacktrace
if (app.get('env') === 'development') {
    app.use(function(err, req, res, next) {
        res.status(err.status || 500);
        res.render('error', {
            message: err.message,
            error: err
        });
    });
}

// production error handler
// no stacktraces leaked to user
app.use(function(err, req, res, next) {
    res.status(err.status || 500);
    res.render('error', {
        message: err.message,
        error: {}
    });
});


module.exports = app;

  • 8,9라인과 25,26라인을 통하여 ejs파일 경로를 등록하고 연결하는 것을 볼 수 있습니다.
  • 29라인과 39번이후 라인을 통해 404(페이지를 찾을수 없는 경우)와 500(서버 에러)를 처리할 수있습니다.
  • 그럼 계속 따라 들어가보기 위해 /routes/폴더의 index.js파일을 따라 들어가보겠습니다.


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

/* GET home page. */
router.get('/', function(req, res) {
  res.render('index', { title: 'Express' });
});

module.exports = router;

  • express.Router.get을 통하여 
    • '/'의 경로에 r
    • esponse(res)에 index.ejs과 title:Express로 넣어 렌더링 함을 알수 있습니다.
  • 5번줄에 get 대신에 post를 쓴다면 post 방식으로 작동합니다.
  • 그럼 마지막으로 index.ejs파일로 따라 들어가 보겠습니다. index.ejs파일의 경로는 위의 app.js에 설정하였던 views 디렉터리 아래 있습니다.


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
<!DOCTYPE html>
<html>
  <head>
    <title><%= title %></title>
    <link rel='stylesheet' href='/stylesheets/style.css' />
  </head>
  <body>
    <h1><%= title %></h1>
    <p>Welcome to <%= title %></p>
  </body>
</html>
  • ?! html과 같은 양식입니다. html을 작성하듯이 작성하고 <%=%>을 통하여 동적으로 페이지를 보여줄 수 있습니다.
  • <%=title%>을 통하여 index.js에서 넣어줬던 title을 값을 받아 동적으로 보여주게 됩니다.
  • stylesheets와 javascript 파일 등은 publice 폴더 아래에 위치하면 됩니다,

작성자: 시간: 댓글 없음:
라벨: , ,
피드 구독하기: 글 (Atom)