1、使用MyBatis Plus分页

1）、添加依赖

        <dependency>
            <groupId>com.baomidou</groupId>
            <artifactId>mybatis-plus-boot-starter</artifactId>
            <version>3.1.2</version>
        </dependency>

2）、添加配置类

@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;
    }
}

3）、进行分页查询

    @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);
    }

4）、postman测试

（1） 分页核心数据

{
    "code": 0,
    "message": "操作成功",
    "data": {
        "records": [
        ],
        "total": 5,
        "size": 2,
        "current": 2,
        "orders": [],
        "searchCount": true,
        "pages": 3
    }
}

（2） 测试结果

2、vue+elementui

<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>

展示效果如下：