分页展示全部用户列表的实现-EW帮帮网

1、后端代码

第一步：导入pom依赖

<!--配置PageHelper分页插件-->
        <dependency>
            <groupId>com.github.pagehelper</groupId>
            <artifactId>pagehelper-spring-boot-starter</artifactId>
            <version>1.4.6</version>
            <exclusions>
                <exclusion>
                    <groupId>org.mybatis</groupId>
                    <artifactId>mybatis</artifactId>
                </exclusion>
            </exclusions>
        </dependency>

第二步：mapper层方法

List<User> selectAllUser();

第三步：xml中写SQL

<!--查询用户列表-->
    <select id="selectAllUser" resultType="com.example.deepseek.account.pojo.entity.User">
        SELECT *
        FROM users
        ORDER BY id DESC
    </select>

注意：一定要加上排序，否则分页的时候数据可能会随机改变，例如：数据出现两页的情况，数据不能完全展示。

第四步：service层方法

PageInfo<UserDto> getUserList(Integer pageNum, Integer pageSize);

第五步：impl中的方法

@Override
    public PageInfo<UserDto> getUserList(Integer pageNum, Integer pageSize) {
        //1.开启分页
        PageHelper.startPage(pageNum, pageSize);
        //2.查询用户列表
        List<User> users = userMapper.selectAllUser();
        //3. 获取原始分页信息
        PageInfo<User> userPageInfo = new PageInfo<>(users);
        //4.转化Entity为Dto列表
        List<UserDto> userDtos = users.stream()
                .map(user -> new UserDto(
                        user.getId(),
                        user.getName(),
                        user.getEmail(),
                        user.getRole(),
                        user.getPhone(),
                        user.getAvatar(),
                        user.getCreateTime(),
                        user.getUpdateTime()
                )).collect(Collectors.toList());
        // 5. 创建新PageInfo，复制分页原数据
        PageInfo<UserDto> dtoPageInfo = new PageInfo<>();
        dtoPageInfo.setPageNum(userPageInfo.getPageNum());
        dtoPageInfo.setPageSize(userPageInfo.getPageSize());
        dtoPageInfo.setTotal(userPageInfo.getTotal());
        dtoPageInfo.setPages(userPageInfo.getPages());
        dtoPageInfo.setList(userDtos);  // 设置转换后的数据

        return dtoPageInfo;
    }

注意：如果系统中的pojo类是严格按照 Dto、Entity、VO 写的，这里将 Entity 转化为 Dto 的时候要先获取原始分页信息，然后转化对象，最后再创建新的 PageInfo ，保存分页的原始数据，防止后面分页的时候出现错误。如果没有先获取原始分页数据，而是直接使用 PageInfo.of 将转换后的List<UserDto> 返回，会导致分页的时候 PageInfo.of(userDtos) 检测到传入的是普通集合（非 Page 类型），强制重置分页信息（pageNum=1, pageSize=集合大小）

PageInfo 源码中，若传入的 List 不是 Page 类型，会默认：

this.pageNum = 1;  // 固定为第一页
this.pageSize = list.size();  // 每页大小=集合总长度
this.total = list.size();     // 总记录数=集合总长度

第六步：controller层方法

/**
     * 获取用户列表接口
     */
    @RequestMapping("/getUserList")
    public JsonResult getUserList(@RequestParam(defaultValue = "1") Integer pageNum, @RequestParam(defaultValue = "5") Integer pageSize) {
        PageInfo<UserDto> pageInfo = userService.getUserList(pageNum, pageSize);
        return JsonResult.success(pageInfo);
    }

2、前端代码

第一步：<template>

1、首先添加用户列表。

<div>
<el-table-column prop="id" label="ID" width="80"/>
          <el-table-column label="头像" width="100">
            <template #default="scope">
              <el-avatar :size="50" :src="getAvatarUrl(scope.row.avatar)"/>
            </template>
          </el-table-column>
          <el-table-column prop="name" label="用户名"/>
          <el-table-column prop="role" label="角色"/>
          <el-table-column prop="email" label="邮箱"/>
          <el-table-column prop="phone" label="联系方式"/>
          <el-table-column prop="createTime" label="创建时间"/>
          <el-table-column prop="updateTime" label="更新时间"/>
          <el-table-column label="操作">
            <template #default="scope">
              <el-button size="small" @click="handleEdit(scope.row)">编辑</el-button>
              <el-button size="small" type="danger" @click="handleDelete(scope.row)">删除<el-button>
            </template>
          </el-table-column>
        </el-table>
</div>

2、然后添加分页查询组件

<div class="pagination-wrapper">
      <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[5, 10, 20, 50]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
      />
</div>

第二步：<script>

// 分页相关变量
const currentPage = ref(1)
const pageSize = ref(5)
const total = ref(0)

// 获取用户列表数据
const fetchUserList = async () => {
  try {
    loading.value = true
    await request.get(`/api/user/getUserList`, {
      params: {
        pageNum: currentPage.value,
        pageSize: pageSize.value
      }
    }).then(response => {
      if (response.code === 200 || response.code === "200") {
        userList.value = response.data.list;
        total.value = response.data.total;
      } else {
        throw new Error(`返回数据格式错误: ${response.data?.message || '未知错误'}`)
      }
    })
  } catch (error) {
    console.error('获取用户数据失败:', error)
    ElMessage.error(`数据加载失败: ${error.message}`)
  } finally {
    loading.value = false
  }
}

// 每页条数改变事件
const handleSizeChange = (newSize) => {
  pageSize.value = newSize
  currentPage.value = 1
  fetchUserList()
}

// 当前页码改变事件
const handleCurrentChange = (newPage) => {
  currentPage.value = newPage
  fetchUserList()
}

// 操作后数据刷新逻辑
const refreshAfterOperation = () => {
  if (userList.value.length === 0 && currentPage.value > 1) {
    currentPage.value -= 1
  }
  fetchUserList()
}

分页展示全部用户列表的实现