day05【讲师管理模块前端开发】/06-尚硅谷-谷粒学院-讲师管理前端-讲师列表（2）

前端代码都完成，包括接口大家启动了，然后接口中别忘记加这个主机，就是跨域主机，这些都准备好了，然后咱们把效果我们来试一下啊，包括前端为了。有问题咱给他也重启一下啊。我把这个给它演示先重启一下啊。其实前端你改完页面之后，理论上不需要重启啊，改成为了它有什么缓存问题给它重启一下，比如前端中如果你改了这个配置文件，比如说inext这个文件需要重启，但是你自己建这些就不需要重启啊，它应该也能防着。那我们现在启动都没有错，咱们来到这里边啊，首先就是我们的这个初始界面在里边，大家看效果啊，我把F12点开。点开之后，因为咱把那个response在里边，我也做了输出，就是它返回的数据，那现在我点这个叫讲师列表，它会到我们那个list页面，在例子中咱做调用那么一点。

大家看啊，我们注意，因为我没有做显示啊，咱看控制台中这数据是不是输出了，这就是它通过接口给咱们返回的数据，就这个数据，包括咱看他那个就是networkwork中也做了请求，为什么两个我解释过了，不再解释了啊，就是咱看第二个它这个数据给咱们做了返回，然后咱们通过这个conso看里边这个结果，你看啊数据它是一个对象object，然后在里边呢，有这么些值，就是code这个size methods里边有一个叫date。大家看啊，在date中呢，还有一个东西叫Rose，这Rose呢是我这个接口中的名字，你看我接口里边能找到啊。我这是不是叫Rose，所以他把这个得到啊，咱要得到的其实就是这个集合的数据，那现在数据都有了，那我下面把数据给他就取出来，怎么取，我觉得各位应该知道啊，咱们之前说过类似的，你看写法中第一个。

他这是不是叫date？所以咱就写上response.date再点上一个名字，是不是叫这个Rose，最终数据是不是可以得到，我们是这么来做啊，那咱通过它就能看到，各位自己在写的时候，你可以通过这个输出看这名字到底是什么，这里边我是did和Rose，但是这个名字看你的代码中，所以有同学这可能写成it，那你写的就是it，你通过这个能看到啊。那我们给他就取下二。这个比如我先给它助教啊，我们的写法就是加上一个叫response，点上这个date，点上这个叫Rose啊，这个名字咱最好复制写很容易写错date Rose，然后得到之后，它这里边就得到我们那个集合的数据，因为咱上面有个变量，我把数据就赋值给这个例子的。

那咱写一个就是c.list等于这个数据，这样的话就得到了啊，通过这个棒得到里面数据，然后得到之后，比如说这里边啊，我们给它就是做这么一个输出吧，啊conso.log这个值就是this.list。啊，咱可以做个输出，但是在我的变量中呢，我这里边还有一个变量，这个东西叫total，这个值咱应该也做了输出，所以把它我们也得到啊，就这个total来到这里边看一下，这是Rose。然后这个叫total，所以咱们把total给它也得到。那我写一下啊，咱就写一个这点total等于。response.date点上这个叫total啊，这个就可以得到包，这个total我给他也是。做一个输出。啊，先到这个位置啊，就是它那个叫total。这是我们写的这么两个值。

一个是集合，一个是它里边那个就是总记录数啊，通过它的结果我们也看到啊，这咱马上来写啊。所以这样的话就完成了啊，然后都完成之后，最后我们来看一下它里面那个最终的一个结果是什么样的啊，看一下最终的效果。那现在比如说我把这个重新刷新，然后大家看啊，这里边出了结果，第一个就是咱们那个。例子中也是我们Rose中这些数据，第二个叫16，就是它的总记录数，这两值我们就都得到了啊，所以这是我们写到最终的这么一个代码，咱完成了啊，这是关于前段部分。所以大家这个代码一会儿好好去写写啊，后面咱都这么做，这是一个最基本的入门级位代码，后面按照结构我们不断给它加深这个功能，这个啊完成了啊。然后在完成中呢，有这么一个小问题，希望各位注意啊，其实问题不说也无所谓啊，我也提一句啊，什么问题呢。

