关于分页的实现

粒子猫的代码

已于 2022-11-16 11:27:19 修改

阅读量1.6k

点赞数 8

文章标签： sql 数据库 java

于 2022-08-08 10:17:53 首次发布

本文链接：https://blog.csdn.net/qq_57147093/article/details/126222259

版权

博客内容展示了如何使用Mybatis进行数据库分页查询，并结合Servlet和Vue实现前端分页显示。首先，定义了分页工具类`Pager`，包含分页参数的计算和数据封装。然后，通过Mybatis的分页拦截器配置实现了数据库层面的分页。在后台，使用`Page`对象进行分页查询，前端则通过Vue的`el-pagination`组件实现分页展示。

摘要由CSDN通过智能技术生成

了解

具体的写法

Mybatis的分页显示

了解

分页的作用：

1：提高网页的响应速度

2：减轻服务器的负载

分页的实现：

1：页面上实现

2：java代码实现

以上的两种实现方式不适合海量数据、速度快。

3：数据库实现：适合海量数据，效率低、稳定（多数的实现方式）

分页公式： （页数-1） * 每页的条目数

例如：每页显示5条，显示第3页： limit (3-1)*5=10,5

分页的参数：

例如：数据表有103条数据。每页显示10条。

共103条数据，当前是第?页。共?页。

总页数：记录数%每页的记录数 >=0 ? 记录数/每页条目数+1: 记录数/每页记录数;

具体的写法

分页工具类：

import java.util.List;

/**
 * 分页工具类
 * @param <T>
 */
public class Pager<T> {

     private Integer total;//总记录数
     private Integer offset;//起始位置
     private Integer pageCount;//总页数：末页
     private List<T> datas;//页面展示的数据集合
     private Integer currentPage;//当前页
     private Integer nextPage;//下一页
     private Integer provPage;//上一页
     private Integer pagesize;//每页显示的记录数
//     private Boolean hasNext;
//     private Boolean hasProv;

     public Pager(String currentPage,int total,int pagesize){
         if(currentPage==null){
             this.currentPage=1;//默认是第一页
         }else{
             //得到当前页
             this.currentPage= Integer.parseInt(currentPage);
         }
         this.total= total;
         this.pagesize= pagesize;
         //计算起始位置
         this.offset= (this.currentPage-1)* this.pagesize;
         //计算总页数
         this.pageCount = total % pagesize >0 ? total/pagesize +1 : total / pagesize;
         //计算下一页 : 判断当前页是否是最后一页：是，下页就是总页数 ,否则当前页+1
         this.nextPage = this.currentPage== this.pageCount ? this.pageCount: ++this.currentPage;
         //计算上页：
         this.provPage = this.currentPage == 1 ? 1 : this.currentPage-1;
     }


    public Pager() {
    }


    public Integer getTotal() {
        return total;
    }

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

    public Integer getOffset() {
        return offset;
    }

    public void setOffset(Integer offset) {
        this.offset = offset;
    }

    public Integer getPageCount() {
        return pageCount;
    }

    public Integer getPagesize() {
        return pagesize;
    }

    public void setPagesize(Integer pagesize) {
        this.pagesize = pagesize;
    }

    public void setPageCount(Integer pageCount) {
        this.pageCount = pageCount;
    }

    public List<T> getDatas() {
        return datas;
    }

    public void setDatas(List<T> datas) {
        this.datas = datas;
    }

    public Integer getCurrentPage() {
        return currentPage;
    }

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

    public Integer getNextPage() {
        return nextPage;
    }

    public void setNextPage(Integer nextPage) {
        this.nextPage = nextPage;
    }

    public Integer getProvPage() {
        return provPage;
    }

    public void setProvPage(Integer provPage) {
        this.provPage = provPage;
    }
}

Dao：

@Override
public List<Student> pagelist(int offset,int pagesize) {
    return BaseDao.findAll("select * from 数据库的表名 limit ?,?", Student.class, offset,pagesize);
}

@Override
public int getTotal() {
    return BaseDao.executeScalare("select count(id) from 数据库的表名");
}

Serlvet：

private void list(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
            //分页的实现
    String current= req.getParameter("currentPage");
    int total= studentDao.getTotal();
    Pager<Student> pager = new Pager<>(current, total, 3);
    System.out.println(pager.getOffset());
    System.out.println(pager.getPagesize());
    pager.setDatas(this.studentDao.pagelist(pager.getOffset(),pager.getPagesize()));
    //封装数据
    req.setAttribute("pager",pager);
    req.getRequestDispatcher("/WEB-INF/page_list.jsp").forward(req, resp);
 }

页面：

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@include file="/inc.jsp"%>
<html>
<head>
    <title>Title</title>
