springboot中利用pagehelper结合mybatis实现分页查询（在vue利用element-plus控件展现）

提示：文章参考。

---

前言

本篇主要介绍。

---

一、pagehelper基础配置

1.添加依赖

pom.xml文件中添加pagehelper依赖

		<dependency>
            <groupId>com.github.pagehelper</groupId>
            <artifactId>pagehelper-spring-boot-starter</artifactId>
            <version>1.2.5</version>
        </dependency>

2.分页实体类

2.1 PageRequest.java

接收当前页码和每页数量的请求

import lombok.Data;
import org.springframework.stereotype.Component;

//标注一个类为Spring容器的Bean，（把普通pojo实例化到spring容器中，相当于配置文件中的<bean id="" class=""/>）
@Component
//导入lombok包，加入注解@Data，无需添加get()、set()、toString()方法
@Data
public class PageRequest {
    /**当前页码*/
    private int pageNum;
    /**每页数量*/
    private int pageSize;
}

2.2 PageResult.java

得到分页结果

import lombok.Data;
import org.springframework.stereotype.Component;
import java.util.List;

//标注一个类为Spring容器的Bean，（把普通pojo实例化到spring容器中，相当于配置文件中的<bean id="" class=""/>）
@Component
//导入lombok包，加入注解@Data，无需添加get()、set()、toString()方法
@Data
public class PageResult {
    /** 当前页码 */
    private int pageNum;
    /** 每页数量 */
    private int pageSize;
    /** 记录总数 */
    private long totalSize;
    /** 页码总数 */
    private int totalPages;
    /** 数据模型*/
    private List<?> content;
}

3.分页工具类PageUtils.java

工具类目录util下新建PageUtils.java

import com.fk.digitaltwin.pojo.PageResult;
import com.github.pagehelper.PageInfo;

public class PageUtils {
    /**
     * 将分页信息封装到统一的接口
     * @param pageInfo
     * @return
     */
    public static PageResult getPageResult(PageInfo<?> pageInfo) {
        PageResult pageResult = new PageResult();
        pageResult.setPageNum(pageInfo.getPageNum());
        pageResult.setPageSize(pageInfo.getPageSize());
        pageResult.setTotalSize(pageInfo.getTotal());
        pageResult.setTotalPages(pageInfo.getPages());
        pageResult.setContent(pageInfo.getList());
        return pageResult;
    }
}

二、后端使用

查询的实体类：MeshPosition
查询的表名：MeshPosition

1.sql语句

根据用户名查询MeshPosition信息

<select id="findMeshPositionListByPage" resultType="MeshPosition" parameterType="String">
        select * from MeshPosition where username = #{username}
    </select>

2.mapper接口

根据用户名查询MeshPosition信息

List<MeshPosition> findMeshPositionListByPage(String username);

3.controller

接收前端的pageQuery参数，包含当前页码和每页数量。

@RequestMapping(value = "/routeByPage", method = RequestMethod.POST)
    @ResponseBody
    public PageResult routeByPage(HttpSession session, @RequestBody PageRequest pageQuery){
        return manyouService.MeshPositionListByPage(session, pageQuery);

    }

4.Service

public PageResult MeshPositionListByPage(HttpSession session, PageRequest pageRequest);

5.ServiceImpl

实现分页，传给前端分页结果。

@Override
    public PageResult MeshPositionListByPage(HttpSession session, PageRequest pageRequest) {
        return PageUtils.getPageResult(getPageInfo(session,pageRequest));
    }
    /**
     * 调用分页插件完成分页
     * @param pageRequest
     * @return
     */
    private PageInfo<MeshPosition> getPageInfo(HttpSession session,PageRequest pageRequest) {
        int pageNum = pageRequest.getPageNum();
        int pageSize = pageRequest.getPageSize();
        PageHelper.startPage(pageNum, pageSize);
        List<MeshPosition> sysMenus = manyouMapper.findMeshPositionListByPage((String) session.getAttribute("username"));
        return new PageInfo<MeshPosition>(sysMenus);
    }

三、前端vue利用axios传参和接收分页结果，利用element-plus控件展现

1.前端数据格式的基础设置

前端数据格式的基础设置

<script setup lang="ts" name="basetable">
import { ref, reactive } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { Delete, Edit, Search, Plus } from '@element-plus/icons-vue';
import { routeData } from '../api/index';

// 表格里展现的数据格式
interface TableItem {
  mid: number;
  meshPositionX: void;
  meshPositionY: void;
  meshPositionZ: void;
  username: string;

}
// 设置分页信息的初始值（当前页码、每页数量）
let query = reactive({
	pageIndex: 1,
	pageSize: 10
});
// 设置数据初始值
let tableData = ref<TableItem[]>([]);
let pageTotal = ref(0);
</script>

2.axios传参和接收分页结果

axios传参和接收分页结果，data里的数据为传到后端参数。

let data = {pageNum: query.pageIndex, pageSize: query.pageSize};
let getData = () => {
  data = {pageNum: query.pageIndex, pageSize: query.pageSize};
  routeData(data).then(res => {
    console.log("分页信息:",res.data);
    tableData.value = res.data.content;
    pageTotal.value = res.data.totalSize || 50;
  });
};
getData();

