day14【首页课程和名师功能】/08-尚硅谷-谷粒学院-课程列表前端（1）

咱们下面啊，就开始做这个课程列表的前端的这么一个整合，那整合中还是我们的固定过程，首先我们的第一步操作，咱们还是在API里边的创建一个JS文件里边引入咱们接口的这个地址，把这个先做到这个还是我们的第一步，那现在我来快速创建一下啊。咱现在就来到我们的API中，在API中呢，刚才咱是讲师的，这已经做过了，那下面咱们建个课程的，那用这个讲师，然后快速改一下，把这个咱再复制一份。然后给它改个名字，我们叫这个cos。点JS啊，这个咱们复制出来了，然后复制之后把里边的方法咱们改一下，第一个方法就是条件查询再分页这个课程的这么一个方法。这个课程名字换一下啊，我们就叫get。

List。而在方法中，按照咱们刚才写的接口里边各位应该知道啊，咱们有三个参数，第一个参数就是当前页，第二个每个计数数，第三个是你那个对象，所以咱们有三个参数需要传递，那我里边写三个啊，当前页，每页记录数，还有咱们那个查询对象，比如查询对象起个名字我就叫这个。色OBG吧。OBBD就是查询对象这个啊，三个条件，然后写完之后，下面写一下咱们接口的地址，接口地址我就到里边复制一下这个地址，Edu service front，然后加上我们那个名字。把这个啊，咱给它说过来，咱的名字是这个get front Co list后面加上你的当前页，每个记住数，咱在标符号中用这种表达式，它是post提交，最后写一个叫date date后面把这个四收BD传过来，因为它要用Jason数据传递，咱们接口中通过快的body得到。

这是一个定义啊，咱就写出来了。然后这个写完之后呢，咱在里边啊，还需要有个方法需要咱们写，那还需要什么方法呢？刚才我们提到了，咱看一下这个位置啊。这一部分是不是叫课程类别呀，或者说叫课程分类，这个是一级分类，这个是二级分类，所以这个过程中啊，咱也要做成一种二级联动效果，就是现在先显示受一分类，当我点击某一个一分类，下面显示它的二级分类，这个二级联动虽然不是用下列表做到的，但是也是一个二级联动效果，所以咱就需要把里边的一级和二级分类给他要查出来。那这个咱之前写过那个接口，我们就直接调一下，之前有那个接口给他查就可以了，咱找一下啊，当时我们那个接口。应该借在这个subject中我们找到应该是这个get o subject，这里边返回的是个集合，集合里边每部分是一个万S一级分类，在每个一分类中有children，准是不是二级分类，所以咱现在把这个需要引入，因为咱们页面中需要用到这个东西啊，这就不单独写一个，用咱之前写过这个接口。

那我在里边做个引入，就是第二个。我们是查询所有分类的这个方法，把这个名字改一下啊，我就叫这个get o subject。这个查询啊，它里面不需要参数，因为是所有分类，然后把它的接口地址改成我们这个地址edu service。拿过来啊，后面加上的那个名字，名字就叫get subject。然后它没有参数啊，这也可以去掉啊，当然这也可以改成引号，写飘也无所谓啊，我改个引号了。

它的提交方式应该是一个get提交，这样的话把两个方法我们都定出来了，这各位注意啊，咱除了有条件查询分页方法，还需要一个查询所有分类方法，因为咱在页面中需要用到这个方法。我小弟位置啊，就咱们定义两个方法，一个是查询课程列表的方法。还有一个是查询。所有。分类的方法，两个方法在里边都需要定义，所以说这一步我们就完成了啊，里边的第一步，然后这步做到之后，咱第二步在页面中肯定要做一个调用，那咱们来完成调用啊，第二步在页面中。进行调用，然后试一下我们的功能，那咱们来写一下啊，一个调用过程。我们就直接啊写代码，然后来到页面，因为咱们要做的是课程列表，咱找到课程列表页面，在cos里边有一个叫index，这是课程列表。

然后在页面中呢，按照咱之前一直用的，先把这个JS文件是不是先引进来呀，那我加个import，比如叫这个cos API。From加上咱那个地址艾特斜杠API，这个叫cos，把这个引入，然后引入之后在里边写上我们这个代码啊，当然这个代码我们也可以用异步操作，也可以用我们原始方式啊，那我后面我用原始方式用异步操作，咱刚才在讲之中，咱也做到了啊，咱各位也看懂它那个过程，咱们还是喜欢用原始方式，原始方式更加简单，更加灵活。啊，那我写一下，把结构先写出来啊，咱们先写个date。F里边呢，加上一个re，退一会咱们定义变量初始值，然后里边的第二个叫这个create，就是在你页面渲染之前，这方法会执行，还有第三个叫这个methods。

