day08【课程发布-课程大纲和课程发布】/08-尚硅谷-谷粒学院-课程管理-修改课程信息（前端）

就是刚才路径咱都改过来了，把这个cos都改对了，然后咱再看页面啊，这就给它关掉了啊，然后页面中我们看啊，就是现在数据应该能做显示，比如说我为了明显咱再试一个啊，咱再试一个数据看一下结果啊。给他最终试一下啊。然后我们看这里边啊，比如说我现在呃，我就随便写个值，咱为了有效果就可以啊，我就来一个1010这个8888啊，我就咱一会儿有数据啊，这是前端开发，然后这是javascript这位置有一个。讲师随便选一个在它下面我们就写一些数据，包括这个地方都写出来，然后都选完之后，咱们点这个保存，并下一步这数据肯定可以添加，这步没有错，然后现在我点上一步，咱看效果啊，看数据能不能回血我一点。大家看到这里边是不是大部分都有数据啊，但是咱仔细看啊，有一个数据是不对的。

咱看哪个数据不对。是不是这个不对啊。这里边你发现啊，它这上面就有一个ID值，但是你看别的数据是不是都对，包括你的标题，一级分类，讲师课时数这些都有，都有数据都没有错，现在问题就是二级分类值是没有，这个没有回显正确效应该怎么样，一级分类显示它当前你的一级分类，当然还有其他值，二级分类显示你之前选的二级分类，然后有其他值，但是目前这是不对的，所以咱目前遇到这个问题。这个各位注意啊，然后你看啊，这个值是什么呢？咱到表中看一下，咱大概记下啊，它叫4049，看这值是什么，来到我们的课程表里边把这打开啊。然后咱们根据这个时间排下去，看我们最新这个值，这个值。大家发现啊，4049是什么？是不是就是咱们存到表中的二级分类的ID，比如说你发现啊，这里边二级分ID能传过来，但是值它是没有的啊，这是我们目前看到问题，那它为什么没有，我先解释一下啊，为什么没有？

首先啊，打开代码中啊，看我们代码中还是找到O页面，大家知道啊，咱们之前呢，就是写这个二级，就是一级二级分类的时候，咱是不是写了一个二级联动效果呀，就是每一次一级分类会显示，但是二级分类默认是不是它没有值，当你点一分类，二级分类中是不是才有值，所以现在问题就是这里边它没有值，但是它把这给你传回来了，所以用了V-model把这个做了显示。但是它是什么呢？大家看啊，一级分类中，咱是每次到页面咱都做了查询，就是这个查询把里面值取到了，也就说你查完之后在你这个方法里边。叫one，例子中有你的数据，所以一级分类有值，但是二级分类里边有个集合，它集合叫这个名字sub to，例子这里边每次进入页面这值为空，所以它不能做显示，所以咱们看到的效果就是里边只有ID，它这里边没有值，所以咱们要把这个解决一下啊，这时候我们要做一个操作啊。

但是这个过程中呢，给大家啊，先说的稍微底层点，然后咱再用这个框架做到这个过程也是咱们在这思阶段学到的，就都是之前学的知识啊，那我再说一下啊，就是它这里边这么一个稍微底层点做法，但是咱一会儿写不需要这么麻烦，因为他这过程都帮咱们做到了。啊，那我给大家画个图，就说一下里边这个东西啊，叫做下拉列表的这个数据的这个。归线。说一下这个特点啊，说的底层点，那什么意思呢？比如说现在我这里边这是一个下拉列表，然后在下列表中，大家知道里边是不是会有很多个数据啊，而我们现在比如说第一次我点添加，假如第一次我们添加的时候，咱们加的比如说是一个什么。

比如加的是一个前端开发，那前端开发在我一回选它是不是就是默认选中哦，另外里边是不是有其他值哦，那这过程它是怎么做到的，默认选中呢？给大家说一下啊，说的底层点啊，它的做法就是因为咱们在我选中值的时候，在表中是不是可以存一个ID啊，然后存这个ID，那怎么做呢？它的底层是这么来做到的，写一下啊。它就是根据你这个存储的ID值和我们这个就是分类的所有ID值进行比较，就是拿着这个你存外地值跟外地值做个比较，也就是我们拿着这个前端开外地值跟里边的前端开发，后端开发，数据开发三个值依次做比较，看哪个到底要，如果说比较之后发现它们相同，那怎么做，就让你相同的这个值进行数据的回显。

