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

舉例：`/posts?page=1&count=10` （貼文頁面篩選第一頁前 10 筆資料）
其中 `?` 用來連接欲帶入的參數 `page` 及 `count`，`=` 前後分別為參數名稱（`page`）與參數的值（`1`），不同參數之間使用 `&` 分隔

當使用者造訪此網址時， express 可以使用 req.query 取出網址列的這些參數

app.get('/posts?page=1&count=10)', function(req, res) {
  console.log(req.query)
  ...
});

// req.query
{ 
  page: 1,   // 頁數
  count: 10  // 幾筆資料
}

使用 `req.query.page` 或 `req.query.count` 就可以取出需要的資訊做相關處理

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

GET '/posts?keywords=...' // 通常會以 keywords 表示搜尋關鍵字

app.get('/posts', function(req, res) {
  const keywords = req.query.keywords
  const results = await Post.find({ content: /.../ }); // 使用 mongoose 搜尋資料庫中貼文內容含有 req.query.keywords 的資料
  res.status(200).json({
    status: 'success',
    results: results.length,
    data: { // 回傳資料
      results
    }
  });
});

### 參考資源

- [Express - req.query](https://expressjs.com/zh-tw/api.html#req.query)
- 課程影音「Express - Node.js Web 應用程式架構」

題目
---
請將以下 url 中的參數使用 `req.query` 取出，並回傳取出的參數（可自行建立 express 專案，先在 app.js 練習即可）

'http://localhost:3000/posts?keywords=我&filter=today' // 在 POSTMAN 發出 GET 請求

app.get('/posts', function(req, res) {
  // 取出參數
  /* 請在此填寫答案*/
  
  res.status(200).json({
    status: 'success',
    data: {
      /* 請在此填寫答案*/      
    }
  });
});

## 回報流程

將答案寫在 CodePen 並複製 CodePen 連結貼至底下回報就算完成了喔!
解答位置請參考下圖（需打開程式碼的部分觀看）


<!-- 解答：
app.get('/posts', function(req, res) {
// 取出參數
const keywords = req.query.keywords;
const filter = req.query.filter
res.status(200).json({
status: 'success',
data: {
keywords,
filter
}
});
});
-->

回報區
---
<!--
將答案貼至下方表格內，格式：
| Discord 暱稱 | [CodePen](連結) |
-->
| Discord | CodePen ／ 答案 |
|:-------------:|:-----------------:|
| bian_yang_mofa | [CodePen](https://codepen.io/cssf998811/pen/gbObWGL?editors=0010) |
| adengg | [CodePen](https://codepen.io/Osases/pen/VYwYbRj?editors=0012) |
|janetlai|[CodePen](https://codepen.io/eiddkqxz-the-builder/pen/KwKwqpb?editors=1111)
| poyi | [CodePen](https://codepen.io/poyi-the-flexboxer/pen/bNGNWdg) |
| Tau | [CodePen](https://codepen.io/Tau-Hsu/pen/OPJPdKx?editors=0010) |
| sian | [CodePen](https://codepen.io/uxitysjl-the-flexboxer/pen/bNGdzbV?editors=0010) |
| sui_hsilan | [CodePen](https://codepen.io/suihsilan/pen/NPWGNpr?editors=0010) |
| helena | [CodePen](https://codepen.io/helena27/pen/RNwWajb) |
| JC | [CodePen](https://codepen.io/lifetimingwhisper/pen/XJWmRYY) |
| yutzu | [CodePen](https://codepen.io/dtafsrmf-the-lessful/pen/mydVdqO?editors=0010) |
|ZoeKang|[CodePen](https://codepen.io/byehywmx-the-animator/pen/wBvMjwy)
|Shiang|[CodePen](https://codepen.io/shiang29/pen/LEYRaRQ?editors=0010)
|HarryKuo|[CodePen](https://codepen.io/harry_kuo/pen/GgRNmVG?editors=0010)|
| hsin yu | [CodePen](https://codepen.io/tina2793778/pen/ogNZyMX)|
| li wei-min | [CodePen](https://codepen.io/leewayne/pen/OPJmWgQ)|
|wuyuli_21403|[CodePen](https://codepen.io/Job-Wilhelm/pen/RNwgdmg)|