前后端分离系列 -- SpringBoot + Vue ElementUI Transfer（穿梭框）组件实现班级学生管理系统 -- 班级模块学生的添加与移除 Transfer不过如此

以下是一个简化的示例，展示了如何在前后端分离的项目中使用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请求来更新班级学生列表。