课程详情功能前端整合 | 学习笔记

开发者学堂课程【微服务+全栈在线教育实战项目演练（SpringCloud Alibaba+SpringBoot）:课程详情功能前端整合】学习笔记，与课程紧密联系，让用户快速学习知识。

课程地址：https://developer.aliyun.com/learning/course/667/detail/11480

课程详情功能前端整合

 

内容介绍：

一、定义调用方法

二、调用接口中的方法进行查询

三、成果展示

 

一、 定义调用方法

1. 对方法进行调用

//查询所有分类的方法

getA11Subject( ) {return request({

ur1: " / eduservice/ subject/ getA1lSubject ',

method: 'get'

})

},

//课程详情的方法

getCourseInfo( id){return request({

url: " / eduservice/coursefront/getFrontCourseInfo/ " +id,

method: "get"

})

}

 

二、调用接口中的方法进行查询

1.定义之后，在页面中进行调用

<script>

import courseApi from '@/ api/course'

export default {

asyncData({ params，error }) {

return courseApi.getCourseInfo(params.id)

.then( response => {

return{

coursewebVo:response.data.data.coursewebVo,

chaptervideoList: response.data.data.chaptervideoList

}

})

}

};

< / script>

2.最终在页面中显示

<aside class="thr-attr-box">

<ol class="thr-attr-ol c learfix">

<li>

<p> </p>

<aside>

< span class="c-fff f-fM">购买数

</span><br>

<h6 c lass="c-fff f-fM mt10">{{coursewebvo.buyCount}</h6>

< / aside>

< / li>

<li>

<p> </p>

<aside>

<span class="c-fff f-fM">课时数< / span><br>

<h6 c lass="c-fff f-fM mt 10">20</h6>

< / aside>

< /li>

3.先遍历章节，再遍历每个章节中的小节

代码实现：

<l--文件目录-->

<li class="lh-menu-stair" v-for="chapter in chapterVideoList" : kev="chapter.id">

<a href="javascript: void(0)" :title="chapter.title" class="current-1">

<em class="1h-menu-i-1 icon18 mr10"></em>{{chapter.title}}

</a>

<ol class="" 1h-menu-ol" style="display: block;">

<li class="1h-menu- second ml30">

<a href="#”title>

<span c lass="fr“>

<i class="iree-icon vam mr10">免费试听</i>

< / span>

<em class="1h-menu-i-2 icon16 mr5"> </ em>第一节

< /a>

< / li>

<li class=" 1h-menu- second m130">

<a href="” title class="current-2">

<em class="1h-menu-i-2 icon16 mr5"> </em>第二节

</ a>

< /li>

 

三、 成果展示

1.点击课程

2.点击任意课程详情

3.修改课程章节

4.修改后课程的详情页面

存在的问题:

表中的数据被原样输出了，即<p>22222</p>。但<p>标签是一个行内标签，在voe中，v-html 表示可以把内容中的标签翻译过来，然后显示，

正确的页面如下：