day08【课程发布-课程大纲和课程发布】/05-尚硅谷-谷粒学院-课程管理-课程大纲列表（前端）

最后啊，咱们把数据页面中显示一下，那咱们显示呢，多种方式，第一种方式你可以用一下，咱们昨天说那个IUI中那个树形组件，就跟课程分类做成一样是可以的，大咱现在给大家换种方式。咱们写的就是稍微底层点，那我怎么做给大家写一下啊，就是我这么来写啊，我先写一个最基本的有数据效果，但这效果先没有样式，大家看到怎么做，然后样式我就从这课件中这些复制了，就是多出来。这些东西因为有样式之后，效果更加美观，我先写个附带样式，让大家先看一下这过程该怎么写，然后我再从这复制，那我来写一下啊，基本的一个效果啊，那做法怎么做呢？咱就用个标签来实现这个标签。大家看啊，这标签叫u Li，然后在UI中有一个叫Li，这是个什么呢？在H条目中，它是一个叫列表标签，就是里边可以列表显示你的内容，那咱用它来做个实现，怎么实现，我来说一下啊，就是首先呢咱这么做，在这个第一个U中的Li里边，我们写它的章节，比如说这是。

第一章啊，当然你可能有第二章，比如说再写一个。来来一个啊加这叫第二招，这里边我们显示章节，就是一会儿我们要变历，然后显示完章节之后，因为大家知道章节中是不是有小节呀，所以咱在章节里边呢，再给它嵌套这么一个标签，就是再写一个U，然后加个这个LY，然后这里边写什么，写它的小节，比如说这是第一节。然后咱们再写个，假如说这是第二节，那我们做法就这么来做，咱们写个ul标签里边先便于它的章节，然后在这里边来嵌套一个U，便利它的小节，这是我们的做法来用它出来就用个ul的列表标签嵌套做显示。

那咱下面把这个我们就来写一下啊，先写一个不带样式的，然后一会儿样式我从课件中复制，咱先看结果。那怎么做，咱说一下啊，首先第一个呢，在这里边咱先遍历章节，但章节我是写固定的，那咱刚才把数据得到了，这个里边就是character video list中是不是有章节，那咱把它做个遍历，把章节遍历出来，因为这个对象或者这个数组将于咱们写的就是。这个character view啊，里边每部分都是它有ID名称，包有这个children，那咱们最终便利一下啊。我就写到这位置啊，因为它有多个LY，所以咱来一个便利的这个指令，要各位记住啊，咱VE中一个最常见指令叫做V-for，在V-for中呢，咱加上便利这个集合，加上一个音，然后前面起个名字，我叫这个。

Capital这是一个啊，加完之后呢，在里边啊，咱需要加上它一个唯一标识，就是一个冒号K啊K里边呢，一般加上它那个ID啊，就是区分不同的组件，因为它有多个加个冒号key作为这个标签的唯一标识，再加一个ID，然后加完之后在里边取它的章节，那怎么取呢？用到这么一个东西。不是，各位是否记得啊，这叫做什么，是不是差值表达式，在里边我们加一个叫开头，点上这个叫开头，这就取到它里边的所有章节，就是咱这么一做，所有章节都会做显示，这是我们做的第一部分，那咱们啊，把这个显示之后，我们先来看一下目前的效果，然后咱再看小结。我们来试一下啊。我先检查一下，这里边的跨域咱给加上了，然后把接口给它重新启动一下，咱们先测试章节的一个便利，因为章节就是把那个数据直接V杠尔负遍历，用差尔表式取到章节名称，章节名称咱取的就叫title头，所以这个值可以得到。

这个启动啊，然后启动之后咱来试一下啊。因为现在呢，这个ID应该没有数据，咱找个有数据的，就是咱们刚才测那个课程啊，应该是多少来着。呃，18的课程啊，我用它先测一下啊，直接我这里面就传这个值了，来个18，然后咱回车大家看里边的结果，我们刷新一下啊。这里边看结果，大家看到这结果是不是有了，你看啊，这是第七章，这是第一章，就是咱查数据啊，我就没标号，但这数据有了，这样的话，把章节咱就显出来了，这是他的两章节。然后这里边啊，有一个小问题，各位用的时候注意一下啊，因为咱用这个框架，这个浏览器在很多用的时候，它经常会有一个缓存的问题，就是我刚你发现第一次我这点没有效果，它不是这东西不对，是因为有浏览器的缓存，如果有缓存的话，我们怎么做呢？把你的页面第一种方式，你把浏览器关掉再打开没有问题，如果你不想关掉打开，咱把这页面强制刷新。

怎么强制刷新呢？不是点F5，你点两个键，CTRL键和F5，这叫强制刷新，把整个页面都刷新，那缓存就没有了，如果还有浏览器关掉重新打开啊，这时候我们用这个前端经常遇到问题啊。效果明明它就是代码明明没有错，就是没有效果，它很多时候是缓存问题啊，这些注意一下啊，所以现在章节就有了，然后有章节之后，咱们再显示里边的小节，就在章节的下面显示小节做成就是类似于咱们的。这种形式，这就好比说章节里边有小节，那咱们啊往下给它做一个便利。啊，给他回来啊，那怎么做来到页面中啊，那它的做法就是呢，在你注意啊，在这个章节的Li中，咱们再给他嵌套一个标签，还是这个U。

