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

就是下面我们写这个，点击某个二级分类继续做查询，它也能做到这种效果，那咱看怎么来做啊，还是来到前端中，因为都是在前端接口咱都写过了，然后前端中呢，咱找到二级分类。我把这个啊调的稍微大一点，二级分类这是一级分类咱刚才做到的，然后二级分类是在这里啊，那怎么做呢？跟刚才应该说一模一样啊，首先第一个你在它这个里边也是加上那个样式啊，那样式部分我就直接复制了啊，就是这个跟它一样。这是一个样式，然后把这个我就复制到里边来啊，就不再敲了，刚才一模一样，然后咱现在同样这个效果。当我这两个值相同的话，让就生效，它一生效样式就有里边的这个值啊，咱也是这么来做，然后咱们在这个A标签中也是给他绑定上这么一个事件啊，咱也是绑定事件，然后绑定的方式跟刚才一模一样。

然后写一个啊at click这个方法，比如我叫这个search to啊，刚才叫search y，这叫search to。在这里边还是传两个值，一个是二级分类ID，一个是它那个index索引，传索引为在这里边能生效，那它那个ID就是item.id索引就是index，这样的话啊，事件咱绑定了，然后绑定之后，下面按照刚才的那个过程，咱们把方法给他最终来写下，跟刚才应该说差不多啊，那咱们快速给他实现啊。我在下面创建。来到我们的。这个位置啊，这是第四个，然后这是第五个。我们实现点击某个二级分类，实现这个查询，然后它的方法就咱写的色尺度。在方法中两个参数，第一个参数是那个二级分类ID，比如说叫subject ID，第二参数是index在里边，咱肯定也是查询，按照咱们刚才的方式这个写法啊，那我写一下啊，首先第一个。

把这个inex给它做个赋值，赋值给我们这个叫应该叫to index啊，因为咱是根据它做的判断。那咱看一下哈，在里边是不是这个to index。我们再回来啊这个位置，然后它就等于我们的index，这是第一个，为了你那个样式能显示。就是为了样式。它能够生效，然后第二个咱们像我们那个search OBD中做个赋值调方法，给它进行个查询啊，就是这个想法，把这个复制给它改一下啊。咱是把这个二级分类ID。赋值，然后复制给这个它啊，这里边我把名字改一下啊，到里边复制ID。

然后它的这个值就是subject ID，最后调方法，根据二级分类我们做个查询，包括咱也是直接调这个构图配置里边有这个。然后它有一个这个一就是默认查地页数据，这样的话就完成了啊，咱写的。这个第五个方法。查二级分类。那起完之后，下面咱把这效果我们来测试一下啊，因为刚才我应该是加了数据，既有一级又二级，那咱看我现在点完一一之后再点二级，它的效果能不能做到啊，咱是这个结果，包括它那背景能不能加上那个就是样式的变化。咱们归来啊。刷新。点击课程，在课程里边我还是点前端开发，这肯定没有错，比如我现在啊点一个javascript，咱看结果啊，我一点各位看到是不是没有问题，这数据是不是有了，因为咱们刚才加了一个，比如我现在再点这个j query啊，咱看这叫加入技术入门，然后点j query。

是换了一个HTML啊，这样的话，咱把这个效果就做到了，比如说你再点它那这个啊，有没有数据，有数据的他把这个就依次查出来，咱要做到就是这么一个效果啊，这就是一级和二级分类的查询，我们就最终完成了啊，各位把这个能给他做到啊。也就是。这个效果。我把它。写过来啊，所以现在咱们就完成了里边的这么一个功能啊，然后这个代码就是咱们刚才写的这表面代码，一个是查一分类，一个是查二级分类，包括按照咱这个格式这事完成这个代码啊，然后我把代码中核心的部分给各位，我就截过来啊。就放到我这个图上啊。主要我就截那个一级分类，因为二级跟它差不多。

啊，就主要是。有这个部分。这个啊，我先拿过来。往下拉一点啊。然后除了他之外啊，就是还有。这个部分啊，我就截一个核心的啊，就是它那个联动。这个各位按照过程能给他做到啊，主要咱们写的这个啊，所以现在在我们的条件查询中，把这个一级二级分类我们就都做到了啊，各位把这个能给他筛出来，然后这个做到之后，咱下面还有一部分查询，就是这部分查询。做法跟他应该说差不多，这个查询是什么呢？他就是做一个排序，比如说我现在点这个关注度，那咱根据关注度做一个降序排序，点最新做一个排序，点价格做个排序，包括每次点之后，它里边也是加上这么一个，就是样式的变化啊，所以咱现在就要来做这个东西啊，把这个做个排序，那咱看怎么做啊，过程应该说差不多。

