day14【首页课程和名师功能】/03-尚硅谷-谷粒学院-讲师分页查询前端

这里边启动啊，报了一个错，就是我们那个那那个啊，这应该不影响，那我们直接打开swa。就是local house那个8001这个端口，我们直接啊打开找到啊。8001SWA就是这个地址，然后在里边呢，找到咱刚才写那个内容，就是我们这个，呃，应该是这个啊，或者你可以加那个就是。注解，让他加一个中文提示啊，各位给他完善一下，我这里边直接找了就是teacher front，然后在里边咱刚才方法，这个方法就是做这个前台的分页，里边有这个配置和limit，那比如说我随便写两值配置是一，Limit，比如是二，那咱们点这个try it out，看它的结果什么样啊，我们看结果。然后大家看啊，现在数据应该就返回了，然后它反数据中咱仔细看啊，在date中呢，因为咱们是一个map即可，它是map变成这个，这些数据在里边有几个值，包括你的当前页总计数数总页数这些等等，还有一个叫its it里边就是每页数据那个一次集合，咱是两个，它用数组这个做个显示。

所以现在啊，这个接口我们测试就成功了，这是我们写的第一部分关于它的接口实现。就是各位啊，把这能做到，而咱是用个外集合，就为了我们自己写分页取数据更加方便，当然肯定有加方式啊，就是这种方式应该更加的通用一点。这个我们写完了啊，然后洗完之后呢，下面咱们把这个前端部分给它快速整出来，就是前端调接口，然后在里边把数据做显示。然后这里边写一下啊，第二个。整合这个前端的这么一个页面。那咱看怎么做啊，还是按照我们之前一贯的流程，咱们把这个我们给他做到，那怎么做呢，首先第一步咱们还是在这个。

写到这个位置啊，就是第一个我们在API里边创建一个JS文件，然后里边定义你的接口的这个地址啊，肯定我们要做这步，这是第一个啊，一会咱们写，然后这个做到之后我们到第二个。在我们的页面中引入这个JS文件，然后调用里边的方法实现这个显示功能，主要肯定还是之前这个流程，那咱们把它写一下啊，第一个找到这个A片在里边咱们创建一个代词文件，我就用它快速给它改一下啊，把这个先复制一份。然后名字改一下，我们就叫这个teacher，在teacher点里边，咱给他。这个啊，改善我们的方法，第一个引入快，这个就是这个JS文件，然后下面方法，咱的第一个方法就是分页。

讲师查询这么一个方法，这个名字给他改一下，比如说我叫这个盖头。Teacher。这个例子。在这里边呢，我们有两个参数，一个是当前页，一个是每个记录数，这是一个方法啊，写完之后把它的接口地址，我到这里边给他复制一下，就这个地址。Edu。后面有他的一个名字。就是这个。Get teacher front例子，然后后面我们有两个参数，一个是当前页，一个美的，记住数咱就写到这个飘的符号中，然后咱们用个表达式给它取一下。第一个是配置当前页，然后还有第二个值，我们叫这个。利这样的话写出来了，然后咱再看提交方式，我用的是POS提交啊，这个改一下，它没有这个参数，可以去掉这个方法我们就定出来了啊，咱做的前端中的第一部分在API中定义方法。

也就是咱们刚才说到的这步。然后做到之后，下面咱就来到页面中，在页面中引入，然后给他做个调用，那我们看怎么来做啊，来到页面中。因为咱们现在做的是讲师列表，而讲师列表页面是在T中的indext里边，那我们找到啊，它的下面这部分在inext中呢，咱先引入。我加个import teacher啊，比如为了区分，我叫teacher am from。加上这个叫艾特斜杠API。Teacher这个带你引入，然后引入之后在这个里边写上我们这个代码，把这个做个调用，得到数据就可以了。这里各位强调啊，咱之前的写法呢，一直都是这么做的，就是我们加个date定义变量初始值，然后加create调方法method中写这个值，然后做操作，之前我们都是这么做的，但是现在呢，给各位再换一种方式来实现，就是之前那么写没有问题，完全可以，就是你写一个date created method，按照咱之前一贯写法，这功能可以做到，但是现在我给大家换一种写法，就是咱说不一样的地方，让各位知道更多的写法。

