springboot-mybatis实现分页

有两种方式：

第一种，写一个MybatisPlusConfig配置类

package com.pro.util;

import com.baomidou.mybatisplus.autoconfigure.ConfigurationCustomizer;
import com.baomidou.mybatisplus.extension.MybatisMapWrapperFactory;
import com.baomidou.mybatisplus.extension.plugins.PaginationInterceptor;
import org.mybatis.spring.annotation.MapperScan;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;

    @Configuration
    public class MybatisPlusConfig {
        @Bean
        public PaginationInterceptor paginationInterceptor(){
            return new PaginationInterceptor();
        }

        @Bean
        public ConfigurationCustomizer configurationCustomizer() {
            // 函数式编程
            return (configuration) -> {
                // 使用mybatis-plus 内置的
                configuration.setObjectWrapperFactory(new MybatisMapWrapperFactory());
            };
        }
    }

 测试

 测试有效

 第二种，导插件依赖

 任选一种方法测试好之后写service

 /**
     * 分页
     * @param page
     * @param rows
     * @return
     */
    @Override
    public IPage<User> userPages(int page, int rows) {
        Page<User> p = new Page<>(page,rows);
        IPage<User> pageObject = userMapper.selectPage(p,new QueryWrapper<>());
        return pageObject;
    }

controller

@GetMapping("/users")
    public R users(int page,int rows){
        IPage<User> pageObj = null;
        try {
            pageObj = userService.userPages(page, rows);
            if(pageObj.getRecords().size() > 0){
                return new R(200,"查询分页成功",pageObj);
            }
        } catch (Exception e) {
            e.printStackTrace();
            return new R(501,"查询分页失败");
        }
        return new R(201,"没有分页数据");
    }

 vue用户列表界面

<template>
  <div>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>用户管理</el-breadcrumb-item>
      <el-breadcrumb-item>用户列表</el-breadcrumb-item>
    </el-breadcrumb>
    <!--卡片视图区-->
    <el-card>
      <!--搜索区，gutter是栅格的间隔-->
      <el-row :gutter="20">
        <el-col :span="12">
          <el-input placeholder="请输入内容">
            <el-button slot="append" icon="el-icon-search"></el-button>
          </el-input>
        </el-col>
        <el-col :span="4">
          <el-button type="primary">添加用户</el-button>
        </el-col>
      </el-row>
      <!--数据列表-->
      <el-table :data="userList" border stripe><!--换行变色-->
        <el-table-column type="index"></el-table-column><!--可以自动在前面加一个编号-->
        <el-table-column label="编号" prop="userId"></el-table-column>
        <el-table-column label="用户" prop="username"></el-table-column>
        <el-table-column label="邮箱" prop="email"></el-table-column>
        <el-table-column label="电话" prop="mobile"></el-table-column>
        <el-table-column label="操作" align="center">
          <el-button type="primary" icon="el-icon-edit" size="mini"></el-button>
          <el-button type="warning" icon="el-icon-share" size="mini"></el-button>
          <el-tooltip effect="dark" content="Top Right 删除" placement="top-end" :enterable="false">
            <!--enterable:鼠标是否可以移入提示文本里-->
            <el-button type="danger" icon="el-icon-delete" size="mini"></el-button>
          </el-tooltip>
        </el-table-column>
      </el-table>
      <el-pagination
        @current-change="queryWhere.rows"
        :current-page="queryWhere.page"
        :page-sizes="[100, 200, 300, 400]"
        :page-size="100"
        layout="total, sizes, prev, pager, next, jumper"
        :total="400">
      </el-pagination>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'Users',
  data () {
    return {
      // 分页查询用户列表的参数对象
      queryWhere: {
        query: '',
        page: 1,
        rows: 2
      },
      userList: [],
      total: 0
    }
  },
  created () {
    this.getUsers()
  },
  methods: {
    async getUsers () {
      /* 发请求到后台，得到用户列表 */
      const { data: res } = await this.$http.get('users', { params: this.queryWhere })
      console.log(res)
      if (res.code !== 200) {
        return this.$message.error(res.msg)
      }
      this.userList = res.data.records
      this.total = res.data.total
    }
  }
}
</script>

<style lang="less" scoped>

</style>

 

效果：

 我们再来美化一下界面