# 🏅 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 連結貼至底下回報就算完成了喔!
解答位置請參考下圖（需打開程式碼的部分觀看）
<!-- 解答：
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)|
Sign in with Wallet
Connect another wallet