希望各位能理解我这个意思啊，就是在实际项目中，你是用哪种方式都是对的，看你的喜好，但是咱现在这些方式要各位都要会，所以我现在给大家换一种写法，咱把这功能做到，但是它的效果都是一样的，那换什么写法，咱看一下我的课件中啊。看到课件中应该是在这个位置啊，你注意现在我要写的方式，咱这么来做，就我加上这个方法。这方法什么意思呢？它就叫做E不调，就是as sy date e不调用，咱之前的方式跟它有点区别啊，这个调用什么特点呢？给大家说明，比如说我现在，比如说我现在啊，在访问页面的时候，这方法不会马上调用，当你访问之后它才调用，因为咱之前调用我们是不是都想那个create里边，在create里边咱做那个操作，比如说里边我们一加载页面，它会执行。

但是这个方法它在执行的时候，不是你加载页面马上执行登记，加载之后它会再发请求做操作，这叫异步调用啊，这是一种方式，但是这个调用有一个特点啊，它只会调一次，就是你到页面中它会发一次请求把数据得到，所以咱们用这种方式来做到，跟之前有点区别，各位就记住这叫异不调用，你进入页面它不是马上有数据，需要再发请求才有数据，而这种方式我们这么写，他这方法只会调一次。

包括多次怎么做，一会儿咱们还是用原始方式来做到，那我现在啊给大家写下啊。我们把这结构写出来，然后里边内容再来做操作。我们使用。异步调用。它里边是这个结构。啊给它啊，拿到下边这个结构，然后结构中怎么做呢？大家看这结构中啊，这是固定的一个写法，它表示异步调用，在这里边有两个参数，给大家说一下啊，两个参数什么意思？第一个参数叫。第二参数叫IO，这个好理解，IO就表示可以得到你当前调用中的错误信息，通过IO可以取到，然后咱主要说这个P。P什么意思呢？写一下啊，它就相当于咱之前的这个写法，我们之前有一个写法叫this，点这个root.p。

跟这个写法是一样的，比如说咱之前想得到我们这个ID，那我们写一个这点route.purpose.id是不是可以得到，就得到你路径中这个值，比如说路径中我们传一个这个。一把这得到，但是现在咱这么写之后，比例更加方便，我直接用一个叫hermo.id。就能得到录音中的值，所以这个两个代码是等价的，就是它们是一样的，你这么写跟这个效果是相同的，用PID可以直接把这制得到，不需要我们再写一个data什么值，它就帮我们做了一定的封装，你把这个记住啊，然后后面要用到。Pva ID把它直接得到，肯定不需要写这个Z，写ZC也可以，就是它给我们做了一个简化啊，这个叫义务调用，这是取到路由中的参数值，挨着表示所有信息，这个啊，我们就说完了啊，然后说完之后在里边我们写调用它这调用怎么写，注意我的写法啊，首先你需要加个关键字。

这关键词叫re t，不加re return，它这个不会调到这re return必须要加，不加有问题后面写调用，我们写一个叫teacher A片，点上那个方法，方法就这个get teacher list。然后在里边呢，传两参数，刚才我提到了，因为这个方法呢，它只调一次，也就是说你第一次进入页面，大家看第一次进入咱是不是查第一页的数据，而每页显示是八条记录，所以这里边的数据我们就给它写固定，因为它只调第一次，比如说写个一。再来一个八，就表示查询第一页，每页显示八条记录啊，咱这么来做，因为它只掉一次。就是第一次调用，然后下面写法跟之前一样了啊，咱也是来这么一个叫点赞。

