Express 路由設計

前一篇講到了啟用 web 伺服器，那接下來就來介紹路由設計的部分

一般的路由

較為一般的路由，可以設計如下:

app.get('/user', function(req, res) {
  res.send('USER');
});

app.get('/email', function(req, res) {
  res.send('EMAIL');
});

這個時候 localhost:5000/user 頁面上會出現 USER
如果是 localhost:5000/email 頁面上會出現 EMAIL

---

動態路由

動態路由的意思是指，有時候網址會出現隨機亂碼的部分，這就是由動態路由產生的
假設今天想要路由是 /user/隨機輸入的名字
這個時候就可以這樣設計:

// 動態的部分前面加上冒號，並給予一個變數
app.get('/user/:name', function(req, res) {
  // 透過 request 的請求使用 params 的方式讀取變數，取得動態路由的參數
  const myName = req.params.name
  // 呈現在頁面上
  res.send(myName);
});

如果這時候輸入 localhost:5000/user/tom，頁面上就會出現 tom
如果輸入 localhost:5000/user/jerry，頁面就會出現 jerry

---

帶有參數的路由

有時候網址會帶有 ?參數=值 的方式做請求，那如果想要去讀取網址的參數的值該如何做？
假設發出請求的網址是這樣 localhost:5000/user/jerry?limit=10
這時候要如何去讀取 limit 參數的值？

app.get('/user/:name', function(req, res) {
  const myName = req.params.name
  // 利用 request 的 query 方式讀取參數，就可以取到值
  const str = req.query.limit
  console.log(str)
  res.send(myName);
});

這時候 console 看就可以看到 limit 的值了

---

進階路由設定(2021/04/30 更新)

有時候路由的複雜程度，會依照專案的大小而不一樣，如果今天想要做類似這樣的路由:

/user
/user/edit
/user/photo

的確，可以在每個 app.get(); 依照不同的路由去對應 render 不同的 ejs
但主要的那隻 app.js 就會變得凌亂不堪
這時候就可以採用現在介紹的方式

新建一個 routes 資料夾

根目錄新建一個 routes 資料夾，放置所有跟路由有關的 js 檔案
因為我的路由都跟 user 有關，所以我在 routes 內新增一支 user.js
接著這樣撰寫:

// 引用 express
const express = require('express');
// 使用 express 提供的 router
const router = express.Router();

// 設置不同的路由
router.get('/', function(req, res) {
  res.render('user');
});

router.get('/edit', function(req, res) {
  res.render('user-edit');
});

router.get('/photo', function(req, res) {
  res.render('user-photo');
});

// 最後做匯出的動作
module.exports = router;

引用 routes 內的 JS

接著把剛剛撰寫的 user.js 引入到 app.js

const user = require('./routes/user');
app.use('/user', user);

這個時候路由也會達到我們一開始的期望，是不是很神奇呢~