---
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 <engine> add view <engine> support (ejs|hbs|hjs|jade|pug|twig|vash) (defaults to jade)
-c, --css <engine> add stylesheet <engine> 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 並提交至回報區
回報流程
---
請同學依照下圖教學觀看解答、回報答案:
回報格式：請在「回報區」貼上 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)|
Sign in with Wallet
Connect another wallet