面试官：如果让你来设计一个分页功能, 你会怎么设计? 前后端如何交互?

[linwu-hi]

面试官：如果让你来设计一个分页功能，你会怎么设计？前后端如何交互？

一、什么是分页功能

在我们进行数据查询时，如果数据量很大，例如几万条数据，将其全部显示在一页上显然不友好。这时候我们需要采用分页显示的形式，每次只显示一部分数据，如每页显示10条数据。

实现分页功能，实际上就是从结果集中截取出第M~N条记录进行显示。

二、如何实现分页功能

后端实现

后端需要返回一些必要的分页信息给前端，例如总的数据量、总页数、当前页数、当前页的数据。

首先，前端向后端发送目标的页码page以及每页显示的数据数量pageSize。后端根据这些参数确定每页显示数据的起始位置start，公式为：

const start = (page - 1) * pageSize;

然后，利用数据库的limit和OFFSET关键字进行分页查询：

const sql = `SELECT * FROM record LIMIT ${pageSize} OFFSET ${start};`;

其中，LIMIT表示每页显示的数据条数，OFFSET表示数据的偏移量。

另外，还需要查询数据库得到总的数据量，用于计算总页数：

SELECT COUNT(*) FROM record;

最后，后端将获取的总数据量、总页数、当前页数、当前页的数据发送给前端。

前端实现

前端需要发送请求给后端，传递目标页码page和每页显示数据的数量pageSize。默认情况下，每次取10条数据。

三、代码实现

下面是一个使用Node.js和mysql数据库实现分页功能的示例代码：

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

const pool = mysql.createPool({
  host: 'localhost',
  user: 'your_mysql_username',
  password: 'your_mysql_password',
  database: 'your_database_name',
});

app.get('/api', (req, res) => {
  const page = parseInt(req.query.page) || 1;
  const pageSize = parseInt(req.query.pageSize) || 10;
  const start = (page - 1) * pageSize;

  const sql = `SELECT * FROM record LIMIT ${pageSize} OFFSET ${start};`;

  pool.getConnection((err, connection) => {
    if (err) {
      console.error('Error getting database connection: ', err);
      return res.status(500).json({ error: 'Internal server error' });
    }

    connection.query(sql, (err, results) => {
      connection.release();

      if (err) {
        console.error('Error executing SQL query: ', err);
        return res.status(500).json({ error: 'Internal server error' });
      }

      // 获取总数据量
      const countSql = 'SELECT COUNT(*) as total FROM record;';
      connection.query(countSql, (err, countResults) => {
        if (err) {
          console.error('Error executing count SQL query: ', err);
          return res.status(500).json({ error: 'Internal server error' });
        }

        const totalCount = countResults[0].total;
        const totalPages = Math.ceil(totalCount / pageSize);

        return res.status(200).json({
          totalCount,
          totalPages,
          currentPage: page,
          data: results,
        });
      });
    });
  });
});

const PORT = 3000;
app.listen(PORT, () => {
  console.log(`Server started on port ${PORT}`);
});

在上面的代码中，我们使用了express库和mysql库来实现服务器和数据库的交互。首先，获取前端传递的目标页码page和每页显示数据数量pageSize，然后根据这些参数构造SQL语句进行分页查询。同时，还查询数据库得到总数据量，用于计算总页数。最后，将总数据量、总页数、当前页数、当前页的数据发送给前端。

四、总结

分页功能是在大量数据查询时提高用户体验的常见手段。通过在前后端交互中传递必要的分页信息，我们可以实现一个简单有效的分页功能。

参考文献

• https://www.liaoxuefeng.com/wiki/1177760294764384/1217864791925600