网页分页查询

前端分析

分页页面JS

前端展示区 

<template>
  <div>
    ...
       <!-- 用户数据表格展现  border 边框线属性  -->
       <el-table :data="userList" border stripe>
           <el-table-column type="index" label="序号"></el-table-column>
           <el-table-column prop="username" label="用户名"></el-table-column>
           <el-table-column prop="phone" label="电话"></el-table-column>
           <el-table-column prop="email" label="邮箱"></el-table-column>

           <el-table-column prop="status" label="状态">
             <!-- 设置一个修改状态switch的按钮 触发时执行updateStatus(scope.row)-->
             <template slot-scope="scope">
                <el-switch v-model="scope.row.status" @change="updateStatus(scope.row)"
                  active-color="#13ce66" inactive-color="#ff4949">
                </el-switch>
             </template>
           </el-table-column>
           
           <el-table-column label="操作">
             //设置操作中的修改删除按钮
             <template slot-scope="scope">
                <el-button type="primary" icon="el-icon-edit" size="small" @click="updateUserBtn(scope.row)"></el-button>
                <el-button type="danger" icon="el-icon-delete" size="small" @click="deleteUser(scope.row)"></el-button>
             </template>

           </el-table-column>
       </el-table>

       <!-- 定义分页组件 关于分页插件的属性说明
            1.@size-change 如果分页中每页实现的条数发生变化 则会触发这个该事件
            2.@current-change 当页数发生改变时,触发该函数
            3.current-page 当前选中的页
            4.page-sizes   页面数据展现的选项
            5.page-size    默认选中的页数
            6.layout    分页中展现的数据种类
            7.total     记录总数
       -->
        <el-pagination
             @size-change="handleSizeChange"
             @current-change="handleCurrentChange"
             :current-page="queryInfo.pageNum"
             :page-sizes="[5, 10, 20, 40]"
             :page-size="queryInfo.pageSize"
             layout="total, sizes, prev, pager, next, jumper"
             :total="total">
        </el-pagination>
    </el-card>
    ...
  </div>

 前端方法区

<script>
  export default {
    ......
      return {
        ...
        userList: [],
        ...
    //methods方法区
    methods: {
        //查询方法
        async getUserList(){
        const {data: result} = await this.$http.get('/user/getUserlist',{
           params: this.queryInfo
        })
        if(result.status !== 200) return this.$message.error("用户列表查询失败")
        this.userList = result.data.rows
        this.total = result.data.total
        console.log("总记录数:"+this.total)
      },
    ...
     //分页按钮配置
     //设置查询的页数方法
     handleSizeChange(pageSize){
        //console.log("每页展现的条数"+pageSize)
        this.queryInfo.pageSize = pageSize
        this.getUserList()
      },
      //设置查询的数量方法
      handleCurrentChange(pageNum){
        //console.log("页数:"+pageNum)
        this.queryInfo.pageNum = pageNum
        this.getUserList()
      },
    ...
    }
    //利用生命函数实现自动数据查询
    mounted(){
      this.getUserList()
    }
  }
</script>

后端代码

方法一：使用SQL的 limit方法分页查询

select * form 表单 limit #{start}，#{size}        //start：开始地点，size：长度

可以使用注解@select写在mapper层文件中

@Mapper
public interface UserMapper extends BaseMapper<User> {
    //注解方法查询数据库！，只适用于简单的SQL！！！
    /**
     * @Insert(),@Update(),@Delect()
     * */
    @Select("select * from user limit #{start},#{size}")
    List<User> getUserlist(int start,int size);
}

可以使用mapper.xml文件写在mapper配置文件中吗？

使用该方法，需要在user文件中添加start和size属性保证数据的传输。否则无法进行搜索，不符合设计理念（不推荐）

    <select id="getUserlist" resultType="com.jt.pojo.User">
        select * from user limit #{start},#{size}
    </select>

UserController方法

   /**
     * 业务说明: 实现用户列表的分页查询
     * 使用参数: pageResult接收
     * 返回值: SysResult对象(pageResult)
     */
    @GetMapping("/list")
    public SysResult getUserList(PageResult pageResult){//3

        pageResult = userService.getUserList(pageResult);
        return SysResult.success(pageResult);//5
    }

编辑UserService方法

/**
     *   分页Sql:
     *   语法: select * from user limit 起始位置,每页条数
     *   规则: 数组 含头不含尾
     *   查询第N页:
     *         select * from user limit (页数-1)条数,条数
     */
    @Override
    public PageResult getUserList(PageResult pageResult) {
        //1.获取总记录数  Integer--long 自动转化
        long total = userMapper.selectCount(null);
        //2.获取分页结果
        int size = pageResult.getPageSize();
        int start = (pageResult.getPageNum() - 1) * size;
        List<User> userList = userMapper.getUserList(start,size);
        //封装pageResult返回对象
        pageResult.setTotal(total)
                  .setRows(userList);
        return pageResult;
    }

方法二：MP实现用户分页

使用MP的select.page方法查找

   /*
    *       1.构建MP的分页对象
    *       2.根据分页对象查询数据.
    *       3.从分页对象中获取数据
    *       4.封装PageResult对象
    *       5.编辑配置类 封装分页拦截器
    * */
    @Override
    public PageResult getUserList(PageResult pageResult) {
        //1.定义分页对象
        IPage<User> page = new Page<>(pageResult.getPageNum(),
                                      pageResult.getPageSize());
        //2.定义条件构造器 指定动态查询Sql
        boolean flag = StringUtils.hasLength(pageResult.getQuery());
        QueryWrapper<User> queryWrapper = new QueryWrapper<>();
        queryWrapper.like(flag, "username",pageResult.getQuery());

        //3.进行分页查询
        page = userMapper.selectPage(page,queryWrapper);
        //4.从封装后的分页对象中获取数据
        pageResult.setTotal(page.getTotal())
                  .setRows(page.getRecords());
        return pageResult;
    }

此时还不能完成封包操作，因为还没有配置spring拦截类

配置spring拦截器

在官网搜索分页工具，直接复制粘贴即可

https://mp.baomidou.com/guide/page.html

@Configuration
public class MybatisPlusConfig {

    // MybatisPlus在执行分页操作时,会被该拦截器拦截
    // 拦截器的作用 动态拼接where条件!!!
    @Bean
    public MybatisPlusInterceptor mybatisPlusInterceptor() {
        MybatisPlusInterceptor interceptor = new MybatisPlusInterceptor();
        interceptor.addInnerInterceptor(new PaginationInnerInterceptor(DbType.MARIADB));
        return interceptor;
    }
}