</head>
<body>

       <div class="container">
           <table class="table table-bordered table-hover">
               <tr>
                   <td>序号</td>
                   <td>编号</td>
                   <td>账号</td>
                   <td>密码</td>
                   <td>性别</td>
                   <td>年龄</td>
                   <td>手机</td>
                   <%--                <td>头像</td>--%>
                   <td>
                       <button class="btn btn-info" onclick="location='toadd'">添加</button>
                   </td>
               </tr>
               <c:forEach items="${pager.datas}" var="stu" varStatus="status">
               <tr>
                   <td>${status.count}</td>
                   <td>${stu.id}</td>
                   <td>${stu.username}</td>
                   <td>${stu.password}</td>
                   <td>${stu.sex==0 ? "男":"女"}</td>
                   <td>${stu.age}</td>

                   <td>
                           ${fn:substring(stu.mobile,0,3)}****${fn:substring(stu.mobile,7,11)}
                   </td>
                   <td>
                       <button class="btn btn-warning" onclick="del(${stu.id})">删除</button>
                       <button class="btn btn-primary" onclick="show(${stu.id})">修改</button>
                   </td>
               </tr>
               </c:forEach>
                <tr>
                    <!--list-->
                    <td colspan="10" align="center">
                         共${pager.total}条数据，共${pager.pageCount}页，当前是第${pager.currentPage}页。
                        <a href="list?currentPage=1">首页</a>
                        <a href="list?currentPage=${pager.provPage}">上页</a>

                        <a href="list?currentPage=${pager.nextPage}">下页</a>
                        <a href="list?currentPage=${pager.pageCount}">末页</a>
                    </td>
                </tr>
           </table>
       </div>
</body>
</html>

Mybatis的分页显示

首先我们需要一个配置类

分页拦截器

package com.wjh.login.config;

import com.baomidou.mybatisplus.annotation.DbType;
import com.baomidou.mybatisplus.extension.plugins.MybatisPlusInterceptor;
import com.baomidou.mybatisplus.extension.plugins.inner.BlockAttackInnerInterceptor;
import com.baomidou.mybatisplus.extension.plugins.inner.PaginationInnerInterceptor;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;

@Configuration
public class MyBatisConfig {
    @Bean
    public MybatisPlusInterceptor mybatisPlusInterceptor() {
        MybatisPlusInterceptor interceptor = new MybatisPlusInterceptor();
        // 分页插件
        interceptor.addInnerInterceptor(new PaginationInnerInterceptor(DbType.MYSQL));
        // 防止全表更新和删除
        interceptor.addInnerInterceptor(new BlockAttackInnerInterceptor());
        return interceptor;
    }

}

在后台写法如下

public Result list(@RequestParam(defaultValue = "1") Integer current,
                       @RequestParam(defaultValue = "5") Integer size, User user){
        QueryWrapper queryWrapper = new QueryWrapper();
        if (!Objects.isNull(user)){
            queryWrapper.like(StrUtil.isNotBlank(user.getUsername()),"username",user.getUsername());
            queryWrapper.or(StrUtil.isNotBlank(user.getUsername())&&StrUtil.isNotBlank(user.getMobile()));
            queryWrapper.like(StrUtil.isNotBlank(user.getMobile()),"mobile",user.getMobile());
        }
        Page<User> pager = userService.page(new Page(current,size),queryWrapper);
        return new Result(true,StatusCode.OK,"用户列表",pager);
    }

在vue前台的写法

<template>
  <div class="home">
    <el-form :inline="true" :model="formData" class="demo-form-inline">
      <el-form-item label="账号">
        <el-input v-model="formData.username" placeholder="账号"></el-input>
      </el-form-item>
      <el-form-item label="手机号">
        <el-input v-model="formData.mobile" placeholder="手机号"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="getList">查询</el-button>
      </el-form-item>
    </el-form>
    <el-table
            :data="tableData"
            style="width: 100%">
      <el-table-column
              prop="id"
              label="用户编号">
      </el-table-column>
      <el-table-column
              prop="username"
              label="账号">
      </el-table-column>
      <el-table-column
              prop="mobile"
              label="手机号">
      </el-table-column>
      <el-table-column
              prop="birthday"
              label="生日"
              :formatter="formatDate">
      </el-table-column>
    </el-table>
    <el-pagination
            background
            @current-change="changePage"
            :page-size="pager.size"
            layout="total,prev, pager, next,jumper"
            :total="pager.total">
    </el-pagination>
  </div>
</template>

<script>
// @ is an alias to /src

export default {
  name: 'HomeView',
  data(){
    return{
      tableData:[],
      pager:{},

      formData:{
        username:'',
        mobile:''
      }
    }
  },
  methods:{
    changePage(obj){
      console.log(obj);
      this.formData.current=obj;
      this.$http.get("/user/list",{params:this.formData}).then(resp=>{
        this.pager=resp.data.data;
        this.tableData=resp.data.data.records;
      })
    },
    getList(){
      this.$http.get("/user/list",{params:this.formData}).then(resp=>{
        this.pager=resp.data.data;
        this.tableData=resp.data.data.records;
      })
    },
    formatDate:function(row, column){
      let data = row[column.property]
      if(data == null) {
        return null
      }
      let date = new Date(data);
      let o = {
        "M+" : date.getMonth()+1,                 //月份
        "d+" : date.getDate(),                    //日
        "h+" : date.getHours(),                   //小时
        "m+" : date.getMinutes(),                 //分
        "s+" : date.getSeconds(),                 //秒
        "q+" : Math.floor((date.getMonth()+3)/3), //季度
        "S"  : date.getMilliseconds()             //毫秒
      };
      let fmt = "yyyy-MM-dd";
      if(/(y+)/.test(fmt)) {
        fmt=fmt.replace(RegExp.$1, (date.getFullYear()+"").substr(4 - RegExp.$1.length));
      }
      for(let k in o) {
        if(new RegExp("("+ k +")").test(fmt)){
          fmt = fmt.replace(RegExp.$1, (RegExp.$1.length==1) ? (o[k]) : (("00"+ o[k]).substr((""+ o[k]).length)));
        }
      }
      return fmt ;
    }
  },
  created() {
    this.getList();
  }
}
</script>