然后点在里边呢，加上这么一个。Response。箭头函数。通过response得到我们最终的这么一个数据啊，用这个得到啊，小这个位置啊。然后在这里边，比如我们给他获取一下啊，咱来一个叫response，点上这个date，再点上一个date。各位注意这里面一个特点啊，因为咱们刚才啊，返回的是一个map机会，所以我现在response点上date，再点个date，这么得到的是不是就是我们这个map集合呀，然后map集合中有它名字，比如说这些名字咱们再点上，比如说我现在这么写，我点上一个叫。It，那这个得到的是不是你这个集合呀，我点个can是不是得到它呀，所以咱现在比如说我先把这个map集合得到，就是RESPONSE2个date可以得到啊，这个是咱一个写法啊，然后得到之后咱们把它是不是做过赋值，我强调啊，这赋值跟之前有点区别，咱之前赋值啊在里边我是写了一个date。

咱这么做，然后date中呢，我们加上一个瑞，在瑞return里边，比如有一个变量啊，假如我先写出来，比如说这变量我叫list，或者说这变量我叫date都可以啊，然后里边加一个值，当时咱是这么做的，然后下面咱就写一个叫this.date。是不是等于它呀，这是我们之前写法，现在这么做也可以，只是说按照我们这种方式可以把它做个简写，那我说一下怎么做啊，这个我先注掉，但是换一种方法，你这么写可以，但现在我不这么做，换一种写法，它们效果一样的，我们加上一个叫屡退。里边加上一个date，然后我加一个冒号，它的值就是response.date.date这是一个写法，所以大家注意啊。就是我现在。这一行代码的作用跟上面这行是一样的，就表示你这里边你看啊，我这date如果用这种写法，上面还需要定义，然后赋值，但你加进去之后，这date上面不需要定义，它会帮你做定义，然后它会把这值赋值到里面去，这一段代码和这个是等价的，它就省略了一部分，所以咱们后面也可以这么来写，因为他们效果是一样的。

这个啊，我们就做了一个异步调用，通过这种方式调接口得到数据，然后数据里边把这取道，不是给这个date date它会帮咱们做一个赋值，然后date，咱最后给他便利把数据就可以显示出来。这个咱就写完了啊，所以大家把这个写法给他要知道啊，这是我们目前新学的一种写法。但是跟之前一样。比如有同学说我不想这种写法，还要用之前的写法，可以没有问题啊，只是不同的做法而已，就看你想用哪个了，就是在实际工作中，肯定是你哪个熟练那就用哪个，所以你这个不熟练，用我们之前学的，你这个熟练，那用它就看你自己的这种喜好了啊，所以现在我们就做到了啊，这是我们这个做法啊，然后这个做法中呢，有一个细节要各位要特别注意啊，首先就是瑞return必须加就不用说了，然后细节是什么呢？

注意这个位置啊，给大家强调，这瑞屯后面你不要加回车，就你不要这么写，这么写会有问题。啊，这是它本身一个坑，你写的时候注意啊，这个后面不要加回车一个要加到蕊唇的后面，不要加到它的下一行，加下一行会有问题，这各位特别注意啊。所以咱们现在啊，把这个我们就做出来了，把这数据取到了，但你注意刚才我提到这方法，因为只调一次，所以这个数据应该只能取第页的数据，包括分页，咱一会儿完善，那我下面把这数据在咱的页面中，咱就做一个便利给它就显示出来，因为它返回的是一个map啊map集合，然后里边有它那个值，那咱们给它上面遍历一下。

也就是把里边的这些部分通过咱的数据给他便利显示出来。那咱们来最终啊，页面整合来找到上面页面啊。找到最上边。各位看啊，在最上边呢，有个地方就是这个地方。那希望各位我觉得应该能看懂啊，这个地方什么意思呢？给大家说明，就是现在啊，什么意思呢？如果说我点名师，假如说我现在数据库中没有任何一条数据，它是不是显示这句话呀，如果说你有数据，这句话是不是不显示，咱再显示是下面内容啊，所以说这句话是否显示，咱们在页面中要做个判断，也就是说你里边没有数据才显示，有数据这个肯定就不显示啊，咱们现在要这么来做到。

