在这个问题中，我们需要创建一个使用Vue.js和Element UI的前端分页组件，以及一个Spring Boot后端服务来处理分页请求。
前端（Vue + Element UI）:
- 安装Element UI:
npm install element-ui --save
- 在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）:
- 添加Spring Data JPA依赖:
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-data-jpa</artifactId>
</dependency>
- 创建一个简单的Spring Data JPA仓库接口:
import org.springframework.data.repository.PagingAndSortingRepository;
import org.springframework.stereotype.Repository;
@Repository
public interface MyEntityRepository extends PagingAndSortingRepository<MyEntity, Long> {
}
- 创建一个控制器来处理分页请求:
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 =