Express.js NTU CCSP 2012 Fall 

Outline • Express.js – npm • Homework #3 – Search Engine 

https://npmjs.org/ 

npm – node package manager 安裝 npm install 解安裝 npm uninstall 清單 npm ls 全域模式 npm -g 

Local mode {CWD}/node_modules/ Global mode {install path}/lib/node_modules/ 

http://expressjs.com/ 

npm install express 

[xpsteven@cloud9]:/workspace/$ express -h Usage: express [options] Options: -h, --help output usage information -V, --version output the version number -s, --sessions add session support -e, --ejs add ejs engine support (defaults to jade) -J, --jshtml add jshtml engine support (defaults to jade) -H, --hogan add hogan.js engine support -c, --css add stylesheet support (less|stylus) (defaults to plain css) -f, --force force on non-empty directory 

[xpsteven@cloud9]:/workspace$ express -s -e -c less exp1 create : exp1 create : exp1/package.json create : exp1/app.js … install dependencies: $ cd exp1 && npm install run the app: $ node app 

編輯 exp1/app.js app.set('port', process.env.PORT); 

No content

app.get('/', routes.index); app.get('/users', user.list); app.js 根據URI決定誰來處理 

/* * GET home page. */ exports.index = function(req, res){ res.render('index', { title: 'Express' }); }; route/index.js 處理請求 

<%= title %>

<%= title %>

Welcome to <%= title %>

views/index.ejs EJS – embedded Javascript 

No content

route：GET和POST app.get('/', function(req, res, next){ res.send('hello world'); }); app.post('/', function(req, res, next){ res.send('hello world'); }); 

route：正規表示 app.get( /^\/api/ , function(req, res, next){ /* do something */ next(); }); http://neural.cs.nthu.edu.tw/jang/books/webprog/03jscript/reg1. asp?SessionCount=13 

route：URL帶參數 app.get('/user/:id', function(req, res, next){ console.log(id is + req.params.id); }); 

handler：req.body and req.query app.all('/:name', function(req, res, next){ console.log(req.body); console.log(req.query); console.log(req.params); res.send(‘hi’); }); req.body是POST才會有的 req.query是URL後面的query string所組成的key-value pair req.params前面介紹過 

handler：cookie app.all('/cookies', function(req, res, next){ console.log(req.cookies); res.send(req.cookies); }); 

handler：cookie app.all(‘/setcookie’, function(req, res, next) { res.cookie(‘name’, ‘tobi’, { domain: ‘.example.com’ , path: ‘/admin’ , secure: true , expires: new Date(Date.now() + 900000) , httpOnly: true }); }); domain => client-side可以存取該cookie的domain path => 哪個URL的請求會帶此cookie 如果為/ 為全域cookie secure => HTTPS only expires => 何時到期 httpOnly => client-side無法讀取 

handler：cookie /* 如果要設定cookie讓客戶端和伺服端都能讀取 */ function setcookie(res, key, value, ttl) { res.cookie(key, value, { expires : new Date(Date.now() + ttl) , path : "/" }); }; 

handler：cookie好朋友session app.all('/session', function(req, res, next){ console.log(req.session); for(var k in req.body){ req.session[k] = req.body[k]; } res.send(req.session); }); 

app.post('/upload', function(req, res, next) { console.log(req.files); res.send('ok'); }); req.files..path req.files..size req.files..type handler：接收檔案 

小結 • req.params • req.query • req.body • req.cookies • res.cookie • req.session 

經驗 • 請求方法選擇 – 新增資料用POST – 讀取資料用GET – 刪除用POST or DELETE – 修改用POST or PUT • 資源定位放在URI裡面 – 序號 /stu/1 – 集合 /stus • 條件放在Query String – /stus?name=steve • Cookie只存放sessionid和使用者id • Cookie和Session應視為non-persistent storage http://zh.wikipedia.org/wiki/REST 

<%= escaped out %> <%- out %> <% if() %> <% for() %> view：EJS語法 

<%= title %> <%= escapedout || '' %> <%- out || '' %> <% for(var i = 0; i < 10; i++) { %>

<%= i %>

<% } %> <% if(hulk) { %>

<%= hulk %>

<% } %> view：EJS語法 

超簡單相本要求 • 三個view – 上傳 /upload – 顯示所有已上傳 /images – 單張圖片 /image/:id • 小提示 – 用物件來當作資料庫