那咱们把这个来给它写一下啊，先找到这个位置，就是我们的这个地方。大家看看那段话应该在这里啊，没有循环数据，小编正在整理中嘛，那这段话咱们不是每次都显示，当你这个查的数据中没有值的话，咱们才显示，那怎么做呢？咱在里边啊，就需要做个判断了。那判断怎么写，不知道各位同学是否记得啊，给大家也快速回顾一下啊，咱们在讲voe的时候学过一个指令。这个指令叫V-E。它就表示一个判断的指令，所以咱现在在这过程中可以做个判断，那我写到这个标签中，我加一个叫V-if做个判断。那咱怎么判断呢？我来说一下啊，咱先看我们的接口中。大家看啊，咱们返回到是一个map集合呀，那你就判断map集合中有没有这个数据是不是就可以了。

那怎么判断呢？其实有很多种方式。第一种方式。咱可以判断它这个record，这个集合，如果集合中为空，是不是就是显示就是没有数据，或者说也判断这个东西total，如果说这个total是不是总记录数，假如说它的总记录数等于零，是不是也没有数据啊，都可以，你判断集合，判断total都可以啊，那咱为了方便就判断total，当这个total值等于零，就表示里边没有数据。那咱判断啊，首先第一个，因为咱这变量我叫date啊，但是这个名字随便你比如说我叫Li也一样的啊，我就叫个date，因为咱们是一个map。这个是date，然后咱就判断date中那个total值是否等于零，我想这位置啊，就是date点。Total，如果说它等于这个零，那就表示我现在表中没有数据，表中没有数据这句话是不是就显示出来啊，咱做了这个事情啊，做了一个判断，然后下面有个列表，列表中是什么意思？就是这个值如果它大于零，是不是有数据啊，那我给他也做判断啊，其实这些判断可以不写。

它里边也能变出来，我给他写了一个完善点啊，咱就加上一个叫。k.total。这个值如果说我们大于零，那下面咱就做一个遍历啊，就把数据遍历出来，遍历过程咱之前是写过的，我快速改一下啊，咱看一下有U有LY。中的每部分是一个讲师，那咱就保留第一个，然后剩下的这个应该有七个都给它删掉，保留第一个，在第一个里边我们做个遍历就可以了，那我给它删一下啊，咱注意删的过程中不要删多啊，就到这里边，那咱们在这个一个中把数据我们做个遍历，然后做个显示就可以了。咱写一下啊，便利怎么做呢？然后各位记住啊，V-if是你的循环，就是做这个判断的，然后循环应该用的是。

是V-for这个便利啊，那我写到这个位置啊，咱加个。V-for，在V-for里边呢，便利我们这个集合，因为咱date是个map集合，Date中的集合咱看名字。是不是这个item什么？因为item中是咱的例子集合，所以把这取到你注意啊，Map中有不同的K，咱根据K知它的值，而item就是它的集合，那我里边就写一个it，点上item，这就得到它的集合，前面我们加上这么一个便利的结构，来一个音啊，然后第一个，比如起个名字叫这个，呃，Teacher。这个啊，咱给它做一个遍历，再来一个冒号，K表示就是每个LY是唯一的标识，咱一般用它那个ID。这个啊，写了一个结构，然后写完结构之后，咱们把下面的值给它都依次去改一下啊，改一下里边这些值，那我们来改一下啊。

首先第一部分啊，超链接咱一块改，先改它里边有个title，咱加一个冒号，就那个V-B，然后我们加一个叫。Teacher点上这个名字应该是一个内啊，给他改一下，然后这部分是那个讲师的一个头像。把头像我们给他改一下啊，改成他这个头像，然后这个我们就叫teacher。点上头像，头像的名字，我到里边咱来找一下啊。看一下这个头像，头像应该叫把这个我们拿过来。然后这里边还有一个叫alt。这个不知道各位是否记得啊，我在前体课程说过，我再说一遍啊，这是H条中的一个属标签中的属性，它是什么意思呢？有两种情况，针对不同的浏览器，就是在有些浏览器中，它的效果就是你把光标移到这图上会显示这个内容啊，咱没有写完一张图上显示内容，然后第二种情况就是当你这里边没有图片显示，那这个会显示这个内容LT啊，那再给他有也写这么一个名字了。

