分页查询

后端

创建一个分页接口，分页的关键数据有三个：

1. 页码（Page Number）：表示用户希望获取的页数。通常从第一页开始递增，用户可以选择跳转到不同的页码以获取不同的数据集。
2. 每页数据数量（Page Size）：表示每一页包含的数据记录数量。用户可以设置每页显示多少条数据，这个值通常由用户自行选择或者由应用程序默认设定。
3. 总记录数（Total Records）：表示整个数据集中的总数据记录数量。这个值通常用于计算总共有多少页数据可供分页使用。

接着定义入参和出参格式：

• 入参

{
  "current": 1, // 要查询的页码
  "size": 10, // 每页要展示的数据量
  "name": "", // 分类名称
  "startDate": "", // 起始创建时间
  "endDate": "", // 结束创建时间
}

• 出参

{
  "success": true,
  "message": null,
  "errorCode": null,
  "data": [
    {
      "name": "测试分类",
      "createTime": "2023-09-18 12:02:31"
    },
    {
      "name": "test",
      "createTime": "2023-09-18 11:48:58"
    },
    {
      "name": "Postman",
      "createTime": "2023-09-07 11:06:01"
    },
    {
      "name": "Java",
      "createTime": "2023-09-07 11:05:53"
    }
  ],
  "total": 4, // 总记录数
  "size": 10, // 每页展示的记录数
  "current": 1, // 当前页码
  "pages": 1 // 总共多少页
}

接着创建对应出入参VO：

编写对应的Service接口来实现接受请求封装PageRspVO返回。

JPA实现：JPA分页查询

前端

获取到分页返回数据后的格式大概为：

{
  "success": true,
  "message": null,
  "errorCode": null,
  "data": [
    {
      "name": "测试分类",
      "createTime": "2023-09-18 12:02:31"
    },
    {
      "name": "test",
      "createTime": "2023-09-18 11:48:58"
    },
    {
      "name": "Postman",
      "createTime": "2023-09-07 11:06:01"
    },
    {
      "name": "Java",
      "createTime": "2023-09-07 11:05:53"
    }
  ],
  "total": 4, // 总记录数
  "size": 10, // 每页展示的记录数
  "current": 1, // 当前页码
  "pages": 1 // 总共多少页
}

因此需要在展示页包含两个模块，数据展示模块和分页模块，这里使用Element-plus组件库创建：

<el-table :data="form.tableData" border stripe style="width: 100%">  
    <el-table-column label="操作" >  
      <template #default="scope">  
        <el-button type="danger" size="small">  
          <el-icon class="mr-1">  
            <Delete />  
          </el-icon>  
          删除  
        </el-button>  
      </template>  
    </el-table-column>  
    <el-table-column prop="title" label="标题" width="180" />  
    <el-table-column prop="introduction" label="介绍" width="180" />  
    <el-table-column prop="baseInfo" label="基本信息" width="90" />  
    <el-table-column prop="server" label="服务器" width="90" />  
    <el-table-column prop="tags" label="标签" width="90" />  
    <el-table-column prop="price" label="价格" width="180" />  
  </el-table>  
  <el-pagination v-model:current-page="current" v-model:page-size="size"  
                 :small="false" :background="true" layout="total, prev, pager, next, jumper"  
                 :total="total" @current-change="getGoods" style="justify-content: center;"/>  
</el-card>

其中，el-table 负责根据绑定的tableData来展示数据，el-pagination 则根据绑定的 current, size 两个属性动态发送获取分页数据请求，并更新 tableData。

对应的 js 代码：