开发者学堂课程【微服务+全栈在线教育实战项目演练（SpringCloud Alibaba+SpringBoot）:课程管理-添加课程信息前端完善（显示分类）】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/667/detail/11372
课程管理-添加课程信息前端完善（显示分类）
内容介绍
一、思路分析
二、一级分类实现
三、二级分类联动效果
四、测试
一、思路分析
1.第一次进入页面
在分类中有一级分类和二级分类。
因为有两个分类，首先应先写一个下拉列表作一级分类，再写一个下拉列表作二级分类。
在考虑显示时，首先第一次进入页面将所有的一级页面全部显示出来，而二级分类默认为空，没有内容。因为二级分类是在一级分类的基础上存在的，单独二级分类并不知道所指的是哪个一级分类；
2.第二次进入页面
而在第二次进入页面时，如果选择了某一个以及分类，会显示选择的一级分类里面对应的二级分类。
假设此时在分类中选择了前端开发的一级分类，二级分类就应该显示 vue 和javaScript，当选择了后端就应该显示 java 和 c++，而选择了数据库就应该是mysql，这就叫做二级联动。
3.总结：
当第一次进入页面时，所有一级全部显示，二级分类为空；当第二次进入页面，选择某个一级分类，再去显示选择里面对应的二级分类。以上则为需要的二级联动效果。
二、一级分类实现
根据思路过程，我们在实际中首先去完成一级分类的显示。过程于显示讲师下拉列表的过程一致。在页面 info.vue 代码中19行代码找到所属分类部分。借鉴课程讲师的下拉列表代码进行修改。
1.一级分类下拉列表实现代码：
<! --所属分类 TODO -->
<el-form-item label=“课程分类"> //课程讲师改为课程分类
//该部分为一级分类，其中为el-select后面加上一级分类的id名
<el-select
v-model="courseInfo.subjectParentId" //更改对应的一级分类名称
placeholder=“一级分类"> //为方便区别改名为一级分类
<el-option
//更改遍历拿出的每个变量名
v-for="subject in subjectoneList"
//在subject中取到id作为key；取到title作为显示值；
:key="subject.id"
:label="subject.title"
: value="subject.id" />
</el-select>
</el-form-item>
(1)获得一级分类名称
在 EduCourse 中找到对照的实体类的课程分类名将其复制过来，其中一级分类叫subjectParentId，其代表了一级分类，对应更改名称 teacherId 为subjectParentId。
l EduCourse 代码如下：
@ApiModelProperty(value ="二级分类ID")
private String subjectId;
@ApiModelProperty(value ="一级分类ID")
private String subjectParentId;
（2）定义初始值
更改名称后，同时在页面 info.vue 中81行代码为一级分类定义初始值。
l 代码如下（红色为添加部分）：
import course from '@/ api/ edu/ course'
export default {
data() {
return {
saveBtnDisabled:false,
courseInfo:{
title: ' ',
subjectId: ' ', //二级分类id
subjectParentId：’ ’， //一级分类id
teacherId: ' ',
lessonNum: 0,
description: ' ',
cover: ' ',
price: 0
},
teacherList:[]//用于封装所有讲师的数据
}
2. 接口调用
一级分类接口的调用和上章显示讲师的过程一致，首先查询所有的一级分类。
（1）一级分类查询
在 api 的 edu 中找到 subject.js。在此方法代码中，既有一级分类也有二级分类，所以直接调用 getSubjectList()此方法即可。
按照此方法结构，对照 OneSubject 中的一级分类有多个二级分类的形式。得知单调用 getSubjectList() 就可以实现，无需单独再写。
l subject.js 代码如下：
import request from '@/utils/request'
export default {
//1课程分类列表
getSubjectList(){
return request(
url: '/eduservice/ subject/getAllSubject ',
method:'get'
})
l OneSubject代码如下：
import lombok. Data;
import java.util.ArrayList ;
import java.util.List;
//一级分类
@Data
public class OneSubject{
private String id;
private String title;
//一个一级分类有多个二级分类
private List<TwoSubject> children = new ArrayList<>() ;
}
① 首先在页面代码74行后添加代码：import subjectfrom "@/ api/eduf subject'
② 再在方法中添加查询所有一级分类的代码，方法名为 getOneSubject() 写完后再调用 getSubjectList()方法，加上.then 通过箭头函数和 response.data 将其中的数据得到。
l 代码如下：
methods:{
//查询所有的一级分类
getOneSubject() {
subject.getsubjectList(
.then( response = {
response.data.list
//在接口EduSubjectController中得到名称list
③ 定义初始值，使得能接收值。在页面代码91行处，定义一级分类和二级分类的初始值。
l 代码如下：
subjectOneList:[],//一级分类数组或是集合
subjectTwoList:[], //二级分类
④ 写完之后对一级分类做一个赋值将页面代码的104行，修改为：this.subjectOneList = response.data.list
⑤ 修改完成后在页面代码的 created()中作调用，即99行代码添加以下代码。到此全部完成。
l 代码如下：
//初始化一级分类
this.getOnesubject()
3.总结
整体做法即先在页面中把 subject 引入 t，因为之前 subject.js 中已经定义过了查找所有分类的方法-getSubjectList，其中包含一级二级分类。再写一个调用接口的方法 getOneSubject，得到这个值赋给定义的 subjectOneList 变量，包括在 created调用。
free 之后 subjectOneList 在下拉列表中再做一个 v-for 遍历，得到每个的 id 和名称title，以上就是一级分类的部分
4.效果展示
刷新页面后可以看到，课程分类的下拉列表此时显示的为前段开发，后端开发和数据库开发三个都为一级分类。同时为了易于区分，将页面代码23行 placeholder 命名为一级分类。
三、二级分类联动效果
但到此并未完成，因为除了一级分类外，还应有二级分类，而二级分类部分也需要下拉列表来显示，但一级分类和二级分类之间有所关联。因此我们对照代码再写一个下拉列表。将组件模板代码放在页面中刚刚写的一级分类的下拉列表代码下方（info.vue33 行）
1. 组件模版
<! --二级分类-->
<el-select v-model=" courseInfo.subjectId" placeholder="请选择">
<el-option
v-for="subject in subSubjectList"
:key="subject.value"
: label="subject.title"
: value="subject.id" />
</el-select>
l 代码如下（红色为添加部分）：
<! --所属分类 TODO -->
<el-form-item label=“课程分类"> //课程讲师改为课程分类
<el-select
v-model="courseInfo.subjectParentId" //更改对应的一级分类名称
placeholder=“一级分类">
<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"//subSubjectList改为之前定义的subjectTwoList
:key="subject.value"
: label="subject.title"
: value="subject.id" />
</el-select>
</el-form-item>
2. 二级分类下拉列表效果展示
添加对应代码后，运行查看效果，此时二级分类显示为空。此时需要达到点击一级分类后会显示出对应的二级分类，如：点击后端开发，显示后端开发对应的内容。在当不断点击一级分类时，里面的值会不断改变，因而需要给其绑定事件。
在此采用 onchange 事件，即当每次改变一级分类的下拉列表中中值都会触发change 事件，所以只要在一级分类的下拉列表中绑定一个 change 事件，当change 事件一触发就会将其值取到。
（1）注册 change 事件
绑定事件即在一级分类的<el-select>组件中（页面代码23行）添加代码：@change="subjectLevelOneChanged" 表示添加一个改变其中值的事件，其中的subjectLevelOneChanged方法表示当其中的一级分类值改变时，就取得其对应的二级分类值。
l 页面处代码如下（红色部分为添加代码）：
<! --所属分类 TODO -->
<el-form-item label=“课程分类"> //课程讲师改为课程分类
<el-select
v-model="courseInfo.subjectParentId" //更改对应的一级分类名称 //绑定事件
（2）添加 subjectLevelOneChanged 方法
思路
在页面代码110行的 methods 中添加对应的方法代码，使得点击某个一级分类就可以触发 change，显示对应二级分类。方法的书写有多种形式，其中一种：当选择某个一级分类时，它含有一个 id 值，我们将这个id值去写接口，之后再调用接口得到一级分类里面的二级分类的值就可以。
比方此时选择前端开发，它对应的 id 值为1234285838050029570，我们对应着id值去查找二级分类中哪个的 parent_id 值是1234285838050029570，之后返回它的 title 即可。主要思想：拿着一级分类的 id 去找二级分类对应的 parent_id，再返回对的上的二级分类 title 值。但在开发中并不建议这样操作，因为不仅要再写一个接口还要使用到数据库太过繁琐。
根据之前的 getSubjectList 传入数据中既有一级分类又有二级分类，所以根据其在前端作遍历，不需要再次查一次接口，在前端将所有的数据取下，仅查一次即可。
3.实现点击一级分类后显示出对应的二级分类
首先第一步当点一级分类的时候要触发事件，当触发事件的时要得到一级分类的id，因为此时使用了框架，在其中已经做了封装，所以此时只需要在方法里添加参数 value，参数就是一级分类的 id 值。
参数 Value 会帮助我们传 id 值。若使用原始方法就需要采用subjectLevelOneChanged（this.value）的形式，但此处并不需要。直接写个方法名字就可以在方法中得到所写的id值，加个参数就可以得到。
（1）测试 value 值是否为一级分类 id
同时在 subjectLevel0neChanged(value) 方法中加上 alert(value);将 value 的值输出，查看其得到的值是否是一级分类 id
l 代码如下（页面代码110行）：
methods:{
//点击某个一级分类,触发change,显示对应二级分类
subjectLevel0neChanged(value) {
//value就是一级分类id值
alter(value);
},
//查询所有的一级分类
getOneSubject() {
subject.getSubjectList()
.then( response => {
this.subjectoneList = response.data.list
l 测试说明
刷新页面，未选择一级分类时，二级分类为空，此时选择一级分类为前端开发就会出现对应的前端开发 id 值，再选后端会出现对应的后端 id 值6610，而数据库对应的 id 值为5650,此时可知添加参数后选择一级分类后都会将其对应的一级分类id值传入输出，不必再次重复写。
（2）放入一级分类 id 对应的二级分类值
获得一级分类 id 值后，因为此时二级分类的值仍为空只需把一级分类 id 对应的二级分类的值放入 subjectTwoList 中即可。
l 做法：
将所有的一级二级分类做个遍历，遍历之后做一个判断，判断当前的一级分类 id 是否和所有的一 级 id 一致？如果一致的话，从一级分类中把二级分类取到，因为一级中的二级即 children（在 OneSubject.java 中 做的封装可以得知，chidren 即二级分类）
l OneSubject.java 代码：
import lombok.Data;
import java.util.ArrayList ;
import java.util.List;
//一级分类
@Data
public class OneSubject {
private String id;
private String title;
//一个一级分类有多个二级分类
private List<TwoSubject> children = new ArrayList<>();
}
（3）定义 change 事件方法
l 代码如下：
subjectLevelOneChanged(value) {
console.log(value)
//先遍历所有的一级二级分类
for (let i = 0 ; i < this.subjectNestedList.length; i++) {
//再判断当前的一级分类id是否和所有的一级id一致？
if (this.subjectNestedList[i].id -== value){
//如果一致的话，从一级分类中把二级分类取到
this.subSubjectList = this.subjectNestedList[i].children
this.courseInfo.subjectId = ‘ ’
}
在页面代码中（110行）的 methods 方法中添加
l 代码如下：
methods:{
//点击某个一级分类,触发 change, 显示对应二级分类
subjectLevel0neChanged(value) {
//value 就是一级分类 id 值
//遍历所有的分类，包含一级和二级
//采用 for（）循环遍历，其中参数不能为 int，但可使用 var 和 let，同时注意是.length 而不是 set 因为是数组。
for(var i-e;i<subjec tonelist.length;i++){
//得到每个一级分类
var oneSubject = subjectoneList[i]
//判断：所有一级分类 id 和当前点击的一级分类 id 是否一致
if(value ms= oneSubject.id){
//如果相等，从一级分类获取里面所有的二级分类，因为一级分类的二级分类叫做chlidren，直接.children 即可。最后使用 this 做个赋值。
this.subjectTwoList = oneSubject.children
}
4.总结
首先按照一级分类制作下拉列表的过程为二级分类制作下拉列表后，再实现二级分类的联动（即点击一级分类可以对应显示出其二级分类内容），首先把所有的一级分类查出来显示，在一级分类上绑定一个 change 事件，表示当一级分类值变化时就会触发其事件，在事件中得到一级分类的 id 值，因为是框架已经封装完好的，所以可以直接通过 value 传过来即可，得到一级分类的 id 值（value）之后，将分类完整遍历，同时因之前的接口中即含一级分类又含二级分类，得到每个一级分类将其比较判断选择的是否与当前选择的一级分类 id 值相同，相同则获取其一级分类里的二级分类即可，取出后遍历即可显示出。
四、测试
此时一级分类能够显示所有内容
二级分类在未选择一级分类时为空。
但当选择前端开发时，二级分类仍为空，说明代码出错。当代码出错时，点开f12查看是否报错即可。
按 f12找到console，之后再点击前端开发，可以看见报错提示error:subjectOneList is not defined 表示 subjectOneList 这个变量未被定义。根据提示：将页面代码（info.vue）中的115行的subjectOneList.length改为this.subjectOneList.length 即可，因为subjectOneList在data中做了定义，所以在之后使用时就应该添加 this 使用。同时注意只是 data 中定义的需要加 this，而117行代码的 var 就不需要添加。
l 查看错误：
当后端并未报错，但前端并未相应的显示效果时，点击 f12查看工作台的 console 中的报错提示即可，同时注意[vue warn]后的报错并不是真正的报错！ReferenceError：后才是真正的报错。
最后保存代码，就可以看见点击前端开发时，对应显示其二级分类的内容：vue,javascript 和 Jquery。
选择后端开发也会显示对应的 java 和 c++,数据库开发同理显示 mysql。这就是二级联动效果。