然后在Li中呢，咱就遍利它的小节怎么遍历写一下啊，还是来一个V杠破，然后咱要便利小。要各位知道啊，这小节在哪里呢？你看这个数组或者这个集合，这个里边呢，咱刚才编的是章节，而咱们在封装的时候，咱刚才也看到了，每个章节里边是不是还有它的小节呀，而小节在章节的什么地方？是不是这个children里边啊，所以咱们做法就是遍历章节中的小节，那怎么做呢？咱就写一个叫capital video list。点上一个叫children。这是得到里边这个小节，因为它的名字叫children准，这每个章节里边children准代表它小节那个即可，这是一个便利，咱来一个音，比如说起个名字，我叫video。

这个位置也是加上每个标签那个唯一标识，来个key，叫做video ID。这个我们就写出来了啊，然后写完之后咱们把小节取出来，就写一个video.title这是得到每个章节中的小节，这写法各位要知道啊，咱会经常这么写到啊，包括之前我觉得在外部记载咱也写过类似这种写法，章节中的小节，用它里边点children准得到小节，这个就是数组或者说集合，把这个做到，呃，应该不是写它啊。来写这个开啊，每个章节中的小节把这个得到啊，这写错了啊，这是数组，你要得到每个章节中小节，那要加上点求准，这就可以了啊，这样的话，咱这个代码就最终做了遍历，先遍历章节，再遍历每个章节中的小节，因为每个章节中有个秋准代表它的小节，这个完成啊，包括课件中跟我写的一样啊。

然后洗完之后，咱最终试一下效果啊。到里边，比如现在我重新刷新啊。然后大家看你看现在。第一行部分是章节，在章节中是不是有它的小节，这个是不是就显出来了，所以咱们现在就是这么来做啊，这是我们的一个基本做法，各位把这个给他知道啊，章节和小节的这么一个这种便利。然后这个笔记啊，我简单完善一下啊，就是咱参考昨天的课程分类，把这接口做了封装，第一步解释一类，然后第二步。我们就是编写这个封装代码啊，这就不具体说了，昨天都讲过了，刚才我也是又写了一遍。然后这个写完之后，下面咱就做那个前端的这么一个整合。前端整合，然后前端整合中最终咱做到就是这个效果，在这效果中我们的具体做法就是我把核心代码复制了。

首先啊，咱通过路由把里面这个值给它取到，然后得到这个数据啊，这是一个核心部分，然后得到之后，最后咱在页面中我们就做这么一个便利，得到这个结果，然后页面便利就是写上咱刚才说那个嵌套，这过程就是u ly这么一个。嵌套用这个，我们最终把这数据得到啊，就是这个部分。然后在里边特别各位标注一下啊，这个是便利章节的，然后这是遍历每个章节中那个小节的部分，用它得到咱刚才效果也看到了，最终数据里边都有。这个啊，是我们。这个一个基本部分的实现咱完成了啊，然后完成之后现在效果都有了，但是我这效果中啊没有样式，所以我就从课件中把这样式给它复制过来，但是做法跟我是一样，那看一下我的课件中啊，在我课件中主要这地方ul。

LY里边要嵌套U，然后在里边希腊就是先遍利，然后在这是便利章节，再便里边的小节，然后得到里面内容啊，就是这位置压着这些叫class，就多了一些样式，大家把这部分给各位就直接复制过啊，用它来替换一下我们这个内容就可以了。把这个我都给他。过来。就是到这里啊。然后复制之后，我把里边那些纸给它改一下，因为有些纸跟我们写的名字不一样，但是结构都一样。包括这个东西叫capital video list，咱们也是叫它。然后这里面有些后面咱做的，我先去掉啊，后面咱再加。这些先拿掉啊。所以现在这个应该就可以了啊，把这个数据显示出来了，咱到里边看一下最终结果。还是先刷新。

啊，刷新一下。啊，当然里边应该还有一个样式啊，我把样式也拿过来了，就是这个。这样式复制过来啊，这样式是提前写好一个CS样式，这不需要各位敲扁啊，是那个一般都是由美工做到的，咱们把它放到页面的最后。然后啊，最后再来看一下啊结果。我先刷新啊，就是这么一个效果啊，在这个课程大纲中，第一部分是章节，章节里边有它的小节，所以这个功能我们就最终完成了，主要这么一个过程。各位掌握第一个接口部分实现，然后第二部分前端的这么一个开发过程，前端中咱是用这个u Li标签做的一个最终的便利，然后把数据在页面中做了显示，这便利代码各位给他要能写出来用的就是之前咱们讲的VE中的V-four做到的。这个图我先保存一下啊。

谈的。第三个。课程大纲。列表功能，所以咱们啊，这个功能我们就完成了。