分页查询逻辑
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/873301dee20830f6514d32a43435b0ff.png)
1.创建一个泛型类PageBean,用来封装查询总记录数totalCount,当前页码数据rows,并为其写好getter和setter方法
package com.itheima.pojo;
import java.util.List;
public class PageBean<T> {
//总记录数
private int totalCount;
//当前页的-数据
private List<T> rows;
public PageBean(int totalCount, List<T> rows) {
this.totalCount = totalCount;
this.rows = rows;
}
public PageBean(){}
public int getTotalCount() {
return totalCount;
}
public void setTotalCount(int totalCount) {
this.totalCount = totalCount;
}
public List<T> getRows() {
return rows;
}
public void setRows(List<T> rows) {
this.rows = rows;
}
@Override
public String toString() {
return "PageBean{" +
"totalCount=" + totalCount +
", rows=" + rows +
'}';
}
}
2.DAO层创建两个方法selectByPage(用于查询每页数据)和selectTotalCount(查询总记录数)
//分页查询
@Select("select * from tb_brand limit #{begin},#{size}")
@ResultMap("brandResultMap")
List<Brand> selectByPage(@Param("begin")int begin,@Param("size")int size);
//查询总记录数
@Select("select count(*) from tb_brand")
int selectTotalCount();
3.Service层创建方法PageBean selectByPage(int currentPage,int pageSize)并实现该方法
//BrandService
//分页查询
//currentPage当前页码
//pageSize每页展示条数
PageBean<Brand> selectByPage(int currentPage,int pageSize);
//BrandServiceImpl
public PageBean<Brand> selectByPage(int currentPage, int pageSize) {
SqlSession sqlSession=sqlSessionFactory.openSession(true);
//获取mapper接口代理
BrandMapper brandMapper=sqlSession.getMapper(BrandMapper.class);
//计算开始索引
int begin=(currentPage-1)*pageSize;
//查询条目数
int size=pageSize;
//调用方法
//查询当前页的数据
List<Brand> rows=brandMapper.selectByPage(begin,size);
//查询总记录数
int totalCount=brandMapper.selectTotalCount();
PageBean<Brand> pageBean=new PageBean(totalCount,rows);
//释放资源
sqlSession.close();
return pageBean ;
}
4. Servlet
//分页查询
public void selectByPage(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException
{
//接收 当前页码 和 每页展示条数
//get请求直接使用getParameter获取参数即可
String _currentPage=req.getParameter("currentPage");
String _pageSize=req.getParameter("pageSize");
//转换类型
int currentPage=Integer.parseInt(_currentPage);
int pageSize=Integer.parseInt(_pageSize);
//2.调用service进行查询
PageBean<Brand> pageBean=brandService.selectByPage(currentPage,pageSize);
//将查询到的数据转为JSON对象
String jsonstr=JSON.toJSONString(pageBean);
//设置响应格式
resp.setContentType("text/json;charset=utf-8");
//将数据响应给客户端
resp.getWriter().write(jsonstr);
}
前端
selectByPage(){
//当页面加载完成后,发送异步请求,获取数据
//this在axios里面使用表示windows的对象而不是vue
//所以要给this提升作用域
//因为this在vue里面就表示vue的对象
var _this=this;
axios({
method:"get",
url:"http://localhost:8080/brand-case/brand/selectByPage?currentPage="+
_this.currentPage+"&pageSize="+_this.pageSize+""
}).then(function (resp)
{
//设置表格数据
_this.tableData=resp.data.rows;
//设置总记录数
_this.totalCount=resp.data.totalCount;
}
)
}
在vue中data部分声明变量
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/8cf6243e5094faefd857c2d0b8da1382.png)
分页条处代码
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/b2a4b25ad77b0fcd8063d37710dc3e9f.png)
分页方法
//分页
//handleSizeChange方法对每页展示的记录数进行处理,val为每页展示的记录数的值
handleSizeChange(val) {
//设置每页显示的条数
this.pageSize=val;
//重新查询
this.selectByPage();
},
//handleCurrentChange对当前页码数进行处理,val为当前页码数的值
handleCurrentChange(val) {
//将当前页面赋值给currentPage
this.currentPage=val;
//重新查询
this.selectByPage();
},