那怎么回写它的底层中啊，要写到这么一个代码。不知各位是否记得啊，是咱们在H条阶段学到的，就是里边有个标签，要这个select我写一下啊，然后有一个杠select。然后在此爱的里边呢，有一个叫option。这个叫option。比如说option中啊，假如说这个值我们叫前端开发。那让他选中怎么做到呢？在这里边呢，咱需要给他加上一个属性就可以了，这属性是什么呢？叫这个名字。叫select的，这表示让你的下拉列表默认选中，或者说各位可能看到有时候是这么来写的，就是等于一个select的，但是其实不写等于又加此ID的，它就可以选中，所以它底层就这么做到的，当比较你这个ID值跟所有分ID是否一样，如果发现哪个一样，那就对这个option标签上加一个角select的属性，那这个就可以默认选中啊，它是这么做到的，用来的属性做到。

不知道各位是否记得啊，这是web前几天学到的，另外说到这儿再补充一个啊，比如咱们之前应该见过这么一个东西，叫input type，等于这个叫t box。这个东西。各位是否记得啊，下一个boss呢，是一个叫复选框，或者说你可以多选框，然后让这个复选框选中，怎么做呢？里边加一个属性，就这个属性。叫T这个属性，或者你等于T，不等于叠加个T，那这复选框就过选中，包括还一个叫radio，就是叫单选框。啊，Radio --------，单选框选中也是加个check，这各位给他知道一下啊，是H调阶段加Java知识，而我们现在做的是下列表，所以它里面过程就是。

咱们这里边它会拿着我们存的这个分类ID跟所有ID做个比较，当发现哪个一样，那就在里边加个SI的这个属性，它就可以默认选中，而这个加的过程它会帮咱们做到，不需要我们写，如果咱们写的话，肯定写那个Java代码或者这块代码向里面加属性，现在里边用框架帮咱做到了，咱只需要干什么呢？你把这个。就是数组的例子或者集合的值传过来，然后把你ID值传过来两个，让它自动会做比较，然后如果它们相同，它会把里边值做回写，咱的作用就是只需要传ID值，还有这个数组这个值就可以了啊，这是我们做法，而刚才这一分类因为值都有，咱们第一次进入页面都做了初始化，这值都存在，但是我们的二级分类里边的问题就是它有ID值，但是集合中没有值，所以它没有回写，但是没有回显，他怎么做，他就把ID值给咱们显示出来了，就刚才我们。

见到的那个效果啊，所以各位知道这个特点就是ID值显示，因为它没有那个数组的值，所以它不能做到会显，就找不到对应的相同这个东西。这个啊，咱做了一个分析，所以大家把这个基础东西给它记住啊，这属于。应该是HTML Java中这么一个基本内容啊，而我们框架中只需要传入ID值和你的数组值就足够了，其他值不需要，所以咱们下面把这个咱就可以解决一下，那怎么解决咱先分析一下啊。首先各位注意，就是在我们这个方法中，咱找到这个位置。咱们首先是得到课程ID，然后根据课程ID得到里边那个课程信息，在cos info中会有你课程的信息，就这个里边加个注释。在cos info中。

它会有这个课程的这个基本信息，而里边也会包含咱那个一级分类ID，还有这个二级分ID，两个值在这扣积目中应该全有，但是现在问题就是咱们的一分类有ID，它还有这个就是数组那部分，就是这个值也是有的，但是二级分类的数组没有值，它只有YD，所以咱们的目的就是要想办法把你的一级下面的二级分类的数组里边有值就可以做到。就是来做这个事情，就让这个subject to list中有一级，下面的所有二级分类，然后它就能做到回显，因为目前这里边是为空的，所以它不能显示，只显示一个ID址。这各位要知道啊，然后这怎么做，咱来说一下做法有多种方式，那咱们还是用到前端这种做法，就是根据咱昨天做那个二级联动，差不多咱看一下，然后我写这个代码啊，这各位必须要能写出来啊，属于前端中一个基本的一个写法啊。

咱来到我的课件中啊，咱看一段代码，这些都写过了，咱都定出来了，然后它的代码主要就是在。这些位置啊，首先第一部分咱做判断，然后这是获取啊，这些没有什么错，包括咱再读个else等等啊，然后主要在这里边，这里边怎么做的呢？咱们首先先跟大家去查询，把课程基本信息查出来，然后查出来之后怎么做呢，做这步。咱就是通过再调个接口，把所有的分类都查出来，就是一级二级都查出来，然后督查之后怎么做呢？这里边做个判断。就是判断你的当前你默认回显的一分ID跟所有一分ID是否一样。如果一样的话，把它里面的二级分类取出来，就这个数组中让它有值就可以做到，就是写这个过程，也就是咱们查出所有的一级二级分类，然后给他做个比较，比较之后把你当前就是默认选中这个，比如默认选中咱是后端开发，把它里边的所有二级分类都取出来，然后这里边就可以做到。

