NTU CCSP 2012Fall - Node.js #2 - express.js

Express.js NTU CCSP 2012 Fall

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

https://npmjs.org/

npm – node package manager 安裝 npm install <pkg name>
解安裝 npm uninstall <pka name> 清單 npm ls 全域模式 npm <cmd> <param> -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 <engine> add stylesheet <engine> 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);

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 處理請求

<!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> views/index.ejs EJS – embedded Javascript

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.<name of
input>.path req.files.<name of input>.size req.files.<name of input>.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語法

<!DOCTYPE html> <html> <head> <title><%= title %></title> <link rel='stylesheet' href='/stylesheets/style.css'
/> </head> <body> <%= escapedout || '' %> <%- out || '' %> <% for(var i = 0; i < 10; i++) { %> <h1><%= i %></h1> <% } %> <% if(hulk) { %> <h2><%= hulk %></h2> <% } %> </body> </html> view：EJS語法

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

NTU CCSP 2012Fall - Node.js #2 - express.js

NTU CCSP 2012Fall - Node.js #2 - express.js

Steven Su

More Decks by Steven Su

Other Decks in Programming

Featured

Transcript

Express.js NTU CCSP 2012 Fall

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

https://npmjs.org/

npm – node package manager 安裝 npm install <pkg name>

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

[xpsteven@cloud9]:/workspace$ express -s -e -c less exp1 create : exp1

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

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

/* * GET home page. */ exports.index = function(req, res){

<!DOCTYPE html> <html> <head> <title><%= title %></title> <link rel='stylesheet' href='/stylesheets/style.css'

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

route：正規表示 app.get( /^\/api/ , function(req, res, next){ /* do something

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);

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:

handler：cookie /* 如果要設定cookie讓客戶端和伺服端都能讀取 */ function setcookie(res, key, value, ttl) {

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

app.post('/upload', function(req, res, next) { console.log(req.files); res.send('ok'); }); req.files.<name of

小結 • req.params • req.query • req.body • req.cookies •

經驗 • 請求方法選擇 – 新增資料用POST – 讀取資料用GET – 刪除用POST or

<%= escaped out %> <%- out %> <% if() %>

<!DOCTYPE html> <html> <head> <title><%= title %></title> <link rel='stylesheet' href='/stylesheets/style.css'

超簡單相本要求 • 三個view – 上傳 /upload – 顯示所有已上傳 /images –