vue结合pagehelper实现分页
Vue 结合 PageHelper 实现分页
后端实现（Spring Boot + PageHelper）
在 pom.xml 中添加 PageHelper 依赖：
<dependency>
<groupId>com.github.pagehelper</groupId>
<artifactId>pagehelper-spring-boot-starter</artifactId>
<version>最新版本</version>
</dependency>在 application.yml 中配置 PageHelper：
pagehelper:
helperDialect: mysql
reasonable: true
supportMethodsArguments: true创建分页查询接口：
@RestController
@RequestMapping("/api/user")
public class UserController {
@Autowired
private UserService userService;
@GetMapping("/list")
public PageInfo<User> getUserList(@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）
安装 Axios：
npm install axios创建分页组件：
<template>
<div>
<table>
<tr v-for="item in tableData" :key="item.id">
<td>{{ item.name }}</td>
<td>{{ item.email }}</td>
</tr>
</table>
<div class="pagination">
<button @click="prevPage" :disabled="currentPage === 1">上一页</button>
<span>当前页: {{ currentPage }} / 总页数: {{ totalPage }}</span>
<button @click="nextPage" :disabled="currentPage === totalPage">下一页</button>
</div>
</div>
</template>
<script>
import axios from 'axios';
export default {
data() {
return {
tableData: [],
currentPage: 1,
pageSize: 10,
totalPage: 0
};
},
created() {
this.fetchData();
},
methods: {
fetchData() {
axios.get('/api/user/list', {
params: {
pageNum: this.currentPage,
pageSize: this.pageSize
}
}).then(response => {
this.tableData = response.data.list;
this.totalPage = response.data.pages;
});
},
prevPage() {
if (this.currentPage > 1) {
this.currentPage--;
this.fetchData();
}
},
nextPage() {
if (this.currentPage < this.totalPage) {
this.currentPage++;
this.fetchData();
}
}
}
};
</script>注意事项
PageHelper 的 startPage 方法必须紧跟在查询语句之前调用，否则分页会失效
Vue 前端需要处理分页参数和响应数据，确保与后端的分页参数一致
可以根据需求添加更多分页功能，如跳转到指定页码、调整每页显示数量等
对于大型数据集，建议在后端添加适当的索引优化查询性能
