请问后台写的分页查询前端怎么调用呢？

Question

    @GetMapping(value = "/search/{currentPage}/{pageSize}")
    @Override
    public Result<PageInfo<T>> findByPage(@PathVariable(name = "currentPage") Integer currentPage,
                                          @PathVariable(name = "pageSize") Integer pageSize) {
        PageInfo<T> pageInfo = coreService.findByPage(currentPage, pageSize);
        return new Result<PageInfo<T>>(true, StatusCode.OK, "分页查询成功", pageInfo);
    }

前端是vue的，

var vue = new Vue({
        el: '#app',
        data: {
            autoUpload: true,//自动上传
            imageUrl: null,//模型数据，用于上传图片完成后图片预览
            activeName: 'first',//添加/编辑窗口Tab标签名称
            pagination: {//分页相关属性
                currentPage: 1,
                pageSize: 10,
                total: 100,
                queryString: null,
            },
            dataList: [],//列表数据
        },
        created() {
            this.findPage();
        },
        methods: {
            //分页查询
            findPage() {
                axios.post('/items/search.do', this.pagination).then(res => {
                    if (res.data.flag) {
                        this.dataList = res.data.data.rows;
                        this.pagination.total = res.data.data.total;
                    } else {
                        this.$message.error(res.data.message);
                    }
                })
            },
}

前端这里该怎么写才能完成将数据调出来？

Answer 1

1.@GetMapping(value = "/search/{currentPage}/{pageSize}")

value就是你调用get请求的url，currentPage和pageSize是你的分页数据，就是pagination里的。

譬如axios.get('/items/search/1/10')
2.也可以调整后端的路径直接value="/search",参数则不用@PathVariable注解就可以得到了

Answer 2

传入当前页，每页查询多少条等参数；

后端会返回总条数，总页数，当前页的数据信息；

Answer 3

后端返回总条数，前端解析获取

 

Answer 4

1.前段传递页数，后端根据页码计算出返回的数据，返回一整页的内容

2.在数据量不大的情况下，后端返回所有结果，前端缓存结果，并分页展示

3.在千万级-亿级数据量情况下，需要针对查询做优化，很多时候并不是用页数去做分页，更多的是用时间分区去查询，这个也需要根据实际分库分表的逻辑去优化

Answer 5

1.后端做分页，接口传入参数一般需要页码，以及页面限制条数

2.后端返回前段，返回总条数和data