MybatisPlus实现单表数据分页功能

一个菜鸡，分页搞了一天，总算是搞出来了，现在记录一下过程。

1.Mybatis配置类

在com.sunset.system.config下新建MyBatisConfig.class。代码如下：

@Configuration
@ConditionalOnClass(value = {PaginationInnerInterceptor.class})
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;
    }
}

2.控制器方法

声明一下，前端需要传入到控制器的值有当前页码和页码的大小。具体如下：

@GetMapping("/getUserList")
@ApiOperation(value="获取用户信息",notes="从后端获取所有用户信息")
public Map<String,Object> getUserList(@RequestParam(required = true,defaultValue = "1")Integer current,
                                      @RequestParam(required = true,defaultValue = "4")Integer size){
    Map<String,Object> map = new HashMap<>();
    Page<User> page = new Page<>(current,size);
    QueryWrapper<User> wrapper = new QueryWrapper<>();
    IPage<User> userPage = userService.findUserPage(page,wrapper);
    long total = userPage.getTotal();
    List<User> users = userPage.getRecords();
    log.info("users:[{}]",users.toString());
    map.put("users",users);
    map.put("total",total);
    map.put("state",true);
    map.put("msg","查找用户成功");
    return map;
}

3.其他层代码

在userService和userServiceImpl类中代码如下：

//UserService
IPage<User> findUserPage(Page<User> page, QueryWrapper<User> wrapper);
//UserServiceImpl.java
@Override
public IPage<User> findUserPage(Page<User> page, QueryWrapper<User> wrapper) {
    return this.baseMapper.selectPage(page,wrapper);
}

至此，后端代码大功告成，接下来是前端代码。

4. 前端分页插件

<el-pagination
        style="padding-top: 15px"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="current"
        :page-sizes="[4, 6, 10, 20]"
        :page-size="size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
</el-pagination>

获取用户信息的函数：

<script>
    export default {
        name: "Welcome",
        data(){
            return {
                users: [],
                current: 1,
                size: 4,
                total: 100,
            }
        },
        created() {
          this.getUserList();
        },
        methods:{
            async getUserList(){       this.$axios.get("http://localhost:8087/user/getUserList?current="+this.current+"&size="+this.size).then(res =>{
                        this.users = res.data.users;
                        this.total = res.data.total;
                        console.log(res);
                        console.log(res.data.users.length);
                })
            },
            handleSizeChange(val){
                this.size = val;
                this.getUserList();
            },
            handleCurrentChange(val){
                this.current = val;
                this.getUserList();
            }
        }
    }
</script>

大功告成，本菜鸡着实不易，写代码太难了，又摸鱼又钻研，下面是效果图：