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>