分页协议

Forge Admin 前后端统一分页协议，确保分页请求与响应格式一致。

请求格式

分页查询接口统一接收以下参数：

GET /system/user/list?pageNum=1&pageSize=10&username=admin

或 POST 请求体：

{
  "pageNum": 1,
  "pageSize": 10,
  "username": "admin"
}

参数	类型	必填	说明
pageNum	number	是	当前页码，从 1 开始
pageSize	number	是	每页条数
...query	object	否	业务查询条件，与实体字段对应

响应格式

{
  "code": 200,
  "msg": "操作成功",
  "data": {
    "total": 100,
    "rows": [
      { "id": 1, "username": "admin", "nickname": "管理员" },
      { "id": 2, "username": "user01", "nickname": "用户一" }
    ],
    "code": 200,
    "msg": "查询成功"
  }
}

字段	类型	说明
total	number	总记录数
rows	array	当前页数据列表

后端实现

后端使用 MyBatis-Plus 的 Page 对象进行分页：

@GetMapping("/list")
public RespInfo<Map<String, Object>> list(UserQueryDTO query) {
    Page<User> page = userService.page(
        new Page<>(query.getPageNum(), query.getPageSize()),
        query.toQueryWrapper()
    );
    return RespInfo.success(TableDataInfo.build(page));
}

前端组件对应

前端使用 Naive UI 的 n-data-table 配合自定义分页组件：

<n-data-table
  :columns="columns"
  :data="tableData"
  :pagination="pagination"
  :loading="loading"
  remote
  @update:page="handlePageChange"
  @update:page-size="handlePageSizeChange"
/>

const pagination = reactive({
  page: 1,        // 对应 pageNum
  pageSize: 10,   // 对应 pageSize
  itemCount: 0,   // 对应 total
  showSizePicker: true,
  pageSizes: [10, 20, 50, 100]
})

字段映射对照

前端 (Naive UI)	后端 (MyBatis-Plus)	说明
page	pageNum	当前页码
pageSize	pageSize	每页条数
itemCount	total	总记录数
data	rows	数据列表

💡 前端使用 remote 模式时，分页变更需要手动触发请求。