大家会发现啊，咱们之前比如我们写Java代码的时候，每行代码结束之后，我是不是要加个分号，你不加的话，在Java中肯定不对，但你发现啊，我在JS里边我有加过分号吗？就你看我这些代码中，我好像哪个都没加分号吧，啊，所以我强调这是一种编码分格，也就是说其实你可以加上分号，比如说我加个分号。这没有错，但是咱也可以不加，我这里边建议各位统一咱都不加分号，加的话很容易加乱，比如说有同学说我在这里加分号，那肯定不对，这里面应该加的是逗号啊，所以咱们建议就是统一不加分号，你加上也没有错啊，这是对的，这是不同的风格，很多人习惯的风格都是统一不加分号。啊对，这个各位不用纠结啊，加不加都对，就你加的话不要加错，什么时候能加什么不能加，这里就不能加，它是逗号，这里边就可以加，这个位置肯定也不能加。

啊，所以咱们统一度假，这样的话，数据都有了，然后数据都有之后，最后咱们把数据啊在页面中，咱就做一个最终的显示，就把数据显示出来，做成一种列表形式，或者说一个表格形式。那咱最后显示一下啊，怎么显示给大家说一下啊。我想这位置啊，就是咱们第四步代码也完成了，代码我就不截过来啊，我那个里边都有，然后咱们看最后一步就是第五步。第五就是咱们把这个。请求接口获取到的数据在我们的页面中进行这么一个显示，咱们来做这步，那怎么显示呢？在显示过程中咱要使用到一个组件，就是咱们一直说那个叫element。UI用这个组件来实现，这个组件我强调啊，不要求各位会写它的代码，咱也没必要会写，因为它有官方文档，这是由饿了么提供一个前端组件，咱用它直接复制改成咱的页面就可以了，就用它快速构建页面，如果说你不用这个东西，那实际工作中可能还要找美工去写页面的各种样式，但是现在不需要了，咱用他能快速把页面的效果做到，所以这个代码不需要写，咱直接用它的官网里边的文档改就可以了。

那咱来找一下啊MU。这是它那个网址啊，这个网址呢，在我这个笔记中的，应该是在。这一天中有我就不找了，我直接打开了啊，这里边有那个就是IUI那个网址啊，然后打开之后在这里边咱怎么用往下拉啊，等到先加载出来啊，我们点上这个叫组件，把组件查看详情点开。然后点开之后呢，在这个位置列出了很多东西，因为咱要做一个列表显示，所以我们找一个东西叫表格，这个东西叫table表格，咱找到它。

这个位置啊。Table表格，我把这个截过来，通过表格里边的。示例代码。咱们改成我们的效果，那咱把它点开。大家看里边啊，这位置呢，有很多样式的表格，咱随便选一个用就可以了，比如说咱就看第一个，就看第一个啊，然后第一个你看啊，这里边就是显示了一个表格样式，包括第一行表头下面有它的具体数据，而大家看啊，你看我现在每次光标一到每行是不是有颜色的变化，这些都是由IUI帮咱们自带的效果啊，咱用它来做到，那怎么做？往下看里边有一个叫显示代码，咱把这点开看它是怎么做到的，再用它改就可以了。

就这个啊，显示代码。这个接过来啊，那咱们来看它怎么去用啊，我把这个点开，这是它里边的这段代码，那这个代码我先给大家复制出来啊，咱复制到一个文件中去，因为这么看。不容易看到啊，咱找一个一个T文件，通过文件咱看一下这个代码到底是什么样一个构成啊，我们到这里边看啊。哇，这个。打开啊，到这位置，然后咱们看它的代码部分啊，首先怎么看第一部分time lead是页面部分，第二部分script是它的Java部分，咱先看Java中，这里边写的很简单，它的里边怎么做到的，就是写上这么一个date re return，然后re return里边大家看啊，这位是不是写了一个叫table date，而table date是个什么呢？大家能看到是不是一个数就是一个数组，然后里边有多个对象，比如这个王小虎，王小虎啊里面的一个值，而我们发现最终它显示的数据是不是就是里边这些东西，就有四个王小虎啊，然后在里边都做了显示。

啊，这是它这个数据，咱们一会儿这个数据，其实咱们从接口中已经返回了，来看它的示例啊，这数据该怎么显示，往上看，上面写了它这个结构。然后结构怎么做呢？首先用了一个就是element UI中的这么一个标签。啊，咱们给它区分一下啊，然后这个标签标签是什么呢？又叫e table，叫I的UI里边的table标签，在table标签中写上这么几个结构，第一个叫冒号date。A，冒号date咱之前说过啊，我说各位是否记得啊，冒号date咱们在第一节课给大家就复习过这个东西啊，我再说一遍啊，也是最后一遍啊，后面就不说这个细节啊。冒号date什么意思呢？咱说那个叫单项绑定，就是加一个叫V-B，它表示取到你那个date中那个名字，就是这个值，比如我这叫table date，它就把这些值取到，用这个叫冒号date啊，写的就是它，而这里边他在框架底层帮咱做了封装，会把你这段数组给你做便利，如果咱要自己写的话，咱肯定写一个V-four，但是现在不需要了，他给咱们封装好了。

