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

引言博文系列项目简介

项目需求效果图开发环境数据表结构项目结构

后端结构前端结构项目难点核心源码

前端源码后端源码下载链接博主寄语

引言

Hello，我是Bug终结者，一名热爱Java后端的风趣且幽默的程序员~ 终于等到幸运的你~
会点前端，主攻后端

快来发现我的宇宙哦~

博文系列

 深入浅出前后端分离系列第一篇：前后端分离 — 深入浅出Spring Boot + Vue实现员工管理系统 Vue如此简单~

 深入浅出前后端分离系列第二篇：前后端分离 – 深入浅出 Spring Boot + Vue + ElementUI 实现相册管理系统【文件上传分页】文件上传也不过如此～

 深入浅出前后端分离系列第三篇：前后端分离 – 深入浅出 Spring Boot + Vue 实现工程项目进度管理系统 Vue不过如此~

深入浅出前后端分离系列第四篇：前后端分离系列 – SpringBoot + Spring Security + Vue 实现用户认证 SpringSecurity如此简单

项目简介

本项目为学生管理系统的班级模块，单独抽出班级模块讲解，因为学生管理系统有一个难点就是班级模块的使用穿梭框向班级中添加学生功能，功能略微复杂，所以单独抽出进行讲解

项目需求

班级学生管理系统 – 班级模块

实现班级的增删改查、分页、多条件搜索，以及向班级中加入学生和从班级中移出学生

向班级中加入学生和从班级中移出学生必须使用ElementUI中的Transfer组件

班级列表如下图

当点击管理学生按钮后弹出如下界面，进行添加或移出学生

班级中存在所有的学生列表，那么学生列表就无需加载数据，右侧数据需从数据库中动态加载

效果图

开发环境

后端：Spring Boot + MyBatis + Maven

前端：Vue + ElementUI

工具：前端使用VSCode，后端使用IDEA

放松时间~

适当~殺

数据表结构

t_classes班级表

