不建議使用mybatis自帶的分頁查詢,或pagehelper插件等,使用MySql查詢語句更方便快捷。前端
以上一篇表格操做爲基礎,加入分頁操做,完善核心代碼。上篇詳情CRUD與文件導入導出。vue
一、定義分頁查詢統一返回的實體類,返回數據爲列表,建議使用泛型。java
(RespPageEntity.java)spring
@Data
public class RespPageEntity {
private List<?> data;
private Long total;
}
複製代碼
二、定義控制層方法,爲避免空值,請求參數中給與默認值。sql
(UserController.java)後端
/** * 根據頁碼和大小分頁查詢 * @param page 當前頁,默認爲1 * @param size 當前每頁顯示行數,默認爲5 * @return 頁信息的實體 */
@GetMapping("/page/")
public RespPageEntity getAllUserByPage(@RequestParam(defaultValue = "1") Integer page, @RequestParam(defaultValue = "5") Integer size) {
return userService.getAllUserByPage(page, size);
}
複製代碼
三、業務層方法,分爲兩步,1獲取數據總量,2獲取查詢頁信息,所以要加上事務註解@Transactional。springboot
(UserService.java)mybatis
@Transactional
public RespPageEntity getAllUserByPage(Integer page, Integer size) {
RespPageEntity pageEntity = new RespPageEntity();
// 默認從0開始
if (page != null && size != null) {
page = (page-1)*size;
}
// 獲取當前也用戶信息
List<User> users = userMapper.getAllUserByPage(page, size);
pageEntity.setData(users);
// 獲取當前用戶總量
Long total = userMapper.getTotal();
pageEntity.setTotal(total);
return pageEntity;
}
複製代碼
四、映射文件中的sql語句。app
(UserMapper.xml)post
<select id="getAllUserByPage" resultMap="BaseResultMap">
select
*
FROM
userinfo
limit #{page}, #{size}
</select>
<select id="getTotal" resultType="java.lang.Long">
select count(*) from userinfo;
</select>
複製代碼
五、postman測試,如地址http://127.0.0.1:8081/user/page/返回默認值或http://127.0.0.1:8081/user/page/?page=1&size=5
一、template臨時組件中加入分頁的div(User.vue)
<div style="display: flex;justify-content: center;margin-top: 10px">
<el-pagination
background
@size-change="sizeChange"
@current-change="currentChange"
:current-page="currentPage"
:page-size="pageSize"
layout="sizes, prev, pager, next, jumper, ->, total, slot"
:total="total">
</el-pagination>
</div>
複製代碼
二、初始值
pageSize:5,
currentPage:1,
total:0,
複製代碼
三、每頁顯示的數量和當前頁碼
sizeChange(size) {
this.pageSize=size;
this.initUser();
},
currentChange(page) {
this.currentPage=page;
this.initUser();
},
複製代碼
四、修改初始化頁面方法
initUser() {
this.getRequest("/user/page/?page="+this.currentPage+"&size="+this.pageSize).then(resp => {
if (resp) {
this.userinfo=resp.data;
this.total=resp.total;
}
})
}
複製代碼
運行後效果圖