0
点赞
收藏
分享

微信扫一扫

【学生管理系统】班级管理

践行数据分析 2022-10-23 阅读 118
javasqlspring表单重置Linux系统/运维
加载失败


目录

​​3. 班级管理​​

​​3.1 需求​​

​​3.1.1 添加班级​​

​​3.1.2 班级列表​​

​​3.2 搭建环境​​

​​3.2.1 前端实现​​

​​3.2.2 后端实现（9010）​​

​​3.3 添加班级​​

​​3.3.1 查询所有老师​​

​​3.3.2 【难】前端：选择老师​​

​​3.3.3 后端：添加班级​​

​​3.3.4 前端：添加班级​​

​​3.4 查询所有班级​​

​​3.4.1 后端实现​​

​​3.4.2 前端实现​​

​​3.5 修改班级​​

​​3.5.1 后端实现​​

​​3.5.2 前端实现​​

3. 班级管理

3.1 需求

3.1.1 添加班级

【学生管理系统】班级管理_重置

 

3.1.2 班级列表

【学生管理系统】班级管理_表单_02

 

3.2 搭建环境

3.2.1 前端实现

  • 创建对应的页面

    • 【学生管理系统】班级管理_重置_03


3.2.2 后端实现（9010）

  • 项目名：nacos-nuxt-student-service-classes
  • pom文件
  • yml文件（端口号、服务名、数据库）

    • 【学生管理系统】班级管理_java_04


  • 启动类
  • 拷贝配置类
  • 基本结构

【学生管理系统】班级管理_java_05

 

3.3 添加班级

3.3.1 查询所有老师

1）后端

【学生管理系统】班级管理_sql_06

 


package com.czxy.classes.controller;

import com.czxy.classes.service.TbClassesService;
import com.czxy.classes.service.TbTeacherService;
import com.czxy.domain.TbTeacher;
import com.czxy.vo.BaseResult;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import javax.annotation.Resource;
import java.util.List;

/**
 * @author 桐叔
 * @email liangtong@itcast.cn
 * @description
 */
@RestController
@RequestMapping("/teacher")
public class TbTeacherController {

    @Resource
    private TbTeacherService tbTeacherService;

    /**
     * 查询所有
     * @author 桐叔
     * @email liangtong@itcast.cn
     * @return
     */
    @GetMapping
    public BaseResult findAll() {
        List<TbTeacher> list = tbTeacherService.list();
        return BaseResult.ok("查询成功", list);
    }


}


2）前端

  • 显示表单
  • 展示所有老师
  • 显示表单<template> 

•   <el-card class="classes-add-card">
    <el-form ref="form" :model="classes" label-width="100px">
      <el-form-item label="班级ID">
        <el-input v-model="classes.cid"></el-input>
      </el-form-item>
      <el-form-item label="班级名称">
        <el-input v-model="classes.cname"></el-input>
      </el-form-item>
      <el-form-item label="选择老师">
        <el-select v-model="classes.teacherIds" placeholder="请选择老师">
          <el-option label="区域一" value="shanghai"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="授课老师">
      </el-form-item>
      <el-form-item label="助理老师">
      </el-form-item>
      <el-form-item label="辅导员老师">
      </el-form-item>
      <el-form-item>
        <el-button type="primary">添加</el-button>
        <el-button>重置</el-button>
      </el-form-item>
    </el-form>
  </el-card>
</template>
​
<script>
export default {
  data() {
    return {
      classes: {
        teacherIds: []      //选择的所有老师
      }
    }
  },
}
</script>
​
<style>
  .classes-add-card {
    width: 500px;
  }
</style>

