---
# System prepended metadata

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

---

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



## req.query 篩選網址參數

除了先前使用 `req.params` 取得動態路由外，也可在 url 帶入相關資訊，再使用 `req.query` 取出網址列的參數

例如：網址列為 `https://example.com/over/there?name=ferrett&color=purple`，其中 ? 用來分隔後面帶入的參數 `name=ferret` 及 `color=purple`，多個參數之間也會使用 & 分隔

當使用者造訪此網址時， express 可以使用 req.query 取出網址列的這些參數 
```javascript
app.get('https://example.com/over/there?name=ferrett&color=purple)', function(req, res) {
  console.log(req.query)
  ...
});

// req.query
{ 
  name: 'ferret',
  color: 'purple'
}
```
使用 `req.query.name` 或 `req.query.color` 就可以取出需要的資訊做相關處理

req.query 常見的應用是搜尋關鍵字，當使用者輸入關鍵字後，會將關鍵字帶到網址列中，伺服器接收到，再藉由 req.query 取出，尋找資料庫中符合其關鍵字的資料，並回傳至客戶端

```
GET 'https://example.com/search?q=apple' // 通常會以 q 表示搜尋關鍵字
```
```javascript
app.get('/search', function(req, res) {
  const q = req.query.q
  const results = await Data.find(q); // 使用 mongoose 搜尋資料庫中符合 req.query.q 的資料
  res.status(200).json({
    status: 'success',
    results: results.length,
    data: {
        results
    }
  });
});
```


### 參考資源

