当前位置：首页 > article >正文

分页优化之——游标分页

article 2025/3/20 3:15:25

游标分页（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）

@RestController
@RequestMapping("/posts")
public class PostController {

    @Autowired
    private PostRepository postRepository;

    @GetMapping
    public 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，获取最新的数据。

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

3.2 加载下一页

使用 next_cursor 请求下一页数据。

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 请求上一页数据。

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