<template>
  <el-card class="classes-add-card">
    <el-form ref="form" :model="classes" label-width="100px">
      <el-form-item label="班级ID">
        <el-input v-model="classes.cid"></el-input>
      </el-form-item>
      <el-form-item label="班级名称">
        <el-input v-model="classes.cname"></el-input>
      </el-form-item>
      <el-form-item label="选择老师">
        <el-select v-model="classes.teacherIds" multiple placeholder="请选择老师" style="width: 100%">
          <el-option v-for="(teacher,index) in teacherList" :key="index" :label="teacher.tname" :value="teacher.tid"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="授课老师">
      </el-form-item>
      <el-form-item label="助理老师">
      </el-form-item>
      <el-form-item label="辅导员老师">
      </el-form-item>
      <el-form-item>
        <el-button type="primary">添加</el-button>
        <el-button>重置</el-button>
      </el-form-item>
    </el-form>
    {{classes}}
  </el-card>
</template>
​
<script>
export default {
  data() {
    return {
      classes: {
        teacherIds: []      //选择的所有老师
      },
      teacherList: [],      //老师列表
    }
  },
  methods: {
    async findAllTeacher() {
      let { data:baseResult } = await this.$axios.get('/classes-service/teacher')
      // 获得结果
      this.teacherList = baseResult.data
    }
  },
  mounted() {
    //查询所有的老师
    this.findAllTeacher()
  },
}
</script>
​
<style>
  .classes-add-card {
    width: 500px;
  }

  • 展示所有老师

    • 【学生管理系统】班级管理_spring_07


    • </style>

3.3.2 【难】前端：选择老师

  • 需求：如果某类型的老师已选，将除当前老师，其他该类型的老师禁用

• • <template>
•   <div>
    <el-card class="classes-card">
      <!-- 添加表单start -->
      <el-form ref="form" :model="classes" label-width="85px">
        <!-- 编写id -->
        <el-form-item label="班级ID">
          <el-input v-model="classes.cid"></el-input>
        </el-form-item>
        <!-- 编写name -->
        <el-form-item label="班级名称">
          <el-input v-model="classes.cname"></el-input>
        </el-form-item>
        <!-- 完成 -->
        <el-form-item label="选择老师">
            <el-select v-model="classes.ids" style="width:100%;" multiple @change="selectTeacher" placeholder="请选择">
              <el-option
                v-for="(teacher,index) in teacherList"
                :key="index"
                :label="teacher.tname"
                :value="teacher.tid"
                :disabled="teacher.disabled">
                <span style="float: left">{{ teacher.tname }}</span>
                <span style="float: right; color: #8492a6; font-size: 13px;padding-right: 20px;">
                  {{teacher.type==1? '授课老师': teacher.type==2 ? '助理老师' : '辅导员老师'}}
                </span>
              </el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="授课老师">{{classes.teacher1.tname}}</el-form-item>
        <el-form-item label="助理老师">{{classes.teacher2.tname}}</el-form-item>
        <el-form-item label="辅导员老师">{{classes.teacher3.tname}}</el-form-item>
        
        <el-form-item>
          <el-button type="primary" >添加</el-button>
          <el-button>重置</el-button>
        </el-form-item>
      </el-form>
      <!-- 添加表单end -->
    </el-card>
  </div>
