前端開發請直接跳到第4歩
1.pom引入依賴：
<!--導入pagehelper相關依賴-->
<dependency>
<groupId>com.github.pagehelper</groupId>
<artifactId>pagehelper</artifactId>
<version>5.1.2</version>
</dependency>
<dependency>
<groupId>com.github.pagehelper</groupId>
<artifactId>pagehelper-spring-boot-autoconfigure</artifactId>
<version>1.2.3</version>
</dependency>
<dependency>
<groupId>com.github.pagehelper</groupId>
<artifactId>pagehelper-spring-boot-starter</artifactId>
<version>1.2.3</version>
</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界面增加組件：
<el-row>
<el-col>
<div class="block">
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="pageInfo.pageNum"
:page-sizes="[2,10, 50, 100, 500]"
:page-size="pageInfo.pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="pageInfo.total">
</el-pagination>
</div>
</el-col>
</el-row>
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）顯示，導致顯示錯誤