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

就是下面把添加信息这个页面做个完善，咱需要完善什么呢？首先完善的第一部分。因为咱们在加课程的时候，大家看课程表里边有这么几个字段。找到啊，课程表中这个字段一个叫teacher ID，一个叫subject ID，就是一个是讲师ID，一个是分类ID，所以咱们现在需要把这个课程所属讲师和所属分类给它加进去，而这两个怎么做到，刚才分析过了，讲师分类咱用下牙列表做到。课程分类要做个二级联动效果，这是咱做到第一部分，把它用下牙列表做到，然后这个做到之后，在里边还有一个地方，因为咱的课程里边一个课程中是肯定会有这个东西，就是课程的封面嘛，所以在里边我们的第二个要给他加一个课程封面的上传。然后这个做完之后，然后还有一个做第三个，第三个做什么呢？就是一个功能的一个优化，就是这个地方。

叫课程简介，简介我们目前这么做功能是能实现，但是其实这个简介咱可以让它的内容更加丰富一点。什么叫丰富呢？比如说简介中啊，我可以让样式，让那字体有样式，或者简介中可以加图片，简介中可以加一些特别的图标，就类似于这种情况，比如说我们打开这个飞秋，大家看人爱飞球里边，比如说我现在随便写一段字，你看这里边颜色、字体这些咱是不是都能调整？是不是可以调，包括在里边我可以插入一些什么图片上这些东西是不是可以做到，所以咱们把简介就做成这种情况，但是做到这种情况咱需要用到一个组件，这组件有个词叫做副文本编辑器，就是里边东西带样式，你可以加图片，加文字，加各种效果。啊，所以咱们主要做的这么三个完善啊，我再说一遍，然后再来写，第一个就是把讲师和分类用下列表显示，咱一会儿先做讲师，再做分类，因为分类二级联动，第二个做一个课程的封面上传，然后第三个把这个就是简介做成一个叫有样式，一个地方就是换成一个叫文本编辑器，做到这是我们要完善几个地方。

所以各位先知道啊，包括在课件中应该都有，你看里边啊，有这个课程分类，多级联动，讲师下列表，副本编辑器，包括课程封面，咱就是做这几个地方。这是我们要啊最终完善的，那咱们先来做第一个，也是一个最简单的，就是讲师的这个部分，把这个我们先做到。那怎么做，给大家做个分析啊，首先咱刚才提到讲师部分呢，肯定不是让你输入，咱要用个下拉列表做显示，那下拉列表怎么做，咱找到这个MUY。

找他的表单，然后咱看看下列表是怎么写的啊，咱先做个分析，然后再来写。下拉列表应该就是里边的。是不是就是这个东西。这就下列表，那咱们把源码打开啊，来看一下这是怎么写的。就是这部分。我把它啊给各位复制过，复制出来，咱通过这个来看一下啊。下列表咱要怎么去用。然后各位看啊，在这里边呢，咱要用的话，首先在一个yellow form这里边有一个叫EL select，就这地方，然后yellow里边有一个叫e option。主要就是这个结构，所以咱们用的话，肯定也是这么来用，包括在里边你看怎么做啊，它的主要内容是option中内容在option里边，咱看这个事例中，就是这个事例，它叫区域一和区域二。但是你看里面的值有个特点啊，希望各位能看懂啊，有一个叫label。

Label是区区二，这个值就是你显示到下拉列表中的值，另外还一个叫Y。Y6是什么呢？就是这个东西最终咱要提交，而提交过去之后，它不是提交label值，是教你Y6值，也就是说比如我现在选择这叫区域一，当我点查询，那把什么挑过去，不是提交区域一，是把你这个Y6值上海跳过去，当我选择区域二，他挑这个北京，这是里面这个特点啊，所以咱们现在就这么做，只是我们一会儿做的话，咱不是写固定。咱要用这个就是数据库查出来，然后在这个里头便利显示，就是用到咱之前说那个V-for便利，便利之后里边有这些值啊，这是我们马上做到的，就是关于这个下压列表，用IUI中这个select这个部分给它实现出来。然后咱们看一下我的课件中啊，在课件中有一个写法，就一会儿我们要做到的就这个写法啊，跟刚才看的一样。

EL select里边有一个叫option，只是option中不是写固定的，用V-for便利，咱插入数据，包括你看里边有这个集合，然后有ID，有名称，有这个value，咱最终提交的是value，显示的是这个label。这么一个结构啊。那这个我就直接复制过来了，因为是固定的，然后咱们几个接口给它就遍历出来啊，显示出来。给他拿过来啊。咱就找到我们这个info页面，在info页面位置这个位置，我加了一个注解，叫课程讲师把刚才代码咱就给它放到这里，就是这部分。这个啊，我们做到了啊，然后做到之后，下面咱做的是什么呢？通过接口把我们数据库中的所有讲师做个返回，然后在里边用V-for做个便利显示，咱就把所有讲师给他就查出来，这么来做到。

