---
# System prepended metadata

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

---

---
tags: Node.js 直播班 - 2022 春季班
---
# 🏅 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)

[網址規則介紹](https://courses.hexschool.com/courses/1670869/lectures/39299599) 到 [query - 取得網址參數](https://courses.hexschool.com/courses/1670869/lectures/39299606)（章節影片）

### 題目（將答案貼在 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/QtL8zEW.png)

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


<!-- 解答
```javascript
- 登入
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` 也可以
```


-->

回報區
---

| 報數 | 組別 / 名字          | codepen / hackMD / 其他回饋                                                                                          |
| ---- | -------------------- | -------------------------------------------------------------------------------------------------------------------- |
| 1    | 第 6 組 / Wendy      | [HackMD](https://hackmd.io/@0k_MSPdgRPujozP6w_D-bA/Hy0bV_mS9)                                                        |
| 2    | 第 2 組 / Vic        | [HackMD](https://hackmd.io/HSVP0rHETSi85KHiF4XZ3w)                                                                   |
| 3    | 第 2 組 / Jin        | [HackMD](https://hackmd.io/0KXBPG5xQnC-1Cbami4_Lg)                                                                   |
| 4    | 第 3 組 / HedgehogKU | [HackMD](https://hackmd.io/rq3umQonRb2peE29nw-FJw)                                                                   |
| 5    | 第 4 組 / 小宥       | [HackMD](https://hackmd.io/q1ZgCKd-QaOJq5Gkp4vkHw)                                                                   |
| 6    | 第 3 組 / Hobby      | [HackMD](https://hackmd.io/@hobbyling/day12)                                                                         |
| 7    | 第 4 組 / sihle      | [HackMD](https://hackmd.io/@bugbug777/SktX1KmH5)                                                                     |
| 8    | 第 9 組 / 黃士桓     | [HackMD](https://hackmd.io/8hPKV4zlRSOj6rhdwZ0HPA)                                                                   |
| 9    | 第 2 組 / Genos      | [HackMD](https://hackmd.io/5A8AcAMeSSOA96WvjFH48g)                                                                   |
| 10   | 第 14 組｜East       | [HackMD](https://hackmd.io/fs-W0SKaSKW1H1N6wFAQ7w)                                                                   |
| 11   | 第 5 組 / Hazel      | [HackMD@Hazel](https://hackmd.io/@hazelwu/day12)                                                                     |
| 12   | Naiky                | [HackMD@Naiky](https://hackmd.io/@UWBC7rrORiKaLSBg226mZg/B14dcc7Sq)                                                  |
| 13   | 第 2 組 / peter      | [HackMD](https://hackmd.io/@peterchen1024/BkWY4jQrc)                                                                 |
| 14   | 第 6 組 / Ruta       | [HackMD](https://hackmd.io/ZXRBOBXVR6O0xvI7zvL2qQ)                                                                   |
| 15   | 第 3 組 /  hiYifang  | [HackMD](https://hackmd.io/@gPeowpvtQX2Om6AmD-s3xw/HkiSA6Jrc)                                                        |
| 16   | 第 2 組 /  joe chang | [HackMD](https://hackmd.io/uaRTw9c0TgOrADyXMmGL0Q?view#425---%E8%A8%AD%E8%A8%88%E5%9F%BA%E6%9C%AC%E8%B7%AF%E7%94%B1) |
| 17   | 第 2 組 /  Rikkubook | [HackMD](https://hackmd.io/27BI5WY2TUiotCtVGHDy8w)                                                                   |
| 18   | 第 4 組 /  苡安      | [HackMD](https://hackmd.io/oyTNvblxREGiLwtNH_xuYQ)                                                                   |
|19    |第 9 組 / konstante  |[HackMD](https://hackmd.io/VuTPH4cHSd6DXEEEHBBMRw?both)                                                                                                               |20    |第 2 組 / wendy.li  |[HackMD](https://hackmd.io/z1WIdu59TuOmaaMKUj9fBw) 
| 21   | 第 12 組 /  Jimmy  | [HackMD](https://hackmd.io/uc7pq9dHSwuBhHLMokNTJw?view) 
|22    |第 10 組 / 橘子  |[HackMD](https://hackmd.io/pdx9tWc5ThyUlbhZ84Av0g) 
|23    |第 11 組 / Han Lai  |[HackMD](https://hackmd.io/9xS2NcFNTR-ScMAZCg3jWw?view) 
|24    |第 8 組 / Hank  |[HackMD](https://hackmd.io/@TFOivyvXT-qpG6SieUTfgw/S1xg7HNS9) 
|25    |第 1 組 / Claire  |[HackMD](https://hackmd.io/Vy41ZUQfQN6bMUf7DhcyRQ) 
|  26  |第 15 組 / Chiu  |[HackMD](https://hackmd.io/sIbNcIDNRhm5MQxzyNkBmw?view) 
| 27 | 第 3 組 / Larry | [HackMD](https://hackmd.io/Nexj_UDNTWuYVYZ8Mob3qA) |
| 28 | 第 3 組 / Adam Hsu | [HackMD](https://hackmd.io/@S9gD__kVTSiQUupQNn_4FQ/BkXaWA4r9)
| 29 | 第 16 組 / 皓皓 | [HackMD](https://hackmd.io/@cutecat8110/S1Ncl1HH9)
| 30 | 第 8 組 / Jordan Tseng | [HackMD](https://hackmd.io/ZrTWxsf4RhGXqneNG-NbVQ)
| 31 | 第 15 組 / Tofu | [HackMD](https://hackmd.io/NCYzANZKQuueo_KGn3O0XA)
| 32 | 第 10 組 / Otis | [HackMD](https://hackmd.io/@wAXXVY7eQ2WkcVtv8Vopzg/Bkhr-tHrq)
| 33 | 第 13 組 / KFC |[HackMD](https://hackmd.io/HMUm3Zf_SUqYFwcAuP1IDg)|
| 34 | 第 3 組 / Justin |[HackMD](https://hackmd.io/Ud99s9xURH-6HgktAQpimQ)|
| 35 | 第 1 組 / Ed Huang |[HackMD](https://hackmd.io/-EEiVV_rSXCmQguAlj-zzQ?view)|
|36    |第 11 組 / Jamie Lee  |[HackMD](https://hackmd.io/z0Tsi83zSlO38GkquyCINA?view) 
| 37 | 第 9 組 / Reynold | [HackMD](https://hackmd.io/@dL7AuQEMQ6KpCSRHaYElOA/BJuXrk_rc)
| 38 | nick6303 | [HackMD](https://hackmd.io/slwzUvHvRDyooJ5f2BD2QQ)|
| 39 | 第14組/uniza| [HackMD](https://hackmd.io/AXQyCLN2S_OeNgEPdV3mIQ)|
| 40 | 第 1 組 / snow| [HackMD](https://hackmd.io/@snowsuika/rymhtsiH5)|
| 41 | 第 7 組 / jason06286| [HackMD](https://hackmd.io/_xLqZC_oRzGLfABFywMYmw)|
| 42 | 第 15 組 / yolala| [HackMD](https://hackmd.io/8hPKV4zlRSOj6rhdwZ0HPA)|
| 46 | 第 5 組 / Nap | [HackMD](https://hackmd.io/@8x8YzkXNSzafUSO3LZTmUw/r1d37rCHq)|
| 47 | 第 3 組 / 小葉 | [HackMD](https://hackmd.io/@FyKv37KcRSWqAO_e336w8g/HJCxTIRr9)|
| 48 | 第11 組 / mandy | [HackMD](https://hackmd.io/0awuuYctT9elgdXmffpJ_g)|
| 49 | 第 1 組 / Emily Hsi | [HackMD](https://hackmd.io/@EmilyHsi/rJTNUx-85)|
