day07【课程发布-添加课程信息】/14-尚硅谷-谷粒学院-课程管理-添加课程信息前端完善（显示分类）

咱们在这个里边把分类做成一个二级联动效果，那咱们看怎么来做。首先啊，咱们先快速给各位先分析一下啊，这过程该怎么实现。这图我先保存一下啊，难道？八张图就是讲师下拉列表的显示。这是我们刚才画的啊，然后下面咱看这个二级联动的，就是这个课程分类部分，那怎么做，给大家做个分享。就是在这个分类中呢，因为咱们有。一级分类。还有一个叫二级分类。有两分类，那我们要怎么做呢？首先第一个呢，咱们要先写一个下压列表做一分类，再写个下列表做二级分类，但是咱们要怎么显示呢？给大家强调啊，各位也可以考虑一下怎么显示呢？就是首先呢，我们在第一次进入页面的时候，那怎么做？

你注意啊，这是不是一级分类啊，在你第一次进入页面的时候，那我们做法就是先把我们的所有一级分类。都显示出来，这是第一个啊，所有一分类都进行显示，二级分类在d two进入页面，默认它是为空的，里边没有内容，因为你不知道二级要显示哪个一级，二级不是独立存在的，它要在某个一级中，所以这第一次定页面，我们这么做，把所有一分类都写出来，二级分类让它为空，这是第一个，然后第二次我们怎么做呢？给大家写一下啊，比如我现在我选择了某个。一级分类，假如说这个位置我选了一个叫前端开发，那二级分类中怎么做会显示你选择的一级分类里边对应的二级分类，这是我们做的后面的步骤。

举个例子，比如我现在在分类中，咱找到分类表，我选择了前端开发的一分类，那二级中要显示的是不是这三个we Java这块，当我选择的后端，它要显示是不是Java c加加，我选择的数据库，它显示不是就买so，主要是这个过程，所以这个就叫二级联动，第一次二级为空，一级显示所有，第二次选择某一级，再去显示对应的二级分类。这是我们要做的一个基本效果，那咱下面按照这个过程把这个来做一下，我们实际中啊，一般都这个流程，首先咱先把一级分类，先给他做个显示，而这一过程跟刚才讲师应该是一模一样的。咱就啊，快速写下啊。那我们来到页面中啊，在页面中的这个位置有一个叫所属分类，那在所有分类中咱们先加上一个叫yellow form item，就跟它一样。

那我就用它，咱就给它快速改一下了，用它改造一下。那咱写一下啊，在里边改个名字。这个比如我们叫这个课程分类。啊，咱先写啊，后面咱再完善啊，这叫课程。分类。在课程分类里边，首先这个位置是它那个叫一级分类，然后一级分类中呢，肯定也是一个EL select，后面加上那个一级分类那个ID名字。那我们找一下啊，一级分类啊，比如说我们直接对照实体类啊，给它复制过来。咱把名字给他写全一点啊，找到我们那个分类。啊，应该是课程啊，在课程中呢，这里边有两个啊，这个中文提示稍微有点问题啊，就这两值呢，这个值是你的一级分类那个ID。啊，这是一级分的ID。然后上面这个叫二级分类的ID啊，就是有两个一个一级一二级一级的名字，这个名字叫subject current ID，这个我们让他就代表我们的一级分类，所以咱们在里边把名字改一下，这是一级分类。

包括这个位置给他也定这么一个初始值。关于一级分类啊，为了明显我加个注释啊，省在后面看更方便。就是写一下啊，这个是二积分ID。然后下面这个是一级分类的这个ID，所以咱们把这个做定义，然后定义之后，咱们一会儿肯定要查数据库，得到里边这个值，这值啊，一会咱们改啊，比如说我先改一下，这就叫做subject y list1分类这个我们叫。Subject在subject中，我们取到它里边那个ID作为key，然后取到里边那个名称。它的名称啊，应该不叫name啊，应该叫那个。开把这个我们给它取到啊，所以咱们就做成这么一个基本的效果，把这个做到啊，这是我们要实现出来的啊，然后咱们这个先写到这里，下面呢，咱把那个接口做调用，一会咱再完善。

