免费建网站平台哪个好,三屏营销型网站建设,做网站销售好累,网站怎么做自响应编辑学生
欢迎阅读本篇博客#xff0c;今天我们将继续探索Java项目学生管理系统的功能#xff0c;重点关注学生信息的修改模块。在学生管理系统中#xff0c;修改学生信息是一个关键操作#xff0c;通过该功能可以方便地更新学生的个人信息、成绩以及其他相关数据。通过本…编辑学生
欢迎阅读本篇博客今天我们将继续探索Java项目学生管理系统的功能重点关注学生信息的修改模块。在学生管理系统中修改学生信息是一个关键操作通过该功能可以方便地更新学生的个人信息、成绩以及其他相关数据。通过本文我们将深入了解如何使用Java编程语言实现这一功能让您能够更加灵活、高效地管理和更新学生信息。
1 分析 2 基本ajax前端 3 弹出框表单 步骤1显示弹出框并添加控制变量 步骤2列表的修改的按钮打开弹出框 步骤3编写弹出框的表单建议从添加复制删除不需要的–级联、按钮
4 城市级联前端异步 配置异步 数据处理 回显 完整代码 templatediv!-- 查询表单start --el-form :inlinetrue :modelstudentVo sizemini classdemo-form-inlineel-form-item label班级el-select v-modelstudentVo.classId clearable changeselectAllStudent placeholder请选择班级el-option v-for(classes,index) in classesList :keyindex :labelclasses.cname :valueclasses.cid/el-option/el-select/el-form-itemel-form-item label姓名el-input v-modelstudentVo.studentName keyup.enter.nativeselectAllStudent clearable placeholder请输入姓名/el-input/el-form-itemel-form-item label年龄el-col :span11el-input v-modelstudentVo.startAge clearable placeholder请输入开始年龄/el-input/el-colel-col classline :span2-/el-colel-col :span11el-input v-modelstudentVo.endAge clearable placeholder请输入结束年龄/el-input/el-col/el-form-itemel-form-itemel-button typeprimary clickselectAllStudent查询/el-button/el-form-item/el-form!-- 查询表单end --!-- 列表start --el-table:datapageInfo.liststripestylewidth: 100%el-table-columnpropsidfixedlabel学生IDwidth180/el-table-columnel-table-columnpropclasses.cnamefixedlabel班级名称width180/el-table-columnel-table-columnpropsnamelabel学生姓名width180/el-table-columnel-table-columnpropagelabel年龄width180/el-table-columnel-table-columnpropbirthdaylabel生日width180/el-table-columnel-table-columnpropgenderlabel性别width180template slot-scopescope{{scope.row.gender 1 ? 男: 女}}/template/el-table-columnel-table-columnpropcourseCountlabel选课数width180/el-table-columnel-table-columnlabel选课详情width300template slot-scopescopeel-tag v-for(course,index) in scope.row.courseList :keyindex{{course.cname}}/el-tag/template/el-table-columnel-table-columnwidth180fixedrightlabel操作template slot-scopescopeel-button sizemini clickopenUpdateStudentDialog(scope.row.sid)编辑/el-buttonel-button sizemini typedanger删除/el-button/template/el-table-column/el-table!-- 列表end --!-- 分页条start --el-paginationsize-changehandleSizeChangecurrent-changehandleCurrentChange:current-pagepageInfo.pageNum:page-sizes[1,2,3,5,10]:page-sizepageInfo.pageSizelayouttotal, sizes, prev, pager, next, jumper:totalpageInfo.total/el-pagination!-- 分页条end --!-- 修改 弹出框 start --el-dialog title编辑学生 :visible.syncdialogUpdateStudentVisibleel-form refform :modelstudent label-width80pxel-form-item label姓名el-input v-modelstudent.sname/el-input/el-form-itemel-form-item label班级el-select v-modelstudent.cid clearable placeholder请选择班级el-option v-for(classes,index) in classesList :keyindex :labelclasses.cname :valueclasses.cid/el-option/el-select/el-form-itemel-form-item label年龄el-input v-modelstudent.age/el-input/el-form-itemel-form-item label性别el-radio-group v-modelstudent.genderel-radio label1男/el-radioel-radio label0女/el-radio/el-radio-group/el-form-itemel-form-item label生日el-date-picker typedate v-modelstudent.birthday value-formatyyyy-MM-dd placeholder选择您的生气 /el-date-picker/el-form-itemel-form-item label城市el-cascaderv-modelstudent.cityArr:propscityProps/el-cascader/el-form-itemel-form-item label选课el-checkbox-group v-modelstudent.courseIdsel-checkbox v-for(course,index) in courseList :keyindex :labelcourse.cid nametype{{course.cname}}/el-checkbox/el-checkbox-group/el-form-item/el-formdiv slotfooter classdialog-footerel-button clickdialogUpdateStudentVisible false取 消/el-buttonel-button typeprimary clickdialogUpdateStudentVisible false确 定/el-button/div/el-dialog!-- 修改 弹出框 end --/div
/templatescript
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()},
}
/scriptstyle.line {text-align: center;}
/style5 前端实现 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 后端实现 思考
1Service 接口 /*** 修改* 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;}2Controller /*** 修改* param student* return*/PutMappingpublic ResponseEntityString 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 关联的选课信息ListCourse courseList courseMapper.selectAllBySid(sid);// 2.1 处理数据ListInteger courseIds courseList.stream().map(course - course.getCid()).collect(Collectors.toList());student.setCourseIds(courseIds);//3 返回return student;}2 Controller /*** 查询详情* param sid* return*/GetMapping(/{sid})public ResponseEntityStudent selectById(PathVariable(sid) Integer sid) {//查询Student student studentService.selectById(sid);//返回return ResponseEntity.ok(student);}在本篇博客中我们成功地完成了Java项目学生管理系统的学生修改功能。通过深入学习如何使用Java编程语言实现学生信息的修改模块我们不仅掌握了核心逻辑和技术细节还探索了如何处理异常情况和保证数据的一致性。
通过这些知识和技能您可以进一步完善学生管理系统添加更多功能并适应特定需求。Java作为一门强大而灵活的编程语言为我们开发出卓越的学生管理系统提供了坚实的基础。
