Mac, Node.js 학습 9일차] Express framework

Express framework은  Express 모듈로 만든 framework다. 프로젝트를 손쉽게 만들어주고 기본적인 뷰와 세션을 지원한다.

1. 설치 

  * 4. x 설치 명령어

baesunghan:~/Documents/workspace/nodejs$sudo npm install -g express-generator Password: /usr/local/bin/express -> /usr/local/lib/node_modules/express-generator/bin/express express-generator@4.12.1 /usr/local/lib/node_modules/express-generator ├── sorted-object@1.0.0 ├── commander@2.6.0 └── mkdirp@0.5.0 (minimist@0.0.8) baesunghan:~/Documents/workspace/nodejs$

2. HelloExpress Project 생성

현재 디렉토리에 HelloExpress 가 만들어지고 아래와 같이 구성된다.

baesunghan:~/Documents/workspace/nodejs$express HelloExpress    create : HelloExpress    create : HelloExpress/package.json    create : HelloExpress/app.js    create : HelloExpress/public    create : HelloExpress/public/javascripts    create : HelloExpress/public/images    create : HelloExpress/public/stylesheets    create : HelloExpress/public/stylesheets/style.css    create : HelloExpress/routes    create : HelloExpress/routes/index.js    create : HelloExpress/routes/users.js    create : HelloExpress/views    create : HelloExpress/views/index.jade    create : HelloExpress/views/layout.jade    create : HelloExpress/views/error.jade    create : HelloExpress/bin    create : HelloExpress/bin/www    install dependencies:      $ cd HelloExpress && npm install    run the app:      $ DEBUG=HelloExpress:* ./bin/www baesunghan:~/Documents/workspace/nodejs$

3. Dependency를 가진 모듈 설치를 위해서 명령실행

baesunghan:~/Documents/workspace/nodejs$cd HelloExpress && npm install

4. 생성된 HelloExpress 실행

baesunghan:~/Documents/workspace/nodejs/HelloExpress$DEBUG=HelloExpress:* ./bin/www

or

baesunghan:~/Documents/workspace/nodejs/HelloExpress$npm start

5. 페이지 렌더링

jade, ejs 방식으로 페이지를 작성해서 표현할 수 있다.

- app.js : jade로 페이지를 렌드링 하도록 설정

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', 'jade');

- index.js : index.jade 파일을 읽어서 페이지를 렌드링한다. 이때 파라메타로 title과 query로 조회된 list를 rows변수로 넘겨준다.

var express = require('express'); var router = express.Router(); // load MySql var mysql = require('mysql'); var pool = mysql.createPool({     connectionLimit: 3,     user: 'test',     password: 'test',     database: 'test' }); /* GET 게시판 전체 리스트. */ router.get('/', function(req, res, next) {   res.redirect('/board/list/1'); }); router.get('/list/:page', function(req, res, next) {     pool.getConnection(function(err, conn) {         var selectList = "SELECT  idx, creator_id, title, date_format(modidate, '%Y-%m-%d %H:%i:%s') modidate, hit from board";         conn.query(selectList, function(err, rows) {             if (err) console.error("err : " + err);             console.log("rows : " + JSON.stringify(rows));             res.render('index', {title: '게시판 전체 글 조회', rows:rows});             conn.release();         });     }); });

- index.jade : jade 문법과 index.js에서 넘겨준 파라메타 값을 렌드링시에 출력한다. 참고로 extends  layout 을 통해서 layout.jade 를 같이 렌드링해서 페이지를 만든다.

extends layout block content   h1= title   a(href="/board/write") 글쓰기로 이동   br   br   table(border="1")     tr       td 번호       td 작성자       td 제목       td 조회수       td 변경일     - for item in rows       tr         td= item.idx         td= item.creator_id         td           a(href="/board/read/#{item.idx}")= item.title         td= item.hit         td= item.modidate

- layout.jade 

doctype html html   head     title= title     link(rel='stylesheet', href='/stylesheets/style.css')     script(src="/javascripts/jquery-1.11.2.min.js")   body     block content

<수행 결과>

이 글은 Evernote에서 작성되었습니다. Evernote는 하나의 업무 공간입니다. Evernote를 다운로드하세요.