element ui +mybatisPlus分页插件实现分页功能

原创已于 2024-03-12 21:58:40 修改 · 1.5k 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#ui #java #mybatis

于 2022-09-01 17:01:24 首次发布

本文详细介绍了如何使用Element UI的pagination组件进行前端分页，并与后端进行数据交互。通过axios发送请求，结合Mybatis Plus的拦截器实现分页功能。在Vue中，处理分页事件如`handlePageChange`和`handleSizeChange`，同时展示了如何在后端使用Mybatis Plus的Page对象进行分页查询。文章还讨论了SQL的LIMIT和OFFSET关键字在分页中的应用，以及返回数据的处理方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

elementui pagination插件

当然这里的依赖部分就需要去创库ctrl+v了

  <!--分页部分 pagination插件 @current-change="handlepagechange"当页面更改时候-->
  <el-pagination
      class="pagination"
      background
      layout="prev, pager, next,jumper,total"
     @current-change="handlepagechange"<!--这个方法是当切换布局控制的页号时候能够改变参数-->
      :total="pagination.total"
       :page-size="pagination.pageSize"
        :current-page="pagination.currentpage"
   ><!--分别是前一页，当前页面,下一个,跳转布局 总数 页面大小 当前也-->
  </el-pagination>

这种是无法选择页面大小的分页
在这里插入图片描述

该前端的请求处理以及切换页号的方法

<!--在created页面渲染完成时候加载这个方法 赋值给要展现数据的空数组-->
 getpage(){
      let this1=this;
      /**
       * 组织参数然后传递url
       */
      axios.get("http://localhost:8070/facebook-data/"+this1.pagination.currentpage+'/'+this1.pagination.pageSize).then((res)=> {
        console.log(res.data);
        this1.pagination.pageSize=res.data.size;
        this1.pagination.total=res.data.total;//记录总数 前端loyout中展示
        this1.pagination.currentpage=res.data.current;//重新经行赋值
        this1.tableData=res.data.records;//把后端返回的记录给数组
      })
    },
    /**
     * 当页面数值修改 当前页面的数值也该修改
     * @param currentPage
     */
    handlepagechange(currentPage){
      this.pagination.currentpage=currentPage;//传入参数变成当前页面 在调取查询操作
      this.getpage();
    },
      /**
       * 大部分调用的crud方法·都是本身mubaties框架封装和好的 所以参数名应该根据返回值决定
       */
       data() {
    return {
      tableData: [{
        keyWords:'',
        content: '',
        status:'',
        readCount:'',
        shareCount:'',
        chineseContent:'',
        topSort:'',
        catchTime:''
      }],
      /*插件初始化参数 我这里是默认初始1页 10行
      */
      pagination:{
        currentpage:1,
        pageSize:10,
        total:0,

      }
      	}
      		}

如果是功能完全的分页
在这里插入图片描述
应该还会多一个改变页面大小的方法

 <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentpage"
              :page-sizes="[30, 50, 100, 200]"<!--可选择页面大小-->
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="400">
          </el-pagination>

对应方法

  methods: {
    initial(){//页面加载初始化
      let this1=this;
      /**
       * 组织参数然后传递url
       */
      axios.get("http://localhost:8070/recruitmentAticle+this1.pagination.currentpage+'/'+this1.pagination.pageSize).then((res)=> {

        console.log("输出总数"+res.data.data.total);

        // this1.pagination.pageSize=res.data.size;
        // this1.pagination.total=res.data.total;
        // this1.pagination.currentpage=res.data.current;
        // this1.tableData=res.data.records;
      })
    },

    handleSizeChange(pageSize) { <!--这里的参数是和选择大小组件绑定到-->
      console.log("页面大小改变"+pageSize)
      this.pageSize = pageSize
      console.log(this.pageSize)
      this.initial()
    },
    handleCurrentChange(pageNum) {
      console.log("当前页面改变"+pageNum)
      this.currentpage = pageNum
      console.log(this.currentpage)
      this.initial()
    }
  }

