第一步：导入pom依赖

<!--配置PageHelper分页插件--><dependency><groupId>com.github.pagehelper</groupId><artifactId>pagehelper-spring-boot-starter</artifactId><version>1.4.6</version><exclusions><exclusion><groupId>org.mybatis</groupId><artifactId>mybatis</artifactId></exclusion></exclusions></dependency>

第二步：mapper层方法

List<User> selectAllUser();

第三步：xml中写SQL

<!--查询用户列表--><select id="selectAllUser" resultType="com.example.deepseek.account.pojo.entity.User">SELECT *FROM usersORDER BY id DESC</select>

 注意：一定要加上排序，否则分页的时候数据可能会随机改变，例如：数据出现两页的情况，数据不能完全展示。

第四步：service层方法

PageInfo<UserDto> getUserList(Integer pageNum, Integer pageSize);

第五步：impl中的方法

@Overridepublic PageInfo<UserDto> getUserList(Integer pageNum, Integer pageSize) {//1.开启分页PageHelper.startPage(pageNum, pageSize);//2.查询用户列表List<User> users = userMapper.selectAllUser();//3. 获取原始分页信息PageInfo<User> userPageInfo = new PageInfo<>(users);//4.转化Entity为Dto列表List<UserDto> userDtos = users.stream().map(user -> new UserDto(user.getId(),user.getName(),user.getEmail(),user.getRole(),user.getPhone(),user.getAvatar(),user.getCreateTime(),user.getUpdateTime())).collect(Collectors.toList());// 5. 创建新PageInfo，复制分页原数据PageInfo<UserDto> dtoPageInfo = new PageInfo<>();dtoPageInfo.setPageNum(userPageInfo.getPageNum());dtoPageInfo.setPageSize(userPageInfo.getPageSize());dtoPageInfo.setTotal(userPageInfo.getTotal());dtoPageInfo.setPages(userPageInfo.getPages());dtoPageInfo.setList(userDtos);  // 设置转换后的数据return dtoPageInfo;}

 注意：如果系统中的pojo类是严格按照 Dto、Entity、VO 写的，这里将 Entity 转化为 Dto 的时候要先获取原始分页信息，然后转化对象，最后再创建新的 PageInfo ，保存分页的原始数据，防止后面分页的时候出现错误。如果没有先获取原始分页数据，而是直接使用 PageInfo.of 将转换后的List<UserDto> 返回，会导致分页的时候 PageInfo.of(userDtos) 检测到传入的是普通集合（非 Page 类型），​​强制重置分页信息​​（pageNum=1, pageSize=集合大小）

PageInfo 源码中，若传入的 List 不是 Page 类型，会默认：

this.pageNum = 1;  // 固定为第一页
this.pageSize = list.size();  // 每页大小=集合总长度
this.total = list.size();     // 总记录数=集合总长度

第六步：controller层方法

/*** 获取用户列表接口*/@RequestMapping("/getUserList")public JsonResult getUserList(@RequestParam(defaultValue = "1") Integer pageNum, @RequestParam(defaultValue = "5") Integer pageSize) {PageInfo<UserDto> pageInfo = userService.getUserList(pageNum, pageSize);return JsonResult.success(pageInfo);}

第七步：vue3前端写分页组件

1、和平常的列表查询一样，先写出用户列表。

<div>
<el-table-column prop="id" label="ID" width="80"/><el-table-column label="头像" width="100"><template #default="scope"><el-avatar :size="50" :src="getAvatarUrl(scope.row.avatar)"/></template></el-table-column><el-table-column prop="name" label="用户名"/><el-table-column prop="role" label="角色"/><el-table-column prop="email" label="邮箱"/><el-table-column prop="phone" label="联系方式"/><el-table-column prop="createTime" label="创建时间"/><el-table-column prop="updateTime" label="更新时间"/><el-table-column label="操作"><template #default="scope"><el-button size="small" @click="handleEdit(scope.row)">编辑</el-button><el-button size="small" type="danger" @click="handleDelete(scope.row)">删除<el-button></template></el-table-column></el-table>
</div>

2、然后添加分页查询组件

<div class="pagination-wrapper"><el-paginationbackground@size-change="handleSizeChange"@current-change="handleCurrentChange":current-page="currentPage":page-sizes="[5, 10, 20, 50]":page-size="pageSize"layout="total, sizes, prev, pager, next, jumper":total="total"/>
</div>

第八步：写前端方法

// 分页相关变量
const currentPage = ref(1)
const pageSize = ref(5)
const total = ref(0)// 获取用户列表数据
const fetchUserList = async () => {try {loading.value = trueawait request.get(`/api/user/getUserList`, {params: {pageNum: currentPage.value,pageSize: pageSize.value}}).then(response => {if (response.code === 200 || response.code === "200") {userList.value = response.data.list;total.value = response.data.total;} else {throw new Error(`返回数据格式错误: ${response.data?.message || '未知错误'}`)}})} catch (error) {console.error('获取用户数据失败:', error)ElMessage.error(`数据加载失败: ${error.message}`)} finally {loading.value = false}
}// 每页条数改变事件
const handleSizeChange = (newSize) => {pageSize.value = newSizecurrentPage.value = 1fetchUserList()
}// 当前页码改变事件
const handleCurrentChange = (newPage) => {currentPage.value = newPagefetchUserList()
}// 操作后数据刷新逻辑
const refreshAfterOperation = () => {if (userList.value.length === 0 && currentPage.value > 1) {currentPage.value -= 1}fetchUserList()
}