---
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('歡迎來到登入頁')
})
```
回報流程
---
請同學依照下圖教學觀看解答、回報答案:
回報格式：請在「回報區」貼上 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)|
Sign in with Wallet
Connect another wallet