使用 Express 和 MySQL 实现数据分页

后端

---

---

前言

提示：这里可以添加本文要记录的大概内容：

当我们的数据量特别大的时候，在前端展示的一般会选择分页的技术来展示数据，分页的方式有很多种，这里就简单谈谈我在工作中遇到的困惑吧。

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、后端返回给前端分页的返回格式

{
  "data": [
    {
      "id": 1,
      "name": "Alice",
      "created_at": "2024-07-01T10:00:00Z"
    },
    {
      "id": 2,
      "name": "Bob",
      "created_at": "2024-07-01T11:00:00Z"
    }
    // 更多记录...
  ],
  "pagination": {
    "currentPage": 1,
    "totalRecords": 100,
    "pageSize": 10
  }
}

如上，后端一般返回当前页currentPage、当前页展示数量totalRecords、数据总量totalRecords以及详细信息data。

二、后端的实现

代码的实现一般都是这样：

const express = require('express');
const mysql = require('mysql2');

const app = express();
const port = 3000;

// 创建 MySQL 连接
const connection = mysql.createConnection({
    host: 'localhost',
    user: 'root',
    password: 'your_password',
    database: 'pagination_example'
});

connection.connect();

app.get('/users', (req, res) => {
    const page = parseInt(req.query.page) || 1;
    const limit = parseInt(req.query.limit) || 10;
    const offset = (page - 1) * limit;

    connection.query('SELECT COUNT(*) AS total FROM users', (error, countResults) => {
        if (error) {
            return res.status(500).json({ error: 'Database query error' });
        }
        const totalRecords = countResults[0].total;

        connection.query('SELECT * FROM users LIMIT ? OFFSET ?', [limit, offset], (error, dataResults) => {
            if (error) {
                return res.status(500).json({ error: 'Database query error' });
            }
            res.json({
                data: dataResults,
                pagination: {
                    currentPage: page,
                    totalRecords: totalRecords,
                    pageSize: limit
                }
            });
        });
    });
});

可以看到为了得到totalRecords，我们一般会进行两次数据库查询，当数据量很大时，这种效率也不是很高。如果不喜欢这种方式，那我们可以试试一次查询。

那怎么样做到一次查询呢？上代码：

const express = require('express');
const mysql = require('mysql2');

const app = express();
const port = 3000;

// 创建 MySQL 连接
const connection = mysql.createConnection({
    host: 'localhost',
    user: 'root',
    password: 'your_password',
    database: 'pagination_example'
});

connection.connect();

app.get('/users', (req, res) => {
    const page = parseInt(req.query.page) || 1;
    const limit = parseInt(req.query.limit) || 10;
    const offset = (page - 1) * limit;

    // 查询所有数据
    connection.query('SELECT * FROM users', (error, allResults) => {
        if (error) {
            return res.status(500).json({ error: 'Database query error' });
        }

        // 分页处理
        const totalRecords = allResults.length;
        const totalPages = Math.ceil(totalRecords / limit);
        const paginatedData = allResults.slice(offset, offset + limit);

        res.json({
            data: paginatedData,
            pagination: {
                currentPage: page,
                totalPages: totalPages,
                totalRecords: totalRecords,
                pageSize: limit
            }
        });
    });
});

app.listen(port, () => {
    console.log(`Server running at http://localhost:${port}`);
});

这种方式先把所有的数据查出来，一次性加载到内存，然后再进行切片分页操作。这适合数据量较小的操作，因为将所有数据一次性加载到内存中可能会影响性能和内存使用。

---

总结

这两个方法各有利弊，主要还是看使用场景。