springboot+mybatis+vue2分页功能开发

前端框架代码

复制代码
 <div class="block">
    <span class="demonstration">完整功能</span>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage4"
      :page-sizes="[100, 200, 300, 400]"
      :page-size="100"
      layout="total, sizes, prev, pager, next, jumper"
      :total="400">
    </el-pagination>
  </div>

data中进行数据初始化

javascript 复制代码
data() {
    return {    
      totals: 0,
      pageSize: 2,
      currentPage: 1
}
}

对应的js代码

javascript 复制代码
 methods: {
    getParent() {
      getPatientList(this.currentPage, this.pageSize).then(res => {
        this.tableData = res.data.list
        this.totals = res.data.total
      })
    },
    handleSizeChange(val) {
      this.pageSize = val
      this.getParent()
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange(val) {
      this.currentPage = val
      this.getParent()
      console.log(`当前页: ${val}`)
    }
}

后端开发方法

这里使用的是mybatis,所有需要使用pagehelper进行分页

javascript 复制代码
 <dependency>
            <groupId>com.github.pagehelper</groupId>
            <artifactId>pagehelper-spring-boot-starter</artifactId>
            <version>1.4.7</version>
        </dependency>

后端使用

复制代码
PageInfo,并将pageNO和pageSize作为参数传入后端,就可以完成分页了
相关推荐
间彧2 分钟前
SimpleDateFormat既然不推荐使用,为什么java 8+中不删除此类
java
间彧8 分钟前
DateTimeFormatter相比SimpleDateFormat在性能上有何差异?
java
间彧19 分钟前
为什么说SimpleDateFormat是经典的线程不安全类
java
MacroZheng27 分钟前
横空出世!MyBatis-Plus 同款 ES ORM 框架,用起来够优雅!
java·后端·elasticsearch
用户0332126663671 小时前
Java 查找并替换 Excel 中的数据:详细教程
java
间彧1 小时前
ThreadLocal实现原理与应用实践
java
若水不如远方1 小时前
Netty的四种零拷贝机制:深入原理与实战指南
java·netty
用户7493636848431 小时前
【开箱即用】一分钟使用java对接海外大模型gpt等对话模型,实现打字机效果
java
SimonKing2 小时前
一键开启!Spring Boot 的这些「魔法开关」@Enable*,你用对了吗?
java·后端·程序员
间彧2 小时前
Spring Boot集成Spring Security 6.x完整指南
java