开发者学堂课程【微服务+全栈在线教育实战项目演练（SpringCloud Alibaba+SpringBoot）:课程列表前端（3）】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/667/detail/11476
课程列表前端（3）
内容介绍：
一、在 api 创建 js 文件，引入接口地址
二、在页面进行调用
一、在 api 创建 js 文件，引入接口地址
1、查询课程列表的方法
2、查询所有分类的方法
二、在页面进行调用
1、在一级分类添加时间
<liv-for="(item, index) in subjec tNestedL ist" : key=" index"><a :title="item.title" href="#" @click=" search0ne( item. id, index)">{{item. title}}</a>
</li>
2、点击某个一级分类，查询对应二级分类
显示所有一级分类，点击某个一级分类，在下面显示对应二级分类
import courseApi from ‘@/api/course'
exportdefault{
data() {
return{page:1, //当前页
data:{}, //课程列表
subjectNestedList:[ ], // 一级分类列表
subSubjectList: [ ], //二级分类列表
searchobj:{}, //查询表单对象oneIndex:-1, twoIndex:-1,buyCountSort:"",gmtCreateSort:"",priceSort:""
}
},
created() {
//课程第一次查询
this.initCourseFirst( )
//一级分类显示
this.initSubject( )
},
methods:{
//1 查询第一页数据
initCourseFirst() {
courseApi.getCourselist(1,8,this.search0bj).then(response => {
this.data = response. data.data
} )
},
//2 查询所有一级分类initSubject(){courseApigetAllSubject( )
then(response=>{this. subjectNestedList = response.data.data.list
})
},
//3分页切换的方法
gotoPage(page) {
courseApi.getCourseList(page,8,this.search0bj).
then( response => {
this.data=response.data.data})
}
};
</script>
//4 点击某个一级分类，查询对应二级分类
szarch0ne( subjectParentId, index) {
//把传递 index 值赋值给 oneIndox ,为了 active 样式生效
this . oneIndex = index this. twoIndex = -1
this. search0bj. subjectId = “”
this. subSubjectList = [ ]
//把一级分类点击 id 值，赋值给searchObj
this. search0bj . subjectParentId = subjec tParentId
//点击某个一级分类进行条件查询
this.gotopage(1)//拿着点击一级分类id和所有一级分类id进行比较
//如果id相同，从一级分类里面获取对应的二级分类for(let i=0;i<this. subjectNestedList .length;i++) {
//获取每个一级分类
var oneSubject = this. subjec tNestedList[i]
//比较 id 是否相同
if( subjectParentId == oneSubject.id) {
//从一级分类里面获取对应的二级分类
this. subSubjectList = oneSubject .children
}
</li>
<li>
<atitle="最新"href="#">最新</ax
</li>
<LI CLASS="CURRENT BG-ORANGE")
<atitle="价格"href="#">价格 ；
SPANX/SPAN)
</a >
</li>
</ol>
</SECTION> </div>
<DiV ClASS="MT40")
--/无数据提示开始-->
<SECTION CLASS="NO-DATA-WRAP" V-IF="DATA.TOTAL==0"
<EM CLASS="ICON30 NO-DATA-ICO">&NBSP:</EM)
点击复制之后，在上面二级分类，做一个遍历，这个遍历二级分类，这是基本写法。
这么做之后，就完成了二级联动效果，只是现在是在这个列表中显示，不是用下拉列表方式，但是做法应该都一样的，这是我们做的一个基本效果，在这个效果中，现在做完之后，先做一个测试看目前效果能不能出来，如果能出来，就把查询包括其他部分加上。
一步一步往下实现，慢慢做。试一下结果。现在接口应该在启动状态，包括前端也都启动，来到页面中，页面中重新刷新，点F5重新刷新，刷新之后点击课程，第一次显示所有一级分类，比如选择一个较前段开发，看二级分类能不能显示。
看表里边，前端开发下边有三个二级分类，看能不能显示，当点某一分类，下面显示它对应的二级分类。
比如一个后端开发，Java c++，再点数据库，这是对应里边的二级分类，就是联动效果。一级分类显示对应的二级分类就是另外一种显示方式的联动效果。所以完成了准备功能，这个功能能快速做到，完成之后，把细节再进一步完善。
/4 点击某个一级分类，查询对应二级分类
search0ne( subjectParentId, index) {
//把传递 index 值赋值给 oneIndox ,为了 active 样式生效
this.oneIndex=index
this. twoIndex = -1
this. search0bj. subjectId = “”
this. subSubjectList = [ ]
//把一级分类点击 id 值，赋值给searchObj
this. search0bj . subjectParentId = subjec tParentId
//点击某个一级分类进行条件查询
this.gotopage(1)//拿着点击一级分类id和所有一级分类id进行比较
//如果id相同，从一级分类里面获取对应的二级分类
for(let i=0;i<this. subjectNestedList .length;i++) {
//获取每个一级分类
var oneSubject = this. subjec tNestedList[i]
//比较 id 是否相同
if( subjectParentId == oneSubject.id) {//从一级分类里面获取对应的二级分类
this. subSubjectList = oneSubject .children
}
3、添加提示色
从用户体验角度考虑，假如点击前端开发，让它颜色变成红色，或者加个背景色，点后端开发让它变个颜色或者加个背景色，把样式上的显示不断完善。可以使用CS中的一些小知识点。
从课件中，复制一段样式，然后把这个样式放到页面的最下边，是一段CS代码，表示第一个样式。点 active 这个名字，加上背景色，不显示“show”表示显示，就可以加个背景色。
在一级分类中添加 :class=”{active:oneIdex==index}”
在文件末添加
<style
scoped>.active{background: #bdbdbd ;
}.hide{display: none;
}.show{display:block;}</style>
