1、引入依赖(starter)

 <dependency>
            <groupId>com.github.pagehelper</groupId>
            <artifactId>pagehelper-spring-boot-starter</artifactId>
            <version>1.2.10</version>
     </dependency>

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)

 <el-pagination
                background
                layout="prev, pager, next"
                :total="total"
                @current-change="page"
        >
        </el-pagination>