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

课程列表部分呢，咱现在做了一部分，也就是接口部分我们都写到了，然后咱们下面写的都是我们的前端部分，那咱们就一步一步来实现一下啊，但是前端过程中呢，因为他要做很多的这种条件查询，这个过程稍微麻烦一点点，但是要求各位这过程虽然麻烦我们也能做到啊，因为前端也很重要。然后咱们下面我们就来写一下啊，那咱写什么，我先说一下啊，来到这里边，这是我们第一个引入文件，文中调用，然后业中调用中我们要写到，比如说第一部分。我想这位置啊，就是现在我们是显示了所有的。一级分类，然后咱实现当我点击某个一级分类，然后在它的下面显示对应的那个二级分类，把这个功能做到，其实做的就是一个二级联动，只是咱现在不是用那个下压列表，咱是用普通的方式做显示，所以咱们现在把这个做到，也就是说比如我现在点这个前端开发，然后在前端开发的下面，也就是这个位置，把前端里边的二级分类做个显示，当我点后端开发，在它下边把它对应的二级分类个显示，为了一会儿查询做准备，这是咱要做的功能，做的也是一个二级联动，只是不是用下列表做的，那咱们下面把这个我们来写一下啊，该该怎么做？

就是这个功能之前咱做过类似的，现在我们等于说又写了一遍，那咱们直接啊写代码。首先啊看，先看一下表里边看数据，我们现在这个一级分类里边应该都有对应的二级分类啊，一会儿咱应该能查出来，那咱们来到页面，那页面中怎么做到呢？咱往上看啊，先找到咱那个一级分类位置就是我们的。这个地方这是显示一分类啊，包括这个啊，这个名字改一下啊，我们叫这个item开头。

显示这个名字啊开头，然后这里边要怎么做呢？因为咱实验的效果就是点击某一个一分类，是不是它要去显示对应的二级分类，所以咱们在一级分类这位置给它加上一个事件，当我一点触发事件，然后调方法，那咱给他绑定个事件，我就写到这位置啊，在里边我们加一个艾特。Click绑定个世界，比如说这个我起个名字，我就叫这个search。Y啊，就是查询一级分类在里边，咱要传什么呢？因为咱现在要根据一级分类是不是才能得到二级分类，所以咱把一级分类的ID值传进去，ID值怎么传呢？大家看啊。这是一个遍历的，是不是有item，那咱就写一个item.id是不是它的ID值啊，另外里面一个索引啊，咱也先传进来，目前用到这，咱一会用到一会儿咱做那个就是显示会用到啊，咱先主要用到这个纸就是一个。

我们一级分类ID，所以这个位置绑定了世界。把这个啊，我们写出来了。这给大家截过来啊。就是我们里边这个做法。我在图上特别画一下啊，就是这个功能的做法，就是首先在里边我们先绑定一个事件，然后绑定事件之后，下面我们写的方法，方法我就叫色之外，那我写到下边，就咱们到MY里边，咱上午写了三个啊，然后下面写第四个这位置。第四个做的适应，就是点击某个一级分类。啊，一级分类，然后他就查询出对应的二级分类。把这个做显示那方法我们刚才叫search y里边两个参数，一个是一级分类ID，还有它那个inex，其实是个索引值啊，咱暂时用到一会用到，然后这个一级分类，我给它起个名字ID，比如说它的ID，呃，我就叫这个。

咱就随便写个啊，比如叫这个subject。Parent ID啊，这也代表我们一分ID再加个index索引值，主要我们目前就到它，这是一个方法，然后方法写完之后，下面咱就做到这个。点击一分类显示对应的二级分类，做的就是一个二级联动，那怎么做给大家写一下啊，各位注意啊。咱们在第一次进入页面，我们把所有分类是不是查出来了，就是这个subject这个例子，这个分类里边既有一级，是不是有二级啊，那咱怎么做呢？给大家具体步骤啊，咱的做法就是。就是拿着。你现在点击的那个一级分类的这个ID，也就是我们这个subject ID，是咱点击的ID，那这个ID和我们所有的一级分类ID进行比较，就做一个比较，也是咱写循环比较，如果说它的ID相同，那咱们从那个一级分类里边获取它对应的二级分类。