咱只需要把数组传过来就可以做到，它底层会帮咱们给他便利出来，所以咱一会儿写上肯定是我们里边的就是。这个例子，这个数据啊，把这写过来啊，一会咱来写，然后这做到之后咱往下看，下面有这些部分。而这些是什么呢？这里边有三个啊，你看这个描述，EL table column，就是你表格那个相关那个列，或者那个字段，而这个是什么，咱往上看，比如说有日期。

姓名地址啊，就是显示你这些值，而它怎么显示，第一个就是你这个表头的名称，它主要其实用到是这个地方啊，大家看这个。叫prop prop这个叫。然后proper什么意思呢？它一个简写，它全称应该叫properties，就是一个属性，然后使用中加的是什么，咱记下这几个名字啊，A name和address，然后再往下看，各位应该能看到啊，在咱们这数据中，它的key是不是就是a name address，所以你把这些key的名字写到perfect里边，这个值就可以显示。这就是这个IUI里边这个用法，我们就这么做，咱把这复制改就可以了，我说最后一遍，然后咱们来看效果啊，第一个就是冒号，Date中加上你这个数据那个名字，比如我这个数组叫table date，把这加进去，然后你要显示具体值，用个prop加上你的数据中那个具体的K的名称，比如这里边是date name address，那把这些都写进去就可以了啊，咱们就是这么来做，这就是IUI中它的一个用法，咱用它改就可以了，里边示例代码都听出来了。

啊，那咱来做一下啊，这个代码不需要过去写啊，咱改就可以了，从我的课件中，我把这代码给大家直接复制过来，各位用的话直接复制就可以了，不要你去写一遍啊，这写意义不大，咱能改就可以了。那我现在把它复制。这一段就是写那个yellow table，然后复制之后，咱把它就直接放到我们这里边去，注意别放错位置啊，你要放到汤里的div这里边去，别放到外边，因为它是默认这个结构，我把它直接复制过来。然后复制之后我们来看一下啊，因为这里边比我们刚才说的要多一点东西。啊，咱来看啊。然后有什么呢？我们一行来看啊，首先第一部分yellow table，它里边主要是这行要冒号date，要得到我们的数据，而咱的数据就是这个意思。

就是它，所以把这个例子写过来可以了啊，我们的名字就叫例子啊，就是这个，所以它主要这个纸，然后其他的这些是一些相关的样式，另外里边还多了一个东西啊，就是这个意义不大。这什么意思呢？大概说一下啊，比如说啊，我们第一次点这个表的时候，可能你网速慢，这里边会转个圈，说正在加载中，请稍后它就是显示你正在加载那个图标，这个可以没有啊，我就去掉了，加上也没有问题啊，这不是主要的，主要咱就是这个date，它会多出一个显示，不显示也无所谓啊，主要date这是第一部分，这些是样式，然后除了它之外，下面就是咱刚才看那个叫EL table column，在里边几个值，第一个值，比如说写一个序号，序号中的对位是加了一种简单一种。

就是用配置来这一种算法，得到的一个序号，就是123456，这各位固定用就可以了，用这个点包括在加得到123456这种算法，然后下面是具体值，这值咱们看一下啊，你看啊，Proper有name，有intro，有什么时间，有什么thought，而这些值都是咱们最终通过这个返回那个数据的部分。也就是对应你这个teacher中等这些名字，什么name啊，什么简介，什么资历，什么头像等等，把这些在里边会显示，所以它里边就这么来做到的，然后这些都做的过程中，有一个咱刚才没说到就是这个地方。头衔。这给大家说一下啊，这头衔呢，如果说啊，咱这么来做。啊稍等OK复制一下，那我这里边然后可以写一个叫level啊，这头衔这么做是可以显示的，但是有一个问题是什么呢？因为这个头衔咱看一下我们的表里边。

看这表啊，我就说这个特点啊。在表里边，大家看到我这level存的是不是就是一和二，咱存的是这个值，但是咱显示肯定不能显示一和二，大要显示，比如说一对应叫高级讲师，二对应叫特级讲师，大家要显示那个具体的值，而不是显示一和二，那怎么做呢？做法多种方式，我这里边啊用了一种方法这么来写的啊，这个大家来说一下啊，这比较特殊一点。然后怎么做呢？首先在里边呢，加一个叫toilet，叫slo scope scope什么意思。是不是有范围或者域的意思，然后这就表示啊，代表咱们就是整个的这个表格，整个表格是一个叫scope，然后得到此物之后，咱可以得到每行的内容，那怎么得到这个写法叫scope点肉，这是得到每行中的内容，然后这里边有level。

