vue结合pagehelper实现分页

Vue 结合 PageHelper 实现分页

在 Vue 前端框架中结合后端 PageHelper 分页插件实现分页功能，通常需要前后端协作完成。以下是具体实现步骤：

后端实现（Spring Boot + PageHelper）

在 Spring Boot 项目中配置 PageHelper 并实现分页接口：

1. 添加 PageHelper 依赖到 pom.xml：

   <dependency>
    <groupId>com.github.pagehelper</groupId>
    <artifactId>pagehelper-spring-boot-starter</artifactId>
    <version>最新版本</version>
   </dependency>

2. 创建分页查询接口：

   @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 调用分页接口并处理分页数据：

1. 安装 Axios：

   npm install axios

2. 创建分页组件：

   
   <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>

import axios from 'axios';

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(); } } }

```

关键点说明

1. PageHelper 在后端会自动拦截 MyBatis 查询，添加 LIMIT 子句实现物理分页

2. PageInfo 对象包含分页信息：

• list：当前页数据列表
• total：总记录数
• pageNum：当前页码
• pageSize：每页大小
• pages：总页数

1. 前端分页组件（如 Element UI 的 el-pagination）通过 current-change 和 size-change 事件触发数据重新加载

2. 前后端分页参数保持一致：

• pageNum 对应 currentPage
• pageSize 对应每页显示条数

优化建议

1. 后端可以封装统一的分页响应对象，包含数据列表和分页信息

2. 前端可以添加加载状态提示，提升用户体验

3. 对于大数据量可以考虑添加滚动加载功能

4. 分页参数可以存储在 Vuex 中实现跨组件共享