--- tags: Node.js 直播班 - 2023 春季班 --- # 🏅 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) - 課程影音「網址規則介紹」到 「query - 取得網址參數」 ## 題目（將答案貼在 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/vftL5i0.png) <!-- 解答： - 登入 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` 也可以 --> 回報區 --- | 報數 | 組別／Discord 名字 | Codepen／HackMD／其他回饋 | |:----:|:-------------------:|:----------------------------------------------------------------------------------------------------------------------------:| | 1 | 北 10 組 / Benson | [Github Benson - Day 12](https://github.com/ioveasdkre/HexschoolOperation/tree/main/NodejsEnterpriseClass/day40-tasks/day12) | | 2 | 北 1 組 / PittWu | [Blog Post - Day 12](https://pitt-wu-blog.vercel.app/docs/day12-basic-router) | | 3 | 北 8 組 / Zhao Chen | [GitHub - Day 12](https://github.com/zhao1995chen/NodejsEnterpriseClass/blob/master/daily-task/day12/server.ts) | | 4 | 中 4 組 / jimkk159 | [HackMD - Day 12](https://hackmd.io/fXm17D_yTd-zpQ5Qjpan_A) | | 5 | 中 3 組 / Wendy | [Notion - Day 12](https://jewel-cellar-80e.notion.site/Day-12-85a12d270dcd4e5c8796836876fdb406) | | 6 | 北 12 組 / Sam Lin | [GitHub - Day 12](https://github.com/samlin1122/hex-school/blob/main/daily-challenges/day12.js) | 7 | 北 1 組 / MayYi | [HackMD - Day 12](https://hackmd.io/Ad9U3HE1RFqEuOP0-YQ2rA) | 8 | 北 5 組 / 圈圈 | [HackMD - Day 12](https://hackmd.io/yA2fWegmQ02inwaRDWrZnA?view)| | 9 | 北 13 組 / Louisa | [GitHub - Day 12](https://github.com/louisa0416/NodejsEnterpriseClass/tree/master/daily-task/day12) | | 10 | 北 13 組 / sasha | [HackMD - Day 12](https://hackmd.io/@sashaye/HkhvnM_Zh) | | 11 | 南 1 組 / hiYifang | [HackMD - Day 12](https://hackmd.io/@gPeowpvtQX2Om6AmD-s3xw/HkiSA6Jrc) | | 12 | 中 4 組 / Zoey | [GitHub - Day 12](https://github.com/jsbo12551a/hexschool_homework/blob/main/day12/app.js) | | 13 | 北 5 組 / Albee | [GitHub - Day 12](https://github.com/albee-chang/hexschool-node-dailytask/blob/main/day12/index.md) | | 14 | 北 16 組 / 啊培培 | [GitHub - Day 12](https://github.com/LABIBI-LG/Courses/blob/main/hexschool/nodeJS/Live_Course/Daily_Tasks/day12/app.js) |