``

`后端 (Mybatis plus)

首先先进行注册拦截器

/**
 * 解决跨域问题  MybatiesPlus分页拦截器
 * 很多插件和过滤器拦截器在spring中是通过xml配置形成注册
 * springboot省去了这一繁琐流程所以需要在Configuration
 * 配置类中注册
 * 分页面拦截器
 */

@Configuration
public class MyConfiguration {

    @Bean
    public MybatisPlusInterceptor mybatisPlusInterceptor(){
        /**
         * 上述代码第一行是创建MyBatisPlus的拦截器栈，这个时候拦截器栈中没有具体的拦截器
         * 第二行是初始化了分页拦截器，并添加到拦截器栈中。
         * 如果后期开发其他功能，需要添加全新的拦截器，按照第二行的格式继续add进去新的拦截器就可以了。
         * **总结**
         * 1. 使用IPage封装分页数据
         * 2. 分页操作依赖MyBatisPlus分页拦截器实现功能
         * 3. 借助MyBatisPlus日志查阅执行SQL语句
         */
        MybatisPlusInterceptor interceptor = new MybatisPlusInterceptor();
        interceptor.addInnerInterceptor(new PaginationInnerInterceptor());
        return interceptor;
     }


    }

然后Controller层的使用

@Autowired
private FacebookDataService  facebookDataService;
@GetMapping("/{currentpage}/{pageSize}")
@CrossOrigin(origins = "*")
public IPage getallorpage(@PathVariable("currentpage") Integer currentpage, @PathVariable("pageSize") Integer pageSzie){

    IPage page = new Page(currentpage,pageSzie);
    IPage iPage = facebookDataService.page(page, null);
    /**
     * 如果当前页面值大于了总页码数值 从新操作,使用最大页码数值作为当前页码
     */
    if (currentpage >iPage.getPages()){
        page = new Page(iPage.getPages(),pageSzie);
    }
    return iPage;
}

可以看到这里我传输了俩个参数一个是当前页号一个是页面大小，而在
在sql语句中分页是由limit X,Y完成
y表示页面大小
x代表当前页面第一个数据的索引 x=（当前页号-1）乘*y;由于Mybatis 的基础mapper中封装好了 ,所以这里传输当前页号，页面大小即可
结果以及日志如下
(这里只有一个参数因为传入的当前页号为1故省去了(1-1)**任何数为0 故省略)
在这里插入图片描述
其中用到的 Mapper ,service,serviceimpl使用封装好的即可
service层接口以及实现类型

public interface FacebookDataService extends IService<FacebookData> {

   public IPage<FacebookData> getPage(Integer currentpage, Integer pageSize, FacebookData facebookData);
}

这里的lambda表达式处理是我用来做筛选条件的，IService的实现方法本质是调用了basemapper的selectpage方法

@Service
//这里的page我重写时因为有时候需要条件构造器构造条件
public class FacebookDataServiceImpl extends ServiceImpl<FacebookDataMapper, FacebookData> implements FacebookDataService {
    @Autowired
    private FacebookDataMapper facebookDataMapper;
    @Override
     public IPage<FacebookData> getPage(Integer currentpage, Integer pageSize, FacebookData facebookData){
        IPage page = new Page(currentpage,pageSize);
        QueryWrapper<FacebookData> lqw = new QueryWrapper<FacebookData>();
        lqw.like("KeyWords",facebookData.getKeyWords()).like("ChineseContent",facebookData.getChineseContent())
            .like("Status",facebookData.getStatus()).like("CatchTime",facebookData.getCatchTime());
//        LambdaQueryWrapper<FacebookData> lqw = new LambdaQueryWrapper<FacebookData>();
//
//        lqw.like(Strings.isNotEmpty(facebookData.getKeyWords()),FacebookData::getKeyWords,facebookData.getKeyWords());
//        lqw.like(Strings.isNotEmpty(facebookData.getChineseContent()),FacebookData::getChineseContent,facebookData.getChineseContent());
//        lqw.like(Strings.isNotEmpty(facebookData.getCatchTime().toString()),FacebookData::getCatchTime,facebookData.getCatchTime());
//        lqw.like(Strings.isNotEmpty(facebookData.getStatus().toString()),FacebookData::getStatus,facebookData.getStatus());
        facebookDataMapper.selectPage(page, lqw);

        return facebookDataMapper.selectPage(page, lqw); //实际数据层处理方法 service处理逻辑 然后由数据层mapper对数据修改
    }

}

无赛选条件时分页就简单许多,毕竟都是框架封装好的

  @Override
    public Result queryList(Integer currentPage,Integer pageSize) {
        IPage<TRecruitmentAticle> page = query().page(new Page<>(currentPage.longValue(),pageSize.longValue()));
        return Result.ok(page);
    }

basemapper的selectpage是mybatisplus封装好的

@Mapper
public interface FacebookDataMapper extends BaseMapper<FacebookData> {

}

然后我们来看看selectpage的参数以及返回值
在这里插入图片描述
所以我们在调用分页的时候需要创建page对象,以及条件构造器Wrapper(可以为null)
返回值也为page对象

sql底层底层实际上是 limit 和offset 关键字
嗷嗷


SELECT DISTINCT
    emp_no,
    birth_date,
    first_name,
    last_name,
    gender,
    hire_date
 
FROM
    employees
ORDER BY
    hire_date DESC
LIMIT 3 OFFSET 0;

LIMIT:取多少条数据,也就是分页每个区间的大小

offset便宜量也就是sql读取这个区间从哪个地方开始: pagesize*（currentPage-1）
有时候sql查询语句一长容易记错,当你在编写 SQL 查询时，经常会用到一些关键字和术语。下面是常见的查询顺序，同时也会解释主键（Primary Key）的意义：

SELECT：用于选择要检索的列或计算的值。
FROM：用于指定查询的数据表或视图的来源。
WHERE：用于过滤符合特定条件的行。
GROUP BY：用于按照指定列对结果进行分组，通常与聚合函数一起使用。
HAVING：用于过滤聚合函数的结果，类似于 WHERE 但是作用于分组后的数据。
ORDER BY：用于按照指定列对结果进行排序。
LIMIT：用于限制返回的结果行数。
OFFSET：用于指定从结果集的哪一行开始返回结果，常与 LIMIT 结合使用，实现分页功能。

比如

SELECT
    s.emp_no,
    s.salary,
    s.from_date,
    s.to_date,
    d.dept_no
FROM
    salaries AS s
LEFT JOIN
    dept_manager AS d ON s.emp_no = d.emp_no
WHERE
    s.to_date = '9999-01-01'
    AND d.to_date = '9999-01-01'
ORDER BY
    s.emp_no ASC;

通常，主键是在创建表时指定的，并且会对该列进行约束，以确保数据的完整性和唯一性。例如，如果有一个名为 id 的主键列，那么每个 id 值在表中都必须是唯一的，且不能为 NULL。顺序

前端接受返回值(很容易搞混)

axios返回的数据结构是
在这里插入图片描述

一个相应体 ,除了有我们发给前端的数据以外还有很多请求信息,我们发送的数据res.data里面封装起来的,但是一般为了和前端统一不能直接返回数据,而是封装统一返回体,数据在返回体里的

/**
 * 定义返回·结果类
 */
@Data
@NoArgsConstructor
@AllArgsConstructor
public class Result {
    private Boolean success;
    private String errorMsg;
    private Object houduandata;
    private Long total;

    public static Result ok(){
        return new Result(true, null, null, null);
    }
    public static Result ok(Object data){
        return new Result(true, null, data, null);
    }
    public static Result ok(List<?> data, Long total){
        return new Result(true, null, data, total);
    }
    public static Result fail(String errorMsg){
        return new Result(false, errorMsg, null, null);
    }
}