---
# System prepended metadata

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

---

# 🏅 Day 12 - 設計基本路由
Express 定義路由的結構如下

```javascript
app.METHOD(PATH, HANDLER)
```
-   `app` 是 `express` 的實例。
-   `METHOD` 是 [HTTP 要求方法](http://en.wikipedia.org/wiki/Hypertext_Transfer_Protocol)（GET、POST ...）。
-   `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('新增一則貼文');
})
```

若是要到使用者相關的頁面，像是：個人資料、自己的追蹤名單，則可以設計為
```javascript
app.get('/user/profile', (req, res) => {
  res.send('個人資料');
})

app.get('/user/following', (req, res) => {
  res.send('追蹤名單');
})
```

### 路由進階管理
可以將有相關的路由拆分至另一個檔案管理，以上方 `user/*` 為例，將檔案結構變為如下：
```
- app.js
- routes/     // 存放關於路徑的檔案
  |- user.js  // 和使用者相關的路徑
```
::: spoiler app.js（點擊三角形展開完整程式碼）
```javascript=
const express = require('express');
const app = express();

// routes
const user = require('./routes/user');

app.use('/user', user);

app.listen(3000);
```
:::

::: spoiler routes/user.js 
```javascript=
const express = require('express');
const router = express.Router();

router.get('/profile', (req, res) => {
  res.send('個人資料');
})

router.get('/following', (req, res) => {
  res.send('追蹤名單');
})

module.export = router;
```
:::


### 參考資源

- [Express 基本路由](https://expressjs.com/zh-tw/starter/basic-routing.html)
- 課程影音「Express - Node.js Web 應用程式架構」

題目
---
參考[最終作業設計稿](https://xd.adobe.com/view/c0763dbe-fc15-42e8-be0b-8956ed03e675-9525/grid)頁面，設計當使用者造訪以下頁面（`GET`）時的路由， response 可先回傳一段簡單的文字即可
- 全體動態牆
- 個人資料頁面
- 個人追蹤名單
- 個人按讚列表
> 可以嘗試拆分個人相關的路由

範例
app.js
```javascript=
const express = require('express');
const app = express();

app.get('/posts', (req, res) => {
  res.send('全體動態牆')
})
...

app.listen(3000);
```
routes/user.js
```javascript=
const express = require('express');
const router = express.Router();

...

module.export = router;
```

## 回報流程

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

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

<!-- 解答：  
app.js：
```javascript=
const express = require('express');
const app = express();
const user = require('./routes/user');


app.get('/posts' (req, res) => {
  res.send('全體動態牆')
});

app.use('/user', user);

app.listen(3000);
```


routes/user.js：
```javascript=
const express = require('express');
const router = express.Router();

router.get('/profile', (req, res) => {
  res.send('個人資料');
})

router.get('/following', (req, res) => {
  res.send('追蹤名單');
})

router.get('/likeList', (req, res) => {
  res.send('按讚列表');
})

module.export = router;
```
-->




回報區
---
<!-- 
將答案貼至下方表格內，格式：
| Discord 暱稱 | [CodePen](連結) |
-->

|    Discord    |   CodePen ／ 答案  |
|:-------------:|:-----------------:|
| xxx | [CodePen]() |
| 2魚 | [CodePen](https://codepen.io/ijrekmsn-the-sans/pen/JjVmOEQ) |
| shuantt | [CodePen](https://codepen.io/th-tseng/pen/ZEZqNJK )|
| Aida | [CodePen](https://codepen.io/ada23410/pen/KKYGLea?editors=0010)|
| 苡安 | [hackmd](https://hackmd.io/@L7K9-66lSeagS28AP0_GjQ/Bkt_hryWA)|
| Theodore | [CodePen](https://codepen.io/GustavoFringgg/pen/YzMJopP?editors=0010) |
| YC | [CodePen](https://codepen.io/YCLu/pen/yLrRdXj) |
| 羽 | [CodePen](https://codepen.io/lingling-Syu/pen/MWRPMXP?editors=0010) |
| Chia Pin | [CodePen](https://codepen.io/joker-cat/pen/dyLQbJQ) |
| wei | [CodePen](https://codepen.io/Wei-the-sasster/pen/wvZQwja?editors=0010) |
| ellallu0903 | [CodePen](https://codepen.io/ellallu0903/pen/MWRzYbM) |
| william_hsu | [CodePen](https://codepen.io/william8815/pen/GRLwpdN) |
| Hank | [CodePen](https://codepen.io/tw1720/pen/VwNVjzY) |
|cho|[CodePen](https://codepen.io/cho195/pen/NWmEjeN)|
|Lobinda|[CodePen](https://codepen.io/Lobinda/pen/GRLwvVX)|
|Tiya|[CodePen](https://codepen.io/Tiya_blank/pen/rNbQPbY)|
|Ciel|[CodePen](https://codepen.io/nycteachen/pen/rNbQbab)|
|tung030374|[CodePen](https://codepen.io/tung__u/pen/YzMRoEz)|
|Benson|[CodePen](https://codepen.io/nosneb83/pen/dyLwYLP)|
| Fabio20 | [CodePen](https://codepen.io/fabio7621/pen/dyLwpRp?editors=0010) |
|ej_chuang|[CodePen](https://codepen.io/EJChuang/pen/jORXVor)|
|mei|[CodePen](https://codepen.io/l_umei/pen/MWRZvVR)|
|群嘉|[CodePen](https://codepen.io/efzdamnp-the-lessful/pen/zYXyapZ?editors=0010)|
|jenny7532|[CodePen](https://codepen.io/wei-chen-wu/pen/ExJGpXR)|
| runweiting |[CodePen](https://codepen.io/weiting14/pen/GRLPapx)|
| Henry | [HackMD](https://hackmd.io/A6VVhoTfSBmNIbE05dVKXQ) |
| 瑀君 |[HackMD](https://hackmd.io/@sh5ojkmt/HyMy0ECZC)|
| albertyang3576 | [CodePen](https://codepen.io/albertyang3576/pen/wvZLqMb?editors=0010) |
| zaoannihao | [CodePen](https://codepen.io/ckhwdvrx-the-solid/pen/BaeoXmQ) |