这个写法我觉得应该能看懂啊，问号冒号是咱们Java基础学到的，DS中跟它一样。这写法叫什么呢？我觉得各位应该啊，之前都见过啊，它就叫做三元运算符，或者说三元表达式，那通过它做个判断，如果你的level是一，那就显示高级讲师，如果说你不是一，就显示首席讲师来用它做个判断，这是一种写法，它就表示通过咱们的表格得到里边的每行中的值，然后做判断。这种写法一般用于咱做判断，如果你不做判断，直接这么写就可以了啊，这个各位给他知道啊，就是加个C元运算符做个判断，C运算符是我们基础中说到的啊。这个我们就提到了啊。然后这个说完之后呢，我要求各位啊，要会这个举一反一。

什么叫举一反一呢？还不是举一反三，就是举一反一啊，那比如现在啊，我想用这种方式让各位就显示我这个讲师的名称啊，咱写一个名称，那怎么做呢？要给要会啊显示名称，那它的做法就是首先这里边肯定还是写这么一个差值表达式。然后这里边。咱是不是加个name，就是说你现在这么写的话，它的效果跟这一行是一样的，是没有区别的，只是说我们现在没必要这么麻烦，咱直接加个pro就可以了，但是如果你要写的麻烦点，也可以这么来做，这么做一般用于就是我们做这个判断的操作，比如你看这里边我们做这个判断，咱一般这么来做。啊，所以这个是他的这么一个特点啊，大家给他就是知道一下啊，然后这个过程中还有一个细节，也是咱们Java会阶段学到的啊，大家看这个啊。

不知道各位是否记得啊，就是有三个等号。应该是朝夕我阶段学过的。这是什么意思呢？啊，我解释一下啊，后面就不解释这种基础的东西了啊，比如说我们之前写的都是两个等号表示判断吧，但是我写三个等号也是判断，它们的区别是什么呢？两个等号判断值，三个等号判断类型和值啊，那具体什么意思啊，举个具体例子啊，比如说我现在。我写个两个等号等于一，这表示判断值，那你的一，不管你是这个数字的一，还是一个字符串的一，这值是不是都是一啊？两个等号值比较值跟你类型无关，你什么类型只要是一就可以了。但如果说我写三个等号，那什么意思，既判断值，也判断类型，也就是说你写这个。这两个一是不一样的。因为他们的类型不同。

这是字符串，这是数字啊，所以咱们写三个等号，就是完全匹配，类型和值都一样，你字符串就是字符串，数字就是数字，它值一样也不行，因为类型不同。啊，这叫三个等号，这个啊是一个只要组出一个内容啊，所以大家把这个知道啊，而后面这些都可以这么写，所以咱们把这个就做到了啊，然后这里边还有一些超链接的路径给咱后面再说，暂时还没用到，就咱后面做修改删除的部分，但是主要这几个值，我这里边只显了显示了几个，如果各位显示更多，你可以再多加几行这个EL table column啊，把里边更加更多个，我这个咱就做个效果就可以了。所以这样的话，这个就完成了啊，咱们现在在页面中，我们就可以把返回到例子集合中的数据在页面中用MUY做个显示，而MUY帮咱们封装好了，你只要把值传过去，把名字写对。

他就能做个显示。这个啊，咱就完成了啊，用MUY做到的，然后做完之后，咱们把最后的效果我们来试一下啊呃，咱重新访问啊。重新来试啊，现在大家看啊，我点讲师列表。我们看里边。大家看数据是不是有了，主要看这部分啊，什么序号，名称，头衔，资历，添加时间和排序，而这些你看是不是就是我写的这些值这个都做到了啊，然后这个是咱后面做，咱后面再说，现在这个效果已经出来了。啊，就是这么一个结果啊，这是我们最终完成的讲师列表功能。啊，咱们把这个效果就弄出来了啊，这么一个结果。所以大家啊，就是根据我说这个过程啊，能把这效果最终给他能整出来。啊，这么一个过程啊，这个咱们就完成了啊，然后过程我再最后重复一遍啊，我是怎么做到的，后面咱再完善，因为这里边咱只做了一个简单的显示，里边肯定还有很多功能，比如第一个最后肯定有一个分页的显示，最上边肯定会有一个这个条件，常见部分咱后面慢慢来加，现在先把基本功能做到。

这个完成了啊。