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 {@Beanpublic 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{@ResourceInventoryMapper inventoryMapper;@Overridepublic 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)@ResponseBodypublic 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;}

页面展示

mybatis-plus+springboot+vue+element-ui实现分页相关推荐

实验管理系统springboot+vue+element ui项目开发
实验管理系统某学院实验老师长期采用人工的形式完成药品试剂的入库.查询.出库的流程.但这种方式存在诸多问题和不便: 1. 在仓库运行流程中效率不高,容易出错. 2. 管理人员不能方便的了解每种物品的状 ...
Vue + Element UI 表格分页记忆选中，分页切换页面打勾不丢失
方法一: 官方也有基于这种操作给出通过属性解决的方法: <el-table :row-key="rowKey"><el-table-column type=&qu ...
Vue + Element UI 表格分页记忆选中
官方基于这种操作给出通过属性解决的方法: :row-key:行数据的 Key ,用来优化 Table 的渲染:在使用 reserve-selection 功能与显示树形数据时,该属性是必填的.类型为 ...
【前端】Vue+Element UI案例：通用后台管理系统-用户管理：Table表格增删查改、Pagination分页、搜索框
文章目录目标代码 0.结构 1.按钮-删除 2.按钮-编辑 3.debug 4.样式 5.分页Pagination:功能 6.分页Pagination:样式 7.搜索框:功能 8.搜索框:样式总 ...
Maynor手把手教你完成一个SpringBoot+Vue+Element实现的SPA商品管理系统(增删改查)
Maynor手把手教你完成一个SpringBoot+Vue+Element实现的SPA商品管理系统(增删改查) 前言完整代码三连后私信我获取~ 撸了一上午完成的SPA商品管理系统,求三连! B站演 ...
基于vue(element ui) + ssm + shiro 的权限框架
zhcc 基于vue(element ui) + ssm + shiro 的权限框架引言心声现在的Java世界,各种资源很丰富,不得不说,从分布式,服务化,orm,再到前端控制,权限等等玲琅满目 ...
【前端】Vue+Element UI案例：通用后台管理系统-用户管理：Form表单填写、Dialog对话框弹出
文章目录目标代码 0.页面结构 1.新增按钮和弹出表单:结构 2.新增按钮和弹出表单:点击新增弹出表单 3.表单样式 4.表单验证 5.表单的提交和取消功能:接口.mock相关准备 6.表单的提交 ...
【前端】Vue+Element UI案例：通用后台管理系统-登陆不同用户显示不同菜单、动态添加路由
文章目录目标代码 0.动态地显示菜单:store 1.动态注册路由 2.解决刷新后摆平问题总代码本篇修改的代码文件 tab.js 参考视频: VUE项目,VUE项目实战,vue后台管理系统,前 ...
【前端】Vue+Element UI案例：通用后台管理系统-代码总结（已开源）
文章目录前言项目文件目录 api mockServe home.js permission.js index.js mock.js user.js assert components Common ...
vue + element ui 的后台管理系统框架_从零开始搭建 VUE + Element UI后台管理系统框架...
点击右上方红色按钮关注"web秀",让你真正秀起来前言后台管理系统前端框架,现在很流行的形式都是,上方和左侧都是导航菜单,中间是具体的内容.比如阿里云.七牛云.头条号.百家号等 ...

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

后端代码

页面展示

mybatis-plus+springboot+vue+element-ui实现分页相关推荐

最新文章

热门文章