快速掌握PageHelper用法(含一个简单前后端应用例子)

1.PageHelper依赖

<dependency>
            <groupId>com.github.pagehelper</groupId>
            <artifactId>pagehelper-spring-boot-starter</artifactId>
            <version>1.2.5</version>
        </dependency>

2.springBoot的yml配置

pagehelper:
  helperDialect: mysql
  reasonable: true
  supportMethodsArguments: true
  params: count=countSql

3.解释PageHelper.startPage(pageNum,pageSize)

3.1 举个例子解释PageHelper.startPage(pageNum,pageSize)作用

PageHelper.startPage(3,2);
//startPage(3,2)将selectAllTest()结果按每页2条记录分页后,
//将第3页数据和分页信息传给list,此时list拥有第3页数据(即id=5,name='e')和一些分页信息
List<TestTable> list=testTableDao.selectAllTest();//selectAllTest即@Select("selec * from testtable")

注意，PageHelper.startPage下面必须跟着查询语句。

testtable表如下所示：

打印list结果

Page{count=true, pageNum=3, pageSize=2, startRow=4, endRow=6, total=5, pages=3, reasonable=true, pageSizeZero=false}[TestTable{id=5, name='e'}]

{count=true, pageNum=3, pageSize=2, startRow=4, endRow=6, total=5,
pages=3, reasonable=true, pageSizeZero=false}即分页信息

TestTable{id=5, name=‘e’}即页面数据

同理，若想要获取第2页信息则通过

PageHelper.startPage(2,2);
List<TestTable> list=testTableDao.selectAllTest();

此时bookList就是第2页以及分页信息

4. 一个简单的前后端例子

思路：每次页码改变时都使用PageHelper.startPage+testTableDao.selectAllTest()申请当前页的数据

后端

@RestController
@RequestMapping("/Test")
public class TestController {

    @Autowired
    TestTableDao testTableDao;

    @GetMapping("/{pageNum}/{pageSize}")
    public List<TestTable> testPageHelper(@PathVariable Integer pageNum,
                                          @PathVariable Integer pageSize){
        PageHelper.startPage(pageNum,pageSize);
        //selectAllTest即@Selec(select * from testtable)
        List<TestTable> list=testTableDao.selectAllTest();
        return list;
    }

前端(使用element-plus)

<template>
 <el-table 
 :data="tableData" 
 style="width: 100%"
 v-if="isShow"
 >
    <el-table-column prop="id" label="Id" width="180" />
    <el-table-column prop="name" label="Name" width="180" />
  </el-table>
    <el-pagination 
    layout="prev, pager, next" 
    :page-count="3"
    v-model:current-page="currentPage"
    @current-change="handleCurrentChange"    当页码改变时触发handleCurrentChange函数
    />
  
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue"
import axios from "axios"

let tableData=ref('')
let isShow=ref(false)
let currentPage=ref(1) //初始显示第一页

//初始显示第一页的数据
onMounted(()=>{
  axios.get('http://localhost:2222/Test/1/2').then(res=>{
    tableData=res.data
    isShow.value=true
  })
})

async function handleCurrentChange(){
  await axios.get('http://localhost:2222/Test/'+currentPage.value+'/2').then(res=>{
    isShow.value=false
    tableData=res.data
    isShow.value=true
  })
}

</script> 

页码=1时的console.log(res.data)结果如图：

虽然上述方法解决了分页问题，但在实际开发时，我们可能需要总页数等一些分页信息，而上述方法只能获得页面数据，下面解决前端如何获得(分页信息+数据)，这个问题很好解决，只需在后端代码上加一句就行。

5.前端获得分页信息+数据

此时后端代码如下：

@RestController
@RequestMapping("/Test")
public class TestController {

    @Autowired
    TestTableDao testTableDao;

    @GetMapping("/{pageNum}/{pageSize}")
    public PageInfo testPageHelper(@PathVariable Integer pageNum,
                                   @PathVariable Integer pageSize){
        PageHelper.startPage(pageNum,pageSize);
        List<TestTable> list=testTableDao.selectAllTest();
        PageInfo pageInfo=new PageInfo<>(list); //使用PageInfo
        //pageinfo.getList()可获得上面的list
        //pageinfo.getPages()可获得总页数
        return pageInfo;
    }
}

此时前端改变的地方如下：

async function handleCurrentChange(){
  await axios.get('http://localhost:2222/Test/'+currentPage.value+'/2').then(res=>{
    isShow.value=false
    tableData=res.data.list //注意此处改变了，不再是res.data,原因见下图
    isShow.value=true
  })
}
</script>

页码=2时的console.log(res.data)：

由console.log(res.data)可知，此时res.data.pages就是总页数，res.data.list就是页码=2时的数据，res.data.pageNum即当前页码

6.结果展示如图

页码=1时结果如图：

页码=2时结果如图：

页码=3时结果如图：