</template>
​
<script>
export default {
  data() {
    return {
      classes: {
        teacher1: {},
        teacher2: {},
        teacher3: {},
      },
      teacherList: [
​
      ]
    }
  },
  methods: {
    async findAllTeacher() {
      // 发送ajax
      var {data} = await this.$axios.get('/classes-service/teacher')
      // 处理结果
      if(data.code == 1){
        // 成功
        this.teacherList = data.data
      } else {
        // 失败
        this.$message.error(data.message)
      }
    },
    resetClasses(){
      this.classes.teacher1Id = null
      this.classes.teacher2Id = null
      this.classes.teacher3Id = null
      this.classes.teacher1 = {}
      this.classes.teacher2 = {}
      this.classes.teacher3 = {}
    },
    selectTeacher(selectIds) {
      // 重置老师数据
      this.resetClasses()
      // 过滤选中的老师
      var selectTeachers = this.teacherList.filter(teacher=> selectIds.includes(teacher.tid))
      // 处理数据,用于回显和数据提交
      selectTeachers.forEach(teacher => {
        /*
        if(teacher.type == 1) {
          this.classes.teacher1Id = teacher.tid
          this.classes.teacher1Name = teacher.tname
        }
        if(teacher.type == 2) {
          this.classes.teacher2Id = teacher.tid
          this.classes.teacher2Name = teacher.tname
        }
        if(teacher.type == 3) {
          this.classes.teacher3Id = teacher.tid
          this.classes.teacher3Name = teacher.tname
        }*/
        this.classes['teacher'+teacher.type+'Id'] = teacher.tid
        this.classes['teacher'+teacher.type] = teacher
​
      });
      // 获得选中老师的类型
      var types = selectTeachers.map(teacher=>teacher.type)
      // 遍历所有老师，如果某类型的老师已选，将除当前老师，其他该类型的老师禁用
      this.teacherList.forEach(teacher => {
        //  相同类型  && 其他老师
        if(types.includes(teacher.type) && !selectIds.includes(teacher.tid)){
          teacher.disabled = true
        } else {
          teacher.disabled = false
        }
      });
    }
  },
  mounted() {
  // 查询所有老师
    this.findAllTeacher()
  },
}
</script>
​
<style>
  .classes-card {
    width: 480px;
  }
</style>

  • 实现：完善ClassesAdd.vue

    • 【学生管理系统】班级管理_sql_08



3.3.3 后端：添加班级

【学生管理系统】班级管理_重置_09

 


package com.czxy.classes.controller;

import com.czxy.classes.service.TbClassesService;
import com.czxy.domain.TbClass;
import com.czxy.vo.BaseResult;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import javax.annotation.Resource;

/**
 * @author 桐叔
 * @email liangtong@itcast.cn
 * @description
 */
@RestController
@RequestMapping("/classes")
public class TbClassesController {

    @Resource
    private TbClassesService tbClassesService;

    @PostMapping
    public BaseResult add(@RequestBody TbClass tbClass) {
        boolean result = tbClassesService.save(tbClass);
        if(result) {
            return BaseResult.ok("添加成功");
        }
        return BaseResult.error("添加失败");
    }


}


3.3.4 前端：添加班级

【学生管理系统】班级管理_sql_10

 


async classesAdd() {
  // ajax添加
  let { data:baseResult } = await this.$axios.post('/classes-service/classes', this.classes)
  // 处理
  if(baseResult.code == 20000) {
    this.$message.success(baseResult.message)
    // 跳转列表页
    this.$router.push('/classes/classesList')
  } else {
    this.$message.error(baseResult.message)
  }
}


3.4 查询所有班级

3.4.1 后端实现

3.4.2 前端实现

3.5 修改班级

3.5.1 后端实现

3.5.2 前端实现

举报

相关推荐

【学生管理系统】学生管理(重点)

javaspring bootspringmysqlciJavaScript前端开发

学生管理系统

java蓝桥杯开发语言

SpringMVC+Vue项目班级管理系统

java前端后端vuessmJava编程语言

Swing+Mysql实现的学院管理系统（角色：学生、教师、管理员 功能包含学生管理、教师管理、班级管理、成绩管理、点名考勤系统、休闲游戏、校园通信、音乐系统、留言管理、专业管理等）

javaico3cIT业界

java学生信息管理系统源码（java学生管理系统 ）

eclipsejava

【学生管理系统】权限管理之角色管理

elementuijava学生管理系统nuxt.jsspring

【学生管理系统】权限管理之用户管理

java学生管理系统nuxt.jsspring权限管理虚拟化云计算

SSM+LayUi实现的学籍管理系统(分为管理员、教师、学生三个角色，实现了专业管理，班级管理，学生管理，老师管理，课程管理，开课管理以及用户管理等)

用户管理管理系统ssm学籍管理系统mysqlJava后端开发

java学生信息管理系统源码（java学生管理系统

eclipsejava

简单学生管理系统

python
0 条评论
加载失败