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
67
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
79
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
タクシーアプリ『GO』のリアルタイムデータ分析基盤における機械学習サービスの活用
mot_techtalk
4
1.4k
ピラミッド、アイスクリームコーン、SMURF: 自動テストの最適バランスを求めて / Pyramid Ice-Cream-Cone and SMURF
twada
PRO
10
1.3k
Pinia Colada が実現するスマートな非同期処理
naokihaba
4
220
Realtime API 入門
riofujimon
0
150
ヤプリ新卒SREの オンボーディング
masaki12
0
130
Webの技術スタックで マルチプラットフォームアプリ開発を可能にするElixirDesktopの紹介
thehaigo
2
1k
エンジニアとして関わる要件と仕様(公開用)
murabayashi
0
290
cmp.Or に感動した
otakakot
3
170
3 Effective Rules for Using Signals in Angular
manfredsteyer
PRO
1
100
型付き API リクエストを実現するいくつかの手法とその選択 / Typed API Request
euxn23
8
2.2k
『ドメイン駆動設計をはじめよう』のモデリングアプローチ
masuda220
PRO
8
540
3rd party scriptでもReactを使いたい! Preact + Reactのハイブリッド開発
righttouch
PRO
1
600
Featured
See All Featured
[RailsConf 2023] Rails as a piece of cake
palkan
52
4.9k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
109
49k
Site-Speed That Sticks
csswizardry
0
25
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
Practical Orchestrator
shlominoach
186
10k
No one is an island. Learnings from fostering a developers community.
thoeni
19
3k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
246
1.3M
Building Your Own Lightsaber
phodgson
103
6.1k
Navigating Team Friction
lara
183
14k
Designing for humans not robots
tammielis
250
25k
Ruby is Unlike a Banana
tanoku
97
11k
Done Done
chrislema
181
16k
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