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
約9000個の自動テストの 時間を50分->10分に短縮 Flakyテストを1%以下に抑えた話
hatsu38
23
11k
生成 AI を活用した toitta 切片分類機能の裏側 / Inside toitta's AI-Based Factoid Clustering
pokutuna
0
570
RailsのPull requestsのレビューの時に私が考えていること
yahonda
5
1.7k
讓數據說話:用 Python、Prometheus 和 Grafana 講故事
eddie
0
350
Synchronizationを支える技術
s_shimotori
1
150
Kotlin2でdataクラスの copyメソッドを禁止する/Data class copy function to have the same visibility as constructor
eichisanden
1
140
Honoの来た道とこれから
yusukebe
19
3k
Identifying User Idenity
moro
6
7.9k
JaSST 24 九州:ワークショップ(は除く)実践!マインドマップを活用したソフトウェアテスト+活用事例
satohiroyuki
0
260
CPython 인터프리터 구조 파헤치기 - PyCon Korea 24
kennethanceyer
0
240
CSC305 Lecture 13
javiergs
PRO
0
130
PLoP 2024: The evolution of the microservice architecture pattern language
cer
PRO
0
1.6k
Featured
See All Featured
VelocityConf: Rendering Performance Case Studies
addyosmani
325
24k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
92
16k
Learning to Love Humans: Emotional Interface Design
aarron
272
40k
Measuring & Analyzing Core Web Vitals
bluesmoon
1
40
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
7
150
GitHub's CSS Performance
jonrohan
1030
460k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
27
790
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
131
33k
A better future with KSS
kneath
238
17k
Navigating Team Friction
lara
183
14k
Fashionably flexible responsive web design (full day workshop)
malarkey
404
65k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
27
1.9k
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