day14【首页课程和名师功能】/14-尚硅谷-谷粒学院-课程详情功能前端整合

前端整合呢，第一部分在这个文件中，把那个调用的方法，咱肯定先做个定义，然后定义之后在页面中得到路由中的ID值，然后咱们一调用接口中的方法做个查询应该就可以了，主要就是这么一个基本过程啊，跟之前应该都一样，那咱们来写一下啊。在里边解决方法。课程。详情方法，然后方法我就叫这个get code info在里边咱传一个课程ID。然后出完之后把路径我们给它快速改一下啊，就从我这里边复制一下。课程应该叫edu service front。然后在里边呢，加上咱那个课程那个方法上的名字，我叫get front info，后面传一个课程ID。啊，咱们把ID传过来。啊，因为我这里边是一个引号啊，最后直接拼接了，或者你加个飘用表达式都可以啊，这个完成啊，关于定义，然后定义之后咱们在页面中我们来做这么一个调用，找到页面，页面咱们之前说到过，因为咱们点某一个课程进入到是详情页面，而详情页面用到是动态路由，所以咱来到这个下划线ID的页面，在这里边我们做这个显示，那咱们往下来讲啊，在这个位置咱先引入。

就是import code，比如我叫API from。加上咱的地址艾特API，这个叫cos这个引入，引入之后呢，在里边来做调用，调用方式多种写法，你可以用我们最原始写法，就是date created methods，或者说用咱们上午说那种写法，为这种写法更方便一点，就是义务调用啊，那我现在我还是写个义务调用，因为这种方式啊，直接咱就可以取，你要用原始方式，咱需要在create里边写那个data.root点咱直接这种方式啊就更方便做到。

把这个拿过来，然后拿过来之后咱们调这个方法，注意它里面的特点啊，咱需要加上一个叫什么。就各位应该记得啊，是不是这个，如果你忘记给他记住啊，必须加个re return，然后调这个cos API中的这个方法，它的方法就是get。Info在里边传入你那个ID，咱就加一个叫p.ID。啊，派点ID。这ID就是咱们这个页面的这个后面这个名称，因为我这个叫小线ID，所以里边写的是ID，然后得到之后我们加一个叫。点赞。加一个response。箭头函数通过response从里边把数据取出来，我们加一个括号啊，里边有两个数据，咱给它都取下啊。

第一个叫cos web view。写到这个位置啊，然后加个冒号，我们来一个response.date.date点上这个cos y VO，然后还有第二个值。第二个值叫capital video list啊，咱给它也是做个赋值，然后里边加一个response.date.date点。开video list，这样的话两值得到了，一个是对象，一个是这个数组，对象咱用差表式直接取值，数组用那个V杠或变利取值就可以了啊，所以这样的话两个数据都得到了，得到之后最终咱在页面中做个显示就可以了，咱们就给它最终显示一下啊。那我们来写一下啊。这个应该就简单很多了啊，首先我们做第一部分，比如说我现在啊，我想把那个分类，就是咱们有一级二级分类，在这个位置显示一级，这个位置显示二级，所以咱通过刚才咱的对象。

就这个对象，Cos web VO，先显示一级分类，一级分类的名字，我到这个里边复制它的名字。就是这个。Subject level one，这是一级分类，然后除了它之外，咱们还有一个叫二级分类，放到这个位置，二级分类的名字复制一下，叫subject level two。这个啊，咱就拿回来了，然后拿回来之后往下继续来做，下面有这个课程的封面，把封面小这个位置。我们就写一个cos y view，点上它那个封面，咱看封面的名字。就是不是AVA应该叫那个这个cover啊，这是封面课程封面。这里边有课程那个名称。我们叫这个cos web VO。

点上这个title啊，这个啊，我们做了一个就是显示，然后除了封面之外，这个位置有你那个课程的名称，就这个价面有它那个价格，价格应该叫这个，打开名字啊，价格是这个。这里啊，Price就是价格。啊，这个。显示啊价格，然后除了价格之外，呃，加到那个表达式中啊。表达式。除了价格之外呢，下边还有一个就是讲师，这是那个讲师的名称，那我们给它显示啊。Cos y围点上两只名称。就是里边的这个teacher name。这个咱给他拿过来啊，就是里边这些值依次你显示就可以了，没有什么特别的难点啊，包括还有什么购买数，课时数，快速给它写一下啊。这是一个叫购买数，然后购买数呢，在里边，我们的那个名字应该叫这个，呃，购买数应该是它就是。

