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
78
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
84
Kubernetes 101
tommy351
2
260
Socket.io 即時通訊實作
tommy351
0
88
An Introduction to Node.js
tommy351
1
290
Other Decks in Programming
See All in Programming
Current States of Java Web Frameworks at JCConf 2025
kishida
0
500
ИИ-Агенты в каждый дом – Алексей Порядин, PythoNN
sobolevn
0
140
Go Conference 2025: Goで体感するMultipath TCP ― Go 1.24 時代の MPTCP Listener を理解する
takehaya
7
1.4k
詳しくない分野でのVibe Codingで困ったことと学び/vibe-coding-in-unfamiliar-area
shibayu36
1
450
iOS 17で追加されたSubscriptionStoreView を利用して5分でサブスク実装チャレンジ
natmark
0
430
(Extension DC 2025) Actor境界を越える技術
teamhimeh
1
100
Playwrightはどのようにクロスブラウザをサポートしているのか
yotahada3
7
2.2k
プログラミングどうやる? ~テスト駆動開発から学ぶ達人の型~
a_okui
0
190
NetworkXとGNNで学ぶグラフデータ分析入門〜複雑な関係性を解き明かすPythonの力〜
mhrtech
3
790
GitHub Actions × AWS OIDC連携の仕組みと経緯を理解する
ota1022
0
220
実践AIチャットボットUI実装入門
syumai
7
2.3k
半自動E2Eで手っ取り早くリグレッションテストを効率化しよう
beryu
6
2.3k
Featured
See All Featured
Statistics for Hackers
jakevdp
799
220k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
1.2k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
285
14k
Fantastic passwords and where to find them - at NoRuKo
philnash
52
3.4k
Optimizing for Happiness
mojombo
379
70k
[RailsConf 2023] Rails as a piece of cake
palkan
57
5.9k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.7k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.6k
GraphQLの誤解/rethinking-graphql
sonatard
72
11k
How To Stay Up To Date on Web Technology
chriscoyier
791
250k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Intergalactic Javascript Robots from Outer Space
tanoku
273
27k
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