springboot+VUE——mybatis分页和Element Plus的分页组件实践
分页只有基础的分页功能，跳转和动态选择每页展示多少条数据的功能可以参考Element Plus的分页组件自行配置并且传入相应的方法即可！
<script lang="ts" setup>
/**
* 分页变量数据
*/
const pagination = ref({
current_page: 1, // 当前页码，此处默认为第一页
total_data: 0, // 总数据量（不是总页数），此处默认为0条数据
row_page: 20, // 每页展示多少条数据，此处为每页展示20条数据
data: [], // 存储的展示数据条数，由row_page决定至多有多少条数据，例如此处row_page定义了20，那么data最多有20条数据
})
/**
* 异步请求接口获取数据
*/
const inquire = async () => {
// 提供两种方法，自行挑选一种即可，区别在于后端处理数据还是前端处理数据
// ---- 方法1，后端处理数据，即把查询到的Page类在后端取出相关的值，重新封装返回
// ---- 返回的res格式长这样：
// ----
{
status: 200,
data: {
current_page: 1, // 后端返回的是均是long类型，返回的时候会被转成string字符串形式，需要手动转类型
total_data: 400,
row_page: 20,
data: [{..},{..},{..},....],
}
}
// ---- 请求
await api.get('data/inquire')
.then((res: any) => {
// 用Number把字符串类型转为数字类型
pagination.value.current_page = Number(res.data.current_page)
pagination.value.total_data = Number(res.data.total_data)
pagination.value.row_page = Number(res.data.row_page)
pagination.value.data = res.data.data
})
// ------------------------------------------------------------
// ---- 方法2，前端处理数据，后端直接返回查询到的Page类，交由前端处理
// ---- 返回的res格式如下，Page类的源码在下面有链接可以去看：
// ----
{
status: 200,
data: Page类,
}
await api.get('data/inquire')
.then((res: any) => {
pagination.value.current_page = res.data.getCurrent()
pagination.value.total_data = res.data.getTotal()
pagination.value.row_page = res.data.getSize()
pagination.value.data = res.data.getRecords()
})
}
/**
* 前翻一页方法
*/
const handlePrevClick = () => {
inquire()
}
/**
* 后翻一页方法
*/
const handleNextClick = () => {
inquire()
}
/**
* 前翻五页方法
*/
const handlePrevClick5 = (value: number) => {
pagination.value.current_page = value
inquire()
}
/**
* 后翻五页方法
*/
const handleNextClick5 = (value: number) => {
pagination.value.current_page = value
inquire()
}
/**
* 当前页改变方法
*/
const handleCurrentChangeClick = (value: number) => {
pagination.value.current_page = value
inquire()
}
onMounted(inquireRanks)
</script>
<template>
<div>
<!-- el-pagination属性请自行去官方文档看 -->
<el-pagination
v-model:current-page="pagination.current_page"
v-model:page-size="pagination.row_page"
hide-on-single-page
layout="prev, pager, next"
:total="pagination.total_data"
:pager-count="7"
@prev-click="handlePrevClick"
@next-click="handleNextClick"
@prev-5="handlePrevClick5"
@next-5="handleNextClick5"
@current-change="handleCurrentChangeClick"
/>
</div>
</template>
Element-Plus分页组件文档：(Pagination 分页 | Element Plus (gitee.io))
Mybatis的Page类源码：(mybatis-plus-extension/src/main/java/com/baomidou/mybatisplus/extension/plugins/pagination/Page.java · baomidou/mybatis-plus - Gitee.com)
配置Mybatics：
// Config中新建一个MybaticsConfig.java类，写入以下内容
@Configuration
public class MyBatisConfig {
/**
* 插件配置（此处配置了乐观锁和分页插件）
*
* @return 配置
*/
@Bean
public MybatisPlusInterceptor mybatisPlusInterceptor() {
MybatisPlusInterceptor interceptor = new MybatisPlusInterceptor();
interceptor.addInnerInterceptor(new PaginationInnerInterceptor(DbType.MYSQL)); //分页插件
return interceptor;
}
}
查询并返回：
// 假设我们有一个User类，我们可以通过下面的方法查询并且返回
// 通用返回类
@Data
public static class Result {
private Integer status;
private Object data;
}
// 方法一的返回类
@Data
public static class Pagination {
private Long current_page;
private Long total_data;
private Long row_page;
private Object data;
}
public Result inquire(Long current_page) {
current_page = (current_page == null || current_page <=0) ? 1 : current_page;
Page<User> pageData = new Page<>(current_page, 20); // current_page为当前页，20是每页展示的数据条目
Page<User> rankPageData = rankMapper.selectPage(pageData, null);
// 方法一返回
Pagination pagination = new Pagination<>();
pagination.setCurrent_page(rankPageData.getCurrent());
pagination.setTotal_data(rankPageData.getTotal());
pagination.setRow_page(rankPageData.getSize());
pagination.setData(rankPageData.getRecords());
Result result = new Result<>();
result.setStatus(200);
result.setData(pagination);
return result;
// 方法二返回
Result result = new Result<>();
result.setStatus(200);
result.setData(rankPageData);
return result;
}
