当前位置：首页 > 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

分享给朋友：

h5实现左右分页

实现左右分页的HTML5方法在HTML5中实现左右分页效果可以通过多种方式完成，以下是几种常见的方法：使用CSS Flexbox布局 Flexbox是一种现代的布局方式，可以轻松实现左右分页效果…

vue 实现数据分页

实现数据分页的基本思路在Vue中实现数据分页通常需要结合前端分页逻辑和后端API支持。前端分页适合数据量较小的情况，后端分页适合大数据量场景。前端分页实现创建一个计算属性来分割当前页数据：…

vue page 实现分页

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

vue实现前端分页

实现前端分页的方法在Vue中实现前端分页通常需要结合数据截取和分页组件。以下是常见的实现方式：基础实现方案数据准备定义总数据数组和分页相关变量： data() { return {…

vue实现新闻分页

Vue 实现新闻分页的方法数据准备与分页逻辑在 Vue 中实现新闻分页需要准备新闻数据列表和分页参数。通常使用 data 属性存储当前页码和每页显示的新闻数量。 data() { retur…

vue分页怎么实现

Vue 分页实现方法使用 Element UI 的分页组件 Element UI 提供了现成的分页组件 el-pagination，适合快速集成。需要先安装 Element UI 库。 &…

Springboot整合vue实现分页