分页功能的前后端设计

问题

当数据量很大时（如几万条数据），需要设计分页功能来分批展示数据。如何设计前后端的交互方案？

解答

前后端交互数据格式

后端需要返回以下数据：

{
  "totalCount": 1836,    // 总数据量
  "totalPages": 92,      // 总页数
  "currentPage": 1,      // 当前页码
  "data": [              // 当前页数据
    {
      // ...
    }
  ]
}

前端请求参数

前端向后端传递两个参数：

• page：目标页码（必传）
• pageSize：每页显示数量（可选，默认 10）

后端实现逻辑

计算数据起始位置：

const start = (page - 1) * pageSize;

查询当前页数据：

SELECT * FROM record LIMIT ${pageSize} OFFSET ${start};

查询总数据量：

SELECT COUNT(*) FROM record;

完整代码示例

router.all('/api', function (req, res, next) {
  var param = '';
  
  // 获取参数
  if (req.method == "POST") {
    param = req.body;
  } else {
    param = req.query || req.params;
  }
  
  // 校验必传参数
  if (!param.page) {
    res.end(JSON.stringify({ msg: '请传入参数page', status: '102' }));
    return;
  }
  
  const pageSize = param.pageSize || 10;
  const start = (param.page - 1) * pageSize;
  const sql = `SELECT * FROM record LIMIT ${pageSize} OFFSET ${start};`;
  
  pool.getConnection(function (err, connection) {
    if (err) throw err;
    // 执行查询...
  });
});

关键点

• LIMIT 控制每页显示的数据量，值为 pageSize
• OFFSET 控制数据起始位置，计算公式为 pageSize * (page - 1)
• 后端需要返回总数据量、总页数、当前页码和当前页数据
• 前端必须传递 page 参数，pageSize 可选（默认 10）
• 分页本质是从结果集中截取第 M 到 N 条记录