就这过程，因为咱们在一级分类中就这个啊，咱找那个就这个实体类啊，咱之前写过的，在这里边一级分类我们是这个Y，就是把每个一分类得到在每个一分类中一个秋准是不是它的二级分类，所以咱现在就这么来做，就是拿着你的ID跟所有比较，若相同显二级分类。比如我现在点击前端开发，那咱就取到前端开发这个ID。把他的ID跟所有的一分类做比较，如果相同的话，把一级中的二级给他获取出来，就是这么一个过程，之前咱应该写过类似的啊，那下面。我们就来写一下啊，那怎么写呢，因为他要比较嘛，这单写一个。

For循环，把咱那个所有的一分类做个便利，就是把这个做个便利，咱第一次进入页面已经有值了，然后写一下啊，来个遍利，就来一个Y或者let都可以啊，我写个let，比如说I等于零，I小于this.subject list，点上这个list。然后再来一个爱加加，这样的话做了一个便利，然后便利之后呢，咱就可以写个步骤啊，获取我们的每个一级分类，那咱获取一下啊，我写一个叫这点subject这个例子就是一级分类加上一个中括号，写个I，因为它是一个数组，然后咱们得到每个一分类。比如就叫Y。That。这个得到了啊，然后得到之后，下面咱就做这个比较，ID是否相同，咱们比较一下啊，那我加个if。怎么比较呢？因为我这个方法中这个参数subject part ID是咱们点击的一分ID，那这ID去比较，我每个一分类中ID就是这个y subject.id做个比较啊，看它们是否一样，如果他们一样的话，那咱就把这里边的对应的二级分类给它取出来。

就是做一个获取，那咱获取一下啊，我就写一个。就是Y。Subject点上这个叫children准，因为它那二级分类的名字叫children准，把这个得到，好把这个复制一下啊，省得我敲错，然后这个得到之后，咱就复制给我们那个二级分类的集合，就这个S就是sub s，这是二级分类，这是一级分类，对它做个赋值就可以了啊，我把这个赋制一下。这一次，点。Sub subject list，把它做个赋值，而这样的话，因为咱们赋值之后，在咱们上面那个二级分类地方，我应该做了一个便利啊，就是里边的。

这个便利它就是便利二级分类，然后把这值给它最终取到啊，这是我们的这么一个基本写法啊，我把这个给他演示换一下啊。Item点开。所以咱们这么做之后，我们就完成了这个二级联动效果，咱们只是我们现在是在这个列表中显示，咱不是用下压列表方式，但是做法应该都一样的啊，所以大家把这个给他知道啊，这是我们做的一个基本效果，然后这个效果中，我们现在做完之后，咱先做一个测试，看目前效果能不能出来，如果能出来，咱再把那个查询，包括其他部分给他再加上啊，咱们一步一步往下实现，就是慢慢来做这个效果。那现在应该是初步做到了啊，那我们来试一下这结果啊。现在接口应该都启动状态，包括前端也都启动，那我们来到页面中，页面中我重新刷新，我点CTRLF5重新刷新，刷新之后点击课程，第一次是显示所有一级分类，比如我现在啊，我选择一个叫前端开发，咱看它的二级分类能不能显示。

咱看表里边前端开发下边是不是有三个二级分类，就是vuee这此刻这块啊，看它能不能显示，那家试一下啊，我一点各位看到。是不是可以了，是不是就显出来了，咱要做的就是这个效果，当我点某一分类，下面显示它对应的二级分类，就是这个效果，比如说咱在是一个后端开发，我一点。是不是加入C加加，再点个数据库，是不是就是买circle，这是对应里边的二级分类啊，就是一个联动的一个效果，咱要做到的就是这么一个结果。所以这个啊，我们就完成了啊，点击。一级分类显示对应的二级分类就是另外一种显示方式的联动效果。

