mybatis-plus+springboot+vue+element-ui实现分页

第一步导入依赖

<!--     分页组件   -->
        <dependency>
            <groupId>com.github.pagehelper</groupId>
            <artifactId>pagehelper</artifactId>
            <version>5.2.0</version>
        </dependency>
        <!--        mybatis-plus-->
<!-- https://mvnrepository.com/artifact/com.baomidou/mybatisplus-spring-boot-starter -->
            <dependency>
            <groupId>com.baomidou</groupId>
            <artifactId>mybatis-plus-boot-starter</artifactId>
            <version>3.2.0</version>
        </dependency>

然后导入前端element-ui组件+html代码

<!--    elementUi-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<div id="app">
    <div class="layui-card-header" style="margin-top: 20px">
        <button class="layui-btn layui-btn-danger" @click="deleteSel" type="button">
            <i class="layui-icon"></i>批量删除</button>
        <button class="layui-btn" onclick="xadmin.open('添加用户','/basic/custom/creat',800,600)"><i class="layui-icon"></i>添加</button>
        <div class="layui-inline layui-show-xs-block">
            <input type="text" id="renCarPerson" name="renCarPerson" placeholder="请输入用户名" autocomplete="off" class="layui-input"></div>
        <div class="layui-inline layui-show-xs-block">
            <button class="layui-btn" @click="findByName()">
                <i class="layui-icon"></i></button>
        </div>
    </div>
    <div class="layui-card-body">
        <table class="layui-table">
            <thead>
            <tr>
                <th>
                    <input type="checkbox" name="" class="layui-unselect layui-form-checkbox" lay-skin="primary" onclick="swapCheck()">
                </th>
                <th>序号</th>
                <th>租车人</th>
                <th>客户性别</th>
                <th>联系方式</th>
                <th>销售负责人</th>
                <th>家庭住址</th>
                <th>租车车型</th>
                <th>租车时间</th>
                <th>支付金额</th>
                <th>还车时间</th>
                <th>租车状态</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="item in list">
                <td>
                    <input type="checkbox" name="checkbox" class="layui-unselect layui-form-checkbox" lay-skin="primary"  :value="item.id" v-model="selectArr">
                </td>
                <td>{{ item.id}}</td>
                <td>{{ item.renCarPerson}}</td>
                <td>{{ item.cusSex}}</td>
                <td>{{ item.cusMobile}}</td>
                <td>{{item.saleId}}</td>
                <td>{{ item.cusAddress}}</td>
                <td>{{ item.rentCarType}}</td>
                <td>{{ item.rentCarTime.substring(0,16).replace("T"," ")}}</td>
                <td>{{ item.payMoney}}</td>
                <td>{{ item.returnCarTime.substring(0,16).replace("T"," ")}}</td>
                <td>{{ item.rentCarState}}</td>
                <td class="td-manage">
                    <a title="查看"  onclick="xadmin.open('添加用户','/basic/custom/edit',800,600)" href="javascript:;">
                        <i class="layui-icon"></i></a>
                    <!--                <a title="删除" οnclick="member_del(this,'要删除的id')" href="javascript:;">-->
                    <a title="删除" @click="del(item.id)" href="javascript:;">
                        <i class="layui-icon"></i></a>
                </td>
            </tr>
            </tbody>
        </table>
        </div>
        <!--   element-ui分页组件-->
         <div class="block">
             <el-pagination
                     @size-change="handleSizeChange"
                     @current-change="handleCurrentChange"
                     :current-page="this.params.page"
                     :page-sizes="[1, 2, 3, 4]"
                     :page-size="this.params.size"
                     layout="total, sizes, prev, pager, next, jumper"
                     :total="this.total">
             </el-pagination>
        </div>
    </div>
</div>	

<!---官网提供的axios在线地址-->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            page:1,
            size:'',
            list:[],
            total:'',
            params: {
                page: 1,
                size: 6,
            },
        },
        mounted() {
            // 页面一加载完成就执行getData方法
            // this.getData();
            this.pagehelper();
        },
        methods:{
            //    分页
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
                this.params.size = val;
                this.pagehelper();
            },
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
                this.params.page = val;
                this.pagehelper();
            },
            pagehelper:function(){
                that = this;
                axios.get("/inventory/pagehelper/" + this.params.page + "/" + this.params.size).then((res) => {
                    console.log("分页页面")
                    console.log(res.data);
                    console.log("分页后")
                    that.list = res.data.records;
                    console.log(this.list)
                    that.total = res.data.total;
                    console.log(this.total)
                });
            }
        }

    })
</script>

后端代码

mybatis-plus配置文件

import com.baomidou.mybatisplus.extension.plugins.PaginationInterceptor;
import org.springframework.boot.autoconfigure.condition.ConditionalOnClass;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;

//mybatis-plus分页插件
@Configuration
@ConditionalOnClass(value = {PaginationInterceptor.class})
public class MybatisPlusConfig {

    @Bean
    public PaginationInterceptor paginationInterceptor() {
        PaginationInterceptor paginationInterceptor = new PaginationInterceptor();
        return paginationInterceptor;
    }
}

mapper层

public interface InventoryMapper extends BaseMapper<Inventory> {
    //分页
    public Page<Inventory> findByPageService(int pageCode, int pageSize);
}

service层

public interface InventoryService extends IService<Inventory> {
    //分页
    public Page<Inventory> findByPageService(int pageCode, int pageSize);
}

serviceImpl层

@Service
public class InventoryServiceImpl extends ServiceImpl<InventoryMapper, Inventory> implements InventoryService{
  @Resource
    InventoryMapper inventoryMapper;

    @Override
    public Page<Inventory> findByPageService(int pageCode, int pageSize) {
        //1.创建Page对象，传入两个参数：当前页和每页显示记录数
        Page<Inventory> page = new Page<Inventory>(pageCode,pageSize);
        //2.将分页查询到的所有数据封装到Page对象中
        inventoryMapper.selectPage(page,null);
        return page;
    }
}

最后controller层

    //    分页
    @RequestMapping(value = "/pagehelper/{pageCode}/{pageSize}",method = RequestMethod.GET)
    @ResponseBody
    public Page<Inventory> findByPage(@PathVariable(value = "pageCode") int pageCode, @PathVariable(value = "pageSize") int pageSize) {
        System.out.println(pageCode+"...."+pageSize);
        Page<Inventory> pageInfo = inventoryService.findByPageService(pageCode, pageSize);
//        System.out.println(pageInfo);
        return pageInfo;
    }

页面展示