以下是一个简化的示例，展示了如何在前后端分离的项目中使用Spring Boot和Vue.js来实现一个Transfer组件（穿梭框组件），用于展示和管理班级学生列表。
后端（Spring Boot）:
@RestController
@RequestMapping("/api/class")
public class ClassController {
// 假设有一个服务ClassService用于处理班级相关的业务逻辑
@Autowired
�mmand
private ClassService classService;
// 获取班级学生列表
@GetMapping("/{id}/students")
public ResponseEntity<List<Student>> getStudents(@PathVariable("id") Long classId) {
List<Student> students = classService.getStudentsByClassId(classId);
return ResponseEntity.ok(students);
}
// 更新班级学生列表
@PostMapping("/{id}/students")
public ResponseEntity<Void> updateStudents(@PathVariable("id") Long classId, @RequestBody List<Student> students) {
classService.updateStudents(classId, students);
return ResponseEntity.ok().build();
}
}前端（Vue.js + ElementUI）:
<template>
<el-transfer
v-model="value"
:data="studentList"
:titles="['可选学生', '已选学生']"
@change="handleChange"
></el-transfer>
</template>
<script>
export default {
data() {
return {
value: [],
studentList: []
};
},
created() {
this.fetchStudents();
},
methods: {
fetchStudents() {
// 假设已经设置了axios请求配置
axios.get('/api/class/' + this.$route.params.classId + '/students')
.then(response => {
this.studentList = response.data.map(student => ({
key: student.id,
label: student.name
}));
})
.catch(error => {
console.error('Error fetching students:', error);
});
},
handleChange(value, direction, movedKeys) {
if (direction === 'right') {
// 发起更新学生列表的请求
axios.post('/api/class/' + this.$route.params.classId + '/students', this.value.map(id => ({id})))
.then(response => {
console.log('Students updated successfully');
})
.catch(error => {
console.error('Error updating students:', error);
});
}
}
}
};
</script>在这个例子中，我们使用了ElementUI的<el-transfer>组件来实现学生的管理。前端通过axios从后端获取学生列表，并在组件的v-model绑定的value数组中维护已选择的学生ID。当用户移动学生时，通过监听@change事件来执行更新操作，并发起对后端的/api/class/{id}/students接口的POST请求来更新班级学生列表。