Springboot整合Pagehelper实现分页(结合vue)

1、引入依赖(starter)

 
            com.github.pagehelper
            pagehelper-spring-boot-starter
            1.2.10
     

2、配置yml文件

pagehelper:
  helperDialect: mysql
  reasonable: true 
  supportMethodsArguments: true 
  pageSizeZero: false #pageSize=0 

3、编写controller

 @GetMapping("/all")
    public PageInfo getBookAll(@RequestParam(defaultValue = "1") int pageNum,
                                 @RequestParam(defaultValue = "10") int pageSize, Book book) {
        PageHelper.startPage(pageNum, pageSize);
        PageInfo pageInfo = new PageInfo(bookDao.queryAll(book));
        return pageInfo;
    }

4、前端vue

(1)与后端数据交互

  page(currentPage){
                const _this=this;
                axios.get("http://localhost:8888/book/all?pageNum="+currentPage+"&pageSize=10").then(function (res) {
                    console.log(res.data);
                    _this.tableData=res.data.list;
                    _this.total=res.data.total;
                })
            }

（2）分页代码(Element UI)

5、效果如下图

image.png