前后端通信时候如何对数据进行分页?

分页主要是由后端来操作;因为如果数据量太大的话,前端操作会要很耗时。

前端需要在Ajax中,把当前页数 和每页条数 发送给到后端。后端拿到这两个数据后,对数据进行切分,用slice(start,end) 这个方法,start表示开始位置;end表示结束位置。

比如后端从ctx.query拿到请求的参数:
http://localhost:3000/crm/list?current=1&&pagesize=20

以上就是一个前端请求,它携带了 当前页数是1,每页条数显示20条。

后端在路由中怎么拿到数据呢?

const {current,pagesize }=ctx.query
//来解构一下query,得到的就是 1  和20  ,

//来解构一下query,得到的就是 1 和20 ,假设 如果前端请求的是第2页,那么current也就是2。就是当前请求第2页,每页显示是20条。

那后端如何返回数据?众所周知,数据是以数组形式返回的,那么就用数组的方法来切分,slice(start,end)的方法
那start 应该是多少?end又应该是多少?
start 是 当前页数减1的,值再乘以每页的条数;
(2-1)*20=20
end就是当前页数减1的值,再乘以每页条数,再加上每页条数
(2-1)*20+20=40
那代码怎么写呢?

ctx.body.slice((2-1)*20,(2-1)*20+20)

这样其实就是下面这样,那第2页其实也就是第20条数据,到第40条数据

slice(20,40)

当然不能把数据写死,我们要从前端获取数据,那么 完整的代码是:

ctx.body.slice((current-1)*pagesize,(current-1)*pagesize+pagesize)

这样就能对返回给前端的数据进行切分了。

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值