当前位置：首页 > VUE

Springboot整合vue实现分页

2026-01-23 14:13:33VUE

SpringBoot 整合 Vue 实现分页

后端实现（SpringBoot）

创建分页接口
使用 Spring Data JPA 或 MyBatis 实现分页查询，返回分页数据对象（如 Page 或自定义分页结果）。

@GetMapping("/api/data")
public ResponseEntity<Page<Data>> getPaginatedData(
        @RequestParam(defaultValue = "0") int page,
        @RequestParam(defaultValue = "10") int size) {
    Pageable pageable = PageRequest.of(page, size);
    Page<Data> dataPage = dataRepository.findAll(pageable);
    return ResponseEntity.ok(dataPage);
}

分页返回结构
若需自定义分页响应，可封装如下对象：

public class PageResult<T> {
    private List<T> content;
    private int totalPages;
    private long totalElements;
    // Getters and Setters
}

前端实现（Vue）

安装依赖
使用 axios 发送请求，并安装分页组件（如 element-ui 或自定义组件）。
```
npm install axios element-ui
```

分页请求与数据绑定
在 Vue 组件中调用分页接口并绑定数据：

Springboot整合vue实现分页

<template>
  <el-table :data="tableData">
    <!-- 表格列定义 -->
  </el-table>
  <el-pagination
    @current-change="handlePageChange"
    :total="total"
    :page-size="pageSize"
    layout="prev, pager, next">
  </el-pagination>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
      total: 0,
      pageSize: 10,
      currentPage: 1
    };
  },
  methods: {
    fetchData(page = 0) {
      axios.get(`/api/data?page=${page}&size=${this.pageSize}`)
        .then(response => {
          this.tableData = response.data.content;
          this.total = response.data.totalElements;
        });
    },
    handlePageChange(page) {
      this.currentPage = page;
      this.fetchData(page - 1);
    }
  },
  created() {
    this.fetchData();
  }
};
</script>

关键点说明

后端分页参数
page 从 0 开始，size 指定每页条数。前端传递时需注意页码转换（如 page - 1）。
前端分页组件
el-pagination 的 current-change 事件触发时，更新当前页并重新请求数据。

跨域问题
若前后端分离，需在 SpringBoot 中配置 CORS：

Springboot整合vue实现分页

@Configuration
public class CorsConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/").allowedOrigins("*");
    }
}

优化建议

分页缓存
后端可对高频查询数据启用缓存（如 Redis），减少数据库压力。
前端加载状态
添加加载动画或骨架屏，提升用户体验：
```
<el-table v-loading="isLoading">
```

错误处理
捕获分页请求异常并提示用户：

axios.get(...).catch(error => {
  this.$message.error('加载失败');
});

标签: 分页 Springboot

分享给朋友：

vue前端分页怎么实现

使用 Element UI 的分页组件 Element UI 提供了现成的分页组件 <el-pagination>，可以快速实现分页功能。需要安装 Element UI 并注册组件。 &…

php实现分页功能

PHP实现分页功能的方法数据库查询与分页逻辑使用SQL的LIMIT和OFFSET实现分页。假设每页显示10条数据，当前页码为$page： $perPage = 10; $page = isset…

vue page 实现分页

实现 Vue 分页功能的方法使用 Element UI 的分页组件安装 Element UI 后，可以直接使用 el-pagination 组件实现分页功能。 <template>…

vue分页实现原理

Vue 分页实现原理 Vue 分页的核心原理是通过计算当前页的数据范围，动态渲染数据列表并控制分页组件的交互。以下是关键实现步骤：数据分片计算分页需要根据当前页码和每页条数截取数据。假设原始数据…

vue实现分页组件

Vue 分页组件实现基础分页组件结构创建一个名为 Pagination.vue 的文件，包含以下基础模板和逻辑： <template> <div class="pagin…

vue实现网页分页

Vue 实现网页分页的方法使用计算属性实现分页在 Vue 中可以通过计算属性对数据进行分页处理。定义一个 currentPage 和 pageSize，利用计算属性返回当前页的数据。 data…

Springboot整合vue实现分页