ElementUI 分页组件配合PageHelper使用

需求

博客页面分页，前端element的分页组件很容易实现

前端

<el-pagination
		style="text-align: center"
        background
        //当前页面改变时执行的函数
        @current-change="handCurrentChange" 
        //当前页数
        :current-page="page.currentPage" 
        layout="prev, pager, next" 
        //总页数
        :page-count="page.total" 
        >
</el-pagination>

total是总条目数，page-count是总页数，满足其一就能显示页码了。我用的是page-count参数。

vue的data代码

page: {
		//要展示的实体
        blogs: [],
        //总页数
        total: 1,
        //当前页数
        currentPage: 1,
    }

vue的方法

//一旦当前页面数发生变化就执行此方法，更新blogs数组中的数据
handCurrentChange(current){
	    console.log("the current page:"+current);
	     this.$axios.get("/blog/getpagesbyuserid/"+this.userId+"?page="+current).then(res => {
	         this.page.blogs = res.data.data.blogList;
	     })
}

后端

每一页的条数由后端规定，前端只需要传递当前页码的参数即可，后端返回每一页的博客列表和总条数。

@GetMapping("/getpagesbyuserid/{userId}")
    public Result getPages(@RequestParam(value="page",defaultValue="1", required = false)Integer page,
                        @RequestParam(value = "limit", defaultValue = "3", required = false) Integer limit,@PathVariable("userId") String userId){
        PageHelper.startPage(page, limit);
        List<Blog> blogList = blogService.findBlogsByUserId(userId);
        //分页信息
        PageInfo pageInfo = new PageInfo(blogList);
        return Result.success(MapUtil.builder()
                        .put("blogList", blogList)
                        .put("total", pageInfo.getPages()).map());
    }

前端中总页数total应该在页面初始化时就确定，所以前端在created生命周期里要请求一次

this.$axios("/blog/getpagesbyuserid/"+_this.userId).then((res) => {
                _this.page.blogs = res.data.data.blogList;
                _this.page.total = res.data.data.total;
            })

结果