JSON数据接口如何实现分页查询？

修改于 2025-09-22 17:14:40

词条归属：JSON数据接口

JSON 数据接口实现分页查询需要结合参数设计、数据库优化、响应格式规范等多个环节，以下是系统化的实现方案及最佳实践：

一、分页参数设计

1. 常用参数模式

参数类型	示例	适用场景	优缺点
Offset-Limit	?limit=10&page=3	通用场景，简单易用	大数据量时性能较差16
Cursor-Based	?cursor=id&limit=10	实时数据流、高性能分页	无法随机跳页8
时间范围	?since=2023-01-01	时间序列数据（如日志）	依赖时间字段有序性

2. JSON:API规范参数

GET /articles?page[limit]=10&page[offset]=20

响应示例： { "data": [/* 当前页数据 */], "links": { "self": "/articles?page[limit]=10&page[offset]=20", "next": "/articles?page[limit]=10&page[offset]=30", "prev": "/articles?page[limit]=10&page[offset]=10" }, "meta": { "total": 100, "page": { "limit": 10, "offset": 20, "total": 10 } } } 参考的JSON:API分页规范。

二、后端实现（以Node.js/Express为例）

1. 数据库查询优化

// MongoDB分页查询（Offset模式）
app.get('/api/users', async (req, res) => {
  const limit = parseInt(req.query['page[limit]'] || 10);
  const offset = parseInt(req.query['page[offset]'] || 0);

  // 索引优化：确保排序字段有索引
  const users = await User.find()
    .sort({ createdAt: -1 })
    .skip(offset)
    .limit(limit);

  const total = await User.countDocuments();
  res.json({
    data: users,
    meta: {
      total,
      limit,
      offset,
      totalPages: Math.ceil(total / limit)
    }
  });
});

2. 游标分页实现

// MongoDB游标分页（基于ID）
app.get('/api/users', async (req, res) => {
  const lastId = req.query.lastId;
  const limit = parseInt(req.query.limit || 10);

  const query = lastId ? { _id: { $gt: lastId } } : {};
  const users = await User.find(query).sort({ _id: 1 }).limit(limit);

  res.json({ data: users });
});

三、前端实现（React示例）

1. 分页控件组件

function Pagination({ currentPage, totalPages, onPageChange }) {
  return (
    <div>
      <button 
        onClick={() => onPageChange(currentPage - 1)} 
        disabled={currentPage === 1}
      >
        上一页
      </button>
      <span>{currentPage}/{totalPages}</span>
      <button 
        onClick={() => onPageChange(currentPage + 1)} 
        disabled={currentPage === totalPages}
      >
        下一页
      </button>
    </div>
  );
}

2. 数据获取与状态管理

function UserList() {
  const [users, setUsers] = useState([]);
  const [pagination, setPagination] = useState({
    page: 1,
    limit: 10,
    total: 0
  });

  useEffect(() => {
    fetch(`/api/users?page[limit]=${pagination.limit}&page[offset]=${(pagination.page-1)*pagination.limit}`)
      .then(res => res.json())
      .then(data => {
        setUsers(data.data);
        setPagination(prev => ({
          ...prev,
          total: data.meta.total
        }));
      });
  }, [pagination.page, pagination.limit]);

  return (
    <>
      {users.map(user => <div key={user.id}>{user.name}</div>)}
      <Pagination 
        currentPage={pagination.page}
        totalPages={Math.ceil(pagination.total / pagination.limit)}
        onPageChange={page => setPagination(prev => ({ ...prev, page }))}
      />
    </>
  );
}

四、性能优化策略

索引优化

为排序字段和分页字段创建复合索引（如{ createdAt: -1, _id: 1 }）。

2. 缓存机制

使用Redis缓存高频访问的分页结果（如首页数据）： const redis = require('redis'); const client = redis.createClient(); app.get('/api/users', async (req, res) => { const cacheKey = `users:${req.query.page[limit]}:${req.query.page[offset]}`; const cachedData = await client.get(cacheKey); if (cachedData) return res.json(JSON.parse(cachedData)); // 数据库查询逻辑... client.setex(cacheKey, 3600, JSON.stringify(responseData)); });

3. 游标分页替代Offset

避免大数据量下的性能瓶颈（如社交媒体动态流）。

五、错误处理与安全

参数校验 // Express中间件校验分页参数 const validatePagination = (req, res, next) => { const page = parseInt(req.query.page); const limit = parseInt(req.query.limit); if (isNaN(page) || page < 1) req.query.page = 1; if (isNaN(limit) || limit < 1 || limit > 100) req.query.limit = 10; next(); };
防止SQL注入