编辑学生

欢迎阅读本篇博客，今天我们将继续探索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"stripestyle="width: 100%"><el-table-columnprop="sid"fixedlabel="学生ID"width="180"></el-table-column><el-table-columnprop="classes.cname"fixedlabel="班级名称"width="180"></el-table-column><el-table-columnprop="sname"label="学生姓名"width="180"></el-table-column><el-table-columnprop="age"label="年龄"width="180"></el-table-column><el-table-columnprop="birthday"label="生日"width="180"></el-table-column><el-table-columnprop="gender"label="性别"width="180"><template slot-scope="scope">{{scope.row.gender == 1 ? '男': '女'}}</template></el-table-column><el-table-columnprop="courseCount"label="选课数"width="180"></el-table-column><el-table-columnlabel="选课详情"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-columnwidth="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-cascaderv-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 >= 2return n})// 通过调用resolve将子节点数据返回，通知组件数据加载完成resolve(nodes);}}}},methods: {async selectAllStudent() {//处理请求路径let url = `/student/condition/${this.pageInfo.pageSize}/${this.pageInfo.pageNum}`//发送ajaxlet {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 = valthis.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// 添加ajaxlet { 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);
  

• 实现类

  

      @Overridepublic 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*/@PutMappingpublic 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);
  

• 实现类

  

      @Overridepublic 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作为一门强大而灵活的编程语言，为我们开发出卓越的学生管理系统提供了坚实的基础。