第一步：導入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()
}