那我们来调用啊，过程跟刚才一模一样，咱先把所有的一级分类先查出来，然后最终实现那一级分类查询，怎么来查呢？咱找个地方啊。大家看啊。这个方法不知道是否记得啊，这一方法中呢，是咱们在上午写到的，里边既有我们的意义分类，又有二级分类东西都有，所以咱直接调这个法就可以了，按照咱上午说那个结构中，咱再看一下啊。在这里边有所有的意义分类，每个一级中是到二级，所以咱用它可以做到啊，不需要咱再单独写，直接调这个就可以了，那我们就来调一下啊。首先还是先引入。来个import，这个叫。

Subject from，然后加这个地址斜杠APIEDU，这个叫subject。这个加过来啊，然后加完之后，下面我们来写这个方法，这个方法做的适用就是查询所有的。一级分类，把这个做查询，那我来写的方法就叫get y。把这个写到这里边，然后洗完之后咱就调用subject中那个方法。这个方法刚才咱们上午写过了，就是它叫get subject list这个方法。写完之后，我们加上这么一个叫点赞。然后加一个。Response。箭头函数通过response把里面的数据得到啊，就是点date，点上那个名字。那这个名字咱到接口中看一下它叫什么。

找到subject这个名字就叫做。List啊，是查所有嘛，咱就写一个叫list。这个写出来了啊，然后写完之后还是在这里边定义这么一个初始值，为了能接收到我们那个值。那这值，比如说按照我们刚才定义的也叫这个啊，就叫subject y list。这是第一个。这个值呢，代表我们那个一级分类。它那个就是速度或者集合，然后第二个我们写一个叫s to list的，可以代表我们那个二级分类。这个啊，咱写到两个数组，然后写完之后把一级分类给它做一个负值，就是这点上一分类。这样的话，这方法就可以了，然后写完之后还是在这里边做调用啊，就是初始化你的那个。

一一分类啊，咱写一下啊，就是这点get y。所以这样的话，这个咱就完成了，我再咱再说一遍啊，最后咱测试它的做法就是呢，因为之前呢，在subject中这方法咱定义过了，就是查所有的分类，包含一级二级。所以我们现在在页面中把subject先引入，然后写个方法，方法中就是调刚才那里边的接口，把这个值得到，不是给这个叫sub list包在可以里面调用，然后复制之后，这个叫sub y list，在咱的下拉列表中的这个位置，我们就做了一个便利，因为刚才讲是一样，就是V-for便利subject y list里边有subject，包括它的ID，还有它的名称。因为它的名称应该叫title啊，咱来看一下啊这个名称。啊，就是title啊，这是ID，所以咱们现在所有的一级分类在里边应该就可以显示出来啊，这是我们写到的这一部分。

一级分类的部分，那咱们来看一下这个效果，然后再做二级分类。我们来看一下啊，直接到里边刷新，大家看这地方叫课程分类，然后你看这里边。显示是不是三个前端后端数据库，这是不是所有的意义分类，咱把它就做到了啊，这是我们做的第一部分。然后为了明显这个名字改一下啊，我就叫这个。Easy play叫这个名字，这个咱就做到了啊，主要就是这个过程。跟刚才讲师这是一样的啊，也是写就这个代码啊，这我就不截过来，刚才一样啊。然后这个做到之后呢，咱的效果并没有做完，因为分类中呢，既有一级还有个二级，所以这个二级部分呢，咱也是需要写个下拉列表做到，那这里边我再写个下拉列表做二级分类，但是一级二级他们是有关系的。

