day14【首页课程和名师功能】/06-尚硅谷-谷粒学院-讲师详情前端

就刚才接口完成了啊，下面咱来显示，然后显示中等，咱们首先啊，还是来到我们的前端中，接口刚才写过了，在前单中要做的话，第一部分在API中里边咱们把方法也是做一个定义，那现在我们来定一下啊。这个方法就是讲师的详情的方法，然后这个方法给它起个名字，比如我叫get teacher。这个音。讲师详情咱要根据讲师的ID做查询，里边我就传一个ID。然后下面写一下它这个结构啊，这个咱们快速复制一下啊，它结构中那个方法名字这个get teacher front info后面有一个ID。然后它就是这个ID啊，这个咱们拿过来，它是一个get的提交，所以这个我们就定义出来，定义之后在页面中我们来做个调用，把这功能实现，那我们看怎么做啊，首先第一部分，刚才咱们上一课做到了，我点某一个讲时，肯定是它会到咱们的监听页面，在页面上面是不是有咱们这个课程的ID，就是讲师的ID，把这ID在录由中我会传递，所以我们在页面中的做法就是了，得到这个ID值，然后调接口做个查询，是不是就可以做到啊，咱就是这个过程，那来写一下啊。

因为咱们之前说过那个动态路由详情是在下划线ID页面，所以在页面中我们给它实现一下啊，首先把这个文件先引入，就是import。比如我们叫这个teacher。API啊，就给它换个名字，API from，加上我们那个就是文件地址API，这个叫teacher。这个啊，我们引入，引入之后在下面写的结构，这结构还是可以用我们之前原始写法，包括用咱们上节课说那个异步操作都可以，那咱们还是写个异步啊，用最早写法也一样的，我就想写个异步方式把这个写下啊。

然后里边我们把这结构拿过来，在这个位置来实现，那怎么做呢？咱就可以调用一下我们里边这个方法，那来调用。这个啊，Teacher API，当然刚才说到前面需要加上一个瑞啊，不加调不到就不能少teacherpi，点上里边那个方法，方法就这个get teacher info，把这个给他拿过来，然后点这方法之后各位注意，在这里边咱是不是要传入那个就是讲师的ID值，而讲师ID值是不是在这个位置把这要得到，那怎么得到呢？有多种方式，第一种方式。咱可以用之前原始写法，就是写一个叫this，点这个root。点P。然后点ID这么做可以得到，但是咱现在用异步方式，咱不需要这么麻烦，这种方式有一种等价的一种写法，就跟它是一样的，你看这里边有参数，叫咱直接写一个叫P，点上ID就可以得到，这个写法跟它一样啊，现在我们就这么做，用timeson的ID就可以获取到你那个路由中的ID值。

写个注释啊，获取路由中的表示ID值，那咱用它得到，我在里边写一下，把这值我们给它用p.ID取到，这就可以做到啊，也就是把这个值就能拿到啊，这是一种写法啊，然后这个写的过程中有一个特点，希望各位特别注意啊。这是别的参数名字，然后这个ID值不是随便写的，ID值是什么呢？大家看页面，我这页面在下划线后面是不是ID，所以你写ID要跟你下线后面的名字一样，这名字可以随便起，假如说我这文件啊叫下划线VID，那这里边就写上叫VD啊，跟你的文件名字一样，这名字可以随便起，但是必须是下划线开头，这个是写一个ID，就把这值得到。

然后得到之后我们加上一个。点赞，把数据给他最终获取到啊，加个response。箭头函数。然后通过response把值取到，咱还是用这种写法，我加个退大括号，但因为现在呢，咱反应值中啊，刚才咱们写的接口有两个值，一个是讲是基本信息，一个是那个课程信息，所以有两个值咱需要复制两次，那怎么做跟之前差不多啊，首先第一个，比如我起名就叫。Teacher咱加个冒号，然后加上一个response.date.date点上这里边的名字叫teacher。这样的话百值得到不是给这个T对一下，然后还有第二个值，咱就加个逗号，第二个值，比如我起名字叫这个cos list。

就是他。后面一样的啊，加个response.date.date点上这个Co词例子，这样的话就可以把两数取道，分别复制给这个T和cos丽子，然后这两值页面中一显示就可以了，多个值加个逗号，这样的话完成的负值啊，这是我们的异步的这种写法，咱们把它。就做到了啊，所以大家把这个给他知道啊，主要就是这个地方。用p.ID获取到你路由里边的ID值，这各位能给它弄出来啊。然后这个我先截到我这个图上，咱们往下给它最终做个显示。就是下面啊，前端的这么一个调用整合。然后里边是这部分啊。然后这个我们数据通过它调用可以获取到，最后咱在上面这位置给它做个显示就可以了，那我们显示啊，首先第一部分呢，是讲师的基本信息，而讲师基本信息呢，咱刚才返回那个名字就叫teacher teacher返回的，咱刚才查数据库看到是不是就是一个对象，所以咱取对象中的值，咱直接用差值表达式是不是就可以做到，然后这个集合需要咱们用V变利啊，那我给它取下啊。

上面用叉表示，直接取第一个这个讲师的头像，那咱写一个叫做teacher，点上那个头像名字，我们找一下啊。头像应该叫这个，把这个拿过来，这位置别忘记加个冒号啊，用表达式去，然后里边这部分是那个讲师的名称。我取一下啊，就是teacher。点上这个内幕啊，讲师名称，然后另外还有一个叫高级讲师给咱之前写过的啊，因为讲师嘛，它有高级特级，但是在我的表里边存的是一和二，所以咱需要做个判断，可以用那个V-E，或者说写一个C预算符做个判断都可以啊，这些单写过啊，我就不敲了，我从里边直接就复制过来了。

