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
64
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
73
Kubernetes 101
tommy351
2
240
Socket.io 即時通訊實作
tommy351
0
63
An Introduction to Node.js
tommy351
1
280
Other Decks in Programming
See All in Programming
MySQL のインデックスの種類をおさらいしよう! / overviewing indexes in MySQL
okashoi
0
170
チームでモデリングを育てるうえで 考えたこと・気づいたこと / Cultivating Modeling in Teams: Thoughts and Insights
mackey0225
5
2.2k
Parallel Socket Communication in Swift
s_shimotori
0
220
Building a Smaller App Binary
kateinoigakukun
2
200
The Future of C++ Interoperability: Insights from Porting a Game to Swift
teamhimeh
0
270
Creating Retro-Style Photos Using Swift
ski
1
340
Introduction for Open Source Swift Workshop
giginet
PRO
0
180
導入から5年が経って見えた Datadog APM 運用の課題
bgpat
2
540
オブジェクト指向コードレビューの新しいアプローチ
akkie76
3
1.5k
決断するための勇気、そのためのBacklog / Courage to make decisions, Backlog for that.
seike460
PRO
4
1.9k
とにかくHTTP3をライトニングに話す / Anyway, I'll talk to Lightning about HTTP3.
seike460
PRO
0
120
Cloud RunとCloud PubSubでサーバレスなデータ基盤2024 with Terraform / Cloud Run and PubSub with Terraform
shinyorke
7
1.9k
Featured
See All Featured
Building Your Own Lightsaber
phodgson
97
5.6k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
18
6.8k
Faster Mobile Websites
deanohume
296
30k
A Tale of Four Properties
chriscoyier
150
22k
Build The Right Thing And Hit Your Dates
maggiecrowley
23
1.9k
YesSQL, Process and Tooling at Scale
rocio
160
13k
Optimizing for Happiness
mojombo
369
69k
Web Components: a chance to create the future
zenorocha
304
41k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
185
15k
Building an army of robots
kneath
300
41k
JazzCon 2018 Closing Keynote - Leadership for the Reluctant Leader
reverentgeek
178
11k
The World Runs on Bad Software
bkeepers
PRO
60
6.6k
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