---
# System prepended metadata

title: "\U0001F3C5 Day 13"
tags: [Node.js 直播班 - 2022 春季班]

---

---
tags: Node.js 直播班 - 2022 春季班
---
# 🏅 Day 13



## Express 應用程式產生器（Express generater）、在 routes 設計路由

express 應用程式產生器可以快速產生一個應用程式架構

安裝步驟
- 先開好一個新專案
- 執行 `npm install express-generator -g`
- 接著切換到專案路徑下，執行 `express --no-view`
可參考[文件](https://expressjs.com/zh-tw/starter/generator.html)查看指令選項
注意：這裡需要選擇 `no view`，因最終作業最後設計出的 API 只需要回傳 JSON 資料，不會使用到 view 模板引擎
:::spoiler 指令選項
```
$ express -h

  Usage: express [options][dir]

  Options:

    -h, --help          output usage information
        --version       output the version number
    -e, --ejs           add ejs engine support
        --hbs           add handlebars engine support
        --pug           add pug engine support
    -H, --hogan         add hogan.js engine support
        --no-view       generate without view engine
    -v, --view &lt;engine&gt; add view &lt;engine&gt; support (ejs|hbs|hjs|jade|pug|twig|vash) (defaults to jade)
    -c, --css &lt;engine&gt;  add stylesheet &lt;engine&gt; support (less|stylus|compass|sass) (defaults to plain css)
        --git           add .gitignore
    -f, --force         force on non-empty directory
```
:::

執行成功後應該會出現以下結構
:::spoiler 資料夾結構
```
├── app.js
├── bin
│   └── www
├── package.json
├── public
│   ├── images
│   ├── javascripts
│   ├── stylesheets
│       └── style.css
    └── index.html
└── routes
    ├── index.js
    └── users.js
```
:::


此結構已將 routes 的部分拆成獨立模組，並在 app.js 引入
在 routes 的 index.js 或 users.js，會使用 `const router = express.Router()` 
並使用 `router` 來設定路由
```javascript
router.get('/', function(req, res, next) {
  res.send('respond with a resource');
});
```
需注意在 app.js 引入使用時，就會自動帶入 `/users`，因此 users.js 中 path 可直接從 `/users` 之後開始（`router.get('/', ...)` 就會是 `/users`)

```
const usersRouter = require('./routes/users');
app.use('/users', usersRouter);
```
第一次啟用伺服器時需執行 `npm install` 安裝相關套件，並執行 `npm start`
若想使用 nodemon 運行也可自行在 package.json 加上指令，並使用 `npm run start:dev` 運行
```json
"scripts": {
    "start": "node ./bin/www",
    "start:dev": "nodemon ./bin/www"
},

```

