王者歸來:Node.js 學習課程 2之6 – Express 登場

Node.js 初階學習

目錄:

路由 routing

路由定義的結構如下:


app.METHOD(PATH, HANDLER)

備註
‧ app 是 express 的實例。
‧ METHOD 是 HTTP 要求方法。
‧ PATH 是伺服器上的路徑。
‧ HANDLER 是當路由相符時要執行的函數。

後面會有詳細解釋

我們直接來實作一下

 

安裝 & 建立專案: express專案

mkdir express_app1
cd express_app1
npm init
npm install express —save
nano index.js

 

index.js

<!-- index.js -->
var express = require('express');
var app = express();

// GET method route
app.get(‘/app', function (req, res) {    // req = request, res =  response
  res.send('GET request to the homepage');
});

// POST method route
app.post('/app', function (req, res) {
  res.send('POST request to the homepage');
});

app.listen(8081, function () {
     console.log('Example app listening on port 8081!');
});
  • 測試你的 POST:

打開瀏覽器然後輸入 http://ip:8081/app 來測試 GET
POST 如何測試?使用 Postman~!

  • 下載網址:
    https://www.getpostman.com

結果顯示:

我們達到了什麼?


==> 製作 Server API !

但是我需要抓參數?

express 之 取得參數:request

假設你有個 URL:
http://ip:port/app/users?id=4&token=sdfa3&geo=us
如果是 GET
抓取方式是:req.query.參數名稱

如果是 POST
抓取方式是:req.body.參數名稱

e.g.

console.log( ‘user ID:’ + req.query.id) //結果顯示 4

 

express 之 取得參數:URL 參數

URL 參數是什麼? 把參數當成 URL 的一部分
非常的 popular 可以增加 SEO
範例一
app.get(‘ /users/:userId/books/:bookId’, function (req, res) {
res.send(req.params);
})

Request URL: http://localhost:3000/users/34/books/8989

req.params: { "userId": "34", "bookId": "8989" }

使用 – 或是 . 來區隔資料(方便的做法!)
參數設計: /flights/:from-:to
URL: http://url:port/flights/LAX-SFO

req.params: { "from": "LAX", "to": "SFO" }

參數設計: /plantae/:genus.:species
URL: http://url:port/plantae/Prunus.persica

req.params: { "genus": "Prunus", "species": "persica" }

 

練習時間:

使用以下 URL 把他的參數抓到後反回 res.send:
http://你的IP/app/users?id=4&token=sdfa3&geo=us

答案

// routes will go here
app.get('/app/users', function(req, res) {
    var data = req.query.id + ‘  ‘;
    data += req.query.token + ‘  ‘;
    data += req.query.geo;  

    res.send( data );
});

 

背一下

  • GET 用 query
  • “URL 參數” 用 params
  • POST 用 body

最好用的是丟 POST JSON 進入然後回傳 JSON

 

express 靜態資料

使用語法:

app.use(express.static(‘public’)); 

=>public 是你放靜態資料的檔案夾

來實作一下, 在剛才的專案加入以下檔案

mkdir public
nano hello.html <— 加點 html 內容到裡面

 

檔案夾範例

node_modules
index.js
public/
/images/logo.png
/js/app.js
/css/style.css
/hello.html

我們繼續

cd ..

nano index.js

 

index.js

var express = require('express');
var app = express();
app.use(express.static(‘public’));  // 加入這行
// GET method route
app.get(‘/app', function (req, res) {    // req = request, res =  response
  res.send('GET request to the homepage');
});

app.listen(8081, function () {
     console.log('Example app express_static listening on port 8081!');
});

 

結果

結果可用以下 url 來看

http://locaohost:8081/hello.html
http://localhost:8081/images/logo.png
http://localhost:8081/css/style.css

可拿來放用影音檔案、圖檔、css 等非程式的資料

 

課程完畢,輕鬆一下吧~!

 

如轉載請標明來源!

Leave a Reply

Your email address will not be published. Required fields are marked *