pagehelper的使用
pagehelper的使用
后端
依赖
<dependency>
<groupId>com.github.pagehelper</groupId>
<artifactId>pagehelper-spring-boot-starter</artifactId>
<version>1.2.13</version>
</dependency>
配置
pagehelper:
helperDialect: mysql
reasonable: true
supportMethodsArguments: true
pageSizeZero: false
控制层
@GetMapping("/reports/{page}/{size}")
public PageInfo queryReportList(@PathVariable("page") int page, @PathVariable("size") int size) {
PageHelper.startPage(page, size);
PageInfo info = new PageInfo<>(reportService.queryReportList());
return info;
}
前端
分页@current-change="page"
currentPage改变时会触发
<el-pagination
background
layout="prev, pager, next"
:page-size="pageSize"
:total="total"
@current-change="page">
</el-pagination>
通过axios接收后端的数据this.$axios.get().then()
<script>
export default {
methods: {
page (currentPage) {
const _this = this
this.$axios.get('http://localhost:8081/reports/' + currentPage + '/2').then(function (resp) {
_this.tableData = resp.data.list
})
}
},
data () {
return {
tableData: [],
pageSize: 0,//初始值,避免报错
total: 0//初始值,避免报错
}
},
created () {
const _this = this
this.$axios.get('http://localhost:8081/reports/1/2').then(function (resp) {
_this.tableData = resp.data.list
_this.pageSize = resp.data.pageSize
_this.total = resp.data.total
})
}
}
</script>
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· .NET Core 托管堆内存泄露/CPU异常的常见思路
· PostgreSQL 和 SQL Server 在统计信息维护中的关键差异
· C++代码改造为UTF-8编码问题的总结
· DeepSeek 解答了困扰我五年的技术问题
· 为什么说在企业级应用开发中,后端往往是效率杀手?
· 清华大学推出第四讲使用 DeepSeek + DeepResearch 让科研像聊天一样简单!
· 推荐几款开源且免费的 .NET MAUI 组件库
· 实操Deepseek接入个人知识库
· 易语言 —— 开山篇
· Trae初体验