那列表我就从里边直接复制了啊，刚才应该是一样的啊，就是我们的。这个列表我把这个复过来啊。然后给它放到咱们刚才这个下边。这是二级分类。为了区分啊，给他改个名字，这叫二级分类。然后二级分类中呢，咱用到我们刚才的另外那个数组，就是这个数组叫subject to意思。把这个咱们改一下啊。改成咱这个名字叫subject to list，然后在它里边有这个值，这是ID。然后这是title，这是ID，把这个我们得到这叫二级分类，但是现在呢，如果说我这么做的话，这二级分类啊，目前肯定是没有值的，因为咱还没有做操作，那这个我们要怎么做呢。

给大家做个说明啊。咱看这张就这里边，目前里边应该是没有东西，那我们要怎么做呢？大家注意啊，比如我现在第一次进入应该就是这种场景级分类中有所有二级为空，当我现在点击某一个一级分类，二级中是不是显示一级下面的二级，比如说选择券权开发，要显示前端下边二级分类，当我选择后端，它要显示后端下边是不是二级分类，咱要做这个事情，这是啊，我们要做一个效果。那这怎么做的，给大家说明。首先啊，在这里边你注意我每次点击一级分类里边值是不是要变化呀，那这个过程中呢，咱要给它绑定一个世界。这事件不知道各位是否记得啊，也是咱们在Java阶段学到的，咱之前事件啊，一般都是那个onli，但是我们在下拉列表中一般不用on click有另外一个事件。

这世间是什么呢？希望各位要知道啊，如果你不知道，我这里说一下，后面各位记住，它叫这个事件叫on change事件，就是每次我们改变下拉列表中的值，都会触发个事件，叫做称着事件，就是你的值进行改变，这叫。称职事件，所以咱的做法就是在一级分类的下压列表中绑定个称职事件，当你事件一触发，它就会把这值取到啊，主要是做这事情，那咱来做个绑定，绑定很简单，找到一分类中就是爱，里边再加个事件，就加一个叫艾特这个称值。大家看这个啊，之前咱用的都是它可Li嘛，现在用一个叫称指，就是一个改变里边值的时间，然后称制里边呢，我们给它加上一个方法，这方法做到适应，就是当你这值一改变，就取它对应的二级分类。

比如说啊，我就叫这个名字了啊，这是他那个把名字，名字可以随便起，这是我们绑定世界。然后写完之后，把这个方法我写到下面来。就是。呃，写到这里啊。这些方法就是当我们点击某个一级分类，它会触发这么一个称职事件。然后它会显示。对应的。二级分类啊，这些事件我们刚才写的就是这个方法，这个咱就写出来了啊，然后写的过程中呢，这要怎么做，有多种方式，但是咱一会儿用其中的一种方式等，先说一下可以怎么做啊。首先第一步骤就是现在啊，当你选择某个一级分类，那一级分类它是不是有一个ID值，咱们拿着一分ID值去写个接口，调接口，得到一里边的二级分类是不是可以了，也就是说比如说现在我选前端开发它的ID是不是这个值，咱拿着值查里边有哪些二级分类，是不是这三个，然后把它返回是不是可以了，这是第一种方式，你去写个接口，根据一级查二级，这么做是可以的。

但是咱现在啊，一般在开发中，咱不建议这么做，因为这么做的话呢，你第一个还要写个接口，第二个还需要去再查一次数据库，咱不需要这么麻烦，那我们怎么做呢？说一下我们目前我们用的方式啊，就是刚才那种方式可以，但是咱不这么用，咱怎么做呢？还是用这个方法啊，你注意啊。这个方法里边他插入数据中，咱上午写到过，里边是不是既有一级又有二级，所有东西全有，所以再根据它在前端做便利就可以了，不需要再去查一次接口，直接在前端把你之间的数据给它取一下就可以了啊，这是我们的做法，直接查一次就足够了，那怎么做，咱来继续写下啊。

