开发者学堂课程【微服务+全栈在线教育实战项目演练（SpringCloud Alibaba+SpringBoot）:课程管理-修改课程信息（前端）】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/667/detail/11380
课程管理-修改课程信息（前端）
内容介绍
一、api 部分
二、页面中
三、实现数据回显
四、总结
五、效果展示
六、图例展示
一、api 部分
修改课程信息的前端部分，按照过程。第一部分是在 api 中把方法定义一下，之后再进行操作。
找到 course.js 之前有添加课程信息和查询所有讲师两个,在之后添加逗号。继续添加根据课程 id 查询课程基本信息和修改课程信息的代码。
1.根据课程 id 查询课程基本信息
按照之前查询所有讲师的代码，进行修改。将方法名改为 getCourseInfoId,同时传入课程 id 为参数。
l 代码如下：
getCourseInfoId( id) {
}
写上之前编写的根据课程 id 查询课程基本信息 getCourseInfo 接口，在后面加上id值，写法多种方式，可以使用/${课程id}表达式的方式，也可以使用拼接，两者效果一致。使用拼接 id 值时要注意/ eduservice/teacher/ getCourseInfo/ 最后的斜杠’/’不能省略，省略后会变为/ eduservice/teacher/ getCourseInfo1233会直接将 getCourseInfo1233作为方法。
l 代码如下：
//其中的teacher错误，在测试时应更改为course
url: ‘/ eduservice/teacher/ getCourseInfo/ ' +id,
使用get提交方式。
l 代码如下：
method: 'get'
l course.js添加完整代码如下：
//根据课程id查询课程基本信息
//将方法名改为getCourseInfoId,同时传入课程id为参数
getCourseInfoId(id){
return request({
//更改接口名为根据课程id查询课程基本信息对应的getCourseInfo接口
//其中的teacher错误，在测试时应更改为course
url: ‘ / eduservice/teacher/ getCourseInfo/ ' +id,
//提交方式为get提交
method: 'get'
})
},
以上就是一个 id 查询接口。
2. 修改课程信息
修改的接口方法定义，更名为 updateCourseInfo。
l 代码如下：
updateCourseInfo( courseInfo) {
}
因为修改要传的参数是一个对象，所以参数命名为 courseInfo。之后更改接口名为updateCourseInfo，没有 id 所以删除之后的 id 和/符号。
l 代码如下：
//其中的 teacher,在测试时应更改为 course
url: ‘ / eduservice/teacher/ updateCourseInfo ‘ ,
提交方式为 post,同时因为使用的是 requestbody 的 json 传递，所以添加 data：courseInfo。
l 代码如下：
method: 'post ' ,
data: courseInfo
l course.js添加完整代码如下：
//修改课程信息
//将方法名改为updateCourseInfo,同时将要传的参数命名为courseInfo
updateCourseInfo( courseInfo) {
return request({
//更改接口名为修改课程信息对应的updateCourseInfo接口
//其中的teacher错误,在测试时应更改为course
url: ‘ / eduservice/teacher/ updateCourseInfo ‘ ,
//提交方式为post提交
method: 'post' ,
//因为使用的是requestbody的json传递，所以添加data。
data: courseInfo
})
}
至此两个接口就定义完毕，一个id查询一个修改。
二、页面中
在页面中，首先第一部分要实现点上一步的时候能够回到页面中作修改的方法previous。找到页面中的 previous 方法做修改，将之前的1改为在 created（）中this.courseId = this.$route.params.id 得到的课程id值，包括跳转到第二步时也改为课程 id 值。
l 代码如下：
previous( ) {
//得到当前页面中得到的课程id
this.$router.push({path: ‘ /course/ info/ '+this.courseId})
}，
next( ) {
//跳转到第二步，同时当前页面的得到的课程id
this.$router.push<{path: ‘/ course/publish/'+this.courseId)
}
三、实现数据回显
1.分析
第三步就是在数据回显页面 info 页面实现数据回显。当点击上一步，要回到 info页面，然后将课程 id 值 this.courseId 能传过去。在 info 页面中的路径后会显示课程id 值，首先得到课程 id 再调用接口根据 id 查出数据内容做个回显即可。所以在页面中首先获取路由课程 id，调用根据 id 查询接口，最后实现数据显示。
2.info.vue中
① data()部分
现在 data 中定义 courseId 初始值，方便后续使用。
l 代码如下：
courseId:’ ’
② methods 部分
编写根据课程 id 查询的getInfo方法，在其中引用导入的course中的getCourseInfoId 方法，同时传入取到的课程 id 参数 this.courseId。之后.then 使用箭头函数将其中的值取出来，方便后续使用。同时将课程信息复制给 courseInfo中有 v-model 有数据回显的效果。
l 代码如下：
getInfo(){
//定义根据课程id查询的方法getCourseInfoId，传入当前页面获取的课程id值
course.getCourseInfoId(this.courseId)
then( response => {
//使用responce箭头函数获取课程信息，再赋给courseInfo中
this.courseInfo = response.data.courseInfovo
})
}，
该方法就是根据路由的id值得到课程的信息。
③ created()部分
来到created（）中，首先获取路由id值。得到之后将其赋值给初始化的this.courseId。
l 代码如下：
//获取路由id值
if(this.$route.params 8& this.$route.params.id) {
this.courseId = this.$route-params.id
}
之后调用接口根据课程 id 查询的方法
l 代码如下：
//调用根据id查询课程的方法
this.getInfo()
l 完整代码如下：
created(){
//获取路由id值
if(this.$route.params 8& this.$route.params.id) {
this.courseId = this.$route.params.id
//调用根据id查询课程的方法
this.getInfo()
}
//初始化所有讲师
this.getListTeacher()
//初始化一级分类
this.getoneSubject()
},
四、总结
到此基本思路就全部完成。在页面中，做法是首先取到路由中的 id 值，因为要根据课程 id 查询基本信息。
而路由中的 id 值在页面代码 chapter.vue 的 previous 中就已经传过来了，我们在info.vue 中 created()将其取到将其赋给我们初始化好的变量 courseId。
最后调用 methods()中 getInfo()方法根据课程 id 将课程信息查询出来在页面中做回显，即复制给 courseInfo,因为 courseInfo 在之前代码中写到了v-model所以可以做到数据回显，以上就是前端部分做到的初步效果。
五、效果展示
完成之后，查看效果如何。首先启动代码，启动后，来到前端页面，添加一条新数据：标题为10100303,一级分类为前端开发，二级分类为JavaScript,课程讲师为王五，总课时为10,课程简介为111,课程封面默认，课程价格为10。
成功将数据添加到数据库之后，来到第二步发现第一次没有大纲，加完代码后才有。此时点击上一步，查看是否返回上一页面同时完成数据回显，同时路由器的id值会被传到页面中，因为它是课程 id。
发现显示报错：
NetWork Error，通常是因为接口错误。
首先我们点f12查看其中具体报的是什么错，发现其中的状态码为403。而403错误一般分为两种，第一是跨域产生的，第二是因为路径写错了。除此之外没有其他可能。
在 EduCourseController 代码中查看跨域的注解说明发现没有问题，那么可能是前端 course.js 中路径的问题，发现是在编写接口代码时路径名忘改成 course，包括在错误提示中也有提示在9001/eduservice/teacher/getCourSeInfo/12345674688228364289报的403()。此时接口中是没有 teacher，此时报的就是该问题。而出现’Access -Control-Allow-Origin’而并未出现403也表示着跨域和路径写错两种问题。
所以将接口路径的 teacher 改为 course
l 代码如下：
//根据课程id查询课程基本信息
getCourseInfoId(id){
return request({
url: ‘ / eduservice/course/ getCourseInfo/ ' +id,
method: 'get'
})
},
//修改课程信息
updateCourseInfo( courseInfo) {
return request({
url: ‘ / eduservice/course/ updateCourseInfo ‘ ,
method: 'post' ,
data: courseInfo
})
}
六、图例展示
接口做到之后，我们来开发前端。
第一步在 api 里面 course.js定义接口两个方法
第二步修改 chapter 页面，跳转路径,将路径能加上课程id
previous( ) {课程 id
this.$router.push({path: " /course/ info/ '+this.courseId})
}，
第三步在 info 页面实现数据回显
获取路由课程 id,调用根据id查询接口，数据显示。
created(){
//获取路由id值
if(this.$route.params 8& this.$route.params.id) {
this.courseId = this.$route.params.id
//调用根据id查询课程的方法
this.getInfo()
}
根据取到的 id 值调用方法，方法中为根据 id 作查询，得到最终的数据。
methods:{
//根据课程id查询
getInfo(){
course.getCourseInfoId(this.courseId)
.then( response => {
this.courseInfo = response.data.courseInfovo
})
}，
上面代码测试，出现403状态码
403()
1. 跨域
2. 路径写错了
