526互联

springboot+VUE——mybatis分页和Element Plus的分页组件实践

发布时间 2023-12-13 14:37:00作者: Morning枫

分页只有基础的分页功能，跳转和动态选择每页展示多少条数据的功能可以参考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;
}