CREATE TABLE `t_classes` (
  `noid` char(32) COLLATE utf8mb4_unicode_ci NOT NULL,
  `classes_name` varchar(128) COLLATE utf8mb4_unicode_ci NOT NULL COMMENT '班级名称',
  `create_date` timestamp NULL DEFAULT NULL COMMENT '创建日期',
  PRIMARY KEY (`noid`),
  UNIQUE KEY `unq_banji_name` (`classes_name`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci

t_classes_student 班级学生关系表

CREATE TABLE `t_classes_student` (
  `noid` char(32) COLLATE utf8mb4_unicode_ci NOT NULL,
  `classes_id` char(32) COLLATE utf8mb4_unicode_ci NOT NULL COMMENT '班级id',
  `student_id` char(32) COLLATE utf8mb4_unicode_ci NOT NULL COMMENT '学生id',
  PRIMARY KEY (`noid`),
  UNIQUE KEY `unq_banji_student` (`classes_id`,`student_id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci

项目结构后端结构

前端结构

项目难点

穿梭框实现班级添加与移出学生

思路：

添加学生：

点击后需将所有的学生列表加载到左侧，左侧为源数据，右侧为某个班级的数据，当左侧数据移动至右侧时，会触发穿梭框@change事件，我们拿到右侧学生id，进行持久化至数据库，再次点击左侧数据就会移除右侧回显的数据了，:value双向绑定需要回显的数据

移出学生：

当点击管理学生后，加载该班级对应的所有学生到右侧，右侧数据移动到左侧，在点击确定后，获取所有的学生，双层for循环进行筛选当点击确定后移动到左侧的学生，并在后端添加对应的数据集合，前端传输到后端，进行循环删除

通过该思路实现了班级学生的添加与移出功能

核心源码前端源码

ClassList.vue







  .box-main2 {
    width: 90%;
    margin: 10px;
    box-table2{
      height: auto;
    }
    .box-search{
      display: flex;
      margin: 10px;
      .m1{
        padding-left: 10px;
      }
    }
    .box-page1{
      margin-top: 10px;
    }
  }

后端源码

班级类的增删改查代码不就不贴了，过于简单，只贴班级学生相关的类了哈，如果需要源码的，可在下方获取

ClassesStudentController班级学生接口

package com.wanshi.controller;

import com.wanshi.bean.ClassesStudent;
import com.wanshi.bean.ResultBean;
import com.wanshi.bean.Student;
import com.wanshi.mapper.StudentMapper;
import com.wanshi.service.ClassesStudentService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;

import java.util.List;

@RestController
@CrossOrigin
@RequestMapping("/classes_student")
public class ClassesStudentController {

    @Autowired
    private ClassesStudentService classesStudentService;


    
    @PostMapping("/save_change_class")
    public ResultBean save_change_class(@RequestBody Student param) {
        ResultBean res = classesStudentService.saveChangeClass(param);
        return res;
    }

    
    @PostMapping("/get_current_classes")
    public ResultBean> list(@RequestBody Student param) {
        ResultBean> res = classesStudentService.getByCurrentList(param);
        return res;
    }

    
    @PostMapping("/list")
    public ResultBean> list(@RequestBody ClassesStudent param) {
        ResultBean> res = classesStudentService.list(param);
        return res;
    }

    
    @PostMapping("/save")
    public ResultBean save(@RequestBody ClassesStudent param) {
        ResultBean res = classesStudentService.save(param);
        return res;
    }
    
}

ClassesStudentService班级学生业务层

package com.wanshi.service;

import com.wanshi.bean.Classes;
import com.wanshi.bean.ClassesStudent;
import com.wanshi.bean.ResultBean;
import com.wanshi.bean.Student;
import com.wanshi.mapper.ClassesMapper;
import com.wanshi.mapper.ClassesStudentMapper;
import com.wanshi.mapper.StudentMapper;
import com.wanshi.utils.PbSecretUtils;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import java.util.List;

@Service
public class ClassesStudentService {

    @Autowired
    private ClassesStudentMapper classesStudentMapper;
    @Autowired
    private ClassesMapper classesMapper;

    @Autowired
    private StudentMapper studentMapper;

    
    public ResultBean saveChangeClass(Student param) {
        Student student = studentMapper.getByUsername(param);
        student.setCurrent_class(param.getCurrent_class());
        studentMapper.updateChangeClass(student);
        return ResultBean.create(0, "success");
    }

    
    public ResultBean> getByCurrentList(Student param) {

        Student student = studentMapper.getByUsername(param);
        ClassesStudent classesStudent1 = new ClassesStudent();
        classesStudent1.setStudent_id(student.getNoid());
        List classesList = classesStudentMapper.getByCurrentClasses(classesStudent1);
        if (classesList != null && classesList.size() > 0) {
            for (ClassesStudent classesStudent : classesList) {
                Classes classes = new Classes();
                classes.setNoid(classesStudent.getClasses_id());
                Classes classes1 = classesMapper.get(classes);
                classesStudent.setClasses_name(classes1.getClasses_name());
            }
        }
        return ResultBean.create(0, "success", classesList);
    }

    
    public ResultBean> list(ClassesStudent param) {
        List classesList = classesStudentMapper.list(param);
        return ResultBean.create(0, "success", classesList);
    }

    
    public ResultBean save(ClassesStudent param) {
        //删除移动到左侧的学生
        delete(param);
        for (String student_id : param.getStudentsNoid()) {
            //获取当前学生是否存在该班级
            param.setStudent_id(student_id);
            ClassesStudent classesStudent1 = classesStudentMapper.get(param);
            if (classesStudent1 != null) {
                classesStudentMapper.delete(classesStudent1);
            }
            ClassesStudent classesStudent = new ClassesStudent();
            classesStudent.setNoid(PbSecretUtils.uuid());
            classesStudent.setClasses_id(param.getClasses_id());
            classesStudent.setStudent_id(student_id);
            classesStudentMapper.insert(classesStudent);
        }

        return ResultBean.create(0, "success");
    }

    
    public ResultBean delete(ClassesStudent param) {
        for (String student_id : param.getDeleteStudentsNoid()) {
            param.setStudent_id(student_id);
            classesStudentMapper.delete(param);
        }
        return ResultBean.create(0, "success");
    }
}

下载链接

本项目上传至GitEE码云进行项目管理，具体链接如下：

项目源码：前后端分离项目 – SpringBoot+SpringSecurity + Vue + ElementUI实现班级管理系统

建议使用SSH秘钥爬取源码

前端配置教程：使用GitEE拉取前端项目并配置，保证运行成功哦~



博主寄语

该项目是一个基于SpringBoot + Vue ElementUI Transfer（穿梭框）组件实现班级学生管理系统 – 班级模块学生的添加与移除，项目逻辑稍微复杂，但只要你细心，坚持的敲上几遍，相信你的编程能力会极大的提升，加油~

并不难，只是你是否用心去学习！

若在本项目中遇到技术难题，可在下方评论区留言或私信我，授人以鱼不如授人以渔

如果你觉得博主写的不错的话，不妨给个一键三连，点击下方小拳头即可一键三连。


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

Java相关栏目本月热门文章