### 參考資源

 [Express 應用程式產生器](https://expressjs.com/zh-tw/starter/generator.html)
 [Express - API](http://expressjs.com/zh-tw/api.html#express.router)
[Router 進階設定](https://courses.hexschool.com/courses/1670869/lectures/39299607) 到 [express-generator (下)](https://courses.hexschool.com/courses/1670869/lectures/39299612)（章節影片）

### 題目（將答案寫在 HackMD 並提交至回報區）
此[專案](https://github.com/dogwantfly/express-user)為使用 express generater 產生的結構，請嘗試在此 routes 資料夾的 users.js，設計新增及修改個人資料的路由（搭配動態路由），在註解處填上答案（可使用 POSTMAN 測試是否可正確運作），完成後將 users.js 的程式碼貼到 HackMD 並提交至回報區


回報流程
---
請同學依照下圖教學觀看解答、回報答案:

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

回報格式：請在「回報區」貼上 CodePen 或 HackMD 連結回報答案 (為了統計人數，請同學依序加上「報數」)


<!-- 解答

users.js 範例參考（可自行優化程式碼）
```javascript
const express = require('express');
const router = express.Router();
const User = require('../models/users');
/* GET users listing. */
router.get('/', async (req, res, next) => {
  const allUser =  await User.find();
  res.status(200).json({
    "status": 'success',
    "data": allUser
  });
});
router.delete('/', async (req, res, next) => {
  await User.deleteMany({});
  res.status(200).json({
    "status": 'success',
    "data": ''
  });
});


router.post('/', async (req, res, next) => {
  try{
    const data = req.body;
    let { nickName, gender, avatar} = data;
    if(!nickName||!gender){
      // 回傳失敗
      res.status(400).json({
        "status": 'false',
        "message": "使用者資料未填寫完整"
      });
    } else {
      // 新增至 User model
      const newUser = await User.create(
        {
          nickName,
          gender,
          avatar
        }
      );
      res.status(200).json({
        "status": 'success',
        "data": newUser
      });
    }
  } catch (error) {
    // 回傳失敗
    res.status(400).json({
      "status": 'false',
      "message": error.message
  });
  }
});

// 修改 
router.patch('/:id', async (req, res, next) => {
  try{
    // 取得 id
    const id = req.params.id;
    const data = req.body;
    let { nickName, gender, avatar } = data;
    if(!nickName||!gender){
      // 回傳失敗 "使用者資料未填寫完整"
      res.status(400).json({
        "status": 'false',
        "message": "使用者資料未填寫完整"
      });
    } else {
      const editContent = {
        nickName,
        gender
      } 
      // 找出此筆 id 並編輯資料
      // const editUser = 
      const editUser = await User.findByIdAndUpdate(id, editContent, { new: true });
      if (editUser) {
        res.status(200).json({
          "status": 'success',
          "data": editUser
        });
      } else {
        res.status(400).json({
          "status": 'false',
          "message": "id 不存在"
      });
      }
      
    }
  } catch (error) {
    // 回傳失敗
    res.status(400).json({
      "status": 'false',
      "message": error.message
  });
  }
});

module.exports = router;

```




-->

回報區
---

| 報數 | 組別 / 名字           | codepen / hackMD / 其他回饋                                                                                          |
| ---- | --------------------- | -------------------------------------------------------------------------------------------------------------------- |
| 1    |                       |                                                                                                                      |
| 2    | 第三組 / Larry        | [hackMD](https://hackmd.io/_0v4LBy8TFyPgm43BZstgQ)                                                                   |
| 3    | 第 5 組 / Hazel       | [hackMD@Hazel](https://hackmd.io/@hazelwu/day13)                                                                     |
| 4    | 第 4 組 / 小宥        | [hackMD](https://hackmd.io/HXIASwC0Tj2nRgtAt08tXw)                                                                   |
| 5    | 第 6 組/ Wendy        | [HackMD](https://hackmd.io/@0k_MSPdgRPujozP6w_D-bA/HkjSMRVH5)                                                        |
| 6    | 第 2 組 / Genos       | [HackMD](https://hackmd.io/5A8AcAMeSSOA96WvjFH48g)                                                                   |
| 7    | 第 3 組 / HedgehogKU  | [HackMD](https://hackmd.io/YIZfM2z8TlOrfPXK__aRZg)                                                                   |
| 8    | 第 4 組 / sihle       | [HackMD](https://hackmd.io/@bugbug777/rJVu-1rBc)                                                                     |
| 9    | 第 3 組 / Adam Hsu    | [HackMD](https://hackmd.io/@S9gD__kVTSiQUupQNn_4FQ/BJXsv0Vrc)                                                        |
| 10   | 第 9 組 / 黃士桓      | [HackMD](https://hackmd.io/jF4mqcj0Q5mwzf_MPSr-gw)                                                                   |
| 11   | 第 2 組 / Vic         | [HackMD](https://hackmd.io/jx3PetUTR1KmihvKtlQxSg)                                                                   |
| 12   | 第 2 組 / Joe Chang   | [HackMD](https://hackmd.io/uaRTw9c0TgOrADyXMmGL0Q?view#426---%E8%A8%AD%E8%A8%88%E5%9F%BA%E6%9C%AC%E8%B7%AF%E7%94%B1) |
| 13   | 第 3 組 /  hiYifang   | [HackMD](https://hackmd.io/@gPeowpvtQX2Om6AmD-s3xw/HkiSA6Jrc)                                                        |
| 14   | 第 14 組｜East        | [HackMD](https://hackmd.io/sdMKUR3IS9yZeFtxDUzcsw)                                                                   |
| 15   | 第 8 組｜Jordan Tseng | [HackMD](https://hackmd.io/TLkCcU0eRKSdESPRxL4how?view)                                                              |
| 16   | 第 4 組｜苡安         | [HackMD](https://hackmd.io/YgqUi9sfT1GvmPQiQTENeg)                                                                   |
| 17   |第 9 組 / konstante   |[HackMD](https://hackmd.io/EhVImTm-Rq-2lSaJm1BTgA)                                                                                                                      |
| 18   |Naiky   |[HackMD @Naiky](https://hackmd.io/@UWBC7rrORiKaLSBg226mZg/SyUes_SH5)                                                                                                                      |
| 19   |第 8 組 / Hank   |[HackMD](https://hackmd.io/@TFOivyvXT-qpG6SieUTfgw/Sk51AurHq)                                                                                                                      |
| 20 | 第2組 / wendy.li | [HackMD](https://hackmd.io/zN-sKGv3QPW1S54dV2bSQQ) 
| 21 | 第12組 /Jimmy | [HackMD](https://hackmd.io/Q1HN_0ztSne1HZRcQyqDCA?both) 
| 22 | 第3組 / Hobby | [HackMD](https://hackmd.io/@hobbyling/day13) 
| 23 | 第10組 / Otis | [HackMD](https://hackmd.io/@wAXXVY7eQ2WkcVtv8Vopzg/SJet5qBSc) 
| 24 | 第3組 / Justin | [HackMD](https://hackmd.io/4H2KizIJRdiuSATJbdoNKw) 
| 25 | 第1組 / Ed Huang | [HackMD](https://hackmd.io/esiLphxDRT6-iPlkOxQ4tQ?view)
| 26 | 第11組 / Han Lai | [HackMD](https://hackmd.io/rysP53JtTtaioLzQ8k_lQA)
| 27 | 第15組 / Chiu | [HackMD](https://hackmd.io/r2ZpfC8qTVmhYdYkWwGV9Q)
| 28 | 第 13 組 / KFC | [HackMD](https://hackmd.io/B7KTmChHSdqvdLhzPz8tFQ?view)
| 29 | 第 10 組 / 橘子 | [HackMD](https://hackmd.io/TGTYxcZFSUWW4lGA3RAd6g)
| 30 | 第 15 組 / Tofu | [HackMD](https://hackmd.io/gFiCj7wYQrWavSBJPdvLRw?view)
| 31 | 第 1 組 / Claire | [HackMD](https://hackmd.io/Xflmr5BpRhe4cDeIwaTmrA)
| 32 | 第 9 組 / Reynold | [HackMD](https://hackmd.io/@dL7AuQEMQ6KpCSRHaYElOA/rymcFeKBq)
| 33 | 第 2 組 / peter | [HackMD](https://hackmd.io/@peterchen1024/rk3M3xYH9)
| 34 | 第 14組 / Uniza | [HackMD](https://hackmd.io/A--DX__XTEy7erX9C9AVwQ)
| 35 | 第 1 組 / snow | [HackMD](https://hackmd.io/@snowsuika/rymhtsiH5)
| 36 | 第 2 組 / Rikkubook | [HackMD](https://hackmd.io/_BSvixEiQH6OcG5YV6YkJQ?both)
| 37 | 第 7 組 / jason06286 | [HackMD](https://hackmd.io/vHyL-AFTQCqzYPWdm5Ohng)
| 38 | 第 16 組 / 皓皓 | [HackMD](https://hackmd.io/wOnU1YmKSBu09soqGs6jng)
| 39 | 第 5 組 / Nap | [HackMD](https://hackmd.io/@8x8YzkXNSzafUSO3LZTmUw/rkFH0sRr5)
| 40 | 第 3 組 / 小葉 | [HackMD](https://hackmd.io/@FyKv37KcRSWqAO_e336w8g/Bkcz1DCHq)|
| 41 | nick6303 | [HackMd](https://hackmd.io/YLugU1c2QraEIQpSwwX3gw)|
| 42 |  第 11 組 / mandy | [HackMd](https://hackmd.io/GIugG2N8RamhQ8ErjQZJag?both)|
| 43 |  yolala | [HackMd](https://hackmd.io/9lrNAglZS5euVW5KFPxlWQ)|