测试这个样子啊，所以咱们完成了准备功能啊，要求各位这个功能能给他快速做到，咱之前做那个课程的时候，课程添加应该做过类似功能，跟他的逻辑是一样的。这个啊完成，然后完成之后呢，咱把这里边几个细节我们再进一步完善，而咱要完善什么，咱给大家分享，首先你看啊，我现在这么点，虽然说有联动效果，但是我的数据没有查询吧，我只是有个联动，而咱要实现出效果，比如我现在点一个数据库开发，他就根据数据库开发做查询，把这个分类中的数据查出来，包括我点一个后端开发，它根据后端做查询，把里面数据查出来，我点前端，因为它查询，但是目前没有查询，它只一个显示，所以咱们把这个先做到，就是我点一一分类做查询，然后一会再实现点二级可以做查询啊，咱们慢慢来做，那我来写一下啊，打开怎么写？

还是来到我们的代码中，咱找到这个位置啊，那咱看到做法我们就写到上面啊。因为大家注意，我现在要做查询，那咱调的是不是调这个方法就可以，就是goto配置就可以了，因为它里边我们传一个页数，然后这个条件值你做封装这方法就可做查询啊，那我写一下啊。这位置咱们就是实现点击某个一级分类进行一个。条件查询，那咱调的就是这个方法，就是这个勾通配置里边传页数，因为你每次查询默认是不是查第一页就传个一就可以了，就每次查第一页，比如说点它查第一页，点它查第一页啊，肯定是这么来做，但是你这么写的话呢，它这里边肯定没有完成，因为现在你只传了一个一，而在我这方法中大家看到这个参数。

要设置OBD这个参数中，咱是不是要传入我们那个条件值，咱们做一级分类，那咱看那条件值要传什么，看一下咱上午写那个VO啊，找到啊。应该是MP里边，我们上午那个VO这个。大家看到一级分类中是不是传这个值，就是把它的ID作为传递，那大来写一下啊，我写上面。这位置我们要做的适应就是把那个一级分类，你点击的ID值给他，就是赋值给这个search o BG啊就分值给他，然后就可以做到一个查询，那我们做个负值。这次点设置OBT。点上里边那个属性名字就是它subject parent ID，然后等于咱们就是传过来那ID，咱传过ID应该就是它，我把它做个赋值，这样的话应该就可以了。

所以这个啊，是咱一个写法。这各位给的知道啊，我再说一遍这个特点啊，咱们现在因为我们要点击某个一分类做查询，而咱是根据一分的ID做到这咱把一分的ID得到，不是给这个40OBD，在40OBD中，它会把这值用这层传到接口中，然后咱调离方法就可以做到这些方法，因为每次你每次点默认都查第一页，我直接传个一就可以了，或者你传个配置啊，因为配置默认值就是一。这样的话啊，咱们把这个查询应该就可以初步做到啊，里边就是这个特点，那这个写完之后，咱们来看一下目前的效果什么样，先看目前的效果能不能做到，就加上这两行代码之后啊，我们来试一下啊。那这里边呢，为了明显我把数据稍微改一下，因为它里边可能有些没有数据，比如说啊，我就改一下这个嘛，前端开发啊，把这值给他找几个值，咱复制一下，要不然他查不出数据来啊，咱数据没有啊。

比如现在我就改这个网。这是一个啊，就加两个，这是一级分类，然后有它对应的二级分类，二级分类呢，我也手动构建个值，也就这个值啊，加va s。就它了啊。把这个咱给他拿过来，为了一会儿方便啊。这是二级分类。呃，Java square帮我再换一个啊，有Java还有一个这块这也拿过来。就是。这里啊，所以大家看啊，现在我是手动构建了数据，让他有结果，就是这两门课程属于我这个一级分类，然后属于他现为二级分类，这一分类叫9570，对应咱们里边的就是建在开发，那咱下面就查一下，看我点建单开发，我刚才构建这数据能不能查出来啊，咱就来做个测试，手动构建个数据，或者说你在我们的后台中给它手动加一个啊，我现在直接改一些值，咱为了有效果就可以了。

