前言:本文主要讲解用java实现前后端分离的分页查询功能。后端java(不使用框架和插件),前端使用基于 Vue 2.x 的 Element UI 的分页组件
大体流程: 前端使用Element UI的分页组件,发送异步请求携带 currentpage pageSize 两个经过初始赋值的变量去后端查询,后端接受前台的数据,并set到提前封装好的一个专门用来分页查询的实体类中。经过三层架构调用到dao层,使用sql语句的limit实现分页查询,并把查询到的结果集封装到前端table需要的对象中,count(*)实现查询total(总数),最终把 查询到的信息,total返回给前端。当分页查询的条件改变即改变当前页,改变pageSize 时,通过前端方法的嵌套调用实现数据的更新。
前端前端给后台发送数据只需要两个值:currentpage 当前页 pageSize每页显示条目个数,后台调用sql语句进行查询;
课程详情
后端
通常会创建一个专门用于分页查询的实体类。不要用lombok,因为有的方法重写了;
import java.util.List; //跟分页相关的所有内容 public class Page{ private int currentPage; //当前页 private int pageSize; //每页的记录数 private int total; //总记录数 private List rows; //本页的数据,对应前端table显示的 对象 private int pageCount; //总页数 (total+pageSize -1)/pageSize private int pre ; //上一页 currentpage -1 private int next; //下一页 currentpage +1 private boolean first; //是否是第一页 private boolean last; //是否是最后一页 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 getTotal() { return total; } public void setTotal(int total) { this.total = total; } public List getRows() { return rows; } public void setRows(List rows) { this.rows = rows; } public int getPageCount() { return (total+pageSize-1)/pageSize; } public int getStart() { return (currentPage-1)*pageSize; } public int getPre() { if (currentPage>1){ return currentPage-1;} return 1; } public int getNext() { if (currentPage sql语句 使用占位符,可通过预处理对象赋值
第一个?: pageSize*(currentPage -1)
第二个? : pageSize
select cl.id as cid, code, ename, cname, namelias, ytid, fhxpj, pjjg, backup, userid, createtime ,u.id as uid,u.uname,u.pwd,u.phone from tb_cl cl left join users u on cl.userid = u.id limit ?, ? ;计算total
select count(*) as sl from tb_cl



