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

就是先手动构建一些数据，因为咱还没有做到添加，做完添加之后咱就完整测试，那现在咱看课程啊，课程里边有一个18的课程，就是用它测试这是课程。然后除了课程之外，咱看到章节章节中，因为它里面有课程ID里面有多个啊，我就保留两个吧，就咱有效果可以这些先去掉了啊。全都删掉，但有两个是18的，这两个。为了能好，就是更发现咱构建我这改个值啊，这是幺幺，这改成叫幺二。这个啊，咱用这两个都是18课程。就是这个名字了啊，然后这个完之后112，咱再构建章节中的小节来到这位置，小节也是有这个18，然后里边有一个幺幺，就这是幺二。就是它啊，比如咱们可以再构建一个。这是18的课程，这我就写一个幺幺。这样的话应该就可以了啊，所以现在就是咱查询，我就查这个课程ID是18的课程，在18课程中，我们刚才构建出来了有两个章节，然后在每个章节中又有它对应的小节，这些都有，那这个是我们要测的数据来构建一下啊，然后构建之后我把服务器启动，咱们看一下最终的这个结果是什么样的，就看它封装过程。

啊，当然在这个CTRL上边，咱应该加那个cross那个跨域的注解啊，咱一会加上，咱们先用swa测试，最终加到页面的时候，这四就是跨域注解肯定要加上啊。这个启动了啊，咱们打开我们的页面，最终咱们来测试一下啊。呃，用swag测试啊。写上我们是8001。加这个叫swagger。杠Uy.HTL把这个打开，打开之后找到我们现在这就这个capital在开里边，我们刚才写的是它得到章节小节的列表。

在这个位置咱需要来个条件，条件就是课程ID，我们写个18，刚才我构建出来了，然后写完之后点try it out，看它的结果。咱们仔细看啊。在结果中的这是它的名字，这位置是一个数组形式就没有错，然后在里边两个对象，这是第一个对象，这是第二个对象，在第一个对象中，章节就是第七章这个纸，然后修正里边有它两个小节，这是一个章节，里边有它的小节，所以咱看到现代数据就出来了，跟咱说那个一二级分类是一样的。有章节，每个章节中用children准代表里边的小节，小节可以有一个，可以没有，可以有多个，这个咱都做到了，所以这是关于数据的这个封装。咱们的接口部分完成了啊。还是我说到的，通过这两个功能，各位把这个封装过程一定要特别熟练，包括课程大纲列表，还有这个课程分类列表，都是这种功能思想。

然后这个做到之后呢，咱们最后把这个前端部分来做个整合，那前端怎么整合给大家先说一下啊呃，这个注解我先加上，可能一会儿忘记啊，跨域注解，然后前端怎么整合呢？我们先大概看一下，然后一会儿再来做啊。咱们找到，呃，这个修改咱一块儿写啊，先来到这里。把这个打开啊，然后在里边就是这些咱们刚才已经做到了，然后咱看前端怎么做啊，就是前端做法两种方式，第一种方式你可以按照咱之前做那个课程分类的方式，写个适用结构显示，这么做没有问题，完全可以做到，但是现在呢，给大家再换一种方式来做啊，但是我这里说过这种思路啊，咱们讲课给各位就是用不同方式来写，但实际的开发中，咱们肯定是用一种方式来做，比如就用使木结构这么显示没有问题，但是现在给大家换一种方式来写啊，其实它的原理都一样。

因为咱们之前呢，用这种疏胸解构的手里边呢，把很多地方都给咱做了封装，咱只需要传个值就可以了，里边怎么做到，其实不需要咱关心，但是现在把这代码咱写的底层点，咱自己给他做一个便利，做一个最终那个显示，那怎么做的，咱看一下啊，前面都是一些查询这一部分咱不用看看这里主要部分。在这位置呢，比如一会可位这么来做，我用个标签来实现，这标签叫u ly，就是一个列表标签，然后标签中咱就做到先遍历第一个章节，在章节中再遍历它的小节，咱用这个就能做到啊，这一会儿各位实验出来就是咱用一个。Ul和Li方式就是这个方式理解为。就是咱做那个书结构，它的底层过程，包括你看到里边we on for啊，这是章节，再写we on for是里边的小节，最终我们做一个便利。

这个啊是咱一会儿要做的方式，那咱们啊现在先做一些最基本的准备。那怎么准备呢，咱就来到我们这个页面中啊，在这个位置，比如现在我在里边呢。咱找到啊，在API中先把方法定一下，因为咱们一会儿肯定要定义啊，准备工作先完成，然后这个方法因为是章节和小节部分，那我就加上一个叫。capital.js然后在capital JS里边把那个方法咱先定出来啊。就是参考之前的，因为跟之前都一样，用它咱给它复制就改一下了啊。这么一个结构啊。这样一个括号，然后在里边我们写第一个方法，第一个方法就是。根据课程ID获取到你那个章节和小节的那个数据的一个列表。

