前后端分离的相册管理系统是一个非常实际的项目，它可以帮助开发者理解和应用前后端交互的最佳实践。以下是一个简化的核心函数示例，展示了如何在Spring Boot后端使用Spring Data JPA和在Vue前端使用ElementUI来实现相册的展示和分页。
后端Spring Boot示例代码：
@Repository
public interface AlbumRepository extends JpaRepository<Album, Long> {
Page<Album> findAll(Pageable pageable);
}
@RestController
@RequestMapping("/api/albums")
public class AlbumController {
@Autowired
private AlbumRepository albumRepository;
@GetMapping
public ResponseEntity<Page<Album>> getAlbums(@RequestParam(defaultValue = "0") int page,
@RequestParam(defaultValue = "10") int size) {
Pageable pageable = PageRequest.of(page, size);
Page<Album> albums = albumRepository.findAll(pageable);
return ResponseEntity.ok(albums);
}
}前端Vue示例代码：
<template>
<div>
<el-table :data="albums" style="width: 100%">
<el-table-column prop="id" label="ID" width="180"></el-table-column>
<el-table-column prop="name" label="相册名称" width="180"></el-table-column>
<!-- 其他列 -->
</el-table>
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-sizes="[10, 20, 50, 100]"
:page-size="pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="total">
</el-pagination>
</div>
</template>
<script>
export default {
data() {
return {
albums: [],
currentPage: 1,
pageSize: 10,
total: 0,
};
},
methods: {
fetchAlbums() {
this.$http.get('/api/albums', {
params: {
page: this.currentPage,
size: this.pageSize
}
}).then(response => {
this.albums = response.data.content;
this.total = response.data.totalElements;
});
},
handleSizeChange(val) {
this.pageSize = val;
this.fetchAlbums();
},
handleCurrentChange(val) {
this.currentPage = val;
this.fetchAlbums();
}
},
created() {
this.fetchAlbums();
}
};
</script>这个例子展示了如何在前端使用ElementUI的分页组件，以及如何在后端使用Spring Data JPA和Spring Boot来处理分页请求。这是一个简化的示例，但它提供了一个完整的前后端交互流程，可以帮助开发者理解和应用现代Web开发的最佳实践。