pinked

导航

< 2025年2月 >
26 27 28 29 30 31 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 1
2 3 4 5 6 7 8

统计

pagehelper的使用

pagehelper的使用

后端

依赖

<dependency>
    <groupId>com.github.pagehelper</groupId>
    <artifactId>pagehelper-spring-boot-starter</artifactId>
    <version>1.2.13</version>
</dependency>

配置

pagehelper:
  helperDialect: mysql
  reasonable: true
  supportMethodsArguments: true
  pageSizeZero: false

控制层

@GetMapping("/reports/{page}/{size}")
public PageInfo queryReportList(@PathVariable("page") int page, @PathVariable("size") int size) {
    PageHelper.startPage(page, size);
    PageInfo info = new PageInfo<>(reportService.queryReportList());
    return info;
}

前端

分页@current-change="page"

currentPage改变时会触发

<el-pagination
  background
  layout="prev, pager, next"
  :page-size="pageSize"
  :total="total"
  @current-change="page">
</el-pagination>

通过axios接收后端的数据this.$axios.get().then()

<script>
  export default {
    methods: {
      page (currentPage) {
        const _this = this
        this.$axios.get('http://localhost:8081/reports/' + currentPage + '/2').then(function (resp) {
          _this.tableData = resp.data.list
        })
      }
    },

    data () {
      return {
        tableData: [],
        pageSize: 0,//初始值,避免报错
        total: 0//初始值,避免报错
      }
    },
    created () {
      const _this = this
      this.$axios.get('http://localhost:8081/reports/1/2').then(function (resp) {
        _this.tableData = resp.data.list
        _this.pageSize = resp.data.pageSize
        _this.total = resp.data.total
      })
    }
  }
</script>

posted on   pinked  阅读(170)  评论(1编辑  收藏  举报

编辑推荐:
· .NET Core 托管堆内存泄露/CPU异常的常见思路
· PostgreSQL 和 SQL Server 在统计信息维护中的关键差异
· C++代码改造为UTF-8编码问题的总结
· DeepSeek 解答了困扰我五年的技术问题
· 为什么说在企业级应用开发中,后端往往是效率杀手?
阅读排行:
· 清华大学推出第四讲使用 DeepSeek + DeepResearch 让科研像聊天一样简单!
· 推荐几款开源且免费的 .NET MAUI 组件库
· 实操Deepseek接入个人知识库
· 易语言 —— 开山篇
· Trae初体验
点击右上角即可分享
微信分享提示