打印前端res.data为接收的分页信息。

3.完整的.vue文件参考（仅实现分页展示功能。编辑、删除等功能没有实现）

<template>
	<div>
		<div class="container">
			<div class="handle-box">
				<el-select v-model="query.mid" placeholder="地址" class="handle-select mr10">
					<el-option key="1" label="广东省" value="广东省"></el-option>
					<el-option key="2" label="湖南省" value="湖南省"></el-option>
				</el-select>
				<el-input v-model="query.username" placeholder="用户名" class="handle-input mr10"></el-input>
				<el-button type="primary" :icon="Search" @click="handleSearch">搜索</el-button>
				<el-button type="primary" :icon="Plus">新增</el-button>
			</div>

			<el-table :data="tableData" border class="table" ref="multipleTable" header-cell-class-name="table-header">
				<el-table-column prop="mid" label="ID" width="55" align="center"></el-table-column>
				<el-table-column prop="username" label="用户名"></el-table-column>
        <el-table-column prop="meshPositionX" label="meshPositionX"></el-table-column>
        <el-table-column prop="meshPositionY" label="meshPositionY"></el-table-column>
        <el-table-column prop="meshPositionZ" label="meshPositionZ"></el-table-column>
				<el-table-column prop="meshRotationX" label="meshRotationX"></el-table-column>
        <el-table-column prop="meshRotationY" label="meshRotationY"></el-table-column>
        <el-table-column prop="meshRotationZ" label="meshRotationZ"></el-table-column>
				<el-table-column label="操作" width="220" align="center">
					<template #default="scope">
						<el-button text :icon="Edit" @click="handleEdit(scope.$index, scope.row)" v-permiss="15">
							编辑
						</el-button>
						<el-button text :icon="Delete" class="red" @click="handleDelete(scope.$index)" v-permiss="16">
							删除
						</el-button>
					</template>
				</el-table-column>
			</el-table>
			<div class="pagination">
				<el-pagination
					background
					layout="total, prev, pager, next"
					:current-page="query.pageIndex"
					:page-size="query.pageSize"
					:total="pageTotal"
					@current-change="handlePageChange"
				></el-pagination>
			</div>
		</div>

		<!-- 编辑弹出框 -->
		<el-dialog title="编辑" v-model="editVisible" width="30%">
			<el-form label-width="70px">
				<el-form-item label="ID">
					<el-input v-model="form.mid"></el-input>
				</el-form-item>
				<el-form-item label="username">
					<el-input v-model="form.username"></el-input>
				</el-form-item>
			</el-form>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="editVisible = false">取 消</el-button>
					<el-button type="primary" @click="saveEdit">确 定</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

<script setup lang="ts" name="basetable">
import { ref, reactive } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { Delete, Edit, Search, Plus } from '@element-plus/icons-vue';
import { routeData } from '../api/index';

interface TableItem {
	mid: number;
  meshPositionX: void;
  meshPositionY: void;
  meshPositionZ: void;
  meshRotationX: void;
  meshRotationY: void;
  meshRotationZ: void;
  username: string;

}

let query = reactive({
	username: '',
	pageIndex: 1,
	pageSize: 10
});
let tableData = ref<TableItem[]>([]);
let pageTotal = ref(0);
// 获取轨迹数据
let data = {pageNum: query.pageIndex, pageSize: query.pageSize};
let getData = () => {
  data = {pageNum: query.pageIndex, pageSize: query.pageSize};
  routeData(data).then(res => {
    console.log("轨迹分页信息:",res.data);
    tableData.value = res.data.content;
    pageTotal.value = res.data.totalSize || 50;
  });
};
getData();

// 查询操作
const handleSearch = () => {
	query.pageIndex = 1;
	getData();
};
// 分页导航
const handlePageChange = (val: number) => {
	query.pageIndex = val;
  console.log("query.pageIndex:",query.pageIndex);
	getData();
};

// 删除操作
const handleDelete = (index: number) => {
	// 二次确认删除
	ElMessageBox.confirm('确定要删除吗？', '提示', {
		type: 'warning'
	})
		.then(() => {
			ElMessage.success('删除成功');
			tableData.value.splice(index, 1);
		})
		.catch(() => {});
};

// 表格编辑时弹窗和保存
const editVisible = ref(false);
let form = reactive({
	username: '',
	mid: ''
});
let idx: number = -1;
const handleEdit = (index: number, row: any) => {
	idx = index;
	form.username = row.username;
	form.mid = row.mid;
	editVisible.value = true;
};
const saveEdit = () => {
	editVisible.value = false;
	ElMessage.success(`修改第 ${idx + 1} 行成功`);
	tableData.value[idx].username = form.username;
	tableData.value[idx].mid = form.mid;
};
</script>

<style scoped>
.handle-box {
	margin-bottom: 20px;
}

.handle-select {
	width: 120px;
}

.handle-input {
	width: 300px;
}
.table {
	width: 100%;
	font-size: 14px;
}
.red {
	color: #ff0000;
}
.mr10 {
	margin-right: 10px;
}
.table-td-thumb {
	display: block;
	margin: auto;
	width: 40px;
	height: 40px;
}
</style>

---