啊，Methods就是咱们最终定义的一个方法结构啊，主要这么结构，那咱们第一个在date中的先定一些初始值，这初始值有很多啊，比如说我们现在分页有你的当前页包，你查出的数据，包括一级分类，二级分类集合，还有咱们加那个排序那些条件，应该有很多初始值，那这几个值我就不挑一遍了啊，我从我课件中直接把被子中的值咱就复制过来了啊，就是里边的这么几个。咱拿过来，然后咱们看一下啊，分别都是什么。咱们看啊，首先第一个配置代表我们那个当前页。啊，当前页，然后第二值叫date，这个值呢，就是咱们查出来那个课程的列表那个负值啊，其实应该写个数组啊，但是写对象其实也没错，因为它封装之后有中也会变成数组啊，我就写这个了啊，这是第二个课程列表，然后第三个是什么呢？是咱那个一级的列表，也就是在里边的。

Q分E分类，还有一个叫二级分类。就是我们下面这部分代表我们的二级分类啊，里边有这两个，这是一级分类的集合，这是二级分类集合，然后除了它之外，下面还一个叫search o BG，是咱们封装那个查询条件的search VG，这个对象咱要传到接口中做查询。然后除了这个之外，下面还有这么几个，这几个是什么呢？就是为了做到咱那个就是比如说我现在。点外语考试，然后它下面显示它下面的二级分类，我点价格最新，包括关注度这些值，而我每次点的话，大家看啊，这个值是不是有颜色的变化呀，就是我们下面几个值主要针对这些，包括你这个点某个值做触发，以及这个点完之后颜色会变化，比如这个外语考试变成红色，点价格，它的背景色变成绿色啊，它是为了这些使用的，咱把这个直线放到这里，比如咱们继来写。比如说这个y index，它是为了做一级分类，那个选中效果to，为了做二级分类，这是做那个关注度，这做最新，这做架构啊，主要有这么几个值，为了咱做那个。

条件查询，让他有那个选中效果这个值，比如说这个变成红色就变成绿色。这个啊，初始值我们就定出来了，这么几个，各位用的话直接复制可以了，然后写完之后，咱下面写方法，首先我们写第一个方法。啊，就是这个方法写法多种方式啊，我还是用我们就是刚才那个异步那种结构来写，比如说我先写第一个方法，第一个方法做什么呢？比如现在啊，我先去查询我们的就是第一页的那个数据，把这先查出来，但是这个查你可以用我们刚才那个异步请求，但是我单独写方法。比如这个方法，起个名字我就叫init，这个cost。叫这个first啊，就是第一次加载这个值。

然后在方法中呢，咱就调用API中接口中的内容，咱们写一个叫cos API，调用咱刚才里边那个方法，呃，写错位置啊，应该在这个麦里边啊，这个位置。这里边，然后咱们调刚才那个方法啊，刚才的方法我们就get cos list，把这个拿过来，然后在里边，然后传参数，但是因为我现在比如我只想查第一页的数据，那我们写个一。然后在我页面中每页要显示的，大家看到是不是有八个课程啊，因为这样的话显示更加美观，所以我就写一个八，把它就差第一页，第三个是你那个条件，咱就传一个search o BG这个对象，把这传一下啊，我们写一个叫这次点search o BG，然后写完之后我们写这么一个点Z。加上一个response。箭头函数通过response把值得到，然后得到之后就复制给这个date这么一个变量。

那我们赋值date.date等于response.date.date这样的话啊，咱们把这个方法做出来了，这个我们就查第一页的数据，因为咱们接口中返回是一个map集合。我们看到这个。所以咱们两个date就得到外部集合。赋值给这个变量。这个啊，我们就做到了啊，然后做到之后咱们把这方法在我们的create里边做个调用啊，就是我们课程那个初始化的那个那种啊。就是课程的。第一次查询，或者查询第一页那个数据，我们写一个这点init。Co first啊，这个就做到了啊，咱们先查询一会儿再做分页那些操作，然后这个做到之后，里边还有一个效果，因为咱们在进入到页面中，是不是要先初始化出来这个分类啊，包含一级二级，并且分类中要做个二级联动，所以我们现在先把它的一级分类先查出来，然后再做它的二级联动。

好，那我们来写一下啊，角D位置。就是第二个方法。查询所有的分类，用于显示那这个位置起个名字，我叫init，这个呃，Subject。就是初始化这个分类。然后在方法中，咱就调用我们刚才定义的那个接口中那个地址。咱调用啊，写一个叫做这个cos API。点上我们刚才那个方法名字，这个名字get subject。然后调用之后，我们写个点赞，在里边写个response。加个解函数，通过response把里面的值给它取到，就是点date.date点上它那个名字。那咱看一下哈，接口中那个所有分类，它叫什么名字。