那所有讲师查询的接口，我们来找一下啊，之前应该是写过的，能找到啊，应该是在这里边。来找那个接口。那我们来看一下啊。查询所有讲师接口是不是就是咱们写的？第一个接口，但是这个接口我要强调啊，就是咱们在做下拉列表显示的时候，各位要明确这个显示不需要分页吧，这也没法分页，这分页也不对，所以咱这个肯定是查所有咱要调接口，你就不要调那个分页的方法，咱调我们当时写的第一个查所有这个接口，而不是调分页，这要注意啊，那咱就写下啊，关于这部分。那我们写法就是还是按照逻辑在这个API里边，把那个方法先定一下。或小这个位置啊，就是第二个。查询所有的讲师用于我们课程的显示小这个位置啊，我就叫get list的。

它里边没有参数，因为是所有。然后写完之后，这位置写这么一个结构，咱把它那个接口路径给它复制过来，然后接口路径就是这个地址edu teacher，它叫换。这是它里边那个地址。我把这个啊，这就复制，建议各位这种名字最好复制，你手敲很容易错，容易复制就这个名字，然后写完之后，它的提交方式是一个get提交，改成get，没有参数去掉，这是我们写的这么一个方法，然后方法写完之后，咱们来到页面中，在页面中我们就做一个调用，然后做个显示。那调用小D位置啊。查询所有的讲师。比如说我就叫这个名字了啊。

然后他查的话，肯定是调的那个cos里边这个方法得到缩讲师加个点赞，然后是个response箭头函数。通过response把这值得到点上date，点上你接口中那个名字，咱的名字叫。把这个写过来。这个不要写错啊，就是你写个位写的话，看你那名字叫什么，比如我这叫it，你写成你那个名字，如果你item写它，如果是别的名字，给它复制过来，写上你那个名字。然后写完之后在上面咱来一个变量，为了做封装变量啊，我就叫这个名字啊，就叫teacher list，就是一个数组形式。啊，这个位置啊。Teacher。数组。这个值用于封装我们所有的讲师的这个数据。然后这个选完之后，最后在下面咱给它做一个赋值，写一个叫this.teacher list等于它就可以了，然后这个方法最后在可以里面做个调用，因为咱们第一次进入页面肯定需要这个做讲时，那我们来调用一下。

就是。这么写啊，初始化所有讲师。写一个叫this，点这个方法这样的话就可以了啊，然后都写完之后，最后上面刚才那个代码逐一遍历就可以做到啊，咱一会儿看那个便利代码，就你先知道这个结构。然后这里边就是GS里边B方法页面中。定义这个调用，最后在可里边最终数化一下就可以了。但是写的时候有一个问题，希望各位特别注意啊，就是你在定义这个变量的时候，你注意这个变量你不要写这个cos info里面去，这肯定不对，因为cos info是另外那个表单对象，你要把这个对象写到它的外边去。

这各位注意啊，之前同学经常犯这错误，就是它里边把这写到里边去了，然后这效果一直出不来，后来我找了很久，容易发现他写到里边去啊，这是对象里边，你不要写到里边，写到它的外边去。就这些各位写的时候都注意一下啊，然后都写完之后，咱这个集合叫就是或者说数组叫teacher list，在我们这个位置，咱在option中做一个遍，利用咱之前讲这个V-for就是一个teacher例，然后teacher它里边有几个值label，咱说的就是你显示的名称显示，咱就显示这个name。然后他传的这个值叫Y6 Y6，那就提交里面那个ID值，因为在表中存的是ID，包括还有一个叫K，是它一个唯一标识，就是它跟别的都不一样，咱就加一个ID，因YD是唯一的。所以这样的话，最终就能便利出来，当我们一进入页面，在页面中就会显示所有的讲师到其他列表中，啊，主要就是这么一个过程。

各位把这个给他知道啊。我把这个给大家啊，我也是在画个图。啊，我写一下啊。下拉列表。显示所有讲师，然后咱做法就是在里边用这个来便利得到，包括咱们调用我们刚才那个接口中的方法，最终给他实现出来，也就是里边的。这部分啊。给咱们截过来啊，所以现在这个咱就做到了啊，然后做到之后咱们把效果我们来试一下啊，因为这个接口应该都已经启动了，包括这前端也是启动状态，那我们就直接来到我们的页面中，现在我点添加课程。大家看里边这个位置。就这里叫课程讲师，然后咱看。

讲师是不是都列出来了，所有讲师查出来，然后你可以选择某个讲师最终提交，但是他提之后是会把他的ID挑过去，而不是提里边那个名称，咱是提交里边就是刚才说到的这个值，就是Y这个内容。这个我们就完成了啊，然后这个写完之后，咱把功能试一下啊，我给它加一个数据。我就选这个王五随便加一个啊。就是测试讲师。这个下拉列表。这个位置随便加一些值啊。然后咱们点保存并下一步。提示我们成功到表里边，我们来看一下啊，比如说刷新。根据时间咱做个排序啊，看这个值就是第一个值。然后大家看啊，第一个值中，咱刚才加的是他，然后在里边你发现讲师爱地。是不是就传过来了，之前没加的为空，加完之后里边有值了，这样的话咱就完成了啊，关于我们的第一个完善。

所以大家把这个他知道啊，通过这个过程，你要知道IUI里面这个特点，包括咱们刚才这个写法，应该也没有什么难点啊，主要用到就这个。