后端代码:
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>
效果图