Vue+ElementUi+Mybatisplus实现前端数据分页展示

后端代码：

controller

@GetMapping("/ArticleList")
    //pageNum：页数    pageSize：一页的条数
    public Result ArticleList(Integer pageNum, Integer pageSize){
        return articleService.articleList(pageNum, pageSize);
    }

serviceimpl

@Override
    public Result articleList(Integer pageNum, Integer pageSize) {
        LambdaQueryWrapper<Article> queryWrapper = new LambdaQueryWrapper<>();
        //配置分页查询的页数和一页的数据
        Page<Article> page = new Page<>(pageNum,pageSize);
        page(page,queryWrapper);
        //Result是封装了结果，将page返回就行了
        return Result.success(page);
    }

完成后测试一下后端接口

total总的数据量 

size一页的数据量         

pages总页数 

current当前的页数

前端部分

getArticle() {
      axios
        .get(
          this.$base_url +
            "/forum/article/ArticleList?pageNum=" +
            this.pageNum +
            "&pageSize=" +
            this.pageSize
        )
        .then((res) => {
          // console.log(res.data.data.rows);
          //查询出来的数据
          this.AllArticle = res.data.data.rows;
          //查询出来的当前的页数
          this.pageNum = res.data.data.current;
          //查询出来的总条数
          this.total = res.data.data.total;
        });
    },


//分页
    handleCurrentChange(page) {
      this.pageNum = page; //给pageNum赋page值
      this.getArticle(); //重新调用方法
    },

return {
      AllArticle: {},
      MyArticle: {},
      //默认显示页数
      pageNum: 1,
      //每页数据的数量
      pageSize: 5,
      //总条数
      total: 1,
    };

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

效果图