Lesson 2
Express 簡介
By BigQ
Install Express
我們可以透過之前介紹的npm安裝express
在終端輸入 npm install –g express
–g 代表在全域下都安裝express套件
Install Express
一、終端機輸入express my_app
(也可以用/改變安裝目錄)
二、下載app所需套件
cd my_app進入目錄
npm install
新增專案
Install Express
已經新增好一個express的專案了!
預設執行檔為app.js
Install Express
輸入node app.js執行
Express - Hello world
如同http模組,我們先建立一個Hello World。
Express - Hello world
儲存成helloworld.js 並用終端機執行即可。
我們發現與http建立server的方法大同小異。
http模組 express模組
Express - Hello world
用終端機執行時會出現以下
因為新版的express
可以不用creatsetver這個function
Express – Get & Router
我們建立Hello World時 :
app.get 可以帶入兩個參數,第一個是路徑名稱設定,第二個為回應函
式(call back function),回應函式裡面就如同之前的 createSer...
Express - Get & Router
我們可以用這樣的方法管理各頁面。
Express - Get & Router
請注意斜線部分
當初路徑設定為 /PVT 與 /user/
Express - Get & Router
我們加入一個可以讀取
使用者ID或是數字的頁面
Express - Get & Router
我們用app.all這個方法,自己先內定哪些使用者名稱
是在內部定義內的,如果輸入的路徑符合定義名稱,
就會被分配到對應的方法裡面。
Express - Get & Router
經過上面的判斷式
如果你是已經定義的使用者
就會往以下路徑走
Express - Get & Router
經過上面的判斷式
如果你是已經定義的使用者
就會往以下路徑走
Express - Get & Router
經過上面的判斷式
如果你是已經定義的使用者
就會往以下路徑走
Express – Get
我們現在要做一個表單
可以輸入資訊讓server端讀取資訊
分別用GET與POST的方式
Express – Get
做一個簡單的互動頁面,路徑設為localhost:3000/send
並且用“GET”的方法處理form。
Express – Get
在瀏覽器上看到的樣貌。
Express – Get
現在按下singnup,路徑會接到 /send去處理,所
以我們需要一個server端對應的方式。
我們要讓singup從express中讀出我們輸入的
Username, Email, Age等資訊,
並讓他有對應...
Express – Get
由req.query.name
把name 的值取出來。
最後req.send 把相對
應的處理傳給client。
if 是來判斷client 是不
是真的有傳值到 server
Express – Post
同Signup的做法一樣,做一個可以交換資訊的form。
Express – Post
我們要輸入的地方是用
<input …>
form的方法為POST
Express – Post
用 bodyParser() 讓 express 可以來解析 post 傳來的資料,再來就是
在處理 request 和 response 的 function 裡用 req.body 這個例子是用
req.bod...
Upcoming SlideShare
Loading in...5
×

nodejs -『PVD+』團隊內部Lesson2

743

Published on

『PVD+』團隊實習生: 許鈺群「BigQ」製作

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
743
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
8
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

nodejs -『PVD+』團隊內部Lesson2

  1. 1. Lesson 2 Express 簡介 By BigQ
  2. 2. Install Express 我們可以透過之前介紹的npm安裝express 在終端輸入 npm install –g express –g 代表在全域下都安裝express套件
  3. 3. Install Express 一、終端機輸入express my_app (也可以用/改變安裝目錄) 二、下載app所需套件 cd my_app進入目錄 npm install 新增專案
  4. 4. Install Express 已經新增好一個express的專案了! 預設執行檔為app.js
  5. 5. Install Express 輸入node app.js執行
  6. 6. Express - Hello world 如同http模組,我們先建立一個Hello World。
  7. 7. Express - Hello world 儲存成helloworld.js 並用終端機執行即可。 我們發現與http建立server的方法大同小異。 http模組 express模組
  8. 8. Express - Hello world 用終端機執行時會出現以下 因為新版的express 可以不用creatsetver這個function
  9. 9. Express – Get & Router 我們建立Hello World時 : app.get 可以帶入兩個參數,第一個是路徑名稱設定,第二個為回應函 式(call back function),回應函式裡面就如同之前的 createServer 方法, 裡面我們提出 request, response 兩個物件可供使用。
  10. 10. Express - Get & Router 我們可以用這樣的方法管理各頁面。
  11. 11. Express - Get & Router 請注意斜線部分 當初路徑設定為 /PVT 與 /user/
  12. 12. Express - Get & Router 我們加入一個可以讀取 使用者ID或是數字的頁面
  13. 13. Express - Get & Router 我們用app.all這個方法,自己先內定哪些使用者名稱 是在內部定義內的,如果輸入的路徑符合定義名稱, 就會被分配到對應的方法裡面。
  14. 14. Express - Get & Router 經過上面的判斷式 如果你是已經定義的使用者 就會往以下路徑走
  15. 15. Express - Get & Router 經過上面的判斷式 如果你是已經定義的使用者 就會往以下路徑走
  16. 16. Express - Get & Router 經過上面的判斷式 如果你是已經定義的使用者 就會往以下路徑走
  17. 17. Express – Get 我們現在要做一個表單 可以輸入資訊讓server端讀取資訊 分別用GET與POST的方式
  18. 18. Express – Get 做一個簡單的互動頁面,路徑設為localhost:3000/send 並且用“GET”的方法處理form。
  19. 19. Express – Get 在瀏覽器上看到的樣貌。
  20. 20. Express – Get 現在按下singnup,路徑會接到 /send去處理,所 以我們需要一個server端對應的方式。 我們要讓singup從express中讀出我們輸入的 Username, Email, Age等資訊, 並讓他有對應的路徑與互動。
  21. 21. Express – Get 由req.query.name 把name 的值取出來。 最後req.send 把相對 應的處理傳給client。 if 是來判斷client 是不 是真的有傳值到 server
  22. 22. Express – Post 同Signup的做法一樣,做一個可以交換資訊的form。
  23. 23. Express – Post 我們要輸入的地方是用 <input …> form的方法為POST
  24. 24. Express – Post 用 bodyParser() 讓 express 可以來解析 post 傳來的資料,再來就是 在處理 request 和 response 的 function 裡用 req.body 這個例子是用 req.body.username 簡單想就是把 GET 用的 query 改成 body 就是了。
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×