pagehelper分页

一.后端

依赖

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

1.1service

public ResponseResult<?> queryGoodByNameAndPlace(Integer pageNumber,Integer pageSize,String name, String place) {
    PageHelper.startPage(pageNumber, pageSize);
    List<Goods> goods = goodMapper.queryGoodByNameAndPlace(name, place);
    PageInfo<Goods> goodsPageInfo = new PageInfo<>(goods);
    return new ResponseResult<>().ok(goodsPageInfo);
}

1.2controller

public ResponseResult<?> queryGoods(Integer currentPage,Integer pageSize,String name,String place){
    return goodService.queryGoodByNameAndPlace(currentPage,pageSize,name,place);
}

二.前端

2.1页面

<el-row>
  <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
    :page-sizes="[5, 10, 20, 50]" :page-size="5" layout="total, sizes, prev, pager, next, jumper"
    :total="total">
  </el-pagination>
</el-row>

2.2data

  //分页
  currentPage: 1,
  pageSize: 5,
  total: 1,

2.3methods

//查询商品列表
doQuery() {
  this.$axios.get("api/goods/list?name=" + this.name + "&place=" + this.place + "&currentPage=" + this.currentPage + "&pageSize=" + this.pageSize, {
    headers: { "jwt": this.jwt }
  }).then(resp => {
    this.tableData = resp.data.data.list;
    this.total = resp.data.data.total;
    console.log(this.total)
  })
},
    //分页方法
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageSize = val;
      this.currentPage = 1;
      this.doQuery();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage = val;
      this.doQuery();
    }