当前位置 博文首页 > 盛夏温暖流年：使用 iView 的 Page 组件实现 vue 分页（附后端分
随着页面数据越来越多，一次性加载所有数据会对后端服务造成压力，同时加载速度慢也会影响用户体验，所以我们通常使用分页的方式来提高性能，优化体验。
很多其他博客中都是后端返回所有数据，前端再进行截取，个人认为这样并没有实现真正意义上的分页，所以本博客中由后端实现数据分页，前端只负责展示和处理。
vue 分页可以通过 iView 的 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();
}
}
controller 实现
@RequestMapping("/list")
@ApiOperation("列表接口")
@ApiImplicitParams({
@ApiImplicitParam(name = "pageNum", value = "页码", dataType = "Integer", paramType = "query"),
@ApiImplicitParam(name = "pageSize", value = "每页条数", dataType = "Integer", 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;
}
把数据处理放在后端，前后端各司其职，也便于问题的排查和调试。
cs