咱是不是叫这个例子啊，那我写个丽色，然后写完之后做个赋值，就是这次点那个一级分类啊，咱看一级分类我那名字啊。这个名字啊，这是一级分类把这个啊。拿过来这样的话我们就做到了啊，这个做法就是查询所有那个一级分类，给他做个显示，但是其实这里边既有一分类，也包含二级分类，因为咱有那个结构，就是一级分类中有一个叫秋准，里边包含二级分类，所以咱们把这个两个做到了，然后这个方法最终咱肯定是进入页面也需要调用，因为它要显示。就是。一级分类的这么一个显示，那我们做个初始化。Init。Subject。这样的话啊，把这两个方法写出来了，第一个方法查询我们的第一页数据，然后第二个方法做这个一级分类的初始化啊，这各位要求能快速做到啊，应该没有什么难点啊，主要就是这么一个过程。

然后除了它之外呢，就我这个结构啊，就是我是仿照咱刚才那种异步的方式来做到的，刚才异步它是不掉一次，就说这个让它也掉一次，但是这过程中你看啊，刚才一补中咱是不是有这个方法呀，就是做那个分页切换，所以现在如果按照我这结构，我也需要写一个分页切换方法，为了后面能做那个上页下页等等这种效果啊，所以大家写第三个。分页。切换的一个方法，那我写个给他写一个方法啊，跟刚才那个一样的啊。比如这个名字，我就还是叫这个，呃，Goto page。里边传一个页码数，就是你要查第一页的数据，然后下面咱们还是调这个接口中的方法，跟这个写法一模一样，只是参数咱需要改一下在参数中的这位置，然要传的是一个叫配置，把你的页码数传过来，然后调这个接口中的方法，最终反映的数据就是给这个date。

这样的话啊，咱们把第三个方法写出来了，也就是这样的话呢，咱就完成了一个最基本结构，这结构我再说一下啊，咱要怎么做，就是我第一次进入页面，他先把我第一页的数据查出来，每页显示八条记录，然后一会儿咱在页面中显示，然后这个查出来之后，在我页面的上边是不是要显示它的分类啊，所以咱们把分类查出来，然后把异级分类到里面显示，这是我们的第二个方法，然后第三部分，因为咱们最后肯定要做那个分页的切换，最后加了一个分页切换方法，就是里边这个goto配置。传入你的页码数，然后做的这么一个分页啊，主要咱们现在写了三个基本方法，然后写完之后，当然里边有各种那个点击的效果，咱先把这个数据先给他弄出来，然后再慢慢往下实现，因为目前应该至少有第一页的数据。这个啊，我们写到这里啊，然后咱们下面看页面中的内容啊，咱们把数据给它先弄出来啊。

那我们找到页面啊，在液面位置中呢，首先咱先找到这个地方。这个地方要显示的是不是咱们所有的一级分类啊，然后下面这个位置要显示就是你的课程数据，那咱们给他就弄一下啊。那怎么弄呢？应该并不复杂，咱们这个分类是不是肯定是便利，然后这个课程数据肯定也是便利，那我们先找这个分类啊，咱找到啊。课程分类应该在上边。分类。呃，大家看到分类是不是就是在。这个位置这是它的分类，现在分类是写的固定的这么几个值，那我们下面把这分类，咱是不是也是做个便利，然后便利之后把它我们就做到啊，那咱们下面啊给他做一个便利。便利怎么做呢？按照我们刚才写法啊，咱就保留一个，比如保留这个数据库，剩下几个给它都删掉。

然后在这一个Li中做个遍历啊，这全部保留啊，其实删掉遍历也可以啊，给它保留了，然后再加一个。V-for便利，咱们那个一级分类，而一级分类应该叫应该是这个啊subject这个list，我们加个因在里边给它起个名字，比如这个名字我就叫。Item。其他啊，然后这里边再写一个叫冒号T。里边加上一个叫item.id这样的话啊，便利便利之后这个位置用差值表达式来取它里边的这个名称。取下啊。Item点上应该叫开头啊，咱们看一下啊这个名字。啊，就是title这样的话啊，我们就把这个讲出来了，各位能做到啊，但是这做的过程中呢，为了咱们一会儿操作方便，一会儿再用点击让他选中我在里边啊，给他换一种写法，之前咱也讲过，我给加这么一个东西。

