Vue笔记（十六）—— Vue PageHelper（SpringBoot）实现后台分页
前端开发请直接跳到第4歩
1.pom引入依赖：
<dependency>
<groupId>com.github.pagehelpergroupId>
<artifactId>pagehelperartifactId>
<version>5.1.2version>
dependency>
<dependency>
<groupId>com.github.pagehelpergroupId>
<artifactId>pagehelper-spring-boot-autoconfigureartifactId>
<version>1.2.3version>
dependency>
<dependency>
<groupId>com.github.pagehelpergroupId>
<artifactId>pagehelper-spring-boot-starterartifactId>
<version>1.2.3version>
dependency>
2.增加pagehelper配置：
方法一：在application.yml文件中配置
# 配置pagehelper参数
pagehelper:
helperDialect: mysql
reasonable: true
supportMethodsArguments: true
params: count=countSql
方法二：创建一个配置类配置 PageHelper
@Configuration
public class PageHelperConfig {
@Bean
public PageHelper getPageHelper(){
PageHelper pageHelper=new PageHelper();
Properties properties=new Properties();
properties.setProperty("helperDialect","mysql");
properties.setProperty("reasonable","true");
properties.setProperty("supportMethodsArguments","true");
properties.setProperty("params","count=countSql");
pageHelper.setProperties(properties);
return pageHelper;
}
}
3.新建接口：
/**
* 获取用户分页信息
* @param pageNum
* @param pageSize
* @return
*/
@GetMapping(value = "/getUserPageList")
public PageInfo<SystemUserPojo> getUserPageList(@RequestParam(value = "pageNum", defaultValue = "1") int pageNum, @RequestParam(value = "pageSize", defaultValue = "3") int pageSize) {
// pageNum:表示第几页 pageSize:表示一页展示的数据
PageHelper.startPage(pageNum, pageSize);
List<SystemUserPojo> systemUserPojoList = null;
try {
systemUserPojoList = iSystemUserService.select();
// 将查询到的数据封装到PageInfo对象
PageInfo<SystemUserPojo> systemUserPojoPageInfo = new PageInfo(systemUserPojoList, pageSize);
// 分割数据成功
return systemUserPojoPageInfo;
} catch (Exception e) {
log.error(e.getMessage(), e);
// 将查询到的数据封装到PageInfo对象
PageInfo<SystemUserPojo> systemUserPojoPageInfo = new PageInfo(null, pageSize);
// 分割数据成功
return systemUserPojoPageInfo;
}
}
4.Vue界面增加组件：
5.增加对应data声明和逻辑处理，部分更新代码如下：
data() {
return {
// 分页相关
pageInfo: {
pageNum: 1,
pageSize: 2,
size: 0,
startRow: 0,
endRow: 0,
total: 0,
pages: 0,
}
}
},
/**
* 初始化
*/
created() {
this.getUserList();
},
methods: {
/**
* 获取用户列表数据
*/
getUserList: function (pageNum, pageSize) {
let _this = this;
let url = URL_USER.page + "?pageNum=" + (null != pageNum ? pageNum : _this.pageInfo.pageNum) + "&pageSize=" + (null != pageSize ? pageSize : _this.pageInfo.pageSize);
_this.$axios.get(url).then((res) => {
if (res && res.data) {
if (res.data.list) {
let data = res.data.list;
_this.pageInfo = {
// 当前页数
pageNum: res.data.pageNum,
// 每页数量
pageSize: res.data.pageSize,
// 当前页数量
size: res.data.size,
// 当前页面第一个元素在数据库中的行号
startRow: res.data.startRow,
// 当前页面最后一个元素在数据库中的行号
endRow: res.data.endRow,
// 总记录数
total: res.data.total,
// 总页数
pages: res.data.pages,
};
// 清空历史数据
_this.userListData.length = 0;
for (let i = 0; i < data.length; i++) {
_this.userListData.push({
userId: data[i].userId,
userName: data[i].userName,
loginName: data[i].loginName,
password: data[i].password,
userStatus: data[i].userStatus,
userStatusName: data[i].userStatusName,
});
}
} else {
_this.$message({
message: res.data.msg,
type: 'info'
});
}
} else {
_this.$message({
message: CommonUtils.data().UnknownOptErrorMsg,
type: 'error'
});
}
});
},
/**
* 每页记录数
* @param val
*/
handleSizeChange(pageSize) {
// console.log(`每页 ${val} 条`);
this.pageInfo.pageSize = pageSize;
this.getUserList();
},
/**
* 第n页
* @param pageNum
*/
handleCurrentChange(pageNum) {
// console.log(`当前页: ${val}`);
this.pageInfo.pageNum = pageNum;
this.getUserList();
},
},
PageInfo类说明：
public class PageInfo<T> implements Serializable {
private static final long serialVersionUID = 1L;
//当前页
private int pageNum;
//每页的数量
private int pageSize;
//当前页的数量
private int size;
//由于startRow和endRow不常用，这里说个具体的用法
//可以在页面中"显示startRow到endRow 共size条数据"
//当前页面第一个元素在数据库中的行号
private int startRow;
//当前页面最后一个元素在数据库中的行号
private int endRow;
//总记录数
private long total;
//总页数
private int pages;
//结果集
private List<T> list;
//前一页
private int prePage;
//下一页
private int nextPage;
//是否为第一页
private boolean isFirstPage = false;
//是否为最后一页
private boolean isLastPage = false;
//是否有前一页
private boolean hasPreviousPage = false;
//是否有下一页
private boolean hasNextPage = false;
//导航页码数
private int navigatePages;
//所有导航页号
private int[] navigatepageNums;
//导航条上的第一页
private int navigateFirstPage;
//导航条上的最后一页
private int navigateLastPage;
}
参考
Pagination 分页
第三篇：SpringBoot整合Mybatis+PageHelper分页实现增删查改
问题汇总
当数据少为了测试设置pageSize时（如pageSize=2），要保证:page-sizes="[2,10, 50, 100, 500]"包含此设置值，否则会根据:page-sizes="[10, 50, 100, 500]"的最小值（即10）显示，导致显示错误