开发者学堂课程【微服务+全栈在线教育实战项目演练（SpringCloud Alibaba+SpringBoot）:课程管理-修改课程信息（最终实现）】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/667/detail/11382
课程管理-修改课程信息（最终实现）
内容介绍
一、修改课程信息
二、测试
三、总结
一、修改课程信息
1.将课程信息存入数据库中
最后将修改完成，就是在此页面中我们的数据回显了。比如标题、分类包括讲师等都可以修改，修改之后我们点击保存并下一步，就要将数据存入数据库内。此时我们便需要做到这一步
要实现此步骤，修改课程信息接口已经写好，最终需要将前端代码写好。
l EduCourseController 中修改课程信息部分代码：
修改课程信息
@PostMapping("updateCourseInfo")
public R updateCourseInfo(@RequestBody CourseInfoVo courseInfoVo){
courseService. updateCourseInfo(courseInfovo);
return R.ok();
}
（1）addCourse()添加方法
首先在代码中找到保存并下一步按钮所在处，此时含有一些问题。当点击保存并下一步时，表达的含义可能是做了修改，也可能是添加，它在此的作用并不一样。
所以我们首先要确定此时做的是添加还是修改。我们找到 saveOrUpdate()方法，发现当时仅仅做了添加，为了明显区分我们将原来 saveOrUpdate() 方法中的方法体，放入新定义的 addCourse()中。因为我们还有修改操作的提示需要存在。
l 代码如下：
//添加课程
addCourse(){
course.addCourseInfo( this.courseInfo)
.then( response => {
//提示
this.$message({
type: " success',
message: '添加课程信息成功!'
});
//跳转到第二步，添加之后会返回课程id，用response得到
this.$router.push( {path : ' /course/chapter / ' +response.data.courseId})
})
},
（2）saveOrUpdate()方法
完成添加课程信息的代码后，我们紧接着添加一个修改课程的代码，叫做updateCourse()。
最终来到 saveOrUpdate()方法，根据之前代码，可以知晓在点击保存并下一步时调用的是 saveOrUpdate()方法，而此方法中既有添加又有修改，所以要在此方法中作一个判断：是添加还是修改。
判断方法是根据 courseInfo 有无 id 值进行判断，添加则无 id 值，修改则有 id 值。
l 代码如下
saveOrUpdate() {
//判断添加还是修改
if( !this.courseInfo.id) { //如果courseInfo如果没有id值
//为添加
this.addCourse()
}else { //如果有id值
//为修改
this.updateCourse( )
}
}
（3）updateCourse(）修改方法
最后对修改课程方法进行完善，注意其中更改提示信息为：修改课程信息成功！
同时最后添加时跳转会返回课程 id，但在修改跳转时并不会返回课程 id，所以将其修改为获得路由id值处获取到的修改返回的 id值。
l 获取路由id 值代码
//获取路由id值
if(this.$route.params && this.$route.params.id) {
//this.courseId为获取的修改时应跳转返回id值
this.courseId = this.$route.params. id
//调用根据id查询课程的方法
this.getInfo()
l 代码如下：
//修改课程
updateCourse(） {
//添加course中的updateCourseInfo（）方法，同时传入参数courseInfo的值
course. updateCourseInfo( this.courseInfo)
.then( response => { //提示跳转
//提示
this.$message({
type: "success',
//页面提示修改课程信息成功
message: ‘修改课程信息成功!‘
});
//跳转到第二步，但添加之后会返回课程id但修改后并不会。所以此处修改的跳转应该是修改 id 值，this.courseId 为获取路由id值中取到的修改跳转id。
this.$router.push({path : ' / course/chapter / ' +this.courseId})
})
},
到此修改代码全部完成。
二、测试
首先删除网址 http://localhost:9528/#/course/info 中
#/course/info 返回页面做重新展示。
先点击添加课程，任意输入课程信息。
课程标题：测试修改课程信息，课程分类：前端开发和 vue，课程讲师:王五，总课时：10，课程封面默认，课程价格：10。全部设置完毕后，点击保存并下一步。
看到显示添加课程信息成功。
在数据库中查看刚才添加的内容：测试修改课程信息。
之后再回到页面，点击上一步先做回显，将课程标题修改为：测试修改课程信息upup。其他内容不变，点击保存并下一步。
显示保存成功后，查看数据库中存储的数据内容，发现标题对应更改为测试修改课程信息 upup，则修改操作完成。
三、总结
到此，添加课程中的基本功能第一个为添加课程基本信息，其中包括一级二级，封面上传等完善。第二个课程大纲的列表功能，即用标签型做一个树状结构。类似于如下图的结构。
第三个为当点击修改可以回到创建课程大纲步骤，实现数据回显，之后可以修改课程中的内容，最后可以该数据库中的信息，这就是修改课程信息。
现在，将以上三个功能已经做到。同时在过程中发现在后端中并不是十分复杂，主要就是在修改和查询中需要查两张表的数据，而做的封装。而前端中较为复杂的点主要是课程分类的二级联动效果。
包括如何做到数据回显，包括二级分类的值默认为空，需要手动构建数据。
