分页优化之——游标分页

游标分页（Cursor-based Pagination） 是一种高效的分页方式，特别适用于大数据集和无限滚动的场景。与传统的基于页码的分页（如 page=1&size=10）不同，游标分页通过一个唯一的游标（通常是时间戳或唯一 ID）来标记分页的位置，避免了传统分页在数据变动时的重复或遗漏问题。

以下是游标分页在前后端的实现方式：

1. 游标分页的核心概念

游标（Cursor）：
- 游标是一个唯一标识符，通常是数据的某个字段（如 id 或 created_at）。
- 游标用于标记分页的起始位置。
分页方向：
- 向前分页（Next Page）：获取游标之后的记录。
- 向后分页（Previous Page）：获取游标之前的记录。
响应结构：
- 返回分页数据时，需要包含下一个游标和上一个游标，以便客户端继续分页。

2. 后端实现

2.1 数据库查询

假设数据表结构如下：

CREATE TABLE posts (id BIGINT PRIMARY KEY AUTO_INCREMENT,content TEXT,created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

向前分页：获取 id > cursor 的记录。
向后分页：获取 id < cursor 的记录。

2.2 后端 API 设计

请求参数：
- cursor：当前游标（可选，首次请求时可以为空）。
- limit：每页的记录数。
- direction：分页方向（next 或 prev，可选）。

响应结构：

{"data": [],         // 当前页的数据"next_cursor": "123", // 下一页的游标"prev_cursor": "456"  // 上一页的游标
}

2.3 后端代码实现（Java + Spring Boot）

java">@RestController
@RequestMapping("/posts")
public class PostController {@Autowiredprivate PostRepository postRepository;@GetMappingpublic ResponseEntity<CursorPageResponse<Post>> getPosts(@RequestParam(required = false) Long cursor,@RequestParam(defaultValue = "10") int limit,@RequestParam(defaultValue = "next") String direction) {List<Post> posts;Long nextCursor = null;Long prevCursor = null;if ("next".equals(direction)) {// 向前分页：获取 id > cursor 的记录posts = postRepository.findByIdGreaterThan(cursor, PageRequest.of(0, limit));if (!posts.isEmpty()) {nextCursor = posts.get(posts.size() - 1).getId();prevCursor = posts.get(0).getId();}} else if ("prev".equals(direction)) {// 向后分页：获取 id < cursor 的记录posts = postRepository.findByIdLessThan(cursor, PageRequest.of(0, limit));if (!posts.isEmpty()) {nextCursor = posts.get(0).getId();prevCursor = posts.get(posts.size() - 1).getId();}} else {// 首次请求，获取最新的记录posts = postRepository.findLatest(PageRequest.of(0, limit));if (!posts.isEmpty()) {nextCursor = posts.get(posts.size() - 1).getId();}}CursorPageResponse<Post> response = new CursorPageResponse<>();response.setData(posts);response.setNextCursor(nextCursor);response.setPrevCursor(prevCursor);return ResponseEntity.ok(response);}
}

3. 前端实现

3.1 首次加载

首次加载时，不传递 cursor，获取最新的数据。

javascript">fetch('/posts?limit=10').then(response => response.json()).then(data => {console.log(data);// 渲染数据// 保存 next_cursor 和 prev_cursor});

3.2 加载下一页

使用 next_cursor 请求下一页数据。

javascript">fetch(`/posts?cursor=${nextCursor}&limit=10&direction=next`).then(response => response.json()).then(data => {console.log(data);// 渲染数据// 更新 next_cursor 和 prev_cursor});

3.3 加载上一页

使用 prev_cursor 请求上一页数据。

javascript">fetch(`/posts?cursor=${prevCursor}&limit=10&direction=prev`).then(response => response.json()).then(data => {console.log(data);// 渲染数据// 更新 next_cursor 和 prev_cursor});