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作为参数传入后端,就可以完成分页了
相关推荐
何中应17 小时前
如何使用Spring Context实现消息队列
java·后端·spring
四念处茫茫18 小时前
Rust:与JSON、TOML等格式的集成
java·rust·json
摸鱼仙人~18 小时前
一文深入学习Java动态代理-JDK动态代理和CGLIB
java·开发语言·学习
微知语18 小时前
Cell 与 RefCell:Rust 内部可变性的双生子解析
java·前端·rust
雨过天晴而后无语18 小时前
Windchill10+html使用Lightbox轻量化wizard的配置
java·前端·html
Yeniden18 小时前
设计模式>原型模式大白话讲解:就像复印机,拿个原件一复印,就得到一模一样的新东西
java·设计模式·原型模式·1024程序员节
披着羊皮不是狼18 小时前
HTTP 与 API 入门:理解前后端交互原理
java·网络协议·http·交互
2401_8414956419 小时前
【操作系统】模拟真实操作系统核心功能的Java实现
java·操作系统·进程管理·系统调用·并发控制·中断处理·cpu调度
程序员皮皮林19 小时前
Java 25 正式发布:更简洁、更高效、更现代!
java·开发语言·python
好家伙VCC19 小时前
**发散创新:AI绘画编程探索与实践**随着人工智能技术的飞速发展,AI绘
java·人工智能·python·ai作画