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>
5、效果如下图
image.png
