1. Implement data paging query through PageHelper (SpringBoot+Mabatis). First, import pagehelper related dependencies in pom.xml.
<dependency>
<groupId>com.github.pagehelper</groupId>
<artifactId>pagehelper-spring-boot-starter</artifactId>
<version>1.2.10</version>
</dependency>
2. Next, the back-end Java code will be introduced. Here, the user's query operation is used as an example. Create a new Page object to receive the JSON data passed by the front end through POST request.
package com.fl.domain;
public class Page {
private Integer pageSize;
private Integer pageNum;
public Integer getPageSize() {
return pageSize;
}
public void setPageSize(Integer pageSize) {
this.pageSize = pageSize;
}
public Integer getPageNum() {
return pageNum;
}
public void setPageNum(Integer pageNum) {
this.pageNum = pageNum;
}
@Override
public String toString() {
return "Page{" +
"pageSize=" + pageSize +
", pageNum=" + pageNum +
'}';
}
}
3. Create a new getAll() method for query. PageHelper.startPage(pageNum, pageSize) is used to start paging and set the current page index and the amount of data displayed on each page. Call the getAll method in the service layer, convert the received data into PageInfo, and encapsulate it into the Result class for return. (The code of Dao layer and Service layer will not be explained in detail, just query all the data normally.)
@PostMapping("/getAll")
public Result getAll(@RequestBody Page page) {
PageHelper.startPage(page.getPageNum(), page.getPageSize());
List<User> users = userService.getAll();
PageInfo<User> userPageInfo = new PageInfo<>(users);
Integer code = users != null ? Code.GET_SUCC : Code.GET_ERR;
String msg = users != null ? "查询数据成功！" : "查询数据失败，请重试！";
return new Result(code, userPageInfo, msg);
}
4. Next, write the front-end code. First, add the elementUI paging component. page-size is used to set the page data amount, current-page is used to set the current page number index, @size-change sets the size change method, and @current-change sets the page number change method.
<el-pagination
:page-sizes="[5, 10, 15, 20]"
:page-size="pageSize"
:current-page="currentPage"
layout="total, sizes, prev, pager, next, jumper"
:total=count
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
>
</el-pagination>
export default {
name: "User",
components: {
AddUser},
data() {
return {
tableData: [],
deleteIds: [],
count: 0,
pageSize: 10,
currentPage: 1,
}
},
methods: {
// 获取全部用户信息
getUsers() {
api.getUers({
pageNum: this.currentPage, pageSize: this.pageSize}).then(res => {
console.log(res)
this.count = res.data.total
this.tableData = res.data.list
})
},
handleSizeChange(val) {
this.pageSize = val
this.getUsers()
},
handleCurrentChange(val) {
this.currentPage = val
this.getUsers()
}
},
created() {
this.getUsers()
},
}
The final effect is as follows:
