分页功能的实现后端中使用的是springboot与mybatisPlus中的MP，省去了我们写sql语句，确实挺好用的。前端使用的是element+vue的axios异步来实现我们的分页。

一、要在springboot中使用mabatisPlus我们需要引入mybatisPlus的坐标。我们使用https://start.spring.io的网址搭建springboot时里面没有mybatisPlus，所以需要我们手动引入mybatisPlus的坐标。

<dependency>
    <groupId>com.baomidou</groupId>
    <artifactId>mybatis-plus-boot-starter</artifactId>
    <version>3.4.3</version>
</dependency>

或者我们也可以使用 https://start.aliyun.com的网址来搭建springboot，我们直接在里面勾选上mybatisPlus即可。

 

二、dao层mapper接口，service业务层，和controller控制层

1.mapper接口，我们需要继承BaseMapper<T>

package com.stu.dao;

import com.baomidou.mybatisplus.core.mapper.BaseMapper;
import com.stu.domain.User;
import org.apache.ibatis.annotations.Mapper;

/**
 * @author 半个西瓜一个你
 */
@Mapper
public interface UserMapper extends BaseMapper<User> {

}

2.service接口 ，这里不习惯使用mybatis自带的方法，自己定义了一个

package com.stu.service;

import com.baomidou.mybatisplus.core.metadata.IPage;
import com.baomidou.mybatisplus.extension.service.IService;
import com.stu.domain.User;

public interface IUserService extends IService<User> {
    IPage<User> getPage(int currentPage, int pageSize,User user);
}

serviceimpl：这里不仅继承ServiceImpl<UserMapper, User>，还要 implements IUserService接口

package com.stu.service.impl;

import com.baomidou.mybatisplus.core.conditions.query.LambdaQueryWrapper;
import com.baomidou.mybatisplus.core.metadata.IPage;
import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;
import com.stu.dao.UserMapper;
import com.stu.domain.User;
import com.stu.service.IUserService;
import org.apache.logging.log4j.util.Strings;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

@Service
public class UserServiceImpl2 extends ServiceImpl<UserMapper, User> implements IUserService {

    @Autowired
    private UserMapper userMapper;

    @Override
    public IPage<User> getPage(int currentPage, int pageSize,User user) {
        LambdaQueryWrapper<User> lqw = new LambdaQueryWrapper<User>();
        lqw.like(Strings.isNotEmpty(user.getEmail()),User::getEmail,user.getEmail());
        lqw.like(Strings.isNotEmpty(user.getUsername()),User::getUsername,user.getUsername());
        lqw.like(Strings.isNotEmpty(user.getPhoneNum()),User::getPhoneNum,user.getPhoneNum());
        IPage page = new Page(currentPage,pageSize);
        userMapper.selectPage(page,lqw);
        return page;
    }
}

三、这里做一个表现层消息一致性处理。

package com.stu.utils;

import lombok.Data;

@Data
public class R {
    private boolean flag;
    private Object data;
    private String msg;

    public R(){}

    public R(Boolean flag){
        this.flag = flag;
    }

    public R(Boolean flag,Object data){
        this.flag = flag;
        this.data = data;
    }

    public R(Boolean flag,String msg){
        this.flag = flag;
        this.msg = msg;
    }

    public R(String msg){
        this.flag = false;
        this.msg = msg;
    }

}

controller层：这里使用的是restful风格

package com.stu.controller;

import com.baomidou.mybatisplus.core.metadata.IPage;
import com.stu.domain.User;
import com.stu.service.IUserService;
import com.stu.utils.R;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.*;

import java.io.IOException;
import java.util.List;

@RestController
@RequestMapping("/users")
public class UserController2 {

    @Autowired
    private IUserService userService;

    @GetMapping("{currentPage}/{pageSize}")
    public R getPage(@PathVariable int currentPage,@PathVariable int pageSize,User user){

        IPage<User> page = userService.getPage(currentPage, pageSize,user);
        //如果当前页码值大于了总页码值，就重新执行查询操作，使用最大页码值作为当前页码值
        if( currentPage > page.getPages()){
            page = userService.getPage((int)page.getPages(), pageSize,user);
        }
        return new R(true, page);
    }

}

四、要想实现分页，我们还需要一个工具MPConfig。

package com.stu.config;

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

@Configuration
public class MPConfig {

    @Bean
    public MybatisPlusInterceptor mybatisPlusInterceptor(){
        //1.定义MP的拦截器
        MybatisPlusInterceptor interceptor = new MybatisPlusInterceptor();
        //2.添加具体的拦截器
        interceptor.addInnerInterceptor(new PaginationInnerInterceptor());
        return interceptor;
    }
}

五、前端页面使用elment分页组件添加分页功能

<!--分页组件-->
<div class="pagination-container">
    <el-pagination
        class="pagiantion"
        @current-change="handleCurrentChange"
        :current-page="pagination.currentPage"
        :page-size="pagination.pageSize"
        layout="total, prev, pager, next, jumper"
        :total="pagination.total">
    </el-pagination>
</div>

查询条件数据封装

data:{
    pagination: {//分页相关模型数据
        currentPage: 1,//当前页码
        pageSize:2,//每页显示的记录数
        total:0,//总记录数
        //需要根据查询的条件
        email: "",
        username: "",
        phoneNum: ""
    }
},

页面数据模型绑定

<div class="filter-container">
                <el-input placeholder="邮箱" v-model="pagination.email" style="width: 200px;" class="filter-item"></el-input>
                <el-input placeholder="姓名" v-model="pagination.username" style="width: 200px;" class="filter-item"></el-input>
                <el-input placeholder="电话" v-model="pagination.phoneNum" style="width: 200px;" class="filter-item"></el-input>
                <el-button @click="getAll()" class="dalfBut">查询</el-button>
                <el-button type="primary" class="butT" @click="handleCreate()">新建</el-button>
</div>

页面回显数据，组织数据发送为get数据的请求

//分页查询
            getAll() {
                //组织参数，拼接url请求地址
                param = "?email="+this.pagination.email;
                param +="&username="+this.pagination.username;
                param +="&phoneNum="+this.pagination.phoneNum;

                //发送异步请求
                axios.get("/users/"+this.pagination.currentPage+"/"+this.pagination.pageSize+param).then((res)=>{
                    this.pagination.pageSize = res.data.data.size;
                    this.pagination.currentPage = res.data.data.current;
                    this.pagination.total = res.data.data.total;

                    this.dataList = res.data.data.records;
                });
            },

            //分页查询

            //切换页码
            handleCurrentChange(currentPage) {
                //修改页码值为当前选中的页码值
                this.pagination.currentPage = currentPage;
                //执行查询
                this.getAll();
            },

这样就可以实现根据查询条件进行分页了，我这里设置的每页显示两条数据，可联合查询，也可以分开查询。