不建议使用mybatis自带的分页查询,或pagehelper插件等,使用MySql查询语句更方便快捷。
以上一篇表格操作为基础,加入分页操作,完善核心代码。上篇详情CRUD与文件导入导出。
1、定义分页查询统一返回的实体类,返回数据为列表,建议使用泛型。
(RespPageEntity.java)
@Data public class RespPageEntity { private List<?> data; private Long total; } 复制代码
2、定义控制层方法,为避免空值,请求参数中给与默认值。
(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); } 复制代码
3、业务层方法,分为两步,1获取数据总量,2获取查询页信息,因此要加上事务注解@Transactional。
(UserService.java)
@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; } 复制代码
4、映射文件中的sql语句。
(UserMapper.xml)
<select id="getAllUserByPage" resultMap="BaseResultMap"> select * FROM userinfo limit #{page}, #{size} </select> <select id="getTotal" resultType="java.lang.Long"> select count(*) from userinfo; </select> 复制代码
5、postman测试,如地址http://127.0.0.1:8081/user/page/返回默认值或http://127.0.0.1:8081/user/page/?page=1&size=5
1、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> 复制代码
2、初始值
pageSize:5, currentPage:1, total:0, 复制代码
3、每页显示的数量和当前页码
sizeChange(size) { this.pageSize=size; this.initUser(); }, currentChange(page) { this.currentPage=page; this.initUser(); }, 复制代码
4、修改初始化页面方法
initUser() { this.getRequest("/user/page/?page="+this.currentPage+"&size="+this.pageSize).then(resp => { if (resp) { this.userinfo=resp.data; this.total=resp.total; } }) } 复制代码
运行后效果图