By count空白数啊，另外还有课时数什么浏览数，我就无一写了，跟这写法是一样的，你把这个直接复制就可以啊，我就写这么几个，这个各位给他完善一下啊，没有特别的，跟他都一样，然后除了这个之外，咱下面还有几个值，就是这个值。各位注意啊，这一部分是不是那个课程介绍或者说课程描述，所以咱需要把这描述做个显示，那这里边会有一个问题啊，我先写一会儿咱会演出一个问题。这里边我们还是叫这个cos。VO。然后那个描述的名字应该叫这个description，就是一个描述，把这个拿过来啊，然后除了描述往下看，下面有这个叫课程大纲，就是他的章节和小节，这咱一会儿写啊，然后最后还有一个讲师，我先把讲师写完。

这个位置。他叫这个。Co应该叫cos web VO啊，就是这个名字。然后在里边显示第一个是讲师那个头像，头像应该叫瓦。这个名字啊，然后除了他之外，这是讲师的名称，我们叫那个teacher name。讲师名称。另外啊，有这个讲师那个资历，或者他什么头衔。就是cos web VO点上里面这个叫intro，就是它的资历。这样的话啊，把讲师部分我们显出来了，然后都显之后，最后还有那个课程大纲列表，就是它的章节和小节，那这怎么显示，咱看一下啊把它实现。这咱之前也做过啊，当时咱做那个后台中课程发布中的写法跟这一样，那怎么做呢？注意我们的做法啊，你看。

这是章节。章节中是个小节啊，这单做法就是先去遍利你的章节，再遍利每个章节中的小节，因为每个章节中在幺六，然后在Li中又嵌套的一个标签，在这个标签中写他那个小节啊，主要这个过程先便利章节，再便利小节，那咱们给他就便利一下啊，小D位置我来一个叫。V杠便利我们那个章节。就是这个capital video list，然后加个音。这个名字我就叫capital啊，这代表我们的章节，然后再加个冒号K。就是它里面那个每个不一样啊，加个唯一标识。点ID。这个啊，就是章节的便利，然后这个选完之后，下面从capital中把它值取出来，就是这是章节那个名称。点上。Title啊，包括这里边啊，也写一个点。

开头啊，使它那个。章节部分。这样的话啊，咱们把这个我们就完成了啊，这个特点啊，然后这个写完之后，下面有它的小节，就是在每个章节中有小节，主要是这部分，那咱就保留一个，然后把它遍历章节中的小节。那这里边还是写一个叫。V-four小节，各位注意啊，一个章节中是不是有很多小节，它里边应该那个单词叫秋准啊，咱也再看一下啊，都是之前写过的。应该是。这个地方啊。章节里边有个叫秋准，是不是他的小节，那里边我们就来做个遍历啊。V-four加一个叫capital，点上这个children，这表示得到每个章节中的小节就是这个啊，然后我们加一个音，前面我加一个叫video。

啊，Video，然后这个位置加一个冒号T。它叫做这个video。点ID啊，把这个我们给它做到啊，然后做到之后这个位置显示你那个小节的一个名称，我们做个显示啊，就加一个video点。开头。这样的话，这个就完成了啊，所以咱们现在就快速把这遍历我们做到了，在这过程中咱先遍历它的章节，然后遍历之后再便利每个章节中的小节，因为他做了一个嵌套，这一部分是。章节遍历，然后这是每个章节中的小节，把这个啊，我们最终都显出来了，这个功能应该就最终做到了啊，就关于他这个。详情的部分啊。所以各位啊，要求也是按照这种过程，能熟练快速的给他完成出来，然后都做到之后呢，最后咱们把效果咱试一下，就看一下最终结果。

我把接口给它重新启动，然后咱们看一下啊，最终的效果。等于启动啊。启动之后，咱直接啊来到我们的页面中，然后点击某个课程，最终显示它那个详情部分。等他先启动啊，这个集中起来了，然后咱们来到我们的页面中啊，咱重新测试啊。重新测试。包括我看啊，这个应该都。保存了啊，应该都没有错啊，然后来到页面，比如现在我点击课程，进入到我们的这些课程中，那课程里边咱们来点某一个课程到详情那找到我们刚才有数据那个课程，因为有些没有数据显示不全，咱找一个更完全的课程啊，就是咱这个。一的这门课程咱们查过，就是H填五入门课程学习找到它应该就是这个啊，那我现在点击它看结果啊，我一点咱看效果，大家注意数据是不是有了，里边有啊，但是它没有大纲啊，就是咱加你先看上面数据啊，这个图可能稍微小点，但是效果是有了，这是你看啊，这里这个是课程的一级分类，二级分类，这是课程的那个封面，然后这是名称啊，包括价格，包括讲师等等，另外这是那个课程的简介啊，包括这里边有课程的就是主讲讲师等等这个内容。

所以大家看啊，现在我们这个内容应该就完成这么一个显示啊，这是我们做到的这么一个效果。给大家本人做到啊，然后里边有这个课程大纲，咱这没有，我手动加几个，为了咱有效果啊，手动我改个课程大纲。咱就不启用那个后台系统了，直接咱改了在这里边，比如我现在这个课程。呃，这个改个名字啊，这是那个章节，就是这是第一章。这个我们是。

