JavaWeb学习(十三)---分页查询

分页查询逻辑

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部分声明变量

分页条处代码

分页方法

//分页
//handleSizeChange方法对每页展示的记录数进行处理，val为每页展示的记录数的值
            handleSizeChange(val) {
                //设置每页显示的条数
                this.pageSize=val;
                //重新查询
                this.selectByPage();
            },
//handleCurrentChange对当前页码数进行处理，val为当前页码数的值            
            handleCurrentChange(val) {
                //将当前页面赋值给currentPage
                this.currentPage=val;
                //重新查询
                this.selectByPage();
            },