使用 iView 的 Page 组件实现 vue 分页附后端分页实现

随着页面数据越来越多，一次性加载所有数据会对后端服务造成压力，同时加载速度慢也会影响用户体验，所以我们通常使用分页的方式来提高性能，优化体验。

很多其他博客中都是后端返回所有数据，前端再进行截取，个人认为这样并没有实现真正意义上的分页，所以本博客中由后端实现数据分页，前端只负责展示和处理。

vue 分页可以通过 iView 的 Page 组件来实现，简单高效。

一. vue 的 Page 组件实现前端分页

1. 在 vue 文件中引入 Page 组件

<template>
  <div>
    <div>
      <ul>
          <li class="movie" v-for="movie in movieList">
              <span class="t">{{movie.movieName}}</span>
          </li>
      </ul>
      <!-- 引入Page组件 -->
      <Page :total="total" :current="currentPage" :page-size="pageSize" @on-change="changePage"></Page>
    </div>
  </div>
</template>

参数设置可参考下表：

2.初始化 data

data() {
	// 列表数据
    movieList: [],
    // 数据总数
    total:0,
    // 当前页码
    currentPage:1,
    // 每页条数
    pageSize:10
}

3. 接口数据填充

methods: {
	// 加载列表数据
    loadMovies: function() {
        let data = {
            pageNum: this.currentPage,
            pageSize: this.pageSize
        }
        // 调用接口，加载数据
        Movie.loadMovies(data).then(res => {
            if (res.data.code == 200) {
            	// 后端需要把当前页数据和总条数返回
                var movies = res.data.records;
                this.total = res.data.total;
                this.movieList = movies;
            }
        });
    },
    // 改变当前页
    changePage(index) {
        this.currentPage = index;
        // 清空数据重新赋值
        this.movieList = [];
        this.loadMovies();
    }
}

二. SpringBoot + Mybatis Plus 实现后端分页

controller 实现

@RequestMapping("/list")
@ApiOperation("列表接口")
@ApiImplicitParams({
       @ApiImplicitParam(name = "pageNum", value = "页码", dataType = "Integer", paramType = "query"),
       @ApiImplicitParam(name = "pageSize", value = "每页条数", paramType = "query")
})
public Ret list(HttpServletRequest request, Integer pageNum, Integer pageSize) {
   if (ObjectUtil.isNull(pageNum)){
       pageNum = 1;
   }
   if (ObjectUtil.isNull(pageSize)){
       pageSize = 10;
   }
   return movieService.movieList(pageNum, pageSize);
}

service 实现

@Autowired
private MovieDao movieDao;
    
public Ret movieList(Integer pageNum, Integer pageSize) {
   Ret result = new Ret();
   Page<Movie> pageParam = new Page<>(pageNum, pageSize);
   QueryWrapper<Movie> queryWrapper = new QueryWrapper<>();
   // MovieDao是继承了BaseMapper的接口
   Page<Movie> movieList = movieDao.selectPage(pageParam, queryWrapper);
   result.setCodeAndMsgOk();
   result.setInfo(movieList);
   return result;
}

把数据处理放在后端，前后端各司其职，也便于问题的排查和调试。