首先，第一步。当咱们就是点这个一分类的时候，要触发事件，在事件中呢，咱要得到当前一分类的ID。那怎么得到呢？给大家说明啊，因为现在呢，咱用了这个框架，在框架中呢，帮咱们做了封装，我们怎么做呢，只需要在方法里边写个参数，这参数就是你那个一级分类的ID值，就这个Y6。它就是。一级分类的ID值。它会帮咱们传过来，不需要咱们写别的东西，但如果说啊，你写原始方就是扎va所有代码咱需要这么写，我加一个叫次点Y6，把值穿过来，但是目前这值不需要这么写，咱直接写个方法名字，在方法中就能得到，你点的1ID，你加个参数就可以得到。它就这么方便啊，这是框架帮咱做到的，所以这是我们一个写法啊，那咱来试一下啊。

我加个alert，然后把value做个输出，加个VALUE6得到的是不是那个ID啊，试下这个效果，然后大再往下写啊。咱们。试一下啊，现在来到里边，比如说我现在二级分类为空，一级分类中，我现在选择一个前端开发我一点。大家看。ID值是不是有了，这就是前端的ID，比如我再选一个后端。是不是又有ID6610，再选一个数据库，是不是这个5650，所以你发现啊，每次咱点这个一分类，它都会触发事件，然后触发事件之后把一分类ID给咱就可以传过来，不需要我们去写，它帮我们翻过来了，所以这个我们就得到了啊，然后得到之后下面我们要怎么去做呢？就是这个过程啊，给大家强调。其实咱的目的就是呢，目前呢，二级分类中是没有东西，比如说选择一个前端，它里面没东西，咱要把它现在二级给它放到里边去，是不是可以了，就多力式，也就是说在代码中咱向这个subject to里边放你一中的二级就足够了。

就这么来做，那怎么写，咱大概看一下啊，就这么一个写法，你看这写法中啊，就是做法，就是咱们把这个所有的一级二级分类做个便利，便利之后呢做个判断，判断你当前的一级ID跟所有1D是否一样，如果一样的话，从一级中把二级取到，因为一级中的二级就是里边这个秋准。啊，咱上午做那个封装，就是你取到里边那个修准，就是它的二级，所以写法就这么来写，先便利，然后判断，最终在获取，用这个三步最终可以做到。那咱们来写一下啊。首先，第一步。先遍历所有的分类，里边包含一级和二级。

这个分类呢，就是它啊，因为里边都有，那咱就写一个负循环来遍历。注意啊，这循环呢，是Java里边的，跟Java写法基本上一样。只是这里边你别写个int，它没有int啊，你用Y或者说用咱们之前说那个Lett都可以啊，那我就写个Y了，I等于零，I小于这个叫subject one list点上这个叫Li啊，注意这里边不是size，是Li，因为是数组，再来一个叫I加加，这是做个便利，然后便利之后呢，咱可以得到里边的就是每个。一级分类。那怎么得到你加个叫Y例子加个中括号加个I，因为它是数组嘛，这得到每个一分类我就叫Y。Subject，这是我们的这步，然后得到之后往下步，下面怎么做呢？咱做个判断。

判断什么呢？就是你的所有的一级分类的ID。和我们现在就是点击的ED分类ID是否一样，因为咱们刚才点击一分ID是不是这个Y6值，比如说选后端Y6就是后端ID，我选前端Y6就是前端，咱把这值做个比较，或者说做个判断。啊，那我来判断啊，加个if。在if里边就写一个叫value。等于这个叫one subject里边这个叫做ID啊，根据它做个比较。这个意思我之前解释过啊，不再重复了啊，就是它一个比较三个等号，然后这个如果它们相同的话，那我们最后一步就从这个一级分类中获取它里边的。所有的二级分类。把这个渠道，因为一级分类，目前是他咱从里边取二级分类。

怎么取呢？还是看后段中一分类的二级是不是叫秋准，所以我加上一个叫点秋准就可以取到，然后取到之后最后我们做个负值，就是one subject这个。To list。等于你这个值，这样的话就可以了，按照这个过程就把一中的二级取出来，然后给这个sub to例子，而这个to例子在这里边我们也做了一个we后就能显出来。主要这么一个过程啊，然后我再说一遍，最后咱来测试啊。这个过程就是呢，先把所有的一级分类查出来显示，然后显示之后。在一级上面绑定一个称职事件，称职事件就表示当你直意改变就会触发，在称职事件中咱得到一级分类的ID，这ID它会帮咱传过来，不需要我们写，是框架封装好的，然后得到之后怎么做呢？咱把分类完整便利，因为这里边啊，咱之前写的接口既有一级又二级，那咱们得到每个一级，然后比较。

