<dependency>
<groupId>com.baomidou</groupId>
<artifactId>mybatis-plus-boot-starter</artifactId>
<version>3.1.2</version>
</dependency>
@Configuration
@MapperScan("com.shenmazong.demoblog0701.mapper.*")
public class MybatisPlusConfig {
@Bean
public PaginationInterceptor paginationInterceptor() {
PaginationInterceptor paginationInterceptor = new PaginationInterceptor();
// 设置请求的页面大于最大页后操作, true调回到首页,false 继续请求 默认false
// paginationInterceptor.setOverflow(false);
// 设置最大单页限制数量,默认 500 条,-1 不受限制
// paginationInterceptor.setLimit(500);
// 开启 count 的 join 优化,只针对部分 left join
paginationInterceptor.setCountSqlParser(new JsqlParserCountOptimize(true));
return paginationInterceptor;
}
}
@Override
public ResultResponse getBlogByPage(Integer userId, Integer current, Integer size) {
Page<TbBlog> tbBlogPage = new Page<>(current, size);
QueryWrapper<TbBlog> wrapper = new QueryWrapper<>();
wrapper.lambda().eq(TbBlog::getUserId, userId);
IPage<TbBlog> tbBlogIPage = iTbBlogMapper.selectPage(tbBlogPage, wrapper);
return ResultResponse.SUCCESS(tbBlogIPage);
}
{
"code": 0,
"message": "操作成功",
"data": {
"records": [
],
"total": 5,
"size": 2,
"current": 2,
"orders": [],
"searchCount": true,
"pages": 3
}
}
<template>
<div>
<div>
<h1>博文列表</h1>
</div>
<div class="tableclass">
<el-table
:data="tableData"
style="width: 100%">
<el-table-column
prop="blogId"
label="ID"
width="180">
</el-table-column>
<el-table-column
prop="blogTitle"
label="标题"
width="180">
</el-table-column>
<el-table-column
prop="userId"
label="作者">
</el-table-column>
<el-table-column
prop="blogShare"
:formatter="formatter"
label="分享">
</el-table-column>
<el-table-column
prop="createTime"
label="发布时间">
</el-table-column>
</el-table>
</div>
<div class="pagebox">
<el-pagination
background
@current-change="handleCurrentChange"
layout="prev, pager, next"
:page-count="pages"
:page-size="size"
:current-page="current"
:total="total">
</el-pagination>
</div>
</div>
</template>
<script>
export default {
name: 'blogs',
data() {
return {
uid: 0,
total: 0,
size: 2,
current: 1,
pages: 0,
tableData: []
}
},
methods: {
formatter(row, column) {
console.log(column)
return row.blogShare===0?'不分享':'分享'
},
handleCurrentChange(val) {
console.log(`当前页: ${val}`);
let param = new FormData();
param.append('userId', this.uid);
param.append('current', val);
param.append('size', this.size);
this.$http.post(`/getBlogByPage`, param)
.then(res=>{
if(res.data.code == 0) {
console.log(res.data.message)
let data = res.data.data
this.tableData = data.records
this.total = data.total
this.size = data.size
this.current = data.current
this.pages = data.pages
}
else {
console.log(res.data.message)
}
})
}
},
mounted() {
//-- 获取用户ID
let uid = window.sessionStorage.getItem("uid")
console.log("uid="+uid)
this.uid = uid
// let user = window.sessionStorage.getItem("token")
// console.log(user)
//-- 获取博文列表
let param = new FormData();
param.append('userId', uid);
param.append('current', 1);
param.append('size', 2);
this.$http.post(`/getBlogByPage`, param)
.then(res=>{
if(res.data.code == 0) {
console.log(res.data.message)
let data = res.data.data
this.tableData = data.records
this.total = data.total
this.size = data.size
this.current = data.current
this.pages = data.pages
}
else {
console.log(res.data.message)
}
})
}
}
</script>
<style>
.pagebox {
margin-top: 20px;
}
.tableclass {
width: 900px;
height: auto;
margin: auto;
}
</style>
展示效果如下: