前后端分离分页查询（不使用框架和插件）

前后端分离分页查询（不使用框架和插件）

前言：本文主要讲解用java实现前后端分离的分页查询功能。后端java（不使用框架和插件），前端使用基于 Vue 2.x 的 Element UI 的分页组件

大体流程：

​ 前端使用Element UI的分页组件，发送异步请求携带 currentpage pageSize 两个经过初始赋值的变量去后端查询，后端接受前台的数据，并set到提前封装好的一个专门用来分页查询的实体类中。经过三层架构调用到dao层，使用sql语句的limit实现分页查询，并把查询到的结果集封装到前端table需要的对象中，count(*)实现查询total（总数），最终把 查询到的信息，total返回给前端。当分页查询的条件改变即改变当前页，改变pageSize 时，通过前端方法的嵌套调用实现数据的更新。

前端

前端给后台发送数据只需要两个值：currentpage 当前页 pageSize每页显示条目个数，后台调用sql语句进行查询；

<template>
 <div>
         
    <el-table :data="tableData" border stripe style="width: 100%">      
      <el-table-column type="selection"></el-table-column>
      <el-table-column type="index" ></el-table-column>
      <el-table-column prop="name" label="学生姓名"></el-table-column>
      <el-table-column prop="age" label="年龄"></el-table-column>
      <el-table-column prop="email" label="邮箱"></el-table-column>
      <el-table-column prop="phone" label="电话"></el-table-column>
      <el-table-column prop="birth" label="生日"></el-table-column>
      <el-table-column prop="school.name" label="学校名字"></el-table-column>
      <el-table-column prop="school.info" label="学校地址"></el-table-column>
      <el-table-column fixed="right" label="操作" width="100">
      <template slot-scope="scope">
        <el-button @click="handleClick(scope.row)" type="text" size="small">课程详情</el-button>
      </template>
    </el-table-column>
    </el-table>

    <el-pagination
      @size-change="handleSizeC
      hange"  
      @current-change="handleCurrentChange"
      :current-page="params.currentpage"
      :page-sizes="[3,4,5]"
      :page-size="params.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
    
 </div>

</template>


<script>
export default {
    data(){
        return{
        
            tableData:[],
            total:0,
            params:{
                //设置初始值
                currentpage:1,
                pageSize:3,
            }
        }
    },
    methods: {
       //handleSizeChange和handleCurrentChange 是当分页条件改变的时候，重新执行一遍queryData的查询
      //pageSize 改变时会触发
        handleSizeChange(v){
            this.params.pageSize=v
            this.queryData()
            },
            
            //currentpage 改变时会触发
        handleCurrentChange(v){
            this.params.currentpage=v
            this.queryData();
        },
       //查询所有的信息
        queryData(){
        //发送异步请求，最重要的就是携带currentpage，pageSize
            this.$http.post('/stu/querySome',
            this.params)
            .then(resp=>{
				//得到响应给参数赋值，rows是后台封装的对象，对应table要显示的对象
                this.tableData = resp.data.data.rows
         		//返回总页数重新赋值
                this.total=resp.data.data.total
               
            })
            .catch(error=>{
                console.log("error=>is" + error)
            })
        }
    },
    //一开始就显示：初始化查询
    mounted() {
        this.queryData()
        
    },
}
</script>

<style scoped>

</style>

后端

通常会创建一个专门用于分页查询的实体类。不要用lombok，因为有的方法重写了；

import java.util.List;
//跟分页相关的所有内容
public class Page<T> {
private int currentPage; //当前页
private int pageSize;  //每页的记录数
private int total;    //总记录数
private List<T> 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<T> getRows() {
        return rows;
    }

    public void setRows(List<T> 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<pageCount){
            return currentPage+1;
        }
        return pageCount;
    }


    public boolean isFirst() {
        return currentPage==1;
    }



    public boolean isLast() {
        return currentPage==pageCount;
    }


}

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