开发者学堂课程【微服务+全栈在线教育实战项目演练（SpringCloud Alibaba+SpringBoot）:课程详情页显示效果完善（2）】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/667/detail/11502
课程详情页显示效果完善（2）
内容介绍：
一、调用核心代码
二、修改前端页面
三、试验效果
一、调用核心代码
开始调用，在 CourseFrontDController 中做个注入
在33行插入
@Autowired
privaten OrdersClient ordersClient；
在54行插入
booleanbuyCourse= ordersClient.isBuyCourse(courseId,JwtUtils,getMemberIdByJwtToken(request));
return R.ok().data(“courseWebVo”,courseWebVo).data(“chapterVideoLise”,chapterVideoList).data(“isBuy”,buyCourse) ;
总结核心代码：
//2 课程详情的方法
@GetMaooubg(“getFrontCourseInfo/{coursed}”)
public R getFrontCourseInfo(@PathVariable String coursed,HttpServletRequest request){
//根据课程id，编写sql语句查询课程信息
CourseWebVocourseWebVo= courseService.getBaseCourseInfo(courseId)；
//根据课程id查询章节和小节
List<ChapterVo>chapterVideoList= chapterService.getChapterVideoByCourseId(coursed);
//根据课程id和用户id查询当前课程是否已经支付过了
booleanbuyCourse= ordersClient.isBuyCourse(courseId,JwtUtils,getMemberIdByJwtToken(request));
return R.ok().data(“courseWebVo”,courseWebVo).data(“chapterVideoLise”,chapterVideoList).data(“isBuy”,buyCourse) ;
}
二、修改前端页面
修改过程：调课程详情时，返回值还有一个 isbuy，把 isbuy 的值得到，在上面的36行的 v-if 中加上一个判断，如果值为 true 或者0，则是立即观看，否则是立即购买。
asyncData 是异步调用方式， 即进入页面时里面做操作，但接口需要再发一次才有数据。
现在需要的效果是进入页面可以立即做判断，所以不适合用异步调用。需要修改这个方式，
把方法写到 creat 中
data(){
return {
courseWebVo:{},
chapterVideoList:[],
isbuy:false,
}
},
created(){//在页面渲染之前执行
this.initCourseInfo()
},
methods:{
//查询课程详情信息
initCourseInfo(){
courseApi.getDourseInfo(params.id)
.then(response =>{
this.courseWebVo=response.data.data.courseWebVo, this.chapterVideoList=response.data.data.chapterVideoList,
this.isbuy=response.data.data.isBuy
})
},
删掉171行至178行，增加
return{coursed:params.id}
修改186行
courseApi.getCourseInfo(this.courseId)
最后在36行做个判断
<section v-if=”isbuy | | Number<courseWebo.price>===0”class=”c-attr-mt”>
||这个符号表示或者，上面的代码表示课程已经购买或者价格是0，
就显示立即观看，如果没有购买或者价格不是0，那么显示立即购
买。
三、试验效果
全部重新启动，重新登陆，点击课程，进入列表页面，点击某一课
程，先点击免费课程，显示立即观看；点击收费课程时，显示立即
购买；购买收费课程后，也变成了立即观看。
