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

app.METHOD(PATH, HANDLER)

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

以「全體動態牆」頁面為例，當造訪「全體動態牆」頁面時，路由可以設定為

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

新增貼文（POST 請求）

app.post('/posts', (req, res) => {
  res.send('新增一則貼文');
})

若是要到使用者相關的頁面，像是：個人資料、自己的追蹤名單，則可以設計為

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（點擊三角形展開完整程式碼）

const express = require('express');
const app = express();

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

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

app.listen(3000);

:::

::: spoiler routes/user.js

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 應用程式架構」

題目
---
設計當使用者造訪以下頁面（`GET`）時的路由， response 可先回傳一段簡單的文字即可
- 全體動態牆
- 個人資料頁面
- 個人追蹤名單
- 個人按讚列表
> 可以嘗試拆分個人相關的路由

範例
app.js

const express = require('express');
const app = express();

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

app.listen(3000);

routes/user.js

const express = require('express');
const router = express.Router();

...

module.export = router;

## 回報流程

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


<!-- 解答：
app.js：

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：

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 ／ 答案 |
|:-------------:|:-----------------:|
| Tau | [CodePen](https://codepen.io/Tau-Hsu/pen/LEYYppy?editors=0010) |
| adengg | [CodePen](https://codepen.io/Osases/pen/zxYYrXM?editors=0012) |
|janetlai|[CodePen](https://codepen.io/eiddkqxz-the-builder/pen/dPyyXoR)
| poyi | [CodePen](https://codepen.io/poyi-the-flexboxer/pen/JojPXjj?editors=0010) |
| hannahpun | [CodePen](https://codepen.io/hannahpun/pen/ogNNZgP) |
| sian | [CodePen](https://codepen.io/uxitysjl-the-flexboxer/pen/qEBBwJL?editors=0010) |
| bian_yang_mofa | [CodePen](https://codepen.io/cssf998811/pen/wBvBdao?editors=0010) |
| sui_hsilan | [CodePen](https://codepen.io/suihsilan/pen/yyLYOab?editors=0010) |
| helena | [CodePen](https://codepen.io/helena27/pen/ogNjxYJ) |
| JC | [CodePen](https://codepen.io/lifetimingwhisper/pen/pvojRBB) |
| yutzu | [CodePen](https://codepen.io/dtafsrmf-the-lessful/pen/RNwWjpG?editors=0010) |
|ZoeKang|[CodePen](https://codepen.io/byehywmx-the-animator/pen/OPJMvog?editors=0010)
|shiang|[CodePen](https://codepen.io/shiang29/pen/PwozYby?editors=0010)
|HarryKuo|[CodePen](https://codepen.io/harry_kuo/pen/ZYEBKxg?editors=0010)|
| hsin yu |[CodePen](https://codepen.io/tina2793778/pen/jEOBKLY)|
| li wei-min |[CodePen](https://codepen.io/leewayne/pen/KwKmNxo?editors=1010)|
|wuyuli_21403|[Codepen](https://codepen.io/Job-Wilhelm/pen/pvowQax)|