但是这个做法中呢，大家注意啊，因为不管你是关注度最新还是价格，它这里边呢，咱并不需要得到它的值，只想判断我是不是有没有点这个按钮，如果点它的话，那就排序，不点就不排序，所以咱们啊需要把这个做个处理，那怎么处理给大家我来写一下啊，来看这个该怎么做。首先啊，咱先看页面中的部分，找到那三个地方。找到啊，这三格关注度最新还有一个叫价格啊，这是它的三个地方，然后三个地方中的就是每个里边，就是每个超链接中，咱都需要给它绑定一个事件，然后最终来触发，那这个啊，我们给它做绑定，这过程我不再敲边啊，我从里边直接复制的啊，就是里边我这个你看啊，每个里边都做了一个事件的绑定，但是绑定中的我也是用了一个样式，这样式目的也是为了让它有那个背景色的一个显示啊，就加了这个，我把这复制，然后咱看一遍啊，不需要各位去写一遍，但是能看懂这什么意思。

我先拿过来啊，然后把它替换掉，就是三个。这个啊，我先拿过来，然后咱看一下啊，这一段到底是什么意思啊，首先第一个呢，里边我是加了一个样式啊，这是我们那个框架中本身一个样式，那样式什么意思呢？就让它加个背景色，也就是类似于这种情况，背景色那在里边你看后面。就是冒号class后面我做了一个判断，什么判断呢？就是如果说这个值它不等于空，就是里边有一个值，不管什么值，只要里边有样式生效，如果这个值等于空，那它就不生效，就是通过这个里边有没有值做个判断，有值的话它就有样式，没值的话就没有样式啊就是做这个事情，那咱们把这做到，然后做到之后你看啊，在每个里边我都加了一个。

考虑一个事件，这是销量，这是最新，这是价格，或者这叫关注度啊一样的啊，然后咱下面就写这三个方法，三个方法怎么做，跟刚才差不多，比如说我现在点销量，咱让销量的这个里边设置一个值，然后复制给那个设置OBG，再调方法做个查询，但是你设置之后要让这两个值等于空，包括它一样。配置设置这两个等于空啊，就是以此类推，把这几个方法我们做到，那咱们先写第一个，就是这个设置by count，根据销量做个排序。我们小下边啊，而大家看啊，这三个咱都定了初始值度为空，下面咱需要给它做到啊，这是我们的就是第六个。啊，第六方法。根据这个销量做一个排序。啊，销量。做一个排序。

然后方法就这个叫色是BY，看看啊，咱是这个方法，这个方法中呢，应该说不需要传什么参数啊，咱在下面直接设置就可以了，那我们来啊写一下。来看怎么做啊，首先我们先做的第一个事情，让它对应那个变量，设这个值就是设置。对应的变量中的一个值。它是为了咱那个样式能生效，就是样式有个背景色，那我们来设置啊，它的这个值应该叫by count so，咱们随便写个值，因为这个值咱不为了获取，只为了有没有，比如说就来一个一啊，当然你写个W也无所谓，只要有值可以包括这句话具体含义我再说一遍啊，这叫by count so，各位记住。大家看上面。这位置啊，就这里，你看啊，如果说这个值不等于空，那咱的样式就生效，但是这个目的不等于空，比方你选中了它，那它有一个背景色啊，就这个拜。

Count做到咱再回来啊到这里，然后这个做到之后，咱需要把另外两值变成空，因为另外两个不需要来设置，那我们来变成空，就是这次点。有一个叫做，呃，应该叫那个。GMT这个啊，就是那个时间那个它就等于一个空。然后除了它之外，应该还有一个那个价格的，让它也等于空。我们写一个this，点这个应该是它price。等于个空啊，这个做设置，然后这个做到之后，咱们肯定要调方法做查询，当然调发之前咱需要把我们这些值给它赋值到那个色尺OBG里边去，因为OBG最终要传到咱的接口中去，这个赋值那我来复制一下啊，这次点这值OBD。点上我们的第一个就是它，那把这个从里面复制叫by count so，然后等于咱们这个叫this.by count so啊这个我们给它做个赋值，然后下面以此类推，把这两个也给它复制进去就可以了。

