【学生管理系统】班级管理
2024-05-29 06:46:56
目录
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 班级列表
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 {
@Resourceprivate TbTeacherService tbTeacherService;
/*** 查询所有* @author 桐叔* @email liangtong@itcast.cn* @return*/@GetMappingpublic 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" style="width:100%;" multiple @change="selectTeacher" placeholder="请选择"><el-optionv-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() {// 发送ajaxvar {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 = nullthis.classes.teacher2Id = nullthis.classes.teacher3Id = nullthis.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.tidthis.classes.teacher1Name = teacher.tname}if(teacher.type == 2) {this.classes.teacher2Id = teacher.tidthis.classes.teacher2Name = teacher.tname}if(teacher.type == 3) {this.classes.teacher3Id = teacher.tidthis.classes.teacher3Name = teacher.tname}*/this.classes['teacher'+teacher.type+'Id'] = teacher.tidthis.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>
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 {
@Resourceprivate TbClassesService tbClassesService;
@PostMappingpublic 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)}
}
3.4 查询所有班级
3.4.1 后端实现
3.4.2 前端实现
3.5 修改班级
3.5.1 后端实现
3.5.2 前端实现
【学生管理系统】班级管理相关推荐
- C#学生管理系统——班级列表（查询功能）
C#学生管理系统--班级管理的班级列表(查询功能) 上次的年级列表做好了,今天就来做班级管理中的班级列表,与年级列表不同的是,班级列表增加了查询功能,如下图: 界面布局部分: 简单写下,查询这个浅色的 ...
- 【计算机毕业设计】html学生管理系统 OA管理系统设计与实现 HTML网页设计结课作业...
- 【计算机毕业设计】html学生管理系统 OA管理系统设计与实现 HTML网页设计结课作业
- Swing+Mysql实现的学院管理系统（角色：学生、教师、管理员 功能包含学生管理、教师管理、班级管理、成绩管理、点名考勤系统、休闲游戏、校园通信、音乐系统、留言管理、专业管理等）
博客目录 Swing+mysql的校园管理系统 实现功能截图 系统功能 使用技术 代码 写在最后 Swing+mysql的校园管理系统 本系统综合了校园管理的所有功能,一共分为三个角色:学生.教师.管 ...
- SSM+LayUi实现的学籍管理系统(分为管理员、教师、学生三个角色，实现了专业管理，班级管理，学生管理，老师管理，课程管理，开课管理以及用户管理等)
博客目录 jsp+servlet+mysql实现的停车场管理系统 实现功能截图 系统功能 使用技术 完整源码 jsp+servlet+mysql实现的停车场管理系统 本系统是一个servlet原生框架 ...
- Vue+SpringBoot+ElementUI实战学生管理系统-8.班级管理模块
1.章节介绍 前一篇介绍了专业管理模块,这一篇编写班级管理模块,需要的朋友可以拿去自己定制.:) 2.获取源码 源码是捐赠方式获取,详细请QQ联系我 :)! 3.实现效果 班级列表 修改班级 4.模块 ...
- 【学生管理系统】用户管理之用户登录
目录 2. 用户管理 2.1 环境搭建 2.1.1 前端环境 2.1.2 后端环境(9000) 2.2 用户登录 2.2.1 需求 2.2.2 后端实现 2.2.3 前端实现 2.3 首页 2.3.1 ...
- asp毕业设计——基于asp+access的学生管理系统设计与实现（毕业论文+程序源码）——学生管理系统
基于asp+access的学生管理系统设计与实现(毕业论文+程序源码) 大家好,今天给大家介绍基于asp+access的学生管理系统设计与实现,文章末尾附有本毕业设计的论文和源码下载地址哦.需要下载开 ...
- 班级管理html注册登录界面代码,基于JSP和SSH框架实现的班级管理系统
1 系统需求的分析 1.1 需求分析 本项目所开发的班级管理系统完成学校对学生的班级信息的统计与管理,减少数据漏掉的情况,同时也节约人力.物力和财力,告别以往的人工统计.方便学生使用,学生可以在线查看 ...
最新文章
- 机器学习小抄，轻松搞定理解机器学习！
- ETL工具 kettle问题
- C++(STL):27 ---关联式容器set源码剖析
- pythonelectron桌面开发案例_使用Electron开发基于Node.js的桌面应用
- 苹果公司计划在俄勒冈州建设其第三个数据中心
- react学习预备知识_在10分钟内学习React基础知识
- 天津计算机本科学校有哪些专业吗,天津哪些大学有人工智能专业
- unittest测试框架详谈及实操(一)
- 高等代数-三-消元法
- C++制作植物大战僵尸
- JAVA合并两个PDF文件
- outlook怎么配置126邮箱服务器,126邮箱如何设置Microsoft Outlook的服务器?
- 【寒江雪】UV+Depth信息计算世界坐标
- 从年薪1万到年薪100万的日子
- Python批量导入图片到Word文件
- 【练习/Python】监测汇率脚本
- java winrar_Java使用winrar解压缩 | 学步园
- PHP环境搭建(非集成)
- sqrt 和pow 的返回值类型错误（{从小白开始c语言常见错误归纳第2弹）
- GitHub申请账号