認識網址規則

假設在 google 搜尋 Node.js，

https://www.google.com/search?q=node&rlz=1C1GCEA_enTW1013TW1013&oq=Node&aqs=chrome.0.69i59l2j69i60l6.1412j0j7&sourceid=chrome&ie=UTF-8

說明：

• https：有分為 http 與 https 協定，而 https 有加密功能，這邊主要是要講 https，簡單說就是如果有需要填寫表單，請務必檢查是否是 https 開頭的喔！
• www.google.com：這個為網址，或稱為 domain。
• /search：這是路徑，這邊代表搜尋（名稱可以自訂）。
• ?q=xxxx：此為參數，會用 ?q 代表，q 代表 query。
• &：多個參數會用 & 做串聯。

從以上可以簡易認識基礎路由，透過網址可以知道網址的意義。

延伸閱讀 超級文字傳輸安全協定

路由設計

已經可以透過 express 建立一個 Web 伺服器，如果沒有特別給路徑，預設為根目錄，而這次給予兩個路徑。

app.js

const express = require("express");
const app = express();

app.get("/page/index", (request, response) => {
  response.send(`<h1>Hello, Node</h1>`);
});

app.get("/page/about", (request, response) => {
  response.send(`<h1>About Node</h1>`);
});

const port = process.env.port || 3000;
app.listen(port);

可以看到把路徑改成在 page，而 page 下有兩個內容，一個是 index 跟 about，並且有給對應的標題文字，當網址輸入為 /page/index，則會出現 Hello,Node!；相對的網址改成 /page/about，就會出現 About Node。

/page/index

/page/about

使用 params 取得指定路徑

可以透過 request 的參數 params 取得路由的參數，在要取得動態參數的前面可以加上冒號，宣告一個變數來存取 request.params 的結果，

app.js

app.get("/page/:name", (request, response) => {
  let params = request.params;
  console.log(params); 
});

terminal

假設我在網址上對應 params 的位置輸入 mickey，可以看到會得到一個物件 {name: mickey}，代表有抓到 params 這個物件，所以可以得知，要抓取的就是 request.params.name 這個值，如果要同步把這個值渲染在網頁上，可以寫成：

app.js

app.get("/page/:name", (request, response) => {
  let params = request.params.name;
  response.send(`<h1>param is ${params}</h1>`);
});

browser

在設定一個有趣的情境，假設我要查一個名字叫做 mickey，如果找到就顯示跟輸入一樣的，如果沒有就查無此人。

app.js

app.get("/page/:name", (request, response) => {
  let params = request.params.name;
  if (params !== "mickey") {
    response.send(`<h1>param is Not Found</h1>`);
  } else {
    response.send(`<h1>param is ${params}</h1>`);
  }
});

透過 query 取得網址參數

既然可以取得指定參數，當然也可以取得網址的參數，使用者透過輸入框以及有些搜尋會選擇一次要顯示幾筆的選項，透過 Node.js 取到路徑參數再把資料傳到前端。

此時網址需要為：

127.0.0.1:3000/page/tom?limit=10&q=ddd

app.js

app.get("/page/:name", (request, response) => {
  let params = request.params.name;
  let limit = request.query.limit;
  console.log(limit); // 網址帶入的參數
  let query = request.query.q;
  console.log(query); // 網址帶入的參數
  response.send(
    `<h1>${params} 的播放清單</h1>` +
    `<p>關鍵字為 ${query} 的資料中找出 ${limit} 資料 </p>`
  );
});

terminal

網頁呈現畫面就會是輸入的參數。

browser

注意：網址務必要帶入參數，不然會抓不到而變成 404。

完整程式碼

const express = require("express");
const app = express();

app.get("/page/index", (request, response) => {
  response.send(`<h1>Hello, Node</h1>`);
});

app.get("/page/about", (request, response) => {
  response.send(`<h1>About Node</h1>`);
});

app.get("/page/:name", (request, response) => {
  let params = request.params.name;
  let limit = request.query.limit;
  console.log(limit);
  let query = request.query.q;
  console.log(query);
  response.send(
    `<h1>${params} 的播放清單</h1>` +
    `<p>關鍵字為 ${query} 的資料中找出 ${limit} 資料 </p>`
  );
});

const port = process.env.port || 3000;
app.listen(port);