实现滚动分页查询：提升应用的流畅体验

Takumilovexu

已于 2024-10-09 09:48:54 修改

阅读量1.2k

点赞数 18

分类专栏： Java 文章标签： redis 数据库缓存 java spring mybatis

于 2024-07-13 15:08:58 首次发布

本文链接：https://blog.youkuaiyun.com/Takumilove/article/details/140400432

版权

Java 专栏收录该内容

19 篇文章

订阅专栏

在许多社交媒体或资讯类应用中，为了提升用户体验，滚动分页（Scrolling Pagination）是一种非常常见的分页技术。通过实现滚动分页功能，当用户滑动页面到底部时，应用能够自动加载更多数据，从而提供一个无缝、流畅的用户体验。本文将详细介绍如何实现滚动分页查询，并提供具体的 Java 代码示例。

一、滚动分页的实现原理

滚动分页是相对于传统的分页方式（如：Page 1, Page 2）的一种更加灵活的分页技术。其主要特点在于：

自动加载数据：
- 用户无需点击“下一页”或“更多”按钮，只需向下滑动即可加载更多内容。
流畅的用户体验：
- 通过减少页面跳转，能够让用户持续保持在内容流中，避免打断用户的浏览体验。
减少数据的重复加载：
- 滚动分页通常基于时间戳或唯一标识符进行查询，不同于传统分页可能存在的重复数据问题。

在实际的业务实现中，我们通常使用 时间戳 和 偏移量 来定位下一页的数据起始点。

二、功能实现步骤

我们将在服务端实现一个基于 Redis 和数据库联合查询的滚动分页方案。具体实现步骤如下：

获取当前用户：
- 通过用户的身份信息（如用户 ID）来定位用户的内容流。
查询用户的内容收件箱（Redis 存储）：
- 利用 Redis 的有序集合（ZSet），根据时间戳查询用户的内容流，确保内容是按照时间排序的。
解析数据：
- 提取 Redis 查询到的内容 ID 和对应的时间戳，并计算新的偏移量。
数据库查询详细信息：
- 使用提取到的内容 ID 列表从数据库中批量查询详细内容信息。
封装返回结果：
- 将查询到的详细内容和新的偏移量封装成返回对象，并提供给前端进行展示。

三、具体代码实现

以下是基于上述思路的具体代码实现（以博客查询为例）：

@Override
public Result queryBlogOfFollow(Long max, Integer offset) {
    // 1. 获取当前用户
    Long userId = UserHolder.getUser().getId();
    
    // 2. 查询收件箱 zrevrangebyscore key max min limit offset count
    String key = FEED_KEY + userId;
    Set<ZSetOperations.TypedTuple<String>> typedTuples = stringRedisTemplate.opsForZSet()
        .reverseRangeByScoreWithScores(key, 0, max, offset, 2);
    
    if (typedTuples == null || typedTuples.isEmpty()) {
        return Result.ok();
    }
    
    // 3. 解析数据：blogId、score(时间戳)、offset
    List<Long> ids = new ArrayList<>(typedTuples.size());
    long minTime = 0;
    int os = 1;
    for (ZSetOperations.TypedTuple<String> tuple : typedTuples) {
        // 获取id
        ids.add(Long.valueOf(tuple.getValue()));
        // 获取分数
        long time = tuple.getScore().longValue();
        if (time == minTime) {
            os++;
        } else {
            minTime = time;
            os = 1;
        }
    }
    
    // 4. 根据blogId查询blog信息
    String idStr = StrUtil.join(",", ids);
    List<Blog> blogs = query().in("id", ids)
        .last("ORDER BY FIELD(id," + idStr + ")")
        .list();
    
    for (Blog blog : blogs) {
        // 查询blog有关的用户
        this.queryBlogUser(blog);
        // 查询点赞状态
        this.isBlogLiked(blog);
    }
    
    // 5. 封装并返回
    ScrollResult r = new ScrollResult();
    r.setList(blogs);
    r.setOffset(os);
    r.setMinTime(minTime);
    return Result.ok(r);
}

四、代码解析

获取当前用户：

使用 UserHolder.getUser().getId() 获取当前登录用户的 ID，用于确定当前查询的内容流属于哪个用户。
查询 Redis 中的内容流：

使用 reverseRangeByScoreWithScores 方法，从 Redis 的有序集合中按时间戳（score）逆序查询用户的内容流。通过指定 max 和 offset 来确定查询范围，2 表示一次查询两条记录。
解析内容 ID 和时间戳：

将从 Redis 中提取到的内容 ID 和时间戳进行解析，并计算偏移量（offset）。如果多个内容具有相同的时间戳，则通过 os 进行偏移量的递增。
批量查询内容详情：

使用数据库查询（in 查询）批量获取这些内容的详细信息，并使用 ORDER BY FIELD(id, ...) 保持内容的顺序一致。
补充用户信息和点赞状态：

为每篇博客补充作者的基本信息（如用户名、头像等）以及当前用户是否已点赞该内容的状态。
封装并返回结果：

使用 ScrollResult 类将结果数据封装并返回给前端。包含三个核心字段：
- List<Blog> list：博客内容列表。
- Integer offset：新的偏移量，用于下一次查询。
- Long minTime：当前批次中最小的时间戳，用于下一次滚动查询。