---

前言

项目模块为课程管理模块，课程需要分页展示数据，并且能够根据每页展示记录数进行自动分页，接下来说说如何处理分页展示的思路

---

一、首先了解一下ElementUI<el-pagination>中几个属性绑定的事件

@size-change当页面显示数据条数发生改变触发此事件

@current-change当页码改变触发此事件

---

二、前端

2.1 find All函数

• 发起请求，传三个重要参数给后端（currentPage）、（pageSize）、（search）查询课程表数据
• datableDate存放的就是后端返回的一个个课程对象（对象数组）
• totalCount存放的是后端返回的数据库课程表总记录条数

代码如下：

/*课程分页查询*/
			findAll() {
				axios.post(`http://localhost/course?method=findAll`,
				`currentPage=${this.currentPage}&pageSize=${this.pageSize}&search=${this.search}`)
				.then(resp=>{
					//console.log(resp.data.list);
					this.tableData = resp.data.list
					this.totalCount = resp.data.total
				})
			}

2.2 handleCurrentChange函数

• 当页码改变触发此事件
• 点击上一页或者下一页切换每页展示数据

代码如下：

/*当页码改变触发此事件*/
			handleCurrentChange: function (currentPage) {
				this.tableData = ''
    			this.currentPage = currentPage;
    			this.findAll()
			},

2.3 handleSizeChange函数

• 当页面显示数据条数发生改变触发此事件
• 切换每页展示数据的条数

代码如下：

handleSizeChange: function (size) {
				this.pageSize = size;
    			this.findAll()
			},

---

三、后端

3.1 servlet层

• 获取请求数据中的参数
• 将结果封装进集合
• 最后再利用工具将数据转换成json格式返回给前端

代码如下：

/**
     * 分页查询
     * @param req
     * @param resp
     * @throws ServletException
     * @throws IOException
     */
    protected void findAll(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException, SQLException {
        //获取请求数据中的参数
        int currentPage =Integer.parseInt(req.getParameter("currentPage"));
        int pageSize =Integer.parseInt(req.getParameter("pageSize"));
        String search = req.getParameter("search");

        //封装进集合
        PageUtils<Course> courseList = courseService.findAll(currentPage,pageSize,search);

        //利用ObjectMapper类，将数据转换为json格式返回给前端
        printWriter =resp.getWriter();
        printWriter.print(ObjectMapperWriter.writer(courseList));

    }

3.2 service层

• 通过当前页码 每页显示条数 搜索条件 ，将查询到的course对象集合装进数组里面
• 通过搜索条件，查询课程表总记录数
• 最后返回给servlet层

代码如下：

public class CourseServiceImpl implements CourseService {
    CourseDao courseDao = new CourseDaoImpl();

    /**
     * 分页查询
     * @param currentPage
     * @param pageSize
     * @param search
     * @return
     * @throws SQLException
     */
    @Override
    public PageUtils<Course> findAll(int currentPage, int pageSize, String search) throws SQLException {
        //通过当前页码  每页显示条数 搜索条件 ，查询到的course对象集合装进数组里面
        List<Course> courseList = courseDao.findAll("select * from course where courseName like ? limit ?,?",
                "%" + search + "%", (currentPage - 1) * pageSize, pageSize);

        //查course表的总记录数
        int totalCount = courseDao.findCount("select count(cid) from course where courseName like ?", "%" + search + "%");

        //利用分页实体类封装拿到的课程数据，并返回
        PageUtils<Course> coursePageUtils = new PageUtils<>(currentPage, pageSize,totalCount, courseList);
        return coursePageUtils;
    }

3.3 dao层

• 主要负责查询数据库并返回数据给service层

代码如下：

public class CourseDaoImpl extends BaseDao implements CourseDao{
    /**
     * 分页查询
     * @param sql
     * @param params
     * @return
     * @throws SQLException
     */
    @Override
    public List findAll(String sql, Object... params) throws SQLException {
        return queryForList(sql, Course.class,params);
    }

    @Override
    public int findCount(String sql, Object... params) throws SQLException {
        return queryForCount(sql,params);
    }
}

四、后端所用到的工具类

4.1 BaseDao

public class BaseDao<T> {


    QueryRunner queryRunner = new QueryRunner(JdbcUtils.getDataSource());

    //通用增删改
    public int commonUpdate(String sql,Object...params) throws SQLException {
       return  queryRunner.update(sql,params);
    }

    public T queryForSingle(String sql,Class clazz,Object... params) throws SQLException {
       return queryRunner.query(sql,new BeanHandler<T>(clazz),params);
    }

    public List<T> queryForList(String sql, Class clazz, Object... params) throws SQLException {
        List<T> list = queryRunner.query(sql, new BeanListHandler<T>(clazz), params);
        return list;
    }

    public int queryForCount(String sql,Object...params) throws SQLException {
       Long ll = queryRunner.query(sql,new ScalarHandler<>(),params);
       //select count(*) from medicine;
       return ll.intValue();
    }

}

4.2 BaseServlet

public class BaseServlet extends HttpServlet {

    @Override
    protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {

        //需要知道访问的是哪个Servlet
        Class clazz = this.getClass();
        //需要知道访问的是哪个方法
        String method = req.getParameter("method");
        try {
            Method m = clazz.getDeclaredMethod(method, HttpServletRequest.class, HttpServletResponse.class);
            m.setAccessible(true);
            m.invoke(this,req,resp);
        } catch (Exception e) {
            e.printStackTrace();
        }

    }
}

4.3 PageUtils

package utils;

import java.util.List;

/**
 * 分页工具
 * 1.当前页码   			   由使用者决定
 * 2.每页显示多少条数据 （页量） 由程序员决定
 * 3.一共有几页               总页数 算出来  总页数 = 总记录数 / 页量
 * 4.一共有几条数据            总记录数,数据库查询得知
 * 5.当前页码的数据
 */
public class PageUtils<T> {

    private int currentPage;
    private int pageSize;
    private int pages;
    private int total;
    private List<T> list;

    public PageUtils(int currentPage, int pageSize, int total, List<T> list) {
        this.currentPage = currentPage;
        this.pageSize = pageSize;
        this.total = total;
        this.list = list;
        //求总页数  10数据  每页显示3条   4页
        this.pages = this.total%this.pageSize==0
                    ?this.total/this.pageSize
                    :this.total/this.pageSize+1;
    }

    public PageUtils(){

    }

    public int getCurrentPage() {
        return currentPage;
    }

    public void setCurrentPage(int currentPage) {
        this.currentPage = currentPage;
    }

    public int getPageSize() {
        return pageSize;
    }

    public void setPageSize(int pageSize) {
        this.pageSize = pageSize;
    }

    public int getPages() {
        return pages;
    }

    public void setPages(int pages) {
        this.pages = pages;
    }

    public int getTotal() {
        return total;
    }

    public void setTotal(int total) {
        this.total = total;
    }

    public List<T> getList() {
        return list;
    }

    public void setList(List<T> list) {
        this.list = list;
    }

}

4.4 ObjectMapperWriter

package utils;

import com.fasterxml.jackson.core.JsonProcessingException;
import com.fasterxml.jackson.databind.ObjectMapper;

public class ObjectMapperWriter {
    //将对象转换成json数据格式返回给前端
    public static String writer(Object object) throws JsonProcessingException {
        ObjectMapper objectMapper = new ObjectMapper();
        return objectMapper.writeValueAsString(object);
    }
}