在项目中，我们不可避免地会遇到分页业务，如果我们自己去写分页的代码过于繁琐，这里我们使用分页插件：pagehelper来完成分页功能。
1.环境搭建SpringBoot 和 Mybatis环境
- 引入maven依赖
<!-- 分页插件 -->
<dependency>
<groupId>com.github.pagehelper</groupId>
<artifactId>pagehelper-spring-boot-starter</artifactId>
<version>1.2.3</version>
</dependency>
- 配置springboot的yml文件
pagehelper:
helperDialect: mysql
reasonable: true
supportMethodsArguments: true
params: count=countSql
2.使用pagehelper
service层:
/**
* 根据pageNum，pageSize获取分页内容
*/
@Override
public List<Product> findByPage(int pageNum, int pageSize) {
PageHelper.startPage(pageNum , pageSize);
//得到数据
List<Product> productList = productMapper.getProductList();
//得到分页的结果对象
PageInfo<Product> productPageInfo = new PageInfo<>(productList);
//得到分页中的Product条目对象
List<Product> pageList = productPageInfo.getList();
return pageList;
}
------------------------------------------------------------------------------------------------------
controller层:
/**
* 分页获取product
*/
@CrossOrigin(origins = "*", maxAge = 3600)
@RequestMapping("/findByPage")
@ResponseBody
public List<Product> findByPage(@RequestParam("pageNum") int pageNum,
@RequestParam("pageSize") int pageSize){
return productService.findByPage(pageNum,pageSize);
}
3.前端vue调用
template:
<el-pagination
v-if="!noResult&&!error"
@size-change="handleSizeChange" <!-- 绑定每页数据size，并刷新数据 -->
@current-change="handleCurrentChange" <!-- 绑定当前页码，并刷新数据 -->
:current-page="currentPage"
:page-sizes="[8, 20, 40, 80]"
:page-size="pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="total">
</el-pagination>
----------------------------------------------------------------------------------------------
script:
getAllGoods(){
this.$axios.get('http://localhost:8080/product/findByPage',
{params: {pageNum : this.currentPage, pageSize : this.pageSize}}).then((response) => {
this.goods = response.data
this.noResult = false
if (this.total === 0) {
this.noResult = true
}
this.error = false
this.loading = false
})
.catch((error) => {
this.error = true
});
},
