解决：springboot+mybatisplus+vue+elementUI实现分页功能时遇到的问题

问题描述

最近在使用springboot+mybatisplus+vue实现分页功能时，后端是可以根据前端返回的页码和每页显示条数进行查询，并且前端收到了返回的数据，但是页面上却没有显示。

log4j打印的日志
报错内容：data.reduce is not a function

问题解决

后端部分

报的这个错误，一般来说就是后端返回的数据类型的问题。所以，先在后端查看一下返回值的类型：

使用mybatis-plus实现的分页功能：

运行之后，查看控制台发现打印的结果是：com.baomidou.mybatisplus.extension.plugins.pagination.Page@689502e5

这样传值给前端当然是不能显示数据的。于是修改分页功能的代码。
此处参考了这篇文章：https://blog.csdn.net/wy1045536776/article/details/104714761/

修改之后的分页功能：

和刚才一样，我们查看一下doctorVo的值：

我们主要看一下data，是以数组返回，后端的问题基本解决。

前端部分

接下来看前端，主要注意这一部分代码：

需要的值是刚才的所有数据中的data数组中的值，而这里返回的是整个data，所以应该在response.data后面再加.data就行了。

运行项目
成功

但是只有第一页的数据，且不能选择下一页

此时控制台返回的总条数为34，但页面只有10条

检查前端代码发现问题所在：elementUI分页器中的:total这里出了问题：

应修改为：

成功显示，

至此，分页功能完成。

部分代码

分页代码前端实现

分页器部分

<div class="pagination">
   <el-pagination
       background
       layout="total, prev, pager, next"
       :current-page="query.pageIndex"
       :page-size="query.pageSize"
       :total="pageTotal"
       @current-change="handlePageChange"
   ></el-pagination>
</div>

查询数据

getDoctorList: function () {
      var _this = this
      _this.$axios.get('http://localhost:8443/api/doctor/getDoctorListPage?pageCurrent=' + _this.query.pageIndex + '&pageSize=' + _this.query.pageSize, {
      }).then(function (response) {
        if (response) {
          _this.tableData = response.data.data
          _this.pageTotal = response.data.count
          console.log(_this.pageTotal)
        }
      })
        .catch(function (error) {
          console.log(error)
        })
    },

分页导航

handlePageChange (page) {
  this.query.pageIndex = page
  console.log(this.query.pageIndex)
  this.getDoctorList()
}

后端部分：

public DoctorVo getDoctorListPage(@RequestParam(value = "pageCurrent") Integer pageCurrent,
                                  @RequestParam(value = "pageSize") Integer pageSize){
        Page<Doctor> page = new Page<>(pageCurrent,pageSize);
        doctorService.findDoctorByPage(page);
        DoctorVo doctorVo = new DoctorVo();
        doctorVo.setPageCurrent(pageCurrent);
        doctorVo.setPageSize(pageSize);
        doctorVo.setCount(page.getTotal());
        doctorVo.setData(page.getRecords());
        doctorVo.setCode(0);
        System.out.println(doctorVo);
        return doctorVo;
    }