---
# System prepended metadata

title: "\U0001F3C5 Day 12 - 設計基本路由"
tags: [Node.js 直播班 - 2023 春季班]

---

---
tags: Node.js 直播班 - 2023 春季班
---

# 🏅 Day 12 - 設計基本路由

延續前一天的每日任務，我們設定當造訪根目錄 `'/'`時，會回傳 Hello World，接著可以此類推，設定當造訪其他頁面的路由（router）

Express 定義路由的結構如下

```javascript
app.METHOD(PATH, HANDLER)
```
-   `app` 是 `express` 的實例。
-   `METHOD` 是 [HTTP 要求方法](http://en.wikipedia.org/wiki/Hypertext_Transfer_Protocol)。
-   `PATH` 是伺服器上的路徑。
-   `HANDLER` 是當路由相符時要執行的函數。

以[最終作業設計稿](https://xd.adobe.com/view/c0763dbe-fc15-42e8-be0b-8956ed03e675-9525/grid)為例，當造訪「全體動態牆」頁面時，路由可以設定為
```javascript
app.get('/posts', (req, res) => {
  res.send('全體動態牆')
})
```
新增貼文（POST 請求）
```javascript
app.post('/posts', (req, res) => {
  res.send('新增一則貼文')
})
```
若是使用者的個人頁面，因每個使用者會有各自的 id 或帳號，此時就可以設計成動態路由
再透過 `req.params` 取得參數
```javascript
app.get('/user/:id', (req, res) => {
  const id = req.params.id
  res.send(`${id} 個人頁面`)
})
```

### 參考資源

- [Express 基本路由](https://expressjs.com/zh-tw/starter/basic-routing.html)
- 課程影音「網址規則介紹」到 「query - 取得網址參數」

## 題目（將答案貼在 HackMD 並提交至回報區）
參考[最終作業設計稿](https://xd.adobe.com/view/c0763dbe-fc15-42e8-be0b-8956ed03e675-9525/grid)頁面，設計當使用者造訪以下頁面（`GET`）時的路由， response 可先回傳一段簡單的文字即可
- 登入
- 註冊
- 全體動態牆
- 個人牆
- 個人追蹤名單

範例

```javascript
app.get('/login', (req, res) => {
  res.send('歡迎來到登入頁')
})
```



## 回報流程

將答案連結貼至底下回報就算完成了喔! 
解答位置請參考下圖（需打開程式碼的部分觀看）

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

<!-- 解答：  

- 登入
app.get('/login', (req, res) => {
  res.send('歡迎來到登入頁')
})
- 註冊
app.get('/signin', (req, res) => {
  res.send('歡迎來到註冊頁')
})
- 全體動態牆
app.get('/posts', (req, res) => {
  res.send('歡迎來到全體動態牆')
})

- 個人牆
app.get(`/user/:id`, (req, res) => {
  const id = req.params.id
  res.send(`歡迎來到 ${id} 個人動態`)
})
// path 設定為 `/:id` 也可以

- 個人追蹤名單
app.get(`/user/:id/following`, (req, res) => {
  const id = req.params.id
  res.send(`${id} 追蹤名單`)
})
// path 設定為 `/:id/following` 也可以


-->



回報區
---

| 報數 | 組別／Discord 名字  |                                                  Codepen／HackMD／其他回饋                                                   |
|:----:|:-------------------:|:----------------------------------------------------------------------------------------------------------------------------:|
|  1   |  北 10 組 / Benson  | [Github Benson - Day 12](https://github.com/ioveasdkre/HexschoolOperation/tree/main/NodejsEnterpriseClass/day40-tasks/day12) |
|  2   |  北 1 組 / PittWu   |                        [Blog Post - Day 12](https://pitt-wu-blog.vercel.app/docs/day12-basic-router)                         |
|  3   | 北 8 組 / Zhao Chen |       [GitHub - Day 12](https://github.com/zhao1995chen/NodejsEnterpriseClass/blob/master/daily-task/day12/server.ts)        |
| 4 | 中 4 組 / jimkk159 | [HackMD - Day 12](https://hackmd.io/fXm17D_yTd-zpQ5Qjpan_A) |
| 5 | 中 3 組 / Wendy | [Notion - Day 12](https://jewel-cellar-80e.notion.site/Day-12-85a12d270dcd4e5c8796836876fdb406) |
|  6  |  北 12 組 / Sam Lin  | [GitHub - Day 12](https://github.com/samlin1122/hex-school/blob/main/daily-challenges/day12.js)
|  7  |  北 1 組 / MayYi  | [HackMD - Day 12](https://hackmd.io/Ad9U3HE1RFqEuOP0-YQ2rA)
|  8  |  北 5 組 / 圈圈  | [HackMD - Day 12](https://hackmd.io/yA2fWegmQ02inwaRDWrZnA?view)|
|  9  | 北 13 組 / Louisa  | [GitHub - Day 12](https://github.com/louisa0416/NodejsEnterpriseClass/tree/master/daily-task/day12) |
|  10  | 北 13 組 / sasha  | [HackMD - Day 12](https://hackmd.io/@sashaye/HkhvnM_Zh) |
|  11  | 南 1 組 / hiYifang  | [HackMD - Day 12](https://hackmd.io/@gPeowpvtQX2Om6AmD-s3xw/HkiSA6Jrc) |
|  12  | 中 4 組 / Zoey  | [GitHub - Day 12](https://github.com/jsbo12551a/hexschool_homework/blob/main/day12/app.js) |
| 13 | 北 5 組 / Albee | [GitHub - Day 12](https://github.com/albee-chang/hexschool-node-dailytask/blob/main/day12/index.md) |
| 14 | 北 16 組 / 啊培培 | [GitHub - Day 12](https://github.com/LABIBI-LG/Courses/blob/main/hexschool/nodeJS/Live_Course/Daily_Tasks/day12/app.js) |