叫teacher。啊，这个啊，我们给他。写下。就是里边的这个啊，所以咱们把这个我们就写出来了啊，关于这个A，还有它这个name。这个啊，改出来了，然后往下咱继续来改啊，最后咱再测试下面改的话，有这个讲师的一个名称啊，就还是这个teacher.name。改一下啊，teacher.name然后这个位置是要显杀的名称，那我们就加上这么一个差值表达式teacher.name把这个显示出来，下面有他的资历，包括它的简介，这些给它最终都做个显示。

这个位置啊，就是资历或者说它的简介。咱也是加上这么一个差值表达式。啊，把这做到就是teacher点上那个简介或者资历啊，把这个复制起来就是这个。呃，就是它了啊。这个错放到这里，然后最后还有一个这个咱们给它也是复制一下啊，差值表达式。Teacher，点上我们里边的这个名字，这个咱给他拿过来。所以这样的话啊，我们现在把里面的值应该就初步给它显出来了啊，主要这么一个东西，那我们先检查一下啊，然后再再测试，第一个过程就是咱们在异步调用中调用我们这个接口，然后里边因为我们这个方法只用一次，咱就查第一页，每页显示八条记录，得到这个response，通过response把它值得到，不是给这个叫date啊，这名随便起的，我就叫date。

然后得到date之后，在我们的上面，咱就给他做这么一个便利，首先判断里面的total，也就是根据它这个这个值。Total这个判断啊，如果说它的total值等于零，那就表示现在里边没有数据，咱想它如果它的total值大于零，那我们就是在下面做这个便利，就是便利这个date中的it，把这值我们依次取到，包括讲师名称，什么讲师头像啊等等这些数据我们都做到，这是一个列表功能，咱们就最终完成了。而写法跟之前不一样的地方就是咱们写这个调用这过程中咱用的是。义务请求啊，咱们是这么做到的，这过程各位写的时候特别注意啊，这个瑞寸不能少，而这里边不能加个，这个就是换行，你不能这么写啊，但是这个点赞加不加无所谓啊，但是你这个return后面必须加上这个结构啊，包括这个退，它就可以把这个值复制给我们这个date。

这个相当于我们定一个变量，只是现在不需要咱们定义，它里边给咱们做了封装，只要这么写，跟这一行的效果就是一样的。这个啊，我们就完成了啊，关于这个选择部分。所以大家把这个能给他做到啊。然后这个做到之后啊，咱最后把这效果我们来最终做个测试。啊，这接口我重新启动一下啊，你刚才加的那个什么跨域那个东西啊，你再重启一下，咱最后试一下最终的结果。这是借口啊。包括前端为了明显，我把它也是给它重启一下啊，咱最终来做个测试。这个重启，最后咱就看这个讲师列表功能，按照咱这种方式最终能不能显示出来，咱做的是义务调用。页面中跟之前一样，就是你一个便利啊，然后写LY，把里边值给它依次一改，效果应该就可以，包括name water等等数据啊，应该都可以做到。

那我们看啊，现在这个接口启动了啊，然后里边我们来做一个调用，呃，我这里N这个词好像我没有启动啊，我把N这个词也启动一下。这个N这个。启动啊，然后咱们最终把效果咱来试一下啊，来到我这个页面中。就是local house3000。页面，在页面中我点击名师，大家看效果。数据是不是有了，我图片都是固定就是这个图片啊，现在你看啊，我第一次点的话，肯定在第一页，在第一页的时候，它就显示这个八条记录，把这数据讲出来了，在这个啊，我们就完成了。讲师列表功能啊，快速做到了，而这里边写法中跟之前区别就是接口中咱反应麦部集合在前端用异步调用啊，主要有这么一个区别啊，其他的应该都一样，这个啊我们就完成啊。