开发者学堂课程【微服务+全栈在线教育实战项目演练（SpringCloud Alibaba+SpringBoot）:课程管理-修改课程信息（前端）】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/667/detail/11381
课程管理-修改课程信息（前端）
内容介绍
一、测试错误
二、下拉列表数据回显
三、总结
四、最终结果测试
一、测试错误
1.错误
将上节课的403错误的接口路径纠正后，此时点击上一步后的页面数据能够做显示。为了明显再重新添加一次数据进行测试，标题为10108888,一级分类为前端开发，二级分类为 JavaScript,课程讲师为王五，总课时为10,课程简介为111222,课程封面默认，课程价格为10。
数据都设置完成后点击保存并下一步，添加数据。然后点击上一步，查看是否能成功的完成数据回显。
可以看到点击上一步后，显示的页面数据都是正确的。
但其中的二级分类值没有回显，变为了一串数字。正确效应应该是点击一级分类，显示当前选择的一级分类值以及其他值，二级分类显示之前选的二级分类，有其他值，但此时是不对的。
对照二级分类显示的一串数字尾号4049，发现该数字对应着表中存在表中二级分类的id值，说明此时二级分类的 id 值能够传过来，但是值并没有成功传过去。
2. 原因分析
因为在 info.vue 页面中之前写一级二级时写了二级联动效果，此时一级效果会显示，但是其对应的二级分类默认没有值可以显示。
当点一级分类二级分类才有值。此时问题即为二级分类此时没有值，但却传了值，所以使用了 v-model 将 courseInfo.subjectId 做了显示。
l 代码如下：
<!--所属分类TODo -->
<el-form-item label="课程分类">
<el-select
v-model="courseInfo.subjectParentId"
placeholder="一级分类”achange="subjectLevelOneChanged">
<el-option
v-for="subject in subjectoneList"
: key="subject.id"
: label="subject.title"
:value="subject.id" />
</el-select>
<!--二级分类-->
<el-select v-model="courseInfo.subjectId" placeholder="二级分类">
<el-option
v-for="subject in subjectTwoList"
: key="subject.id”
: label="subject.title"
: value="subject.id" / >
</el-select>
</el-form-item>
但一级分类是每次进入页面中都会进行查询：This.getOneSubject(）同时在使用getOneSubject(）方法中 subjectOneList 中有一级分类的数据。所以一级分类有值。
l 代码如下：
//查询所有的一级分类
getoneSubject() {
subject.getSubjectList()
.then( response => {
this.subjectOneList= response.data.list})
})
}，
但二级分类中的 subjectTwoList 每次进入页面为空，所以没有值。不能做显示，所以看到的效果就是一串 id 值，其中下拉列表没有值。
l 代码如下：
<!--二级分类-->
<el-select v-model="courseInfo.subjectId" placeholder="二级分类">
<el-option
v-for=""subject in subjectTwoList
: key="subject.id"
: label="subject.title"
: value="subject.id" />
</el-select>
</el-form-item>
以上就是需要解决的问题，在此先介绍底层做法，再用框架实现。该过程也是在javaweb 中学到的，都是之前知识，真正过程不必非常繁琐。
二、下拉列表数据回显
1.思路分析
比方此时有一个下拉列表，其中有许多数据，假设第一次添加时选的一级分类为前端开发，再回显时前端开发就会被默认选中。
下拉列表就会显示其他值。默认选中是通过拿存储 id 值和分类所有 id 值进行比较，在此就是拿着前端开发id值和前端开发、后端开发和数据库开发 id 值一一比较，查看哪个 id 值是一样的。如果比较相同，就让相同值进行数据回显。
要做到数据回显使用<seledct></select>标签。假设此时为前端开发就在其中添加一个<option>前端开发</option>，如果要添加选中效果则在 option 后加一个selected,一般为 selected=“selected”，仅仅写 selected,也可以。此为 web 中的基础内容。
l 代码如下：
<select>
<option selected="selected">前端开发</option>
</select>
此外还可以使用复选框和单选框选中的效果。
l 代码如下：
//复选框选中
<input type="checkbox" checked/>
//单选框选中
<input type="radio" checked/>
此时下拉列表的显示就是根据存储 id 和分类所有 id 进行比较，如果比较相同，就添加一个 selected 属性默认选中，而并不需要手动添加，框架中会自行添加，如果我们自己要添加只能使用 JavaScript 代码。在页面 info.vue 代码中都已经帮我们完成，现在只需要将 subjectOneList 一级分类值传过来，包括 subjectParentId 的 id 值传过来会自动进行比较，如果相同则会回显，我们只需要传id值和数组值。
一级分类在进入页面都做了初始化，能够显示。而二级分类中只有id值subjectTwoList，而集合中没有值，无法回显，只能将 id 值传了过来，出现了以下效果。
我们的框架中只需要传入 id 值和数组值即可。其他值不需要，首先进行分析。
找到 info.vue 中 created()是先获取路由id值，得到课程 id，再根据课程 id 得到里面的课程信息。在 courseInfo 中会有课程的信息。
l 代码如下：
created(){
//获取路由id值
if(this.$route.params 8& this.$route.params.id) {
this.courseId = this.$route.params.id
//调用根据id查询课程的方法
this.getInfo()
}
之后再 methods 中 courseInfo 中有课程信息，包含一级分类 id 和二级分类id两者全有，此时一级分类既有数组又有值，二级分类值 subjectTwoList 为空。
此时就是为了让一级分类下的二级分类 subjectTwoList 有值，有一级分类下面的所有二级分类。
methods:{
//根据课程id查询
getInfo(){
course.getCourseInfoId(this.courseId)
.then( response => {
//在courseInfo中有课程信息，包含一级分类id和二级分类id
this.courseInfo = response.data.courseInfovo
})
}，
2.解决方法
做法有多种方式，还是使用前端做法，与二级联动相似。借鉴下方课件代码，先做获取然后 else 初始化分类列表，再获取列表等等。
l 代码如下：
init() {
if(this.$route.params 88 this.$route.params.id){
const id = this.$route.params.id
//根据id获取课程基本信息
this.fetchCourseInfoById(id)
}else {
this.courseInfo = { ...defaultForm }
//初始化分类列表
this.initSubjectList(）
//获取讲师列表
this.initTeacherList(）
}
},
主要为以下，首先为根据id查询,查出基本信息。查出来后根据再调用接口，将所有的一级二级分类全部查出来。
之后做个判断，判断当前默认回显一级分类的 id 和所选的一级分类id是否相同。一样则取出它的二级分类值，使其有值。也就是该过程，查出所有一级二级分类，然后做个比较。
l 代码如下：
//根据 id 值查询课程基本信息 courseInfo
fetchCourseInfoById(id){
course.getCourseInfoById(id).then(responseCourse =>{
this.courseInfo = responseCourse.data.item
//初始化分类列表
//通过再调用接口，将所有一级二级分类查出来
subject.getNestedTreeList().then(responseSubject => {
this.subjectNestedList = responseSubject.data.items
for (let i -e; i < this.subjectNestedList.length; i++){
//判断当前默认回显一级分类的id和所选的一级分类id是否相同
if (this.subjectNestedList[i].id === this.courseInfo.subjectParentId){
//如果一样，将一级分类对应的二级分类值取出，让subSubjectList有值。
this.subSubjectList = this.subjectNestedList[i.].children
}
}
})
3. 代码实现
（1）Created()部分
首先在created()的if中加个 else，变为如下。表示如果路由中有id值做修改，如果没有id值做添加，添加就可以加载。因为 id 有值做的是回显，没有值是添加。
l 代码如下：
created() {
//获取路由id值
if(this.$route.params && this.$route.params.id) {
//路由中有id值
//修改操作
this.courseId = this.$route.params.id
//调用根据id查询课程的方法
this.getInfo()
} else {//路由中没有id值，做添加
//添加操作
//初始化所有讲师
this.getListTeacher( )
//初始化一级分类
this.getoneSubject()
}
},
（2）methods 部分
之后再 methods中的 getInfo()方法后添加代码。
l 代码如下：
methods:{
//根据课程id查询
getInfo(){
course.getCourseInfoId(this.courseId)
.then( response => {
//在courseInfo中有课程信息，包含一级分类id和二级分类id
this.courseInfo = response.data.courseInfovo
//1查询所有的分类，包含一级和二级。调用subject中的getSubjectList()方法，其中含有封装的一级二级数据所有结构。
subject.getSubjectList()
.then( response => { //response箭头函数
//2获取所有一级分类
在获取EduSubjectController中得知所有一级分类名为list,使用response.date.名称获取。最后将其赋值给subjectoneList一级分类数组得到所有一级分类。
this.subjectoneList = response.data.list
//3 把所有的一级分类数组进行遍历，比较当前courseInfo里面一级分类id和所有的一级分类id是否一样，因为courseInfo是回显的一级分类id，subjectoneList有所有的一级分类id。
for(var i=0;i<this.subjectonelist. length;i++) {
//获取每个一级分类
var oneSubject = this.subjectOneList[i]
//比较当前courseInfo里面一级分类id和所有的一级分类id，是否一样
if(this.courseInfo.subjectParentId == oneSubject.id){
//如果相同，获取一级分类所有的二级分类，最后将其赋值给info.vue页面中定义的subjectTwoList。
this.subjectTwoList = oneSubject.children
}
//初始化所有讲师
this.getListTeacher( )
})
}，
以上代码的目的是为了将一级分类下面的所有的二级分类取到，包括课程中 id 值，会帮我们做到数据回显。与之前分析一致，只要有数组和 id 值就能实现数据回显，在其中加个 selected，使用框架帮我们做到。
三、总结
写法就是首先在页面中得到路由中的课程id,得到之后调用 getInfo方法。在方法中先把课程的基本信息得到，其中包含课程名称，简介等等，也包含一级二级分类id。得到之后将所有分类都查出来，因为需要构建二级分类。获取一级分类后，做遍历，遍历之后比较比较当前 courseInfo 里面一级分类 id 和所有的一级分类 id，是否一样。如果一样将这个一级分类里面的二级分类取出来，构建集合值subjectTwoList，因为有了集合值和di值就能实现数据回显。最后将讲师的代码也放在 getInfo()中，因为它也需要做数据回显。
四、最终效果测试
1.测试效果
完成之后，查看效果如何。首先启动代码，启动后，来到前端页面，添加一条新数据：标题为1010666,一级分类为前端开发，二级分类为 JavaScript,课程讲师为王五，总课时为10,课程简介为111,课程封面默认，课程价格为10。
点击保存并下一步，提示添加成功后。
点击上一步，可以看见数据成功回显。一级分类和二级分类的值都显示出来了。包括在二级中也有其他值，一级中也有其他值。还可以进行下一步修改。
到此数据回显就实现了。最后梳理一遍：只需要两个值一个是一级分类和二级分类的数组，第二个就是对应的一级分类和二级分类的值，将两者全部传过去，就能做到数据回显，这是框架本身做到的。但如果写JavaScript原始代码就需要手动做到。
2. 小 bug
但在此处仍存在一个问题，当点击上一步回显后，再次添加课程添加新数据时，再次进入第一步填写课程基本信息的页面时，表单数据并未清空，所以我们要将其清空。同学们参考讲师部分内容，自行完成，不作讲解。