你用V杠，If或者三元表达式判断一和二，然后显示不同的值啊，也就是里边的把这拿过来，就这个啊，我这个位置写了一个三元表达式。用它这个判断。这个啊，我就直接复制了啊，咱就不再挑这个了，之前写过的啊，如果你是一高级讲师，不是一首席讲师这个显示，然后下面有它那个资历和简介，这些东西就是teacher点上我们的下一个值。到里边复制一下，比如那个简介这个啊intro。拿过来。然后还有一个叫，就是这个部分。这个也处理一下啊。差值表达式。

跑哪去了，呃，下边啊。刚才我写的，呃，差值表达式应该在。这里啊，这个位置。把这个给它也最终取下啊。就是里边的这些值，然后里边加上一个叫teacher。点上啊，这是错，还有另外一个是这个。就是资历。把这个拿回来，这样的话，咱们现在这一部分应该就能显示讲师的基本信息，包括名称、头像等等啊，这些都做了显示，用它的表达式取对象中的值，然后这个做到之后，下面有他所讲的课程，那咱把这个做显示，跟刚才那个基本一样的，我就快速写一下啊，里边第一部分咱这位置肯定也是做个判断，那我在里边也是加一个叫V-if做个判断，就判断咱这数据中到底有没有值，比如说咱们返回的数据应该是这个。

看我的代码中啊下面。它叫做cos例子的，那咱就看这个cos例子中啊，到底有没有值。就可以做到啊，那怎么判断。给各位说一下啊，因为咱们接口中呢，是个例子集合带单前端得到的是不是一个Jason的数组形式，所以得根据它这个判断，那这例子注意怎么判断啊。有的人可能会想，我写个赛字。注意啊，这里边没有size啊，这不是Java代码，在Java中的数组，咱用什么判断是不是这个。是不是加个lengths，如果它的lengths等于零，那就表示这里边没有数据，咱就显示这个内容，如果它不等于零，那咱们再做便利啊，所以里边用Les做个判断。然后看一下课件中啊，课件中好像地方写的不太对啊，这个地方各位看时候注意啊，这里边不是写total写的叫Les，咱通过它的Les判断里边有没有值啊，就这位置啊，给他稍微改一下啊。

你写的时候注意啊，写的是认这个啊，等于零，它就显示，如果不等于零，那咱在下面按照我们刚才的方式，把这个最后变利我给它遍历一下啊，我先把多余的先去掉，咱就保留一个，其他的删掉给它遍历出来就可以了。这个位置啊，便利。我加一个叫V-four。里边这个名字啊，就是cos list，然后这个比如我叫Co in，后面再加上一个叫冒号key，就是每个它是不一样的，加个标识cos.id。这样的话便利啊便利之后通过cos取到里边的每个值，首先第一个值应该是那个课程那个封面。那我们取一下啊，冒号加上cos，点上它的封面，封面我到这个课程的对象中，我们给它找到啊。这个有一个封面。

这个cover。这个拿过来啊，然后除了他之外往下看，下面这部分是课程的名称。这咱们也取下啊，就是Co点。Title课程名称。然后除了它之外，呃，应该没有别的了啊，就这两个，一个这个封面，一个名称啊，包括这个位置啊，把这title也改一下。加个冒号。cos.title。这样的话啊，咱现在把这个就遍历都是显示啊，这是我们做到这么一个效果，就是在这个详情页面中有讲师的。基本信息，还有讲师所讲课程，如果他没有课程，那显示这个数据，有课程显示他的列表功能啊，这个啊咱就完成了啊，关于我们做的这个基本功能，然后做完之后，最后咱们把功能我们来最终测试一下，看一下最终的一个效果是什么样的。咱来测试啊。这个我先启动一下。

前端啊，咱改了不需要重启，咱直接通过页面看一下我们这个最终结果。讲师的详情。嗯。好，我们等它啊，先停起来。好这个啊，启动启动之后咱们来到我们的页面中，我们重新刷新测试啊，我先刷新，刷新之后点击名师到咱这个列表中，然后点击某一个显示详情啊，但是他可能没有课程，如果都没有，比如咱加几条数据啊，先看这个，比如点第一个。各位看啊，在里边显示出了他这个基本信息啊，这个课程没有它就是为空嘛，说正在整理中，说咱们再试一个啊。就找一个有课程的。稍等它是比较慢啊，找一个。有课程的。啊，这个麦就是我之前说过一个问题啊，因为咱这个前端呢，它有个问题啊，就是特别耗内存，如果你一直很慢的话，把前端其实重启一下就可以了啊，我就不重启了，咱直接看这效果啊，然后现在呢，应该是这些都没有数据，我这里边呢，手动加一个啊，咱就看个效果就可以了啊，我就加一个啊。

比如说里边咱找这课程啊，回来我就找这个什么112244这个课程。找到应该是他，他的ID是这个，那咱给他就手动加个课程，让他有效果就可以了啊，这是讲师的ID，然后把ID咱们来到课程中这个位置，应该是没有这个ID啊，那比如说我就加入。第一个第二个第三个，包括第四个啊，这几个给他加上啊。那加上他啊，然后咱们看一下这个效果啊。如果还不出来，我只能重启啊，我们先试一下啊。刷新。到这个界面。

然后到界面中点击名师，进入到列表页面，在列表中点击某一个讲师，大家看数据是不是有了，这是基本信息，这是他所讲课程啊，没有没有课程显示，刚才咱们看那个什么正在整理中，这样的话。讲师详情功能我们就建出来了啊，就是这么一个基本效果。