看你就是你选择的分类跟所有这个一分类ID是否一样，如果一样的话，把它里边的二级取出来就可以了，因为取来之后等于变力就能显示出来。主要这个代码啊，稍微要麻烦一点啊，但是咱前端肯定都是这么来做啊，就是一段最基本的负循环，加上判断加上取值，这议各位给他好好去看一看啊，然后后面会经常写到类似代码包，在实际的开发中，这种代码也会经常写到，在实际中的代码只会比这复杂，不会比这简单啊，所以这个咱一步来，各位把这个就会可以好好看一看啊。然后洗完之后，咱们看一下这个效果什么样的。我们来试一下啊，最终的结果。

现在第一次进入一级，所有那种二级为空，比如大家看啊，我现在呢，选择前端开发，咱再看二级看里边。嗯，我们发现啊，这数据好像还没有啊，那咱们可能是代码有问题了，那这里给各位讲到一点啊，如果说你现在这里边运行发现效果没有出来，各位该怎么看这代码呢？怎么看问题呢？我强调啊，一种最简单方式。咱们就是点开你的F12，看他有没有报错，找这个conso，那我们试一下啊，可能是哪个名字哪个写的不对，来试一下啊，我点前端开发。大家看里边就报错了。看到他报的错吗？我说什么叫错啊，这个叫警告，咱往下看，这叫什么，挨着这叫错误，然后他告诉我们什么错误，看这个词叫subject one list is not DeFine，他说你这个东西怎么样？

是没有定义啊，说的很明确，这里边错误就给咱们做了一个提示，所以各位啊，学会看错误啊，我再说一遍，怎么看错误，当你运行的时候，你发现怎么运行没看到效果，而这里边后端接口肯定也没报错，但是效果没有出来，那你就点F12看这个控制台console中到底报什么错，什么叫报错呢？这不叫报错，或者什么黑色的也不叫报错，你找这个挨着。他告诉我们说这个东西没有定义，叫subject one this is not DeFined，那咱看啊，是哪里没有写对。这里找一下啊，来看什么地方啊。大家注意看啊，什么地方呢，就是这个东西subject y list，因为这个东西啊，是我在date中是不是做的定义啊，所以说你在用的话呢，不能直接写，需要加上一个关键字这个东西。叫什么this，只要你当前这个不加this，这只取不到，它就会直接报错，说这个没有定义啊，包括下面一样。

加上啊，加这个东西，但是我强调啊，这this写这些只是说你在date中定义的需要加this，你看我在当前里面这个Y。这个不需要加啊，这是群体当前里边的，所以咱刚才这个问题啊，那我们给他改了一下啊，然后咱们再试一下啊，最终结果。我这里边重新刷新。第一次点前端开发，大家看二级分类。我们发现好像还没有啊，大家看。还是那个报错啊，我重新刷新。还是我没保存啊，没保存啊。哎，这个没保存，我来试一下啊。在里边选择前端开发，再看二级分类。大家看到。这是不是有了，你看里边voe Java，这query应该没有错，这是前端里边的三个东西，比如说咱们换一个后端开发，再看里边是不是Java c加加，我再选一个叫做数据库开发，你看里边是不是买sole，所以这样的话，咱把这个效果就做到了，就你点击某个一级分类，在里面会显示它对应的二级分类。

这个咱就做出来了啊，这是一个二级联动效果，所以各位啊，按照这个流程你就做到，包括刚才我出现的问题，咱点L12能看到它里边会有一个提示，这些不叫错误这些那个日志，然后错误一般是出现一个IO，通过IO刚才我找到是这里边少写的一个。This，所以它一直提示没有定义。这个我们就完成了啊。