一次性返回全量数据集的场景几乎不存在,所以出现了数据分页的需求。本文将总结常见的列表样式以及接口分页设计相关问题。
传统分页:通过显示的页码查询指定页的数据,多用于 PC 端数据列表展示。
流式分页:通过滚动方式隐式加载更多的数据,适用 移动端大多场景。
基于偏移是最常见的分页接口设计,其原理是通过页号和页大小指定某一分页的数据。
条件传参格式
{
“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> selectPage(@RequestBody Query query){
IPage pageList = service.selectPage(query);
return Rs.newSuccessInstance(pageList);
}
public IPage selectPage(Query query) {
QueryWrapper queryWrapper = new QueryWrapper<>();
Page page = new Page<>(query.getPage(), query.getLimit());
IPage page = cjdwMapper.selectPage(page, queryWrapper);
List records = pageCjdw.getRecords();
return PageUtil.toPage(page, records);
}
public class PageUtil{
public PageUtil() {
}
public static IPage toPage(IPage> iPage, List list) {
IPage 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 条数据。
流式分页有如下几个特点:
通过滚动/上拉/点击等方式加载新一页
无页码
无上/下页按钮
不可跳转至指定页面
流式分页在前后端都可以实现,需根据实际情况进行决策。
后端接口同理传统分页接口方式,知识前端处理方式不同。