国外室内设计案例网站,女生学电子商务后悔了,网站建设与运维预算,大连公交app一 自己封装Page对象实现
博客链接
二 使用sql实现分页
2.1 场景分析
前段传递给给后台什么参数? 当前页码currentPage每页显示条数pageSize 后台给前端返回什么数据? 当前页数据List总记录数totalCount
2.2 前段代码
templateel-paginationsize-changetemplateel-paginationsize-changehandleSizeChangecurrent-changehandleCurrentChange:current-pagecurrentPage:page-sizes[5, 10, 15, 20]:page-size5layouttotal, sizes, prev, pager, next, jumper:totaltotalCount/el-pagination
/template
scriptexport default {methods: {handleSizeChange(val) {//console.log(每页 ${val} 条);// 重新设置每页显示的条数this.pageSize val;this.selectAll();},handleCurrentChange(val) {// console.log(当前页: ${val});// 重新设置当前页码this.currentPage val;this.selectAll();}},data() {return {// 当前页码currentPage: 1,// 总记录数totalCount: 100,// 每页显示条数pageSize: 5,//接收当前页数据集合tableData:[]};},methods:{// 分页查询selectAll(){axios({method:get,url:后端接口地址,}).then(response {//设置表格数据this.tableData response.data.rows;//设置总记录数this.totalCount response.data.totalCount})}}}
/script2.3 后端代码
PageBean
// 分页查询JavaBean
public class PageBeanT {// 总记录数private int totalCount;// 当前页数据private ListT rows;get,set...
}mapper
// 分页查询
Select(select * from 表名 limit #{begin} , #{size})
ListT selectByPage(Param(begin) int begin,Param(size) int size);// 查询总记录数
Select(select count(*) from 表名)
int selectTotalCount();service
// 分页查询 currentPage:当前页码 pageSize:每页展示条数
PageBeanT selectByPage(int currentPage,int pageSize);impl
Override
public PageBeanT selectByPage(int currentPage,int pageSize){// 计算开始索引int begin (currentPage - 1) * pageSize;// 计算查询条目数int size pageSize;// 查询当前页数据ListT rows mapper.selectByPage(begin,size);// 查询总记录数int totalCount mapper.selectTotalCount();// 封装PageBean对象PageBeanT pageBean new PageBean();pageBean.setRows(rows);pageBean.setTotalCount(totalCount);return pageBean;
}controller
GetMapping(/selectAll)
public AjaxResult getApproveDataRes(ImportDataGetDto importDataGetDto){//接收前段传递请求参数实体importDataGetDtoint currentPage importDataGetDto.getCurrentPage();int pageSize importDataGetDto.getPageSize();PageBeanT pageBean mapper.selectByPage(currentPage,pageSize)return pageBean;
}三 使用PageHelper插件
PageHelper官网
3.1 导入依赖
dependenciesdependencygroupIdcom.github.pagehelper/groupIdartifactIdpagehelper-spring-boot-starter/artifactIdversion1.2.3/version/dependency
/dependencies3.2 application.yml
pagehelper:# 设置方言此处指定 MySQL 数据库helper-dialect: mysql# 是否启动合理化默认是 false。# 启用合理化时如果pageNum1会查询第一页如果pageNumpages最大页数会查询最后一页。# 禁用合理化时如果pageNum1或pageNumpages会返回空数据reasonable: true# 是否支持接口参数来传递分页参数默认falsesupport-methods-arguments: true# 为了支持startPage(Object params)方法增加了该参数来配置参数映射用于从对象中根据属性名取值params: countcountSql# 默认值为 false当该参数设置为 true 时如果 pageSize0 或者 RowBounds.limit 0 就会查询出全部的结果相当于没有执行分页查询但是返回结果仍然是 Page 类型page-size-zero: true3.3 使用
/**
* service实现类
* param pageNumber 页码
* param pageSize 每页显示数目
*/
public PageInfoT list(Integer pageNumber, Integer pageSize) { // 设置分页PageHelper.startPage(pageNumber, pageSize);// 查询用户角色列表需要分页的查询ListT list userRoleService.queryList();PageInfoT pageInfo new PageInfo(list);return pageInfo;
)注意:PageHelper.startPage(页码, 每页显示数目); 这一句代码必须放在需要分页的查询语句之前否则会分页不生效
3.4 分页失效情况 分页设置与需要分页的查询之间存在其他查询,如下代码是一个错误示范虽然在方法的开头设置了分页但因为在【查询用户角色列表】之前多查了一步【查询用户信息】此时实际上分页针对的是【查询用户信息】进行分页而并非对【查询用户角色列表】进行分页。 public PageInfoUserRole list(Integer pageNumber, Integer pageSize, String userId) {// 设置分页PageHelper.startPage(pageNumber, pageSize);// 查询用户信息User user userService.findById(userId);// 查询用户角色列表需要分页的查询ListUserRole list userRoleService.queryList();PageInfoUserRole pageInfo new PageInfoUserRole(list);return pageInfo;
)注意:startPage会寻找最近的一个查询方法执行分页 在需要分页的查询后才设置分页,如下代码是一个错误示范在【查询用户角色列表】后才进行分页设置因为已进行的所有数据的查询所以此时再设置分页已无任何意义自然会分页失效 public PageInfoUserRole list(Integer pageNumber, Integer pageSize) {// 查询用户角色列表需要分页的查询ListUserRole list userRoleService.queryList();// 设置分页PageHelper.startPage(pageNumber, pageSize);PageInfoUserRole pageInfo new PageInfoUserRole(list);return pageInfo;
)3.5 返回参数说明
//当前页
private int pageNum;
//每页的数量
private int pageSize;
//当前页的数量
private int size;
//当前页面第一个元素在数据库中的行号
private int startRow;
//当前页面最后一个元素在数据库中的行号
private int endRow;
//总记录数
private long total;
//总页数
private int pages;
//结果集重要,通过getList获取结果集
private ListT 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;3.6 自定义返回参数
//使用默认分页时
PageHelper.startPage(page, size);
ListDataBean beans mapper.selectByQuery(express);
return new PageInfo(beans);根据上述代码可以发现想要进行自定义分页的话只需要重新定义一个PageInfo就可以了。保留当前页、每页数量、当前页数量、总记录数、总页数字段其他参数全部干掉拷贝下PageInfo在实体目录下新建个PageBean把PageInfo源码丢进去删掉多余的参数就OK了 public class PageBeanT {private static final long serialVersionUID 1L;//当前页private int pageNum;//每页的数量private int pageSize;//当前页的数量private int size;//总记录数private long total;//总页数private int pages;//结果集private ListT list;get,set...
}然后分页代码把PageInfo改成自己的PageBean
PageHelper.startPage(page, size);
ListDataBean beans mapper.selectByQuery(express);
return new PageBean(beans);四 使用PagedListHolder类 PagedListHolder是Spring Framework中的一个分页辅助类用于对列表进行分页显示和管理。它可以将一个列表对象进行分页处理并提供了一些方法用于管理分页的相关信息。使用PagedListHolder可以方便地对列表进行分页处理包括获取当前页的数据、切换到下一页或上一页、设置每页显示的记录数等操作。它还提供了一些其他的方法如获取总页数、获取当前页码等。 代码演示
前端(ElmentUI分页组件)
templateel-paginationsize-changehandleSizeChangecurrent-changehandleCurrentChange:current-pagecurrentPage:page-sizes[5, 10, 15, 20]:page-sizepageSizelayouttotal, sizes, prev, pager, next, jumper:totaltotalCount/el-pagination
/template
scriptexport default {methods: {handleSizeChange(val) {//console.log(每页 ${val} 条);// 重新设置每页显示的条数this.pageSize val;this.selectAll();},handleCurrentChange(val) {// console.log(当前页: ${val});// 重新设置当前页码this.currentPage val;this.selectAll();}},data() {return {// 当前页码currentPage: 1,// 总记录数totalCount: 0,// 每页显示条数pageSize: 5,//接收当前页数据集合tableData:[]};},methods:{/*分页查询*/handleSizeChange(val) {console.log(每页 ${val} 条);// 重新设置每页显示的条数this.pageSize val;this.selectAll();},handleCurrentChange(val) {console.log(当前页: ${val});// 重新设置当前页码this.currentPage val;this.selectAll();},// 分页查询selectAll(){axios({method:get,url:后端接口地址,}).then(response {//设置表格数据this.tableData response.data.rows;//设置总记录数this.totalCount response.data.total})}}}
/script后端
dto实体
Data
public class ApproveGetDto {...// 当前页码private Integer currentPage;// 每页展示条数private Integer pageSize;
}vo实体
Data
public class ApproveGetResT {...//分页查询总记录数private Long total;//分页查询当前页数据private T rows;
}controller GetMapping(/getApproveDataRes)public AjaxResult getApproveDataRes(ApproveGetDto approveGetDto ){// 通过前端传递参数调用service获取数据ListApproveGetRes approveGetRes lsjsService.getApproveDataRes(approveGetDto);// 设置要进行分页处理的数据源PagedListHolderApproveGetRes plh new PagedListHolder(approveGetRes);// 设置每页显示的记录数plh.setPageSize(approveGetDto.getPageSize());// 设置当前显示的页码,0代表第一页plh.setPage(approveGetDto.getCurrentPage()-1);// 创建vo对象ApproveGetRes dataRes new ApproveGetRes();// 设置vo对象的总条数dataRes.setTotal(Long.valueOf(approveDataRes.size()));// plh.getPageList():获取当前页的数据列表dataRes.setRows(plh.getPageList());return AjaxResult.success(返回成功, dataRes);}方法解释
// 1. 设置要进行分页处理的源列表
ListApproveGetRes approveGetRes lsjsService.getApproveDataRes(approveGetDto);
PagedListHolderApproveGetRes pagedListHolder new PagedListHolder(approveGetRes);
// 2. 设置每页显示的记录数
pagedListHolder.setPageSize(2);
// 3. 设置当前显示的页码
pagedListHolder.setPage(0);
// 4. 获取当前页的数据列表
ListString currentPageData pagedListHolder.getPageList();
// 5. 切换到下一页
pagedListHolder.nextPage();
// 6. 切换到上一页
pagedListHolder.previousPage();
// 7. 获取总页数
int totalPages pagedListHolder.getPageCount();
// 8. 获取当前页码
int currentPage pagedListHolder.getPage();
// 9. 判断当前页是否为第一页
boolean isFirstPage pagedListHolder.isFirstPage();
// 10. 判断当前页是否为最后一页
boolean isLastPage pagedListHolder.isLastPage();
