# 🏅 Day 14 - 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 ／ 答案 |
|:-------------:|:-----------------:|
| xxx | [CodePen]() |
| 苡安 | [hackmd](https://hackmd.io/@L7K9-66lSeagS28AP0_GjQ/BkQgsFVWC) |
| Chia Pin | [CodePen](https://codepen.io/joker-cat/pen/bGJOKQb) |
| Aida | [CodePen](https://codepen.io/ada23410/pen/RwOEJEE?editors=0010) |
| jenny7532 | [CodePen](https://codepen.io/wei-chen-wu/pen/MWRZBvO) |
| Tiya | [CodePen](https://codepen.io/Tiya_blank/pen/rNbQPbY) |
| Hank | [CodePen](https://codepen.io/tw1720/pen/mdgaGgq) |
|wei|[CodePen](https://codepen.io/Wei-the-sasster/pen/BaEvqpv?editors=0010)|
|william_hsu|[CodePen](https://codepen.io/william8815/pen/jORXRJX)|
| runweiting |[CodePen](https://codepen.io/weiting14/pen/JjVwqvr)|
|cho|[CodePen](https://codepen.io/cho195/pen/eYobqBb)|
|tung030374|[CodePen](https://codepen.io/tung__u/pen/jORXgjd)|
| shuantt | [CodePen](https://codepen.io/th-tseng/pen/dyLaMjd)|
|群嘉|[CodePen](https://codepen.io/efzdamnp-the-lessful/pen/dyLaNVa?editors=0010)|
|Lobinda|[CodePen](https://codepen.io/Lobinda/pen/oNOmVjd)|
|ej_chuang|[CodePen](https://codepen.io/EJChuang/pen/JjVzOyp)|
|Ciel|[CodePen](https://codepen.io/nycteachen/pen/eYoodyr)|
| Henry | [HackMD](https://hackmd.io/A6VVhoTfSBmNIbE05dVKXQ) |
| 瑀君 |[HackMD](https://hackmd.io/@sh5ojkmt/SkCP-HR-0)|
| Theodore 0501 |[Codepen](https://codepen.io/GustavoFringgg/pen/yLrWzox)|
| william威良 |[Codepen](https://codepen.io/snowman12320/pen/NWmVwWL?editors=1010)|
| Benson |[Codepen](https://codepen.io/nosneb83/pen/WNWBXwL)|
|mei|[Codepen](https://codepen.io/l_umei/pen/wvZbpXG)|
|2魚 |[Codepen](https://codepen.io/ijrekmsn-the-sans/pen/PogrYmb)|
| albertyang3576 |[Codepen](https://codepen.io/albertyang3576/pen/poBXrey?editors=0010)|