金堂网站建设,专业中山建网站公司,刚刚大连发布紧急通知,浙江二建建设集团有限公司网站系列文章
【Springboot】基于注解式开发Springboot-Vue3整合Mybatis-plus实现分页查询—后端实现 文章目录 系列文章系统版本实现功能实现思路后端传入的数据格式前端el-table封装axois接口引入Element-plus的el-pagination分页组件Axois 获取后台数据 系统版本
后端#xf…系列文章
【Springboot】基于注解式开发Springboot-Vue3整合Mybatis-plus实现分页查询—后端实现 文章目录 系列文章系统版本实现功能实现思路后端传入的数据格式前端el-table封装axois接口引入Element-plus的el-pagination分页组件Axois 获取后台数据 系统版本
后端 Springboot 2.7、 Mybatis-plus 数据库MySQL 8.0 前端Vue3、Axois 1.6.0 、Vite 4.5.0、Element-Plus、Router-v4
实现功能
上文文主要从后端借助Mybatis-plus提供的方法实现分页功能。url中需要传入当前页和每页显示多少条数据。本文将结合Element-plus的el-pagination组件调用后台数据实现分页效果。下面演示一个功能比如分页查询订单Orders记录。读者可以根据自己的实体类自行修改。
实现思路
先编写一个获取后台返回IPage类型的数据的axois获取到数据后用户在前端进行选择每页选择多少页或者选择具体的页数的时候重新触发获取数据的api.
后端传入的数据格式
后端传回来的数据实际上长这样当前页总页数每页展示多少数据其实都有前台只需要拿到这些参数值即可
前端el-table el-table :dataorderlist.data stylewidth: 90%el-table-column sortable proporderId label订单编号 width200 /el-table-column sortable propcheckIn label入住时间 width200 /el-table-column sortable propcheckOut label离房时间 width200 /el-table-column propclientName label姓名 width100 /el-table-column propclientSex label性别 width100 /el-table-column propclientCard label身份证号 width200 /el-table-column propclientPhone label联系方式 width150 /el-table-column label房型 proproomType width200 /el-table-column prop label操作 width120template #defaultel-button link typeprimary sizesmall clickhandleClick详情/el-buttonel-button link typeprimary sizesmall编辑/el-button/template/el-table-column/el-table封装axois接口
在项目src目录下另建一个文件夹/request里面创建api.js内容是创建axois实例简单封装axois.
import axios from axios;
const api axios.create({ baseURL: http://localhost:8081, timeout: 10000 ,headers:{Content-Type:application/json;charsetUTF-8}
});引入Element-plus的el-pagination分页组件
官网Element-plus-elpagination
下面的currentPagetotalPage,pageSize 都是接收后端IPage类型的返回数据字段。
total参数用来显示一共有多少条数据。:page-sizes由数组构成里面的可选值代表每页可以选择多少条数据。current-page代表当前选中的页面页码page-size用来获取后端传来的页面数量。
通过ref 使用 reactive 来实现响应式获取到后台数据后这些字段的数据将会被后端传入数据覆盖掉获得真正的页面大小当前页等参数。
const currentPage ref(1);
const pageSize ref(5);
const totalPage ref(20);我们要定义方法handleSizeChanged 和方法 handleCurrentChange当用户点击切换页码或切换每页展示的数据时能够做出响应。我这里设计的方法是用户执行上述操作时通过方法返回用户具体切换成第几页或者选择数据每页多少条然后存入orderlist中用其内部字段来接收。 el-paginationv-model:current-pagecurrentPagev-model:page-sizepageSize:page-sizes[2, 4, 5, 8, 10]layouttotal, sizes, prev, pager, next, jumper:totaltotalPagesize-changehandleSizeChangecurrent-changehandleCurrentChange/我们通过orderlist方法将后台传来的总页数、当前页、每页展示多少条数据存储起来
const currentPage ref(1);
const pageSize ref(5);
const totalPage ref(20);
// const pageSize ref(5);
let orderlist new reactive({//分页后的考试信息current: 1, //当前页total: null, //记录条数size: 5, //每页条数data: [],
});handleCurrentChange 和 handleSizeChanged 方法如下
const handleSizeChange (val) {orderlist.size val;console.log(调用页面大小监控函数传参如下);console.log(orderlist.current orderlist.current);console.log(orderlist.size orderlist.size);getdata();
};
const handleCurrentChange (val) {orderlist.current val;console.log(调用当前页面监控函数传参如下);console.log(orderlist.current orderlist.current);console.log(orderlist.size orderlist.size);getdata();
};Axois 获取后台数据
使用反单引号拼接请求url参数反单引号拼接参数用法如下 详见 Vue-Router编程式导航
// 我们可以手动建立 url但我们必须自己处理编码
router.push(/user/${username}) // - /user/eduardo
// 同样
router.push({ path: /user/${username} }) // - /user/eduardo本项目中编写获取axois方法:
const getdata () {api.get(/getpage/${orderlist.current}/${orderlist.size}).then(function (res) {if (res.status 200) {//更新数据的总页数totalPage.value res.data.total;console.log(总页数 totalPage.value);orderlist.data res.data.records;} else {ElMessage.error(数据请求失败!);console.log(res);}}).catch(function (e) {ElMessage.error(请求出错);console.log(e);});
};
getdata(); //调用数据初始化方法。说明Vue3生命周期中没有 created() 方法以前在Vue2中写在created()的初始化方法可以直接写在script setup 下。
