後端向資料庫拿資料時,為了避免資料量過大,往往會實作「分頁」功能( paginaiton ),分頁功能是透過「限制一次能撈取的資料筆數」來達到加速查詢的效果。沒有分頁功能的話,一次回傳大量的資料可能會拖慢伺服器的回應時間,造成體驗不佳等問題。

本篇文將介紹使用 Mongo DB 做分頁功能的一些方法與注意事項

Screenshot 2024-01-27 at 10.10.04 PM.png

假設我們希望後端能夠回傳以下結構給前端

{
	data: Data[]; // 回傳的資料
	pager: {
		page: number;  // 第幾頁
		size: number;  // 一頁有幾筆資料
		total: number; // 資料庫中「總共」有幾筆資料
	}
}

limit(), skip()

limit 與 slip 都是 Mongo DB 中 cursor 的方法,詳見:https://www.mongodb.com/docs/manual/reference/method/js-cursor/

在 Mongo DB 中,要做到 pagination 很簡單,只要使用 limit 與 skip 方法就可以達到

範例程式如下

const getData = async (req, res) => {
  let { page, size } = req.query;

	page = parseInt(page) || 1;
	size = parseInt(size) || 10;

  try {
		// 取得總數
    const total = await db.data.count({});
	
		// 取得分頁資料
    const data = await db.data.find({})
      .limit(size) // 一頁要取幾筆資料
      .skip((page - 1) * size); // 從第幾頁開始, -1 是為了將頁碼從 0 開始

    return res.status(200).json({
      data,
      pager: { total, page, size },
    });
  } catch (err) {
    return res.status(500);
  }
};

其實實作 Pagination 的方法很簡單,就是 find() 後面搭配 .limit().skip()

等等 … 事情有這麼簡單嗎?

陷阱