[Express - req.query](https://expressjs.com/zh-tw/api.html#req.query)

[query - 取得網址參數](https://courses.hexschool.com/courses/1670869/lectures/39299606)（章節影片）

### 題目（將答案寫在 HackMD 並提交至回報區）

請在 express 專案中，將以下 url 中的參數使用 req.query 取出，並回傳取出的參數（可自行建立 express 專案，先在 app.js 練習即可）
```javascript
'http://localhost:3000/products?category=music&page=1' // 在 POSTMAN 發出 GET 請求
app.get('/products', function(req, res) {
  // 取出參數
  /* 請在此填寫答案*/
  res.status(200).json({
    status: 'success',
    data: {
      /* 請在此填寫答案*/      
    }
  });
});
```

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

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

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


<!-- 解答
```javascript
app.get('/products', function(req, res) {
  // 取出參數
  const category = req.query.category;
  const page = req.query.page;
  res.status(200).json({
    status: 'success',
    data: {
      category,
      page,     
    }
  });
});
```

-->

回報區
---

| 報數 | 組別 / 名字            | codepen / hackMD / 其他回饋                                          |
| ---- | ---------------------- | -------------------------------------------------------------------- |
| 1    | 第 6 組/ Wendy         | [HackMD](https://hackmd.io/@0k_MSPdgRPujozP6w_D-bA/rJE2DzUH5)        |
| 2    | 第 3 組/ Larry         | [HackMD](https://hackmd.io/mn4C6-UURSGv6E2tDcpQyQ)                   |
| 3    | 第 2 組 / wendy.li     | [HackMD](https://hackmd.io/34jSGuv9RcW_XtQDp_2JAg)                   |
| 4    | 第 2 組 / Vic          | [HackMD](https://hackmd.io/aT0hHDX2R0Gn7wmHeFkD0w)                   |
| 5    | 第 4 組 / 小宥         | [HackMD](https://hackmd.io/tfoU-qtKSS2-Ta0FaYd5hw)                   |
| 6    | 第 3 組 / Hobby        | [HackMD](https://hackmd.io/@hobbyling/day14)                         |
| 7    | 第 8 組 / Jordan Tseng | [HackMD](https://hackmd.io/MaOFBSjzR4eI5YUVGgnrNQ)                   |
| 8    | 第 3 組 / Justin       | [HackMD](https://hackmd.io/DBsD3CjKR4mv2NhlhliSwQ)                   |
| 9    | 第 3 組 / HedgehogKU   | [HackMD](https://hackmd.io/c58MMlf8RZGAplHCuKeEUQ)                   |
| 10   | 第 6 組 / Ruta         | [HackMD](https://hackmd.io/4lb_cWK7R-SIeg112nMoDg)                   |
| 11   | 第 8 組 / Hank         | [HackMD](https://hackmd.io/@TFOivyvXT-qpG6SieUTfgw/SkvQr78Hc)        |
| 12   | 第 2 組 / Genos        | [HackMD](https://hackmd.io/5A8AcAMeSSOA96WvjFH48g)                   |
| 13   | 第 2 組｜East          | [HackMD](https://hackmd.io/7oFUCnS9THKeGRdeGl7BmQ)                   |
| 14   | 第 2 組｜Jin           | [HackMD](https://hackmd.io/TpLNvcnlSiOvvbrGas4MOA)                   |
| 15   | 第 5 組 / Hazel        | [HackMD@Hazel](https://hackmd.io/@hazelwu/day14)                     |
| 16   | 第 9 組 / 黃士桓       | [HackMD](https://hackmd.io/XvB01gXwT6yD7YyIB1fFxw)                   |
| 17   | 第 3 組 /  hiYifang    | [HackMD](https://hackmd.io/@gPeowpvtQX2Om6AmD-s3xw/HkiSA6Jrc)        |
| 18   | 第 11 組 / Han Lai     | [HackMD](https://hackmd.io/kP2hMUHORXynbigr9HY28w?view)              |
| 19   | 第 4 組 / sihle        | [HackMD](https://hackmd.io/@bugbug777/S12rHvLr5)                     |
| 20   | Naiky                  | [HackMD @Naiky](https://hackmd.io/@UWBC7rrORiKaLSBg226mZg/Sy7_9QIBq) |
| 21   | 第 4 組 / 苡安         | [HackMD](https://hackmd.io/kBO6eUxoSPuhpChM517K2Q)                   |
| 22 | 第 9 組 / konstante | [HackMD](https://hackmd.io/7TVozneOROuEN44b25_ntA) |
| 23 | 第 10 組 / Otis | [HackMD](https://hackmd.io/JdnXccHtSE6nNXYT2kY-rw?view)          |
| 24 | 第 15 組 / Chiu | [HackMD](https://hackmd.io/yYqRjOpPQU23JVxg80HpEQ)|
| 25 | 第13組 / KFC | [HackMD](https://hackmd.io/VV_y7CcRTBWamPpGrQlE3w?view)|
| 26 | 第 11 組 / Jamie Lee | [HackMD](https://hackmd.io/REUXPNTCQymJwy7XJtyPjA?view)         |
| 27 | 第 1 組 / Ed Huang | [HackMD](https://hackmd.io/dpDol8oATYKfB7Q-wn97xA?view)         |
| 28 | 第10組/橘子 | [HackMD](https://hackmd.io/o3I1jYBNQOKG1xfSJKP8zg) |
| 28 | 第 2 組 / joe chang | [HackMD](https://hackmd.io/uaRTw9c0TgOrADyXMmGL0Q?view#427---reqquery-%E7%AF%A9%E9%81%B8%E7%B6%B2%E5%9D%80%E5%8F%83%E6%95%B8) |
| 29 | 第 15 組 / Tofu | [HackMD](https://hackmd.io/Ja1SKe_PTd6G9dL0rHy6lA)
| 30 | 第 1 組 / Claire | [HackMD](https://hackmd.io/mYs2b4pVTs-Xs7aSCM4ovg)
| 31 | 第 9 組 / Reynold | [HackMD](https://hackmd.io/@dL7AuQEMQ6KpCSRHaYElOA/H1iBpgFBc)
| 32 | 第 2 組 / peter | [HackMD](https://hackmd.io/@peterchen1024/HJOX9GtB9)
| 33 | 第 14 組 / Uniza| [HackMD](https://hackmd.io/jzmB1sQARDaqZdftbvh4Dw)
| 34 | 第 1 組 / snow| [HackMD](https://hackmd.io/@snowsuika/rymhtsiH5)
| 35 | 第 2 組 / Rikkubook| [HackMD](https://hackmd.io/7TyINeRxRCWs5Di6dqBIcQ)
| 36 | 第 7 組 / jason06286| [HackMD](https://hackmd.io/KeaRpLGrQxSa0kJKMyHWdA)
| 37 | 第 12 組 / Jimmy| [HackMD](https://hackmd.io/72pCNFv4SeGj8OfZEB5V8Q)
| 38 | 第 16 組 / 皓皓| [HackMD](https://hackmd.io/01bst263RISj-DCm1HP43g)
| 39 | 第 5 組 / Nap| [HackMD](https://hackmd.io/@8x8YzkXNSzafUSO3LZTmUw/Byig-2CSq)
| 40 | 第 3 組 / 小葉| [HackMD](https://hackmd.io/@FyKv37KcRSWqAO_e336w8g/r1w6uoJI5)
| 41 | nick | [HackMD](https://hackmd.io/YoMvWaguQbmbqtJYJlCSow)
| 42|  第 11 組 / mandy | [HackMD]( https://hackmd.io/vFmWZoHqT1q4LTVHNDMpdQ)
| 43|  第 14 組 / yolala | [HackMD]( https://hackmd.io/NaN0lzgzSU6RQJtIpMr0Hw)
