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>
1
2
3
4
5

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;
}
1
2
3
4
5
6
7
8
9
10
11
12
13

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;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

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;
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

二、后端使用

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

1.sql语句

根据用户名查询MeshPosition信息

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

2.mapper接口

根据用户名查询MeshPosition信息

List<MeshPosition> findMeshPositionListByPage(String username);
1

3.controller

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

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

    }
1
2
3
4
5
6

4.Service

public PageResult MeshPositionListByPage(HttpSession session, PageRequest pageRequest);
1

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);
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

三、前端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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

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();
1
2
3
4
5
6
7
8
9
10

打印前端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>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178

---