开发者学堂课程【微服务+全栈在线教育实战项目演练（SpringCloud Alibaba+SpringBoot）:课程详情页显示效果完善（1）】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/667/detail/11501
课程详情页显示效果完善（1）
目录：
一、完善目标
二、实现目标
一、完善目标
在课程列表页面中，有很多课程，有些课程是免费的，有些是收费的 ，目前还未做处理。
目前的效果是，当点击某一个课程时，进入到详情页面，而在详情页面中都是立即购买，不论免费还是收费都需要购买。
目标效果：
在课程详情页面，有按钮，立即观看（立即购买）
1、 如果课程是免费课程，按钮显示立即观看
2、 如果课程是已经支付过，按钮显示立即观看
3、 如果课程没有购买，或者不是免费课程，按钮显示立即购买
二、实现目标
先看前端页面，再写接口。
在前端页面做的是课程详情页面，先打开_id.vue，找到立即购买的按钮
<section class=”c-attr-mt”>
<a @click=”createOrders()” href=”#”title=”立即购买”
<section
在这个代码中做判断，实现功能。
在列表页面中，找到<span v-if=“Number<item.price> === 0”class=”fr jgTag bg-green”>
这个指令叫v-if。这条代码的含义为，如果课程的价格是0，则表示课程是免费的。
这只能判断课程是免费的，不能判断课程有没有支付过。所以复制后做判断即可。
改为
<section v-if=”Number<courseWebVo.price> === 0”class=”c-attr-mt”>
<a @click=”createOrders()” href=”#”title=”立即观看” class=”comm-btn c-btn-3”>立即观看</a>
再加一个判断，表示价格不等于0是收费的，则显示立即购买。
</section>
<section v-else class=”c-attr-mt”>
<a @click=”createOrders()” href=”#”title=”立即购买” class=”comm-btn c-btn-3”>立即购买</a>
</section>
将 orders、edu、ucenter 停掉后重新启动测试一遍，试一下效果，如果效果没有问题再加上是否购买过的判断。
此时我们需要知道课程是否已经支付过了，在表格中有两张表，一个是订单表，另一个是支付记录表，在表里面存储了一些相关信息，比如订单表中存了课程 id，课程名称，课程封面，包括状态、用户 id。可以根据课程 id、用户 id 和支付状态可以查到课程是否被用户购买。
假如填了入门课程，用户是张三，张三对于这门课程是否已经购买过了，查询这个表即可知道。如果状态是1，则购买过，状态是0，就未购买。所以需要写一个接口做查询。
目前效果，是 orders，edu，ucenter，看效果能否出来，是否是免费课程的判断。在页面中加个 v-if 价格是否等于0.
重新登录后点击课程，先点击免费课程，可以看到立即观看。点击收费课程，显示了立即购买。但购买过的课程需要进一步完善,只能看到收费和免费，不能看到是否支付过了。
重新写一个接口：
根据课程 id 和用户 id 查询订单表，如果状态是1，则购买过了，状态是0，则没有购买。
如何判断课程是否已经支付了
根据课程 id 和用户 id，去查询订单表，查询这个订单状态。如果状态值1，表示已经支付了，如果状态值不是1，则没有支付。
打开 OrderController，写模块。
//根据课程id和用户id查询订单表中订单状态
@GetMapping(“isBuyCourse/{courseId}/{menberId}”)
public Boolean isBuyCourse(@PathVariable String coursed,@PathVariable String menberId){
Isbuycourse 是查询是否购买了课程的参数。
需要有两个参数，一个是课程 id，一个是用户 id。利用 boolean 把两个值得到。得到后即可调方法
QueryWrapper<Order> wrapper = new QueryWrapper<>()
wrapper.eq(column:”course_id”,courseId);课程id
wrapper.eq(column:”member_id,menberId);用户id
wrapper.eq(column:”status”,val:1);//支付状态 1代表已经支付
int count = orderService.count(wrapper);
if(count>0){//已经支付 做个判断，如果count是大于0的，那么就判定已经支付。
如果已经支付应该 return 个值，未支付则 return false
return true;
} else {
return false;
接口准备完成，接下来做流程准备。
需要做到的效果是：
当进入到课程的详情页面，应该显示立即购买和立即观看，所以做项目应该把详情查询接口修改，在里面加入一个查询，查询课程是否已经购买，需要这样修改。
因为在课程详情页面显示立即观看或者立即购买
需要修改课程详情查询的接口
改的方式：
添加返回值，返回当前显示详情的课程是否已经被购买过了。因为详情页面中显示立即观看和立即购买，所以需要把详情页面查询部分的接口做个修改，在查询接口中，之前返回的应该是课程基本信息，包括课程章节小节信息，现在需要添加多一个返回值，返回当前课程是否已经被当前用户购买过了，增加这样一个东西。
二如何购买这个代码接口刚刚写过，用远程调用过程调用这个接口，做个实现。
来到课程详情的接口，在coursefrontcontroller，打开详情接口，之前查询由两部分，第一部分是根据课程id查询课程信息，第二个是 根据课程id查询章节和小节，
接下来需要写第三个
//根据课程 id 和用户 id 查询当前课程是否已经支付过了
利用远程调用过程，在 order 的 nacos 中做了一个注册
#nacos 服务地址
spring. cloud. nacos.discovery. server-addr=127.0.0.1:8848
需要在 edu 中调用 orders 方法，也注册过了，并加了注解。
在client里面新建一个 Interface，其名为 OrdersClient。指定调用的名字，并定义调用的方法路径，调用后即可实现。
@Component
@FeignClient(“service-order”)
public interface OrdersClient {
//根据课程id和用户id查询订单表中订单状态@GetMapping(“/edruorder/order/isBuyCourse/{coursed}/{memberId}”)
public Boolean isBuyCourse (@PathVariable (“coursed”)String coursed, @PathVariable(“memberId”) String memberId)
