编辑学生
欢迎阅读本篇博客，今天我们将继续探索Java项目学生管理系统的功能，重点关注学生信息的修改模块。在学生管理系统中，修改学生信息是一个关键操作，通过该功能可以方便地更新学生的个人信息、成绩以及其他相关数据。通过本文，我们将深入了解如何使用Java编程语言实现这一功能，让您能够更加灵活、高效地管理和更新学生信息。
1 分析
2 基本ajax：前端
3 弹出框表单
-
步骤1：显示弹出框，并添加控制变量
-
步骤2：列表的修改的按钮，打开弹出框
-
步骤3：编写弹出框的表单（建议从添加复制，删除不需要的–级联、按钮）
4 城市级联：前端（异步）
-
配置异步
-
数据处理
-
回显
-
完整代码
<template> <div> <!-- 查询表单start --> <el-form :inline="true" :model="studentVo" size="mini" class="demo-form-inline"> <el-form-item label="班级"> <el-select v-model="studentVo.classId" clearable @change="selectAllStudent" placeholder="请选择班级"> <el-option v-for="(classes,index) in classesList" :key="index" :label="classes.cname" :value="classes.cid"> </el-option> </el-select> </el-form-item> <el-form-item label="姓名"> <el-input v-model="studentVo.studentName" @keyup.enter.native="selectAllStudent" clearable placeholder="请输入姓名"></el-input> </el-form-item> <el-form-item label="年龄"> <el-col :span="11"> <el-input v-model="studentVo.startAge" clearable placeholder="请输入开始年龄"></el-input> </el-col> <el-col class="line" :span="2">-</el-col> <el-col :span="11"> <el-input v-model="studentVo.endAge" clearable placeholder="请输入结束年龄"></el-input> </el-col> </el-form-item> <el-form-item> <el-button type="primary" @click="selectAllStudent">查询</el-button> </el-form-item> </el-form> <!-- 查询表单end --> <!-- 列表start --> <el-table :data="pageInfo.list" stripe style="width: 100%"> <el-table-column prop="sid" fixed label="学生ID" width="180"> </el-table-column> <el-table-column prop="classes.cname" fixed label="班级名称" width="180"> </el-table-column> <el-table-column prop="sname" label="学生姓名" width="180"> </el-table-column> <el-table-column prop="age" label="年龄" width="180"> </el-table-column> <el-table-column prop="birthday" label="生日" width="180"> </el-table-column> <el-table-column prop="gender" label="性别" width="180"> <template slot-scope="scope"> {{scope.row.gender == 1 ? '男': '女'}} </template> </el-table-column> <el-table-column prop="courseCount" label="选课数" width="180"> </el-table-column> <el-table-column label="选课详情" width="300"> <template slot-scope="scope"> <el-tag v-for="(course,index) in scope.row.courseList" :key="index"> {{course.cname}} </el-tag> </template> </el-table-column> <el-table-column width="180" fixed="right" label="操作"> <template slot-scope="scope"> <el-button size="mini" @click="openUpdateStudentDialog(scope.row.sid)">编辑</el-button> <el-button size="mini" type="danger">删除</el-button> </template> </el-table-column> </el-table> <!-- 列表end --> <!-- 分页条start --> <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageInfo.pageNum" :page-sizes="[1,2,3,5,10]" :page-size="pageInfo.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="pageInfo.total"> </el-pagination> <!-- 分页条end --> <!-- 修改 弹出框 start --> <el-dialog title="编辑学生" :visible.sync="dialogUpdateStudentVisible"> <el-form ref="form" :model="student" label-width="80px"> <el-form-item label="姓名"> <el-input v-model="student.sname"></el-input> </el-form-item> <el-form-item label="班级"> <el-select v-model="student.cid" clearable placeholder="请选择班级"> <el-option v-for="(classes,index) in classesList" :key="index" :label="classes.cname" :value="classes.cid"></el-option> </el-select> </el-form-item> <el-form-item label="年龄"> <el-input v-model="student.age"></el-input> </el-form-item> <el-form-item label="性别"> <el-radio-group v-model="student.gender"> <el-radio label="1">男</el-radio> <el-radio label="0">女</el-radio> </el-radio-group> </el-form-item> <el-form-item label="生日"> <el-date-picker type="date" v-model="student.birthday" value-format="yyyy-MM-dd" placeholder="选择您的生气" ></el-date-picker> </el-form-item> <el-form-item label="城市"> <el-cascader v-model="student.cityArr" :props="cityProps"> </el-cascader> </el-form-item> <el-form-item label="选课"> <el-checkbox-group v-model="student.courseIds"> <el-checkbox v-for="(course,index) in courseList" :key="index" :label="course.cid" name="type">{{course.cname}}</el-checkbox> </el-checkbox-group> </el-form-item> </el-form> <div slot="footer" class="dialog-footer"> <el-button @click="dialogUpdateStudentVisible = false">取 消</el-button> <el-button type="primary" @click="dialogUpdateStudentVisible = false">确 定</el-button> </div> </el-dialog> <!-- 修改 弹出框 end --> </div> </template> <script> import axios from 'axios' export default { data() { return { studentVo: { //查询条件 classId: '', studentName: '', startAge: '', endAge: '' }, pageInfo: { //分页条件 pageNum: 1, //当前页（第几页） pageSize: 2 //每页个数 }, classesList: [], //所有班级 student: { //修改表单回显对象 cityArr: [], //城市数组 courseIds: [], //选课的id }, courseList: [], //课程列表 dialogUpdateStudentVisible: false, //修改的弹出框控制变量 cityProps: { expandTrigger: 'hover', value: 'cid', label: 'cityName', children: 'children', lazy: true, lazyLoad: async (node, resolve) => { // debugger /* //模拟数据 let nodes = [ { "cid": "320100", "cityName": "南京市", "parentId": "320000" }, { "cid": "321300", "cityName": "宿迁市", "parentId": "320000" } ]*/ let parentId; if(node.root) { // 如果页面加载(第一层：省) parentId = 0 } else { parentId = node.value } // ajax查询 let { data: nodes } = await this.$http.get(`/city/parent/${parentId}`) // 完善代码：给县数据设置成叶子节点 nodes.map(n=>{ n.leaf = node.level >= 2 return n }) // 通过调用resolve将子节点数据返回，通知组件数据加载完成 resolve(nodes); } } } }, methods: { async selectAllStudent() { //处理请求路径 let url = `/student/condition/${this.pageInfo.pageSize}/${this.pageInfo.pageNum}` //发送ajax let {data} = await this.$http.post(url, this.studentVo) //保存结果 this.pageInfo = data }, async selectAllClasses() { let { data } = await this.$http.get('/classes') this.classesList = data }, handleSizeChange(val) { //修改 每页个数 //console.log(`每页 ${val} 条`); this.pageInfo.pageSize = val this.pageInfo.pageNum = 1 //再查询 this.selectAllStudent() }, handleCurrentChange(val) { //修改当前页 //console.log(`当前页: ${val}`); this.pageInfo.pageNum = val //再查询 this.selectAllStudent() }, async selectStudentById(sid) { let { data: student} = await this.$http.get(`/student/${sid}`) this.student = student //将城市cityIds字符串，转换成cityArr数组 this.student.cityArr = this.student.cityIds.split(",") }, async selectAllCourse() { let { data: courseList } = await this.$http.get('/course') this.courseList = courseList }, openUpdateStudentDialog(sid) { //班级列表 this.selectAllClasses() //课程列表 this.selectAllCourse() //查询学生详情 this.selectStudentById(sid) //打开修改弹出框 this.dialogUpdateStudentVisible = true } }, mounted() { //页面加载成功 //查询所有学生 this.selectAllStudent() //查询所有班级 this.selectAllClasses() }, } </script> <style> .line { text-align: center; } </style>
5 前端实现
async updateStudent() {
// 处理数据
this.student.cityIds = this.student.cityArr.join(",")
//debugger
// 添加ajax
let { data } = await this.$http.put('/student', this.student)
//提示
this.$message.success(data)
//this.$message.error(data) //失败
//刷新列表
this.selectAllStudent()
//关闭弹出框
this.dialogUpdateStudentVisible = false
}
6 后端实现
-
思考
1）Service
-
接口
/** * 修改 * @param student * @return */ Boolean update(Student student); -
实现类
@Override public Boolean update(Student student) { //1 修改基本信息 int result = studentMapper.updateByPrimaryKey(student); //2 删除学生所有选课 Example deleteExample = new Example(StudentCourse.class); Example.Criteria deleteCriteria = deleteExample.createCriteria(); deleteCriteria.andEqualTo("sid", student.getSid()); studentCourseMapper.deleteByExample(deleteExample); //3 保存关联数据 for(Integer courseId: student.getCourseIds()) { StudentCourse studentCourse = new StudentCourse(); studentCourse.setSid(student.getSid()); studentCourse.setCid(courseId); studentCourseMapper.insertSelective(studentCourse); //保存非空 } return result == 1; }
2）Controller
/**
* 修改
* @param student
* @return
*/
@PutMapping
public ResponseEntity<String> update(@RequestBody Student student) {
//添加
boolean result = studentService.update(student);
//处理结果
if(result) {
return ResponseEntity.ok("修改成功");
}
return ResponseEntity.ok("修改失败");
}
查询详情：后端
1 Service
-
接口
/** * 通过id查询详情（含选课ids信息） * @param sid * @return */ Student selectById(Integer sid); -
实现类
@Override public Student selectById(Integer sid) { //1 查询基本信息 Student student = studentMapper.selectByPrimaryKey(sid); //2 关联的选课信息 List<Course> courseList = courseMapper.selectAllBySid(sid); // 2.1 处理数据 List<Integer> courseIds = courseList.stream().map(course -> course.getCid()).collect(Collectors.toList()); student.setCourseIds(courseIds); //3 返回 return student; }
2 Controller
/**
* 查询详情
* @param sid
* @return
*/
@GetMapping("/{sid}")
public ResponseEntity<Student> selectById(@PathVariable("sid") Integer sid) {
//查询
Student student = studentService.selectById(sid);
//返回
return ResponseEntity.ok(student);
}
在本篇博客中，我们成功地完成了Java项目学生管理系统的学生修改功能。通过深入学习如何使用Java编程语言实现学生信息的修改模块，我们不仅掌握了核心逻辑和技术细节，还探索了如何处理异常情况和保证数据的一致性。
通过这些知识和技能，您可以进一步完善学生管理系统，添加更多功能，并适应特定需求。Java作为一门强大而灵活的编程语言，为我们开发出卓越的学生管理系统提供了坚实的基础。
2187
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
