码迷,mamicode.com
首页 > 其他好文 > 详细

pagehelper的使用

时间:2020-03-07 09:24:52      阅读:66      评论:0      收藏:0      [点我收藏+]

标签:避免   layout   var   rev   dia   you   ports   page   ntp   

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>

pagehelper的使用

标签:避免   layout   var   rev   dia   you   ports   page   ntp   

原文地址:https://www.cnblogs.com/pinked/p/12432162.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!