记一次前后端分离项目中---关于分页查询解决的思路

• 前言
• 一、首先了解一下ElementUI``中几个属性绑定的事件
• 二、前端
• • 2.1 find All函数
  • 2.2 handleCurrentChange函数
  • 2.3 handleSizeChange函数
• 三、后端
• • 3.1 servlet层
  • 3.2 service层
  • 3.3 dao层
  • 四、后端所用到的工具类
• 4.1 BaseDao
• 4.2 BaseServlet
• 4.3 PageUtils
• 4.4 ObjectMapperWriter

前言

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

一、首先了解一下ElementUI中几个属性绑定的事件

@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.listthis.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);    }}