springboot中使用Mybatisplus+Vue+elementUI实现分页

最新推荐文章于 2024-01-20 11:58:32 发布

@小匠

最新推荐文章于 2024-01-20 11:58:32 发布

阅读量803

点赞数

分类专栏： JavaStudy2020 文章标签： java vue.js

本文链接：https://blog.csdn.net/qq_45629145/article/details/113928472

版权

JavaStudy2020 专栏收录该内容

35 篇文章 1 订阅

订阅专栏

前端发送的数据

let params = {
        params: {
          currentPage: this.currentPage, //当前页
          pageSize: this.pageSize, //每页显示条数
          sort: this.sort, //排序字段信息
          priceGte: this.min, //价格区间
          priceLte: this.max,
        }
      }

后端

用于接收的实体类

@Data
@ToString
public class SelectPage {
    private Integer currentPage;
    private Integer pageSize;
    private String sort;
    private String priceGte; //大于等于
    private String priceLte; //小于等于
}

controller层

    /**
     * 分页按条件查询
     * @param selectPage 分页查询对象
     * @return Page对象
     */
    @GetMapping("goods/allGoods")
    public Page selectAll(SelectPage selectPage) {
        Page<TbGoodsAll> goodsAllPage = tbGoodsAllService.selectPage(selectPage);
        return goodsAllPage;
    }

service层

    @Autowired
    TbGoodsAllDao tbGoodsAllDao;

    @Override
    public Page<TbGoodsAll> selectPage(SelectPage selectPage) {
        //参数一：当前页
        //参数二：页面显示条数
        Page<TbGoodsAll> page = new Page<>(selectPage.getCurrentPage(),selectPage.getPageSize()); //从map中取出分页数据
        QueryWrapper<TbGoodsAll> queryWrapper = new QueryWrapper<>();
        QueryWrapper<TbGoodsAll> price;
        //利用条件构造器，进行排序查询
        if ("1".equals(selectPage.getSort())) {
            price = queryWrapper.orderByAsc("price"); //从小到大
        }else if ("-1".equals(selectPage.getSort())){
            price = queryWrapper.orderByDesc("price"); //从大到小
        } else {
            price = null;
        }
        //按区间查
        if (!("".equals(selectPage.getPriceGte()) && "".equals(selectPage.getPriceLte()))){
            price = queryWrapper.between("price", selectPage.getPriceGte(),selectPage.getPriceLte());
        }
        Page<TbGoodsAll> tbGoodsAllPage = tbGoodsAllDao.selectPage(page, price);
        return tbGoodsAllPage;
    }

vue

        <div class="pagination">
          <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-sizes="[8, 20, 40, 80]"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total">
          </el-pagination>
        </div>

_getAllGoods()将新数据向后端发起数据请求

    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageSize = val
      this._getAllGoods()
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage = val
      this._getAllGoods()
    },