那咱们来试一下啊。接口前端都启动都没有错，然后来到这里边。我把它重新刷新。CTRL啊刷新一下，然后刷新之后点击课程到我们这里边，现在是查全部，现在是有三页啊，就是这些值都有，然后大家看啊，现在我点前端开发，咱看效果能不能做到啊，我一点。各位注意，他现在报了一个错啊，那报什么错，说这个goto page没有定义啊，那咱看一下啊，可能哪里少写什么东西。各位应该马上能看到啊，这要怎么写？是不是加个this，因为你是当前里边方法不加this啊，它肯定不对啊，要加个this才能调到啊，就是这个问题啊，咱们要写这this，他说这个goto page没有定义啊，有一个小问题啊，那咱们再测试一下啊。

我再测试。比如说我重新刷新，点击课程，然后点击前端。各位看到效果是不是可以了，咱们刚才就是构建两条记录，这两条记录是不是查出来点前端查询，比如我现在再点个后端。是不是就没有记录，因为咱这个没有数据，数据库是不是也没有点前端是不是有了，这样的话，把这个基本效果做到了，就是点击某个一级分类，它可以做到一个查询啊，就是我们的这么一个效果，这各位啊，给他能快速做到啊，所以咱们目前做了一个初步实现。然后这个过程我们再看一下啊，过程就是呢，当我们点击某个一级分类，咱往上看。在里边我们写了一个事件加上方法，方法中传了一分ID，还有index给咱一会用到啊，然后在方法中我们怎么做到的，先根据1ID。显示它对应的二级分类，并且根据一分类ID调方法做查询，把里面的数据查到，该咱们测试，这应该是没有错了啊，所以现在这个就完成了啊，把这个我们做到了啊，给大家就这过程啊，然后这个做到之后，里边还有一个地方需要完善，就咱们一步来做啊，因为咱们写程序就是这样，不可能一步到位，咱只能是慢慢去完善，就比如说你先写个基本功能，在基本功能上再不断加，不断完善，最终得到你最终的结果。比如你看我刚才写的，上午咱只写了一个简单列表，然后加了条件，先加了这个二级联动，又加了查询，然后咱们再慢慢完善，在实际中都这么来做的。

而这种做法呢，在很多公司开发中，有一种术语的叫法，给大家写一下啊，它叫这个。叫什么迭代开发，就是你先做个基本功能，在里边不断加，不断完善，最终得到你最终小结果，这叫迭代，包括咱写代码这个流程，那咱们啊，把现在做了一个基本效果，咱再进一步完善，下面完善什么呢？

我觉得各位应该能想到啊，比如说我现在啊，点前端开发是查出来了，但是你从用户体验角度考虑，我这个前端开发我是不是点了，给用户是不是一个显示，假如说我这个前单开发变了一个颜色，或者说加一个背景色让他看到，我担心是选择了前单开发，是不是给他一个提示更好，比如现在按照我目前的做法，我确实点了，但是我点过哪个，我是不是后面就不知道了，我是点哪个我肯定不知道，所以给他来一个提示，比如说我点了前端开发，让它颜色变成红色，或者说加个背景色，我点后端开发让它变个颜色或者加个背景色，咱把这个样式上的显示足够完善啊，这是我们要做到的，那怎么做？给各位来说一下啊，这做法其实用到就是CSS中的一些小支点。啊，那我们来看一下啊。首先呢，第一个啊，咱们先从我的课件中，咱先复制一段样式，就是这个样式这里。

