spring boot+MybatisPlus分页插件+Vue中watch侦听器完成分页查询列表显示,在不是第一页发起查询时不乱页码或查询不到数据

封装个查询对象 

package com.ywp.springboot2022.vo;

import lombok.Data;

@Data
public class SearchVo {



    /**
     * 用户名
     */
    private String username;

    /**
     * 昵称
     */
    private String nickname;

    /**
     * 地址
     */
    private String address;

}

 后端controller层示例

/**
     * 没搜索条件默认分页显示所有用户列表,有条件搜索并分页显示
     *
     * @param pageNum
     * @param pageSize
     * @param searchVo
     * @return
     */
    @GetMapping("/listAndSearch")
    public R search(@RequestParam Integer pageNum,
                    @RequestParam Integer pageSize, SearchVo searchVo) {
        if (pageNum == null) {
            pageNum = 1;
        }
        if (pageSize == null) {
            pageSize = 5;
        }
        IPage<User> userIPage = userService.searchPageInfo(pageNum, pageSize, searchVo);

        return R.ok(userIPage);
    }

分页插件配置MybatisPlus

pom依赖

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

建个config包

package com.ywp.springboot2022.config;


import com.baomidou.mybatisplus.annotation.DbType;
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 MybatisPlusConfig {

    // 最新版
    @Bean
    public MybatisPlusInterceptor mybatisPlusInterceptor() {
        MybatisPlusInterceptor interceptor = new MybatisPlusInterceptor();                    //指定数据库类型
        PaginationInnerInterceptor paginationInnerInterceptor = new PaginationInnerInterceptor(DbType.MYSQL);
        paginationInnerInterceptor.setOverflow(true);//溢出后从第1页开始
        
        interceptor.addInnerInterceptor(paginationInnerInterceptor);
        return interceptor;
    }


}

UserServiceImpl实现类

/**
     * 没搜索条件默认分页显示所有用户列表,有条件搜索并分页显示
     *
     * @param searchVo
     * @return
     */
    @Override
    public IPage<User> searchPageInfo(Integer pageNum,Integer pageSize, SearchVo searchVo) {

        Page<User> userPage = new Page<>(pageNum,pageSize);
        QueryWrapper<User> userQu = new QueryWrapper<>();
        if (StringUtils.hasLength(searchVo.getUsername())) {
            userQu.like("username",searchVo.getUsername());
        }
        if (StringUtils.hasLength(searchVo.getNickname())) {
            userQu.like("nickname", searchVo.getNickname());
        }
        if (StringUtils.hasLength(searchVo.getAddress())) {
            userQu.like("address", searchVo.getAddress());
        }
        //mybatisplus在service层封装的特有方法
        Page<User> page = page(userPage, userQu);
        return page;
    }

前端Vue-cli项目中

<!--    搜索开始      -->

<div style="margin: 10px 0 ">
            <el-input style="width: 20%;" v-model="searchVo.username" class="mr-5"
                      placeholder="请输入名称" @keydown.native.enter="loadUserListAndSearch"
                      suffix-icon="el-icon-search"></el-input>
            <el-input style="width: 20%;" v-model="searchVo.nickname" class="mr-5"
                      placeholder="请输入昵称" @keydown.native.enter="loadUserListAndSearch"
                      suffix-icon="el-icon-s-custom"></el-input>
            <el-input style="width: 20%;" v-model="searchVo.address" class="mr-5"
                      @keydown.native.enter="loadUserListAndSearch" placeholder="请输入地址"
                      suffix-icon="el-icon-position"></el-input>
            <el-button type="primary" @click="loadUserListAndSearch">搜索</el-button>
            <el-button type="success" @click="reset">重置</el-button>
          </div>

<!--    搜索结束      -->

<!--   分页开始       -->
          <div style="padding: 10px 0">
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="pageNum"
                :page-sizes="[5, 10, 15, 20]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
            </el-pagination>
          </div>
          <!--   分页结束       -->

<script>
// @ is an alias to /src
import request from "@/utils/request";


export default {
  name: 'HomeView',
  data() {
    return {
      pageNum: 1,
      pageSize: 10,
      total: 0,
       //查询条件对象
      searchVo: {
        username: "",
        nickname: "",
        address: ""
      } ,            

      toPageOne: false  //是否从第一页查起(用于查询条件变动)

    }
  },

watch: {
    // 第一种方式：监听整个对象，每个属性值的变化都会执行handler
    // 注意：属性值发生变化后，handler执行后获取的 newVal 值和 oldVal 值是一样的
    searchVo: {
      handler(newVal, oldVal) {
        console.log('oldVal:', oldVal)
        console.log('newVal:', newVal)
        console.log("searchVo数据变动!" + this.searchVo)
        this.toPageOne = true
      },
      // 立即处理 进入页面就触发
//当值第一次绑定的时候，不会执行监听函数，只有值发生改变才会执行。如果我们需要在最初绑定值的
//时候也执行函数，则就需要用到immediate属性。
//比如当父组件向子组件动态传值时，子组件props首次获取到父组件传来的默认值时，也需要执行函数，
//此时就需要将immediate设为true。
      //immediate: true,

      //当需要监听复杂数据类型(对象)的改变时，普通的watch方法无法监听到对象内部属性的改变，
      // 只有data中的数据才能够监听到变化，此时就需要deep属性对对象进行深度监听
      deep: true
    },
  },

created() {
    /*页面初始化完毕立即异步获取用户列表信息*/
    this.loadUserListAndSearch()
  },

methods: {

/*没搜索条件默认分页显示所有用户列表,有条件搜索并分页显示*/
    loadUserListAndSearch() {
      this.pageNum=this.toPageOne ? 1 : this.pageNum
      request.get("http://localhost:8080/user/listAndSearch", {
        params: {
          pageNum: this.pageNum,
          pageSize: this.pageSize,
          username: this.searchVo.username,
          nickname: this.searchVo.nickname,
          address: this.searchVo.address
        }
      }).then(res => {
        console.log(res)
        this.tableData = res.data.records
        this.total = res.data.total
        this.toPageOne=false
      })
    },

/*点击更换每页显示条数*/
    handleSizeChange(pageSize) {
      console.log("每页显示" + pageSize + "条")
      this.pageSize = pageSize
      this.loadUserListAndSearch()
    },

/*点击页码翻页*/
    handleCurrentChange(pageNum) {
      console.log("当前第" + pageNum + "页")

     this.pageNum= pageNum
      this.loadUserListAndSearch()

    },
/*重置查询条件*/
    reset() {
       //清空查询条件
      this.searchVo.username = ""
      this.searchVo.nickname = ""
      this.searchVo.address = ""

       //页面显示为第一页
      this.pageNum= 1

      this.loadUserListAndSearch()
    },

}

}
</script>

 Pagination 分页Attributes

layout: 组件布局，子组件名用逗号分隔