API接口分页方案

前言

一次性返回全量数据集的场景几乎不存在，所以出现了数据分页的需求。本文将总结常见的列表样式以及接口分页设计相关问题。

分页方式

传统分页：通过显示的页码查询指定页的数据，多用于 PC 端数据列表展示。
流式分页：通过滚动方式隐式加载更多的数据，适用 移动端大多场景。

传统基于偏移量分页

基于偏移是最常见的分页接口设计，其原理是通过页号和页大小指定某一分页的数据。

整合mybaties-plus分页

条件传参格式
{
“page”: 1,
“limit”: 50,
“tj”: [
“tj”
]
}

数据结果返回格式

{
  "code": "S000000",
  "message": "请求成功",
  "data": {
    "records": [
      {
        "id": "1628584489712209922"
            }
    ],
    "total": 622,
    "size": 50,
    "current": 1,
    "orders": [],
    "optimizeCountSql": true,
    "hitCount": false,
    "countId": null,
    "maxLimit": null,
    "searchCount": true,
    "pages": 13
  },
  "success": true
}

代码

import com.baomidou.mybatisplus.core.metadata.IPage;

public Rs<IPage<Stu>> selectPage(@RequestBody Query query){
        IPage<Stu> pageList = service.selectPage(query);
        return Rs.newSuccessInstance(pageList);
    }


public IPage<Stu> selectPage(Query query) {
        QueryWrapper<Cjdw> queryWrapper = new QueryWrapper<>();
        Page<Cjdw> page = new Page<>(query.getPage(), query.getLimit());
        IPage<Stu> page = cjdwMapper.selectPage(page, queryWrapper);
        List<Stu> records = pageCjdw.getRecords();
      
        return PageUtil.toPage(page, records);
    }

public class PageUtil{
    public PageUtil() {
    }

    public static <T> IPage<T> toPage(IPage<?> iPage, List<T> list) {
        IPage<T> pageResult = new Page();
        pageResult.setRecords(list);
        pageResult.setCurrent(iPage.getCurrent());
        pageResult.setSize(iPage.getSize());
        pageResult.setTotal(iPage.getTotal());
        pageResult.setPages(iPage.getPages());
        return pageResult;
    }
}

使用内存分页

records  =  list.stream()
    .skip((page-1)*count)
    .limit(count)
    .collect(Collecters.toList());

这种方案比较适合传统显示分页场景，有点是实现起来简单，支持分页跳转，支持向前、后翻页。

缺点也比较明显，主要来自两方面：

慢查询：通过数据库 limit 和 offset 实现的分页性能较差，偏移量越大越明显。
动态数据：偏移量方案对数据变动支持也差，数据的插入或删除可能会导致数据重复或跳过，比如用户在查看第 10 页内容，此时第 1 页一条数据被修改，跳过了 1 条数据。

流式分页

流式分页有如下几个特点：

通过滚动/上拉/点击等方式加载新一页
无页码
无上/下页按钮
不可跳转至指定页面

流式分页在前后端都可以实现，需根据实际情况进行决策。

后端接口同理传统分页接口方式，知识前端处理方式不同。