在现代 web 开发中，分页功能十分常见，许多 web 应用都需要展示大量数据，因此需要将数据分为多个页面。在 Express.js 中，我们可以通过一些简单的步骤来实现分页功能。
本文将详细介绍如何在 Express.js 中实现分页功能，并提供示例代码作为参考，帮助读者快速上手。
分页功能的基本原理
在开始介绍如何实现分页功能之前，我们先来了解一下分页功能的基本原理。
分页功能的实现可以分为两个部分：
- 查询数据：首先需要查询全部数据，并计算出总数据量和总页数。
- 展示数据：通过用户传递过来的页面参数，展示指定范围内的数据。
在查询数据时，我们需要计算出总数据量和总页数，这样才能知道用户请求的页面是否存在、是否是最后一页等。在展示数据时，我们需要接收用户传递过来的页面参数，然后展示该页面范围内的数据。
下面我们将逐步介绍如何在 Express.js 中实现分页功能。
实现分页功能的步骤
1. 安装必要的依赖
首先，我们需要安装一些必要的依赖，包括 express 、 mongoose 等。可以通过以下命令来安装：
npm install express mongoose --save
现在我们可以在项目中引入这些依赖：
const express = require('express');
const mongoose = require('mongoose');
const app = express();2. 定义数据模型
数据模型是将数据在 mongodb 中存储的一种方式，它定义了文档的属性和类型。在本文中，我们将使用 mongoose 库来定义数据模型。假设我们要展示的是用户数据，那么我们可以定义如下的数据模型：
-- -------------------- ---- -------
----- ---------- - --- -----------------
--------- -------
---- -------
------ -------
-------- -
----- -----
-------- ---------
--
---3. 查询数据
接下来，我们需要查询数据并计算总页数。为了简化代码，我们将查询数据的逻辑封装在一个函数中：
-- -------------------- ---- -------
----- -------- -------------------- --------- -
----- ---- - ----------- - -- - ---------
----- ---- - ----- -----------
-----------
----------------
-------
--------
----- ----- - ----- -----------------------------
----- ---------- - --------------- - ----------
------ -
-----
-----------
---------
-----------
--
-以上代码中，我们通过 User.find() 方法查询了所有数据，并通过 skip() 和 limit() 方法来计算出页面范围内的数据。同时，我们使用 lean() 方法来将查询结果转换成普通的 JS 对象，以便更好地处理数据。最后，我们通过 User.countDocuments() 方法查询总数据量，并计算出总页数。
4. 实现路由
现在我们已经获取了数据，并计算出了总页数，接下来我们需要实现路由，以便向客户端返回数据。
app.get('/users', async (req, res) => {
const pageNumber = parseInt(req.query.pageNumber) || 1;
const pageSize = parseInt(req.query.pageSize) || 10;
const result = await getUsers(pageNumber, pageSize);
res.json(result);
});以上代码中，我们定义了 /users 路径的 GET 方法，并通过 req.query 获取用户传递的查询参数。接着我们调用 getUsers() 方法获取数据，并将结果通过 res.json() 返回给客户端。
现在我们已经完成了分页功能。如果你在浏览器中访问 /users?pageNumber=1&pageSize=10，你应该会看到第一页的用户数据。
总结
在本文中，我们介绍了在 Express.js 中实现分页功能的基本原理和步骤。通过这些步骤，我们可以快速实现分页功能，并将数据展示给用户。
本文提供了示例代码，供读者参考和学习。如果你对本文中介绍的内容有疑问或建议，欢迎在评论区留言！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/646dda84968c7c53b0c79f31