叫in desk。各位是否记得啊，音代表示是不是它的索引值啊，也就说这个值从一开始索引从零开始啊，那我这位置就加它那个索引，通过索引啊来做这操作跟刚才写法都一样。啊，就这个啊，是咱们写的这么一个结构，它就可以把我们的一级分类做个便利，然后便利之后显示你的一分类中的这些名称，这个啊我们就做到了啊，大家把这个能快速实现出来。然后这个做到之后啊，在它下面还有它那个二级分类，但是二级分类呢，目前也是写固定的，咱一会儿肯定也是便利，但二级分类有这么一个叫联动效果，那我们先给它变利，然后再做联动。这个位置啊，跟刚才一样，加一个叫V-for，找那个二级分类应该是这个sub sub，例子这是一级，这是二级，二级中同样便利。

刚才写法一模一样啊。我来个音，比如说二级分类呢，我也叫这个item了啊item，然后这叫in desk。在后面加一个冒号K这个，这个便利，然后这里边取里边那个值，还是用这个。差值表示啊，把这取到。这个啊，就是二级分类，所以这样的话啊，咱把这个做了一个便利，这是所有一级分类，这是二级分类，但二级分类。一会儿再用那个联动效果。这个啊出来给他写出来了啊，然后写完之后咱们往下来看啊，下面的有这几个，咱一会儿写，咱先看这个具体数据部分，就是咱们的课程部分，把课程咱们先给它显示出来。那课程怎么显示一个来看啊，第一部分这个数据。跟刚才应该差不多，咱们还是做一个V-if的判断，看里边有没有值。

咱们刚才那名字就叫date，就是date.total如果它等于零，那咱们就是把这段话做显示啊，就判断做显示，然后下面一样加个V-if。如果说你这值大于零，那咱们再做这个便利。啊，这里面写个大于零，下面就是便利这个代码。但这便利咱看一下啊，里边也是UL，咱保留一个，剩下的都给它删掉，然后在里边给它显示出来这个效果。这些啊，先都拿掉。在实际中呢，这些页面都是由美工给我们写好的，他发给我们，然后咱们把他这数据啊，改成数据库中那种。这个啊给它去掉了，在中最终解下啊。V杠。然后我们加一个叫date点。It，呃，看一下我的接口中啊这个名字。找一下啊。就是。这个里边。

他这名字啊，就是it啊，这没错啊，然后里边我们加上，比如这个我就叫，呃，就叫it啊音。在里边还是写一个冒号K啊，这个叫item.d。这个做了便利，下面把它的值我们就可给他就最终取下啊，跟刚才一模一样的啊，咱就快速写一下，第一个值是他那个封面。那我加一个叫item点，应该叫那个，呃，封面应该是cover，好像叫cover cover。呃，我还是复制一下啊，可能写错。看课程。课程的封面。就是这个call啊，这是第一个把这个复制过来啊。然后下面有它那个就是课程的名称这个位置。我们写一个叫这个item点。Title，这是课程名称，然后除了他之外往下看啊，下面还有一些加内容啊，包括比如说什么。

什么学习人数，什么评论数等等啊，这些咱就不具体显示，主要把这个封面名称显示应该足够了啊，主要这几个值，然后包括有些地方咱再完善一下，比如说这个title。给他显示一下啊，我们是他。然后里边。还有这个位置啊，也显示我们这个名字。It点抬头。这样的话啊，这个效果咱应该就给它初步显示出来了，主要里边这么几个值。这个啊，我们做到了啊，然后这样的话，现在在页面中应该有它的数据效果，包括至少有它的一级分类，还有我们的第一页中的课程数据，这数据我们应该是可以查出来啊，所以咱们把这个简单效果先给他整出来了。然后整合之后，下面咱们来做个测试，看一下目前的结果是什么样的啊，我们来试一下啊。我先检查一下啊，在课程的这里边这个。

跨域咱也加上了啊，然后路径也都改了，把它重启，最终测试一下哈。我们等它重启，重新起来啊。然后启动之后，咱就来到我们的页面中录，在页面中看一下，我第一次进入页面，它肯定是查第一页的数据，而每页显示八条记录，并且在页面上面会有我们所有的一级分类显示，一会儿咱再做二级联动，包括其他那个条件查询啊，咱先看一个最基本的效果对不对。那我们来测试一下啊，比如现在我把这个。重新啊，咱重新弄一下。查询，现在我点击课程大家看。数据是有了。你看啊，第一部分这是我们的一级分类，因为咱们在表里边应该只有三个一分类，就是这三个。

你看啊，前端后端数据库，这应该没有错，下面是咱的第一页的课程，咱有八个课程，这几个课程在里边做做显示，所以咱们啊，把这个我们就初步做到了啊，这是一个最基本实现。