然后把这样式呢，放到咱们页面的最下边，这样式咱们看一下啊，是一段CSS代码，这个我觉得各位应该能看懂啊，它就表示啊第一个样式。点active这名字随便起的，然后这什么意思呢？给它加上一个背景色，就当你点加背景色，这had就是就是不显示，这受表示显示，而我们现在咱就可以加个背景色，用这个叫I，那怎么用，给各位说一下啊，咱现在做法就是我们先来到那个一级分类位置这个地方。然后在一级分类里边呢，咱们可以给他加上一个样式，就是咱们看到啊，这么来加你加个冒号class，就我先写过来啊，各位用的话直接复制可以了，因为写法比较固定。咱给它放到这里边，然后解释一下什么意思啊，它的含义就是class表示用你的那个就是对应点的样式叫类样式，比如咱刚才写的叫active active里边呢，刚才咱看到啊，它这个位置中是不是加个点active，所以这个样式就是用class来使用，这叫做类样式，然后那使用你看我怎么做到的啊，我在这里边呢，做了一个判断。

叫y inex等于inex，就是如果说这个值相等，那这个LT样式就生效，它就能有一个背景色或者选中，如果这两只不一样，那他们就不选中，主要是做这个事情，通过这只做了一个判断，那怎么判断，看我的方法中啊，我在方法里边把inex是不是给它传进去了，那那在代码中就让这两个值相同就可以了啊，那我们给它写一下啊，因为这个y inex咱们刚才都定义了初始值。它初始值是负一，然后这个值等于我们的index就可以做到啊，那我来写一下啊，然后这个位置。

首先我们做的就是。把我们传递过来的index值赋值给这个one index，就让它那个样式能生效。啊，写一下啊，就是为了这个样式。样式可以生效。这是啊，我们做的第一个，那咱给它做个负值就可以了，我就写一个c.y index，等于这个叫index就可以了，这样的话都赋值，然后赋值之后呢，当然它还有其他的啊，其他的我也给它做赋值，暂时用不到，但那为了就是效果更完善啊，这个to暂时没有，那我这个to还是一个。负一啊，就还是之前的值，主要就是这行。这样的话啊，咱让他就可以有一个选中的一个效果啊，这个就可以了啊，当然咱们如果说啊，你只差一级分类，它的二级分类应该是里边不需要知道，咱把它也做个清空，就是给它避免一些bug啊，给它清空一下啊。

二级分类应该叫那个。我从里边复制一下啊，他的ID这个subject ID。这个值等于这个空啊，因为咱们查E分类它没有，然后另外啊在里边。把那个二级分类那个集合也给它设置一下啊，这次点subject list。等于空啊，这些都是把那值清空，咱们现在主要做的是一级分类，而刚才我们要实验效果，主要就是这行代码大家看到啊，我再说一遍啊，然后咱们看效果，它的作用就是呢，当我们就是因就是y inex和inex的值，如果它们相同的话，在我这个样式里边，我是加了一个判断，就是咱们刚才看到的。这个判断。如果说两只一样，那active样式就生效，这里边就会有一个背景色，或者说给它有一个选中状态，所以咱们用这个来判断，那怎么做到，在咱们刚才的方法中，我就把这个传回来的inex的值直接复制给index，那这两只就一样，它的样式就会生效，而样式是用CSS加了一个，就是背景色啊，或者加一个选中状态，就是这么一个结果。

啊，所以咱们把这个我们就初步做到了啊，那咱们把效果咱来试一下啊。比如我现在重新进来。这个啊，应该保存了，然后在里边点课程，然后我点前端开发，大家看效果应该能看到，现在它是不是有个背景色啊，它这个颜色可能这个搭配不是特别合理啊，咱不是专业美工，但是效果咱能看到这个是不是有背景色，比如说我再试一个换一个后端开发。是不是还有背景色，我再换个数据库开发是不是有背景色，咱要做到的是不是这个效果，就是当你点某一个，让他有一个背景效果，就是看得更清晰，知道我之前是点过那个一级分类这个啊，我们就做到了啊，这是咱们完善的第一个根据一级分类做个查询。

所以咱们刚才的代码中都是前端各位能给他写出来啊，咱主要就是二级联动，然后包括传值，让样式生效，以及调方法做查询，最终看到就是既能查询又能有这个样式的变化。这个啊，我们就写完了啊，主要就是这个代码。