3. 班级管理
3.1 需求
3.1.1 添加班级
3.1.2 班级列表
3.2 搭建环境
3.2.1 前端实现
- 创建对应的页面
3.2.2 后端实现（9010）
- 项目名：nacos-nuxt-student-service-classes
- pom文件
- yml文件（端口号、服务名、数据库
启动类
拷贝配置类
基本结构
3.3 添加班级
3.3.1 查询所有老师
1）后端
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; } </style>
3.3.2 【难】前端：选择老师
- 需求：如果某类型的老师已选，将除当前老师，其他该类型的老师禁用
- 实现：完善ClassesAdd.vue
<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
3.3.3 后端：添加班级
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 前端：添加班级
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) } }