就是这么一个过程，那咱们啊，下面按照这个，咱们把这个代码给各位来写一下啊，要各位把这要能写出来啊，这比昨天那个二级联动要再复杂一点啊，但是我们在实际中这种代码也会经常写到，经常都会写这种代码。咱们做一下啊。首先怎么做呢，我这么来实现啊，第一个呢，这个位置啊，我先加个else。咱加else用这个一级二级分类，咱要后面来封装加else，就现在这么来做的，大家看啊，就是如果说呢，我现在有这步操作，就表示你路由中有ID址，那我们做修改，如果没有ID址，咱就做添加，添加就直接加载，修改的时候咱专门做处理啊，这表是修改操作，这表添加操作，因为咱们ID有值做的肯定是回显，没有值做的肯定是添加。

这个啊，咱做一个if else，然后写完之后在下面的这个位置我们写代码，那怎么做我写步骤啊，首先。第一步，咱们就是先。查询出所有的分类，这分类包含一级和二级，所有那怎么查，咱之前都写过的，在我们这个subject里边有这个方法。那我们直接就查一下啊，咱找到那个subject。就是这个位置啊，Subject在里边，就这个方法，虽然昨天写过的就是它有一级二级分类，所有的数据咱是封装这种结构，那我现在调这个方法。就是他。调完之后加一个叫点赞，然后再加一个response。箭头函数。从里边咱们首先先获取它那个所有的一级分类。

把这个先得到，那咱就写一个叫response.date点上那个名字，这名字我们到接口中找一下，因为是昨天写到的啊，找那个接口，那名字叫什么。我们看到啊中它就叫做list啊，那我们就写这个叫list。然后写完之后，把它赋值给咱那个一级分类的那个数组，应该叫y list，这样的话咱就得到了所有的逆分类，这一步完成了，然后完成之后咱们继续往下来做，下面干什么呢？咱往下写啊，下面做法就是。我们第三步啊，咱就是把这个所有的一级分类的这个数组。啊，数组，我们进行这么一个便利。然后便利之后做一个比较，比较什么呢？就比较你现在。当前这个就是这么写啊，写的通俗点，Cos info里边这个一分ID。

啊，它里边的一级分类ID和所有的一级分类ID是否一样，比较这两只是否相同，因为这个是咱们回显的一分ID，这里边有所一分ID，咱做个比较，如果它们相同的话，那就把里面的二级分类取出来，那咱下面给它做一个便利。我写一下啊，就写个负循环。然后在里边咱加个Y，就是I等于零，I小于，叫这点subject y list。点上这个叫LS啊，这别写错啊，它没有size，它叫LS，再来一个爱加加，这this不能少。咱昨天演示过，你不加会报个错，这里没有定义，然后这做到之后，咱就是获取里面的每个一级分类。获取一下啊，我就叫Y这个Y。

咱等于就是this.subject list这个数组加个中括号加个I，这得到每一个，然后得到之后，下面咱就做这个比较，就比较这个值。较它啊，那我们来比较一下啊。我们加上一个if比较。然后比较就是我这里写到的当前cos info中的ID跟所有的一份ID是否一样，那code info在这里，那把它拿过来。写一个this.co in for里边那个一级分ID，它的一分ID应该是这个名字，叫subject ID。让它就是等于咱们所有一分ID就是y subject.id啊，它里面ID，因为这是一分类，我们便利的所有，如果说他们相同的话，那我们怎么做呢？就是获取你这个。一级分类中的所有的二级分类，把它取就可以了，那咱就取下啊，就这个叫one subject。

点上这个叫秋准。这是得到二级分类，得到之后，最后我们做个负值，就是这点subject to list。这样的话就可以了，而咱们这么做的目的就是把一级下边的所有二级取到，然后包括客应用中有ID值，他就会帮我们做到这个数据回显，就是我刚才提到你只要有这个数组，还有那个ID，它就能做到数据回显，在里边加个it的，就是由框架帮咱做到的啊，所以咱们这个代码就最终完成了，就这个写法。然后我们再看一遍啊，最后来测试。它的写法就是呢，咱首先在我们的页面中得到路由中的课程ID，得到之后调方法，在方法里边先把课程的基本信息得到，这里边包含课程的名称，什么简介等等，另外也包含一级二级分类ID。

