---
# System prepended metadata

title: "\U0001F3C5 Day 20"
tags: [Node.js 直播班 - 2022 春季班]

---

---
tags: Node.js 直播班 - 2022 春季班
---
# 🏅 Day 20



## Middleware

Express 在收到 request 到回傳 response，中間會經過一系列的 middleware（中間件/中介軟體）處理，
middleware 本身像是一個守門員的概念，通常會使用 `app.use((req, res, next) => {...})` 並帶入 function，function 中除了 req 及 res 參數，還有 next，當執行 `next()` 就代表要將控制權交給下一個 Middleware  
需注意若在 Middleware 最後沒有執行 `next()`，程式就會停留在這個 Middleware，無法進入下一個階段

使用 `app.use((req, res, next) => {...})` 的寫法在接收 request 時都會經過此 middleware，若是只想要在接收特定 request 時經過 middleware 把關，也可以改為此寫法
```javascript
const checkLogin = (req,res,next) => {
    const url = req.url;
    if(url !== '/'){
        next()
    } else {
      res.send('你的登入資料有錯！')
    }
}
// 將 middleware 放在特定的路由中，只有接收到此 request 才會經過 checkLogin middleware
app.get('/', checkLogin, function(req,res){
  res.send('<html><head></head><body><h1>Login</h1></body></html>')
})
```

### 參考資源

[使用 Express 中介軟體](https://expressjs.com/zh-tw/guide/using-middleware.html)
[middleware 設計](https://courses.hexschool.com/courses/1670869/lectures/39299787)（章節影片）

### 題目（將答案寫在 HackMD 並提交至回報區）
嘗試使用 `app.use()` 設計一個處理錯誤路由以及一個伺服器程式錯誤的 Middleware，

- 處理錯誤路由：
當 client 端造訪錯誤的路由，就回傳狀態碼 404，並回傳 JSON 物件，status 為 `'error'`，回饋訊息 message 為`無此頁面資訊`

```

```

- 伺服器程式錯誤：
當 server 端有程式出錯的情況，導致 client 端無法正確造訪路由，就回傳狀態碼 500，並回傳 JSON 物件，status 為 `'error'`，回饋訊息 message 為 `系統錯誤，請恰系統管理員`

```

```

回報流程
---
請同學依照下圖教學觀看解答、回報答案:

![](https://i.imgur.com/QtL8zEW.png)

回報格式：請在「回報區」貼上 CodePen 或 HackMD 連結回報答案 (為了統計人數，請同學依序加上「報數」)


<!-- 解答
```javascript
app.use(function(req, res, next) {
  res.status(404).json({
    status: 'error',
    message: "無此頁面資訊",
  });
});


app.use(function(req, res, next) {
  res.status(500).json({
   status: 'error',
   message: '系統錯誤，請洽系統管理員'
 });
});
```



-->

回報區
---

| 報數 | 組別 / 名字          | codepen / hackMD / 其他回饋                                           |
| ---- | -------------------- | --------------------------------------------------------------------- |
| 1    | 第二組 / Jin         | [hackMD](https://hackmd.io/a8HBY5NHSnKm4UjNElt9oQ)                    |
| 2    | 第 4 組 / 小宥       | [hackMD](https://hackmd.io/8BYM16aPQzG5Zjox0F1eew)                    |
| 3    | 第 6 組 / Wendy      | [hackMD](https://hackmd.io/@0k_MSPdgRPujozP6w_D-bA/ry-Il2lUq)         |
| 4    | 第 3 組 / HedgehogKU | [HackMD](https://hackmd.io/1xw9abntT1CsXiqcZOX9ew)                    |
| 5    | 第 9 組 / 黃士桓     | [HackMD](https://hackmd.io/XIMZpAa7RDWYHnorTbIMqQ)                    |
| 6    | 第 14 組｜East       | [HackMD](https://hackmd.io/jV7Pw8HrSm6fbNfVZDXPKg)                    |
| 7    | 第 6 組 / Ruta       | [HackMD](https://hackmd.io/9gg7qdVbTpqm4tnHYgJzqQ)                    |
| 8    | 第 3 組 /  hiYifang  | [HackMD](https://hackmd.io/@gPeowpvtQX2Om6AmD-s3xw/ryrhdUASq)         |
| 9    | 第 3 組 / Hobby      | [HackMD](https://hackmd.io/@hobbyling/day20)                          |
| 10   | 第 2 組 / joe        | [HackMD](https://hackmd.io/uaRTw9c0TgOrADyXMmGL0Q?view#55-Middleware) |
| 11   | 第 3 組 / Justin     | [HackMD](https://hackmd.io/kCX893OxRJa30qZRcQCywg)                    |
| 12   | 第 4 組 / 苡安       | [HackMD](https://hackmd.io/UeVugdBsSRizGQbF7l-Sxg)                    |
|13    |第 9 組 / konstante  |[HackMD](https://hackmd.io/QAlQENxuS7aLmJtpukFdCA?both)                                                                       |
|14    |第 1 組 / Claire  |[HackMD](https://hackmd.io/SfULLF5STtalTrP5tx0Q-Q)|
| 15 | 第 2 組 / wendy.li | [HackMD](https://hackmd.io/C0pZk1quTAeM3t-7Tu4jwA)}
| 16 | KFC | [HackMD](https://hackmd.io/T6qxhB7JT6W9tAtwRqhmEw?view)|
| 17 | 第 2 組 / Hank | [HackMD](https://hackmd.io/@hank-hsiao/SyN17uZ8q)|
| 18 | 第 11 組 / Han Lai | [HackMD](https://hackmd.io/3GJO0zSkSlaRae4UQF13yw?view)|
|19|第8組/Jordan Tseng|[HackMD](https://hackmd.io/Yp0a--8xRwW9LAezQaam-A?both)
| 20 | 第 5 組 / Hazel | [HackMD@Hazel](https://hackmd.io/@hazelwu/day20)|
| 21 | 第 15 組 / Chiu | [HackMD](https://hackmd.io/5aejXEtSQcy5pyaJaOg0Hg)|
| 22 | 第 1 組 / Ed Huang | [HackMD](https://hackmd.io/A03WlCIGRnSOZaoe2KOH9g?view)|
| 23 | 第 2 組 / Rikkubook | [HackMD](https://hackmd.io/IVJw2cB7Sm629gejnBglSg)|
| 24 | 第 11 組 / mandy | [HackMD](https://hackmd.io/eFmOSrpRSFKwzW97gQ02LQ?view)|
| 25 | 第 2 組 / peter | [HackMD](https://hackmd.io/@peterchen1024/r1Q_wYIU5)|
| 26 | 第 10 組 / Otis | [HackMD](https://hackmd.io/mhU5hOLJQ-Ou9Z5s7CDWiQ?view)|
| 27 | 第 3 組 / 小葉 | [HackMD](https://hackmd.io/@FyKv37KcRSWqAO_e336w8g/Syxemuywc)|
| 28 | 第 12 組 / Jimmy | [HackMD](https://hackmd.io/I_aVMaA6RYuXus7bOLbQEw)|
| 29 | 第 16 組 / 皓皓 | [HackMD](https://hackmd.io/@cutecat8110/SkcICp2P9)|
| 30 | 第 15 組 / yolala | [HackMD](https://hackmd.io/2FAZs90IRM6bPHprZT30mw)|