啊，另外两个我就复制了啊，这个不再敲了，因为代码都是差不多的啊，我找到应该是里边的，呃，这个啊，就是它这个代码，把这两个我们给他最后赋值，然后赋值之后，最后我们就调用方法来做到这么一个查询，那我们调这个类似点沟通配置。里边默认就传个一，因为它默认查的是第一页数据，所以咱们这么做，把这个根据销量排序就可以做到啊，里边就这么一个结果，这个我们就完成了啊，然后完成之后咱们把效果试一下啊，根据它的排序，也就是根据表里边的啊，应该是。找您字段啊。这个字段这个排序啊，因为里边应该也有几个值啊，那咱们来看一下目前结果啊。

我来到这里边，比如我第一次进入，我先刷新。刷新啊。然后刷新之后，比如说现在我点击这个叫销量，大家看颜色是变了，然后它现在应该有一个排序效果，比如我们再试一下啊。重新刷新，你看第一个现在是H调五，然后我点销量是变成vuee，因为这销量是最多的啊，这样的话做到了，然后最新和价格跟他应该一模一样啊，那咱们马上把这个写出来，我就用刚才这个快速改一下可以了，因为都差不多啊，就这个写法。那我们改一下啊。首先把方法咱先put过来，这个叫search g MT，还有一个叫search price。按照这种方式修改。写到这个位置啊，这是第六个，然后咱写第七个，第七个就是根据它那个就是。最新的那个时间做一个排序，他的方法，这个方法。

这个啊，然后还有一个就是根据它的价格，最后排序第八个。价格做个排序写法，就是这个结构应该没有什么变化啊，那我现在把这个我就给它直接复制，咱们给它快速改下了啊，首先咱看这个最新，那最新里边呢，咱要做赋值，那怎么赋值呢？把你最新这个就这个GMT变成一，这个变成空下面。依次给它放到测试OBBG中，然后查询啊这么来做，然后还有一个叫价格，咱看一下啊，价格那个方法名字，我们刚才起的名字。应该叫做，呃，找到啊，那在哪去了。往下看，你看下边。这个位置啊叫search price，这个方法我们也写一下啊。写到这里。然后它里边做法跟上面一样啊，只是说换了一个值值而已。

写出来，然后把这个复制，咱也是快速改一下啊，然后这个价格中，咱让价格值是一，其他值等于空，最后调方法做个查询。这样的话啊，咱这个代码就最终完成了，就是能实现出三个不同的排序，根据价格，根据销量，根据最新就可以做到啊，主要用这种方式，为了做到它那个第一个就是样式生效，第二个为了咱接口中使用，包括咱看到咱上写的接口中呢，我们这个判断。就这个判断。诶，大家看到啊这里，诶哪去了。弄没了这里啊，大家看到这里边呢，值，为了看里边有没有值，但是它并不想取这个值，所以我这里边写个一就可以了，或者你写个二也一样的，他只要有值，咱就根据它最后排序，没有值那就不排序。这个啊做到了啊，然后做到之后咱们把这效果我们给它最终来试一下啊，看一下这个排序这个三个效果。最终测试啊。

我先刷新点击课程，然后大家看啊，比如现在根据销量，销量第一个是vuee，这没有错，然后我点最新，最新是不是这个1230啊，这是我加的最新的，再根据价格就这个啊，这样的话，我们现在这个排序。是不是有效果了啊，咱就做到这个效果，然后你再看啊，大家看个细节啊，我每次点完之后，这个位置是不是有个箭头啊，这里箭头呢，也是咱们通过样式做了一个控制，那怎么控制的，看我上面部分啊。就这些细节各位要给他都知道啊，然后就是这里，你看啊，如果说我这个值等于空，那咱就加这个，也是通过这个判断，然后加一个氦的这样式，而氦的样式是我下面写的这个。第二记play等于no，它就表示不显示啊，就是这么一个啊，基本一个效果啊，比如咱们每次点。多了一个。向下的箭头，然后你不点的话，那它里边就没有那个向下箭头。

这个啊，我们就完成了啊。所以咱们现在就把这个课程的条件查询带分页，包括根据分类，根据这个一级二级分类，包括根据销量，最新价格，这个调音查询在前端部分咱们都填出来了啊，所以各位把我刚才写的里边的主要有这么。八个方法啊，各位都能给它写出来啊，里边就按照我们这个过程把这些细节的功能做到，各位别小看这种功能啊，在实际中这些功能肯定都会有，都是页面中一些必备一些功能，而这种功能呢，很多同学会想，在功能里边，很多公司啊有那个前端工程师，当然一般来讲前端工程师呢，他一般不喜欢做这种事情，因为他觉得这种事情所他来讲没有什么挑战性，所以这种事情一般都是由我们后端去写的，所以各位把这个频等给他熟练能写出来，因为在工作中这种事情一般都是由后端去做的。

所以大家啊，把这个给他知道啊，咱现在把这功能就完成了啊。