前端分页查询

1、偏移量分页

即传统的分页查询，通过page和limit查询固定尺寸的数据，然后根据后端返回的total来判断是否查询全部数据。能够查询固定的某一页的数据。

优势

• 简单好实现

• 支持跳页访问

劣势

• 基于偏移量的分页在数据量很大的场景下，查询效率会比较低。通常 OFFSET 越高，查询时间就越长。

• 在并发场景下会出现元素重复（offset在第二页时有人在第一页新插入一个数据）或被跳过（offset在第二页时有人在第一页删掉了一个数据）。

• 显式的page参数在支持跳页的同时也会被爬虫并发请求。

axios({
  url: "/app/product/page",
  method: "GET"
  params: {
    page: this.page,
    limit: 20
  }
}).then(res => {
  const { total, list } = res.data
  this.pageList = [...this.pageList, ...list]
  if (this.pageList.length < total) {
    this.page++
  }
})

2、游标分页

游标分页，每次查询后后端会返回一个游标key，前端查询下一页数据时把这个游标继续给后端进行查询，第一次不需要传这个key。只能按照顺序往下查，不能查询固定的某一页数据。

优势

• 性能好，并发安全。

• 防止被无脑批量爬取。

劣势

• 后端实现稍复杂。

• 不支持跳页，比较适合上拉滑动加载更多。

• 不太适合多检索条件的场景。

axios({
  url: "/app/product/page",
  method: "GET"
  params: {
    after: this.after
  }
}).then(res => {
  const { after, list } = res.data
  this.pageList = [...this.pageList, ...list]
  this.after = after
})