Fast Web Development with Express

Transcript

1. Fast Web Development with Express 陳嘉輝 @tommy351 1
2. 安裝 npm install express --save 2
3. Hello World var express = require('express'); var app = express(); app.get('/', function(req, res){ res.send('Hello world'); }); app.listen(4000, function(){ console.log('Server started!'); }); 3
4. 4 ⽅方法 app.VERB('/users/:id', function(req, res, next){}); use：Middleware get：取得資料 post：建⽴立資料 put：取代資料 patch：更新資料 delete：刪除資料
5. 5 路徑 app.VERB('/users/:id', function(req, res, next){}); :id：冒號開頭視為參數 :id?：結尾加上 ”?” 代表選填參數
6. 6 Handler app.VERB('/users/:id', function(req, res, next){}); req：請求 res：回應 next：進⼊入下⼀一個 Handler
7. Middleware • 所有路徑符合的函數都會依序執⾏行 • 直到 next 函數被呼叫之前，下⼀一個函數不會被執⾏行 • 如果 next 函數帶有參數時，則會跳出錯誤 7
8. 8 / /users/:id /users/:id http://localhost:4000/ 回應 x x 404 Not Found
9. 9 / /users/:id http://localhost:4000/users/tommy x 回應 /users/:id 䎛↡袂⹤㽳竑完⫘嬭獑 404 Not Found
10. 10 / /users/:id /users/:id next() http://localhost:4000/users/tommy 回應 x ㊦櫩❝⛌PGZV  㔮㧤蒢⑆⃬⃡⋬JCPFNGT 404 Not Found
11. EJS app.set('views', __dirname + '/views'); app.set('view engine', 'html'); app.engine('html', require('ejs').renderFile); • EJS 是⼀一種 JavaScript 模版引擎 • 安裝：npm install ejs --save 11
12. 模版 app.get('/users/:id', function(req, res, next){ res.render('users/show', {user: req.user}); }); 12 My name is <%= user.name %> and I am <%= user.age %> years old. My name is Jack and I am 25 years old.
13. 模版 - 陣列 13 My name is <%= user.name %> and I am <%= user.age %> years old. Here's my wishlist: <ul> <% user.wishlist.forEach(function(item){ %> <li><%= item %></li> <% }) %> </ul> My name is Jack and I am 25 years old. Here's my wish list: • iPhone 6 • Car
14. Query string 14 http://localhost:4000/users/1?a=b&c=d • ? 後⾯面的字串即為 Query string • 每個參數以 & 分隔 • key 和 value 以 = 分隔 • 在 Express 中使⽤用 req.query 讀取 Query string app.get('/', function(req, res){ console.log(req.query); });
15. Body • Body 是 HTTP 請求的內容 • 使⽤用 body-parser 解析表單內容：npm install body-parser --save 15 app.use(require('body-parser').urlencoded({ extended: true }));
16. 實作 留⾔言板 16
17. Thanks 17