开发者学堂课程【微服务+全栈在线教育实战项目演练（SpringCloud Alibaba+SpringBoot）:课程列表前端（1）】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/667/detail/11474
课程列表前端（1）
内容介绍：
一、在 api 创建 js 文件，引入接口地址
二、在页面中进行调用
三、在分类中进行遍历
四、对课程进行 v-if 判断
一、在 api 创建 js 文件，引入接口地址
1、查询课程列表的方法
第一步操作，在 API 里面创建一个JS文件，引入接口地址，进入 API，在 API 中，创建课程，修改名字为 cos。
点击 JS，进行复制，复制之后修改一下方法，第一个方法为条件查询再分页，更换一下课程名字为 get。
而在方法中，按照写过的接口，有三个参数，第一个参数是当前页，第二个为每月记录数，第三个是对象，所以有三个参数需要传递，然后写三个当前页每页技术和查询对象。
SearchObj 为查询对象的三个条件，接下来写一下接口地址，“/eduservice/coursefront”，详情请看代码。
@RestController
@RequestMapping("/eduservice/coursefront”)
@CrossOrigin
public class CourseFrontController {
@Autowired
Private EduCourseService courseService:
//1 条件查询带分页查询课程
@PostMapping(“getFrontCourseList/{page}/{limit}")
public R getFrontCourseList (@PathVariable long page,
@PathVariable long page
@RequestBody(required = false) CourseFrontVo courseFrontVo) {
Page<EduCourse> pageCourse = new Page<>(page,limit) ;
Map<String.Object> map = CourseService.
getCourseFontList(pageCourse,courseFrontVo) ;
//返回分页所有数据
return. R. ok().data(map);
}
2、查询所有分类的方法
//添加课程分类
//获取上传过来文件，把文件内容读取出来
@PostMapping("addSubject”)
public R addSubject (MultiprtFile file) {
//上传过来excel文件
subjectService.saveSubject(file, subjectservice) ;
return R.ok() ;
}
//课程分类列表（树形）
@GetMapping("gerAllSubject”)
public R getAlISubject() {
//list集合泛型是一级分类
List<OneSubject> list = SUBJECTSERVICE
GetALLONEIWOSUBJECT ();
return R.ok().data(”list”,list);
getCourselist(page, limit , search0bj) {returnrequest({url: /eduservice/coursefront/ getFrontCourseList/${page}/${limit} ,
method:'post',data:search0bj})}
import request from ‘@/utils/request’
export default {
//条件分页课程查询的方法
getCourseList(page, limit, searchObj)
return request({
url: /eduservice/coursefront/getFrontCourseList/
${page}/${limit} ,
method: ‘post’,
data: searchObj
} )
//讲师详情的方法
getTeacherInfo(id) {
return request( {
url: ‘/eduservice/teacherfront/getTeacherFrontInfo/${id}’,
method: ‘get’
} )
二、在页面中进行调用
课程列表页面，在 course 里面有一个 index 目录，就是课程列表。
先引入 course
第一个 page 代表当前页，然后第二个 data 这个值，就是课程列表的数值，写数字、写对象都可以，第三个是一级分类列表，
还有一个二级分类，下面这部分代表二级分类里边有这个，这个是一级分类的集合，还有二级分类集合，下面还有一个叫 SearchObj 是查询条件的表单对象。
点击外语考试，下面显示二级分类，点价格最新（包括关注度等值），每次点击这个值都有颜色的变化。比如这个外语考试变成红色，点价格，它的背景色变成绿色，把直线放置，条件查询，选中效果值，红色变成绿色。
初始值就可以定出。接下来写方法，首先用密布结构来写。
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(){courseApi.getAllSubject().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>
三、在分类中进行遍历
在页面位置中，首先找到“课程类别”—显示所有的一级分类，下面的位置会显示课程数据。
<li v-for="(item, index)in subjec tNestedL ist" : key="index"><a title="数据库"
href="#">{{item.title}}</a></li>
<ulclass-"clearfix"><liv-for="(item, index) in subSubjectlist" :key=" index">
<a title="职称英语"
href="#">{{item.title}}</a></li>
<!-- /无数据提示结束-->
<article v-if="data. total>0" class="comm-course- list"><ulclass="of"id="bna"><liv-for-"itemindata.items":key="item.id"><divclass="cc-l-wrap"><sectionclass="course-img"><img :src="item.cover" class=" img- responsive" :alt=" item. title"><divclass="cc-mask"><а hrеf="/соurѕе/1" tіtlе="开始学习" сlаѕѕ="соmm-btn с-btn-1">开始学习</а>
</div>section><h3class="hLh30txt0fmt10"><a href=" /course/1" :title="item. title" class="course-title fsize18 c-333">{{item.title}}</a>
</h3>
四、对课程进行 v-if 判断
<!-- /无数据提示开始-->
<section class="no- data- wrap" v- if="data. total==0" ><em class="icon30 no- data- ico">
</em><span class="c-666 fsize14 ml10 vam">没有相关数据，小编正在努力整理中...</ span>
</section><!-- /无数据提示结束-->karticlev- if="data. total>0" class="comm-course-list"><ul class="of" id="bna">
