vue+elenemt分页+springboot

在这个问题中，我们需要创建一个使用Vue.js和Element UI的前端分页组件，以及一个Spring Boot后端服务来处理分页请求。

前端（Vue + Element UI）:

1. 安装Element UI:

npm install element-ui --save

2. 在Vue组件中使用Element UI的分页组件:

<template>
  <div>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[10, 20, 50, 100]"
      :page-size="pageSize"
      :total="total"
      layout="total, sizes, prev, pager, next, jumper">
    </el-pagination>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      currentPage: 1,
      pageSize: 10,
      total: 0,
    };
  },
  methods: {
    handleSizeChange(val) {
      this.pageSize = val;
      this.fetchData();
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.fetchData();
    },
    fetchData() {
      // 调用后端API获取数据
      this.axios.get('http://localhost:8080/api/data', {
        params: {
          page: this.currentPage,
          size: this.pageSize
        }
      }).then(response => {
        this.total = response.data.totalElements;
        // 处理数据...
      });
    }
  },
  mounted() {
    this.fetchData();
  }
};
</script>

后端（Spring Boot）:

1. 添加Spring Data JPA依赖:

<dependency>
  <groupId>org.springframework.boot</groupId>
  <artifactId>spring-boot-starter-data-jpa</artifactId>
</dependency>

2. 创建一个简单的Spring Data JPA仓库接口:

import org.springframework.data.repository.PagingAndSortingRepository;
import org.springframework.stereotype.Repository;
 
@Repository
public interface MyEntityRepository extends PagingAndSortingRepository<MyEntity, Long> {
}

3. 创建一个控制器来处理分页请求:

import org.springframework.data.domain.Page;
import org.springframework.data.domain.PageRequest;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;
 
@RestController
public class MyEntityController {
 
  private final MyEntityRepository repository;
 
  public MyEntityController(MyEntityRepository repository) {
    this.repository =