【Mybatis】分页

后端：springboot+mybatis+pagehelper

pom.xml

 		<!-- 分页插件 -->
        <dependency>
            <groupId>com.github.pagehelper</groupId>
            <artifactId>pagehelper-spring-boot-starter</artifactId>
            <version>1.1.2</version>
        </dependency>

controller

注意，PageHelper的两条语句尽量紧挨着查询服务语句，否则容易报错

PageHelper.startPage(pageNum, pageSize);//新增
List<NetworkHeatmapLiveapp> list = userService.findNetworkHeatmapLiveapp(record);
PageInfo<NetworkHeatmapLiveapp> pageInfo = new PageInfo<>(list);//新增
return JSON.toJSONString(pageInfo);//将之前返回的list修改为返回pageInfo

前端

.vue

	initHeatMapLiveApp () {
    
    
      let pageSize = 1000;//每页1000行数据
      let pageNum = 1;//第1页
      let dataList = [];
      this.getDataList(pageNum, pageSize,dataList);
    },
    //递归请求，间隔100ms
    getDataList (pageNum, pageSize,dataList) {
    
    
      this.$post(
        url,
        {
    
     pageNum: pageNum, pageSize: pageSize },
        data => {
    
    
          let res = data["list"];
          let pageTotal = data["pages"];
          if (res.length == 0) {
    
    
            return;
          }
          try {
    
    
            let group = res.map((item) => {
    
    
              return {
    
    
                lng: item.longitude,
                lat: item.latitude,
                count: item.value
              }
            })
            dataList=[...dataList,...group];
            pageNum++;
            if (pageNum <= pageTotal) {
    
    
              this.heatMapCallback(dataList);//逐步渲染
              setTimeout(this.getDataList(pageNum, pageSize,dataList), 100);//分页请求
            } else {
    
    
              return;
            }
          } catch (e) {
    
     }
        },
        error => {
    
    
          console.log(error);
        }
      );
    },