然后得到之后，下面咱就是把所有分类都查出来，因为咱要构建成二级分类，那查出来之后做个便利，便利之后比较你cos in fo中的一级分ID跟所有ID是否一样，如果一样的话，把这个一级里边的二级取出来，就是把这集合值给它构建出来，因为有这个集合值，还有里边的二级酸ID就能做到会显。这个啊，我们就最终完成了主要准备过程啊，咱们就做到了啊，当然这个过程中呢，最后啊，因为还有那个讲师那部分，咱给他也加在出来，因为讲师他也需要咱是写到else中了，我就写到这位置啊，或者你写到这里边啊，都一样的啊。我就放到这儿了啊。加载这个讲师也做一个初始化。这个值咱们肯定也是需要亏线的。所以这样的话啊，咱们把这个前端代码我们就就能抓到了，这些代码要稍微麻烦一点点啊，当然各位要好好去写一写，这种前端我们写代码，这属于一个，这么说吧，这属于一个基本功啊，属于一个基本的一些代码写法，各位要给他能够做到啊。

所以咱们把这个就完成了啊，而这种代码写起来没有什么捷径，只有一个捷径只能是多列，没有什么写法啊，包括这么一点吧，其实我这里讲课各位看我这代码，可能你觉得这老师写的挺熟练，怎么怎么样啊，但是你要想一下啊，我这里讲课之前，我这个代码写了多少遍呢？你可能是你想不到的。啊，你可以猜我到底写了多少遍啊？所以说啊，代码写法没有捷径，就是多列，你写遍数越多，那你理解越深刻，比如你写啊，不跟各位讲，这代码我写的遍数绝对不少于100遍，100遍都说少了，所以说这代码每次写的话，应该是心里特别清楚为什么，因为写的很多，写的太多了，这个代码就很熟练。这是写代码唯一的捷径，没有什么捷径，你说写不出来，为什么写不出来，但是写的少，就这个问题，包括问题为什么解决不了，因为你写的少，问题遇到少，所以你就解决不了，你写的多的话，问题遇到多都能解决，最终问题一看你就大概能想到它是哪里犯错误，所以这个啊，各位还是。

多花时间多练。然后这个啊，咱就写完了啊，写完之后，最后我们看一下最终的结果是什么样的，咱看最终的效果，咱们重新测试啊。啊，重新测试。比如现在我这里边加一个数据，咱就是幺零，幺零就是这个666就是他啊，我选个一级分类，再选个二级，假如我选一个这有S亏前三开发加有各位先记住这位置选一个讲师就是王五，下面随便写几个值。然后这个啊，写个值，然后写完之后点保存，并下一步，这个肯定可以添加成功，这一步没有错，然后下面我们点上一步，大家来看这个效果啊。

我们清楚的看到。数据是危险了，这是一级分类，这是二级分类，包括在二级中还有其他值，一级里边有其他的一个数据，咱们可以再进一步修改，所以这样的话。这个数据回显就做到了，这里边比较复杂点的就是二级联动的这个写法。主要咱是在。前端把这做到啊，也就是里边的。这个代码各给他去好好去看一看啊，就是我们最终做到的啊，包括因为咱用的框架，它里边有很多地方做了封装。最终说一遍啊，咱只需要两个值就可以了，一个是你的一级分类和二级分类的数组，然后第二个就是对应的一级分类和二级分类的值，你把这个数组和值里边都传过来，它就能帮我们做到数据危险，包括你看这个是数组，这个是ID值，只要这值都存在，它就能做到回写，这是框架本身做到的，但如果说我们写原始代码，比如Java所代码，那肯定需要咱手动加属性做到。当然现在用框架好处就是咱只要有数据都会帮我们实现出来。

这个啊完成了，所以各位。就是把这个代码好好去看一看啊，咱就是这个过程啊。然后别忘给这个讲师，因为咱写了一个else。然后在这过程中啊，有一个小bug，这bug我就不在课上解决了，就给各位去完成咱之前做过这个bug的，解决什么bug呢？给大家演示一下啊，你看啊，我现在是不是到了这个数据回写页面上面有ID，比如我现在啊，我这个位置点一个添加，大家注意啊，我点添加。点添加之后呢，咱是不是要重新加数据啊，但你发现点添加之后，这数据是不是没有清空，因为咱点添加数据是不是要清啊，我再说一遍啊，咱点修改做数据回显，这肯定没有错，但我现在再点添加应该是加新的数据，但是你发现我点添加。

他到了添加课程表单数据是不是有清空了，咱需要把它清空一下，这怎么做，之前咱讲过，我就不在课上写了啊，各位可以参考咱做那个讲师部分那个清空，就咱应该之前说那个小bug，各位把这个第一给他解决一下，这个啊就给各位去完成，我就不在课上写了，咱之前是写过这个代码的。这个啊是一个小bug啊，所以咱们这个数据回显就完成了。