本筆記將接續 前篇，以 Todo List 為例，用五大步驟進一步拆解「排序」、「篩選」兩大強化功能的開發歷程，然而資料庫本身提供不只一種能達成目的的操作方法，本筆記僅提供其中之一，想深入研究者可以自行查閱 官方文件。

排序 sort

Sort 運作機制

1. 客戶端 Client：觸發請求的機制

排序下拉選單

在記帳本的專案中，我使用下拉選單 <select> & <option> 來做為排序的表單，並提供按金額遞增或遞減的兩個選項：

<form action="/records">
  <select class="custom-select" id="sort" name="sort">
    <option value="" selected>排 序 方 式...</option>
    <option value="asc" {{#is sort "asc"}} selected {{/is}}>金額遞增</option>
    <option value="desc" {{#is sort "desc"}} selected {{/is}}>金額遞減</option>
  </select>
  <button type="submit" class="btn btn-dark">Submit</button>
</form>

P.s. 我使用 Bootstrap 做這個專案，排版相關的 HTML 已省略，比較好懂

2. 路由 Route：接收請求的路由

在首頁的清單上增加表單，所以路由會直接從這裡修改：

router.get('/', (req, res) => {
  const sort = req.query.sort // 取得排序方式
  // ...
})

3,4,5. 伺服器內部的 MVC

因為資料結構設計及其他篩選類功能的關係，原始的路由內部邏輯更複雜，這邊僅記錄排序的處理流程：

// Controller：路由內的邏輯都是分派程序
router.get('/', (req, res) => {
  const sort = req.query.sort
  Record.find()
        .lean()
        .sort({ amount: sort }) // Model：從資料庫取出並排序全部資料
        .then(records => {
          // View：傳進首頁模板渲染
          res.render('index', { records, categories, sort })
        })
        .catch(error => console.error(error))
})

篩選 filter

filter 運作機制

1. 客戶端 Client：觸發請求的機制

篩選複選選單

在記帳本的專案中，我使用切換式複選選單 switch <input type="checkbox">來做為排序的表單，並直接抓取資料庫中的類別，以 {{#each categories}} 渲染到模板上（但其實可以設計更好的體驗，我只是想練習用複選選單）：

<form action="/records">
  {{#each categories}}
  <div class="custom-control custom-switch">
    <input type="checkbox" class="custom-control-input" id="customSwitch{{this._id}}" name="filter" value="{{this._id}}" checked>
    <label class="custom-control-label" for="customSwitch{{this._id}}">{{this.title}}</label>
  </div>
  {{/each}}
  <button type="submit" class="btn btn-dark">Submit</button>
</form>

P.s. 我使用 Bootstrap 做這個專案，排版相關的 HTML 已省略，比較好懂

2. 路由 Route：接收請求的路由

在首頁的清單上增加表單，所以路由會直接從這裡修改：

router.get('/', (req, res) => {
  const { filter } = req.query // 取得篩選類別
  // ...
})

3,4,5. 伺服器內部的 MVC

因為資料結構設計及其他篩選類功能的關係，原始的路由內部邏輯更複雜，這邊僅記錄篩選的處理流程：

// Controller：路由內的邏輯都是分派程序
router.get('/', (req, res) => {
  const sort = req.query.sort
  Record.find({ category: filter }) // Model：從資料庫取出符合篩選類別的資料
        .lean()
        .then(records => {
          // View：傳進首頁模板渲染
          res.render('index', { records, categories })
        })
        .catch(error => console.error(error))
})

閱讀更多

關於本系列更多內容及導讀，請閱讀作者於 Medium 個人專欄 【無限賽局玩家 Infinite Gamer | Publication – 】 上的文章 《用 JavaScript 打造全端產品的入門學習筆記》系列指南。