第二章，然后ID咱都是这个。包括这里边为了区分我叫1112啊，我叫大家一会好改，这是章节，然后有章节之后我们有小节，在这里边，他的课程ID我们都写成一。这里边是章节，比如这是幺幺，这是幺二啊，这是幺幺，然后这是幺二。HR它这个小节把这些改一下，比如这是。第一节。然后这个我们是。第二节，这是那个。第一节。这个啊数据咱们手动做了一个构建啊，为了一会儿有效果，然后构建之后，咱下面再来刷新页面，看一下目前的结果，我一刷新。咱看啊，上面都没有错，你看下边这个位置。章节小节是不是有了，第一章中有第一节，第二节第二章中有第一节，就是刚才我手动加的数据，所以现在啊，咱们把这个过程我们就就能做到了啊，关于这个课程的详情页面啊，咱们实验的里边的这么一个基本功的啊，但是这过程中啊，有一个问题刚才没演出来啊，给大家重新演示一下啊，什么问题呢？

你注意啊，就关于这个描述的位置。刚才这描述啊，我们写的是0302STRING，因为这个值就这个值，但是你注意这个描述不是，各位是否记得啊，咱们当时的描述啊，我们是整合了一个，是不是一个叫文本编辑器啊，描述中是不是可以有样式，那比如说啊，咱给它加个样式，里边会有点问题给大家演示出来啊，咱随便找一个有样式就可以，你就找他吧，啊改成一。咱看目前的问题啊，你注意它里面有样式，也就是说在表中存的数据带这个H条标签，它这个东西有样，比如你加粗或者说变成颜色，或者说加个图片里边会有这个样式，但是现在如果说我们在显示的时候，它会怎么显示呢？咱看目前有什么问题啊。我刷新。

各位看到啊，不知大家是否能看到这个问题所在？什么问题？就是现在的问题就是啊，他把表中数据给咱们是不是原样输出了，就是表中有什么，它是不是就显示什么呢？但是咱肯定不能这个样子，因为这个P标签各位应该知道是不是一个段落标签，他应该让这个HTM这个标签要生效，假如你加一个什么死状标签，应该会加粗，但是目前他没有这个效果，只是把你数据做了一个原样输出，这肯定是不对的。那怎么来做呢？咱们把这问题解决一下啊。我说各位是否能听懂啊，我再说一遍，问题是什么？现在你在显示描述的时候，因为咱们的描述呢，是可以带样式的，就是里边有HT标签，但是我们目前做的过程中，问题就是他把标签并没有给你显示，而是给你原样输出了，而咱的效果就是P标签应该有一个段落效果，他目前没有，只是给你把这输出了。

所以咱们现在把这个需要解决一下，那怎么解决。给各位说一下啊，咱找的这个代码位置就是那个。描述为部分这个地方，那怎么做呢？给大家写一下啊，就是在我们的voe里边还有一个指令，这指令呢，可能用的机会不是特别多，但是也要用到，什么指令呢，给大家写一下啊，这个指令。叫V-HTY。这个描述很清楚啊，Htmllo什么意思呢？这个就表示可以把你内容中的HTL标签给它翻译过来，而不是原样输出翻译你的HT标签，那在里边写上你这个值，咱们把这值写进去，它就可以把这个值中的标签翻译，然后在里边做显示，所以它是这么一种做法啊，用V-HTL翻译你的H标签做显示，你再这么做的话，比如说咱们再回到页面。

我一刷新。那大家看那P标签是不是就没了，它就变成一个段落标签做了一个显示啊，所以这个啊，是咱们详情中的这么一个显示，咱们把这功能我们就最终做到了。啊，然后过程我再说一遍啊，希望各位能做到，这个过程就是在我们的前端中，咱们用这种异步方是得到我们的课程基本信息和章节小节的列表，然后把基本信息用差值表达式取到，把这列表用V-for遍历，因为咱们有章节小节，所以咱做法就是。先去遍历每个章节，再遍历每个章节中的小节，把这个最终显示出来。另外在里边咱有一个问题，因为这个描述中可以带样式，但是样式呢，默认情况下它只是原样输出，就你存什么样它就输出什么样的，而咱们要用这个标签让他要生效，那怎么做呢？用个指令。

V-HTML把值传进去，然后它就能把你的标签给你进行一个翻译，最终可以显示出来，再显示标签就会生效，它就没有那个比方输出那种效果，所以这个啊，咱们把详情做到了。属于一个过程啊。这个我就不在里边写了，因为过程比较简单，跟咱之前做的都差不多啊，只是说里边多了一些更细节的东西，但是主要的部分应该都是一样的啊。所以这个我们就完成了课程详情页面的这么一个显示。这图我先保存一下啊。就这个图啊，然后咱们完成啊。