这个方法名字我们改一下，我就叫这个get。Video。在里边传入这么一个课程ID，我就叫cos ID。传这个址，然后写完之后，下面咱写啊，它那个接口地址，接口地址到刚才我写的里边复制一下是这个地址。Edu service capital。给他拿过来，然后写完之后，后面还有一个名字，它叫这个叫get capital video，然后最后传一个课程ID。这个拿过来啊，最后有一个课程ID，当然课程ID你可以这么多种写法，第一个你加个P的符号，用表达式，或者说咱直接做个字符串的拼接。都可以啊，都可以做到，我就加个引号做个拼接了，然后写完之后，它的提交方式是一个get提交，它不需要其他参数，这个咱去掉了，这是我们前端中的第一部分，在这个API中把方法作为定义。

然后定义之后，咱们下面来到页面中，在页面中做使用，因为现在做课程大纲，它应该不是info页面应该是我们这个叫做。开页面，这是课程大纲，所以在这里边我们来做这么一个最终一个调用啊，然后最终把列表现出来，那大家写一下啊，在里边咱先引入。Import加这个叫开。然后from加上我们那个地址，就是一个艾特斜杠APIEDU。开这就引入，引入之后在下面咱们把这方法定一下，我就写到麦中，这方法就是根据课程ID查询你那个章节和小节的数据列表。这个方法啊，那我们给它起个名字，就叫get这个。

Capital。Video。式，我们写的这么一个方法啊，然后写完之后在里边呢，我们给它做一个调用，咱就调这个开里边刚才我们写那个方法。小D位置啊开点上。这个方法。就是他。然后这里边呢，有这么一个小问题啊，大家看这方法中是不是要传个参数，就是一个课程ID啊，这ID咱一会儿来取，我先写一个啊，一会咱这ID要取过来，然后这个得到之后我们来一个叫。点赞加上一个response。箭头函数通过response把里边的数据得到，就是点date，点上那个名字，咱刚才名字，这个名字叫O。Video把这个拿过来啊，然后最后。咱来一个那个变量做个赋值。我想这位置啊。就叫video list啊，比如就叫list。

Video list。这应该是一个数组形式，那我们最后给他就做一个赋值，这点character video list等于我们的数据，这是咱们写的这么一个方法，这咱就写到了啊，然后写完之后，咱这个方法在可里边需要做一个调用。调用这个方法。那咱来调一下啊。我们就来一个叫做C点。Get video。这个方法。这咱们啊最终做调用，所以现在这个结构我们就初步做到了啊，当然有些细节咱马上完善，咱们看一下啊，我这前端过程就是接口，咱写完了前端怎么做，第一步在这里边建一个开页面里面定义接口的方法，然后定义之后页面中先引入，然后调这个方法得到结果，最终做个赋值create里边做调用，因为咱们一进入页面对发酵执行得到你这个数据。

这个啊完成了，但是完成之后呢，这边有问题，咱们需要这位置传入一个叫课程ID，这个值目前是没有的，那这个怎么做到呢？给大家说一下啊，我说各位是否能想到啊，咱就这么来看啊，你看啊，当我第一步啊，加完课程信息之后，咱在路由上边这个值。是不是就是课程ID，那咱做法就是在我页面中把这支渠道传到这里边来，是不是就可以了，这就是一个做法，包括你看这页面中，咱当时添加之后，在返回的时候把这ID已经返回了，那我们做法就是在这个开页面中，咱把路径中这值取出来传过去，是不是就可以做到，就这个做法。那咱就写一下啊，怎么取我写到这位置啊，因为在这里边执行，就是获取到路由里边那个ID值，这取法咱在之前写过的，是咱讲那个讲师时候写到的，我们再看一遍啊，然后就一次性写出来了啊。

咱找到就是里边的。这个方法。this.root.t.ID把这取到，咱现在也是这么来写啊，那我就来写一下啊，我再写这最后一遍，后面再有这个代码我就复制了啊，因为都是一样的。在里边写法就是我们写一个叫this，点上这个叫root，注意是root啊，点para paras就是先做个判断，如果里边有参数，并且它有的是一个ID参数，那咱把这值就给它最终取到。啊，点ID参数，那么它就取到那这ID，我在里边来一个初始值，我就来一个叫。Cos ID默认有一个空啊，代表咱的课程ID。

然后这里边如果说它有值的话，那我们就把这个取出来赋值给这个叫cos。就等于。这个值。把这个取到，然后取到之后，咱下面就来调里边这个方法，把它就最终做一个实现啊，就是调这个方法。把这个我们最终做到，所以这样的话啊，咱们就完成了这么一个基本过程，包括这里边把这个ID的就。过来。这个啊，前端就把数据得到了，咱再看一遍啊，然后后面咱再写一遍啊，做法就是在这里边呢，我们先看路由中有没有ID值，就有没有里边的这个值，如果有的话，咱们把它取出来，通过这个路由提取参数的方式，然后取完之后调咱的方法，方法里边把值传过来，最终得到数据，咱做个显示就可以了，主要是这个切法。

所以咱前端先小这里。