如何在 Express.js 中对 JSON 数据进行分页处理-JavaScript中文网-JavaScript教程资源分享门户

在开发 Web 应用程序时，经常需要处理大量的数据，这往往会导致性能问题。为避免这种情况，分页是一种很好的解决方案，可以解决网站加载速度缓慢的问题。在本文中，将介绍如何在 Express.js 中对 JSON 数据进行分页处理。

什么是分页？

分页是一种用于将大量数据分成几个页面的技术。它允许用户在控制数据的情况下浏览数据。例如，如果你有 100 条信息，你可以将其分成 10 个页面，每个页面有 10 条数据，这样用户就能够逐步了解他们想要的信息，而不必等待所有的数据都加载完毕。

实现分页

在 Express.js 中，我们可以使用 skip() 和 limit() 方法，从一个集合中提取数据的指定文档数量。这两种方法的结合是以可预测的方式从 MongoDB 向 app 返回数据的基础。在做分页之前，需要安装和配置 MongoDB 并创建一个名为“ test”的新数据库。

安装和配置 MongoDB

为了使用 MongoDB ，需要先在本地机器上安装 MongoDB 服务器并启动它。可以访问 MongoDB 官网来获取更多信息。

安装完成之后，可以使用以下命令启动 MongoDB 服务器：

mongod

创建新数据库并添加测试数据

我们将使用以下命令创建一个名为“ test”的新数据库:

use test

我们在 test 数据库中创建一个名为“ users”的集合，并向其添加一些用户数据：

// javascriptcn.com 代码示例
db.users.insertMany([
  {
    name: 'Alice'
  },
  {
    name: 'Bob'
  },
  {
    name: 'Charlie'
  },
  {
    name: 'Dave'
  },
  {
    name: 'Eve'
  },
  {
    name: 'Frank'
  },
  {
    name: 'Grace'
  },
  {
    name: 'Heidi'
  },
  {
    name: 'Isabel'
  },
  {
    name: 'Justin'
  },
  {
    name: 'Kevin'
  },
  {
    name: 'Liam'
  },
  {
    name: 'Mary'
  },
  {
    name: 'Nancy'
  },
  {
    name: 'Olivia'
  },
  {
    name: 'Peggy'
  },
  {
    name: 'Quinn'
  },
  {
    name: 'Rita'
  },
  {
    name: 'Sasha'
  },
  {
    name: 'Tina'
  },
  {
    name: 'Uma'
  },
  {
    name: 'Vivian'
  },
  {
    name: 'Wendy'
  },
  {
    name: 'Xander'
  },
  {
    name: 'Yolanda'
  },
  {
    name: 'Zuzu'
  }
])

接下来，我们可以测试我们的服务器是否正确配置，是否能正确与数据库进行交互。可以创建一个新文件 app.js，并添加以下代码：

// javascriptcn.com 代码示例
// 引入必要的模块
const express = require('express');
const MongoClient = require('mongodb').MongoClient;

// 配置 app 服务器
const app = express();
app.set('port', process.env.PORT || 3000);

// 连接到 MongoDB
MongoClient.connect('mongodb://localhost:27017/test', (err, client) => {
  if (err) {
    console.log(err);
    return;
  }

  console.log('Connected to MongoDB server');

  // 在控制台中输出数据库中的所有用户
  const db = client.db('test');
  const users = db.collection('users');
  users.find().toArray((err, results) => {
    console.log(results);

    // 在浏览器中显示所有用户
    app.get('/', (req, res) => {
      res.send(results);
    });
  });
 
  // 启动 server
  app.listen(app.get('port'), function () {
    console.log(`Express started on http://localhost:${app.get('port')} press Ctrl-C to terminate.`)
  });
});

启动应用程序

node app.js

如果控制台输出了 MongoDB 数据中的所有用户数据，在浏览器中访问 http://localhost:3000，就可以看到 JSON 格式的数据。

实现分页处理的代码

由于在 MongoDB 的集合中使用 skip() 和 limit() 方法，因此必须确保在指定位置有一个确切的索引。如果没有索引，则查询将变得非常缓慢。我们将使用以下代码从 test 数据库的 users 集合中提取数据。

// javascriptcn.com 代码示例
app.get('/users/page/:page', (req, res) => {
  const perPage = 5;
  const page = req.params.page || 1;

  // 计算查询结果的开始和结束位置
  const start = (page - 1) * perPage;
  const end = page * perPage;

  // 执行查询，在指定范围内获取用户数据
  const db = client.db('test');
  const users = db.collection('users');
  users.find({})
    .skip(start)
    .limit(perPage)
    .toArray((err, users) => {
      if (err) {
        console.log(err);
        return res.sendStatus(500);
      }

      // 返回查询数据
      res.json(users);
    });
});

以上代码将客户端请求的 page 参数与每页的 perPage 值结合使用来计算查询开始和结束的位置。然后使用 skip() 和 limit() 方法从数据库中获取用户数据。最后通过 res.json() 方法将查询结果反馈回客户端。

总结

在本文中，我们介绍了如何使用 Express.js 和 MongoDB 对 JSON 数据进行分页处理。我们使用 skip() 和 limit() 方法从 MongoDB 中获取数据，并在 Express.js 路由中将这些方法集成到我们的 Web 应用程序中。我们了解了一些处理大量数据时的性能优化技巧，以及如何编写可靠的 Web 应用程序。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/652d2e457d4982a6ebe9a27f