vue结合pagehelper实现分页
Vue 结合 PageHelper 实现分页
在 Vue 前端框架中结合后端 PageHelper 分页插件实现分页功能，通常需要前后端协作完成。以下是具体实现步骤：
后端实现（Spring Boot + PageHelper）
在 Spring Boot 项目中配置 PageHelper 并实现分页接口：
-
添加 PageHelper 依赖到
pom.xml：<dependency> <groupId>com.github.pagehelper</groupId> <artifactId>pagehelper-spring-boot-starter</artifactId> <version>最新版本</version> </dependency> -
创建分页查询接口：
@GetMapping("/users") public PageInfo<User> getUsers(@RequestParam(defaultValue = "1") int pageNum, @RequestParam(defaultValue = "10") int pageSize) { PageHelper.startPage(pageNum, pageSize); List<User> users = userService.getAllUsers(); return new PageInfo<>(users); }
前端实现（Vue + Axios）
在 Vue 项目中通过 Axios 调用分页接口并处理分页数据：
-
安装 Axios：
npm install axios -
创建分页组件：
<template> <div> <table> <tr v-for="item in tableData" :key="item.id"> <td>{{ item.name }}</td> <!-- 其他字段 --> </tr> </table> <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[10, 20, 30, 50]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total"> </el-pagination> </div> </template>
export default { data() { return { tableData: [], currentPage: 1, pageSize: 10, total: 0 } }, created() { this.fetchData(); }, methods: { fetchData() { axios.get('/api/users', { params: { pageNum: this.currentPage, pageSize: this.pageSize } }).then(response => { this.tableData = response.data.list; this.total = response.data.total; }); }, handleSizeChange(val) { this.pageSize = val; this.fetchData(); }, handleCurrentChange(val) { this.currentPage = val; this.fetchData(); } } }
```关键点说明
-
PageHelper 在后端会自动拦截 MyBatis 查询，添加 LIMIT 子句实现物理分页
-
PageInfo 对象包含分页信息：
- list：当前页数据列表
- total：总记录数
- pageNum：当前页码
- pageSize：每页大小
- pages：总页数
-
前端分页组件（如 Element UI 的 el-pagination）通过 current-change 和 size-change 事件触发数据重新加载
-
前后端分页参数保持一致：
- pageNum 对应 currentPage
- pageSize 对应每页显示条数
优化建议
-
后端可以封装统一的分页响应对象，包含数据列表和分页信息
-
前端可以添加加载状态提示，提升用户体验
-
对于大数据量可以考虑添加滚动加载功能
-
分页参数可以存储在 Vuex 中实现跨组件共享
