Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Fast Web Development with Express
Search
Tommy Chen
November 06, 2014
Programming
0
66
Fast Web Development with Express
Tommy Chen
November 06, 2014
Tweet
Share
More Decks by Tommy Chen
See All by Tommy Chen
Kosko - 改用 JavaScript 來管理 Kubernetes YAML (Kubernetes Summit 2021)
tommy351
1
1.3k
Kosko - 改用 JavaScript 來管理 Kubernetes YAML (COSCUP 2021)
tommy351
0
76
Kubernetes 101
tommy351
2
250
Socket.io 即時通訊實作
tommy351
0
81
An Introduction to Node.js
tommy351
1
280
Other Decks in Programming
See All in Programming
Kotlin 2.0が与えるAndroid開発の進化
masayukisuda
1
410
エラーレスポンス設計から考える、0→1開発におけるGraphQLへの向き合い方
bicstone
5
1.5k
Boost Performance and Developer Productivity with Jakarta EE 11
ivargrimstad
0
490
Increased Performance and Developer Productivity with Jakarta EE 11
ivargrimstad
0
380
Perl 5 OOP機構30年史 - Perl 5's OOP Mechanism over the past 30 years
moznion
0
340
Rechartsで楽にゴリゴリにカスタマイズする!
10tera
1
170
unique パッケージから学ぶ interning と weak reference @ Asakusa.go#3
karamaru
2
810
Patched fetch did not work
quramy
4
390
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
0
120
KSPの導入・移行を前向きに検討しよう!
shxun6934
PRO
0
280
Modern Angular with the NGRX Signal Store New Rules for Your Architecture @BASTA! 2024 in Mainz
manfredsteyer
PRO
0
150
Ebitengineの1vs1ゲーム WebRTCの活用
ponyo877
0
380
Featured
See All Featured
KATA
mclloyd
27
13k
Creatively Recalculating Your Daily Design Routine
revolveconf
215
12k
Documentation Writing (for coders)
carmenintech
65
4.3k
Making Projects Easy
brettharned
113
5.8k
Designing on Purpose - Digital PM Summit 2013
jponch
114
6.8k
Six Lessons from altMBA
skipperchong
26
3.4k
Building Your Own Lightsaber
phodgson
101
6k
Raft: Consensus for Rubyists
vanstee
135
6.5k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
25
3.9k
Gamification - CAS2011
davidbonilla
79
5k
The Mythical Team-Month
searls
218
43k
Clear Off the Table
cherdarchuk
91
320k
Transcript
Fast Web Development with Express 陳嘉輝 @tommy351 1
安裝 npm install express --save 2
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 ⽅方法 app.VERB('/users/:id', function(req, res, next){}); use:Middleware get:取得資料 post:建⽴立資料 put:取代資料
patch:更新資料 delete:刪除資料
5 路徑 app.VERB('/users/:id', function(req, res, next){}); :id:冒號開頭視為參數 :id?:結尾加上 ”?” 代表選填參數
6 Handler app.VERB('/users/:id', function(req, res, next){}); req:請求 res:回應 next:進⼊入下⼀一個 Handler
Middleware • 所有路徑符合的函數都會依序執⾏行 • 直到 next 函數被呼叫之前,下⼀一個函數不會被執⾏行 • 如果 next
函數帶有參數時,則會跳出錯誤 7
8 / /users/:id /users/:id http://localhost:4000/ 回應 x x 404 Not
Found
9 / /users/:id http://localhost:4000/users/tommy x 回應 /users/:id 䎛↡袂㽳竑完⫘嬭獑 404 Not
Found
10 / /users/:id /users/:id next() http://localhost:4000/users/tommy 回應 x ㊦櫩❝⛌PGZV
㔮㧤蒢⑆⃬⃡⋬JCPFNGT 404 Not Found
EJS app.set('views', __dirname + '/views'); app.set('view engine', 'html'); app.engine('html', require('ejs').renderFile);
• EJS 是⼀一種 JavaScript 模版引擎 • 安裝:npm install ejs --save 11
模版 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 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
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); });
Body • Body 是 HTTP 請求的內容 • 使⽤用 body-parser 解析表單內容:npm
install body-parser --save 15 app.use(require('body-parser').urlencoded({ extended: true }));
實作 留⾔言板 16
Thanks 17