分页，前端是如何与后端交互的？

Question

我是一名小白前端。

关于分页我的理解是这样的：

1.首先后端会把分页逻辑做好（一页显示多少数据，总共多少页）

2.前端get请求获取第一页的数据 （因为网站打开时默认显示第一页嘛）

3.用户点击第2页的时候，我发送post请求给后端（把2发给后端）

4.后端把第2页的数据返回给我，我在渲染出来

不知道我这样的理解对不对

Answer 1

你可以去参考一下https://github.com/watchdog-framework/watchdog-framework的前端项目设计，大概是这样的一个思路：

后端返回给前端的响应：

{
    "status": 1,
    "data": {
        "total": 114, 
        "size": 10,
        "pages": 12,
        "current": 1,
        "records": [{
            "id": "990145393943736321",
            "username": "test",
            "uid": "989416849999503361",
            "ip": "222.209.86.19",
            "ajax": 1,
            "uri": "/account/sign-in",
            "params": "[{\"password\":\"******\",\"username\":\"test\"}]",
            "httpMethod": "POST",
            "classMethod": "cn.licoy.wdog.core.controller.AccountController.signIn()",
            "actionName": "登录",
            "createDate": 1524904033000
        }]
    },
    "msg": "操作成功",
    "timestamps": 1524904039383
}

其中

• data.total代表总记录数
• data.size代表每页显示数量
• data.current代表当前页
• data.pages代表总页数

其总页数运算公式为 Math.ceil(data.total/data.size)。

Answer 2

前端把页码，每页显示条数发送到后端，后端根据这两个字段分页后返回相应的页码的数据。如下请求第一页，100条数据，点击第二页时把pageNumber改成2再发送到后端就行了。

{
    pageSize:100,
    pageNumber:1
}

当然后端会返回总条数，前端根据总条数跟pageSize可以计算出总共有多少页。后端也可以返回总共有多少页，前端就不用计算了。

Answer 3

是的，前端做的就是把页码，每页展示条数传给后端就可以了，其他后台处理