day14【首页课程和名师功能】/04-尚硅谷-谷粒学院-讲师分页查询（分页添加）

第一次查询，咱在这个页面中显示出了八个讲师在下面有个分页，而分页中我们要实现当我点这个分页，或者上页下页，或者你的页码数，是不是要做分页的切换呀，所以咱把它做完善，那这怎么做给大家说明啊。因为咱们现在呢。并不是用那个element UI组件，如果说我们用element UI组件应该很方便，直接传值可以了，我这么写，我让大家更知道它那个底层写法，那咱来看一下啊，这怎么做，就是分页这个页面中的部分不需要各位去敲边，我这里边给大家提供好了一个扉页的这么一个，提前写好一个结构，咱把这个复制，咱直接改就可以了，各位如果说以后用的话，用我的结构改就可以了，这不需要各位翘扁啊，是我提前写好一个结构，但是里边这个。扎死个部分需要我们写一下，那我来先写下这个方法给各位角这位置啊，我们写一下啊。

就是在这里啊，那这里边我们要写什么呢？给大家强调啊，就是因为啊，刚才我提调这个结构是不是只会执行一次，但是咱要做分页的话，你有分页切换，那它就调不到这个方法了，所以咱下面要专门写个方法，为了做到那个分页切换，比如你点第一页，点第二页，点第三页，点上页下页有一个切换效果，所以咱们需要写个方法做分页切换。那怎么写呢？还是咱们之前的写法了，咱要加一个叫methods。啊，注意别写错啊，Methods，然后在method里边我们就写个方法与那个分页的切换。它的方法，那咱们来起个方法啊，比如方法我起个名字就叫这个goto配置，然后在里边传你那个页码数，就你当前是哪页，把页码数咱做个传递在里边，咱们还是调这个东西啊，就还是调它啊，那我来啊写一下啊，还是调这个teacher A片，它叫get teacher list。

但是里边的参数跟之前有点区别啊，大家注意啊，按照我刚才说的，每页显示是不是固定的，就是八条记录，因为显示九个可以，只是里边会多一个样式难看了，所以每一页就显示八条记录，但是你这里边我这是第一页，而这页数是不是不确定的，所以咱怎么做呢？把页数传过来，每页还显示八条记录，假如说你里边第一页，那这值就是一，也是第二页这值就是二，这是第三页，这值就是三，咱这么来传，然后后面加上这么一个。点赞啊，跟上面就一样了，我们加个response。电头函数，然后在里边加一个叫this.date等于我们的这个值。这个是咱写法啊，然后这点date刚才我提到了，咱不需要在里边这么定义，因为你写个return之后，它就相当于在data中给定了一个变量，所以下面咱就可以直接用，用这个可以做我们的效果啊。

这各位注意啊，这不需要在上面定义，你下面直接就用这个这点date把这值就可以得到啊，这个是我们写的一个分页切换方法，跟之前一样，只是说多传了一个页码数。就这位置啊，它的参数是以那个页码数，就是你是第几页，你是第一页，第二页还是第三页，把这个我们就要写一下，这咱们一会儿要调到。这个啊方法写出来了，然后写出来之后，最后咱们把分页做出来，分页的结构我在课件中提出来了，不需要各位敲一遍，我把它直接复制过去，咱来看一下我这是怎么写的，关于这个分页这个切换。然后分页呢，咱就复制到我们里边的。这个位置啊，有一个分页的开始，包括它的解数，我们把这个给它替换掉，替换成我课件中这个分页，这是我提前写好的这么一个页面中的结构，那大家看一下这结构是什么意思啊，我们来看一下啊。

各位看啊，里边呢，主要有这么几部分，我先给他区分一下啊这几部分。那咱们一个一来看啊，首先第一部分就这个叫首页啊，或者就叫首页啊。然后首页什么意思，是不是就是第一页呀，然后你看首页中它我的写法啊，里边有一个collect，就是一个事件，然后他调我们刚才的方法叫构图配置。咱的方法应该就是构图配置啊。然后在勾配置中，咱传的值是不是就是一啊，它就表示首页就是查第页的数据啊，就这个做法，但是这里边还有一个地方，这个地方。不知各位是否记得啊，咱之前讲过这个什么意思呢？如果各位忘记，我再说一遍啊，它叫做阻止你这个标签默认的这种行为，因为这个是不是一个超链接的A标签呀，A标签是不是要跳转呀，咱写它之后，A标签就不会跳转，去执行我里边的这个方法阻止它默认行为，他默认是A标签，再让他不用A标签，用我的事件跳转啊，是这个意思啊。

然后在里边，在我API条件中，我还加了这么一个部分。这是什么呢？它叫class，是一个叫样式，就是CSS的样式，我这目的是什么呢？给大家强调啊，比如说我现在，呃，因为这个啊，因为咱看就是现在在里边，比如说我这个位置，当我点击首页，那首页是不是要被选中了，就是它的颜色要变被选中，这是让他被选中那个样式加了一个CSS样式啊，就是加了这个东西。这各位给他知道，就是咱们会看效果啊，首页主要是做这个，让它跳转到第一页就叫首页，然后除了它之外，下面还有一个，这个叫做末叶，或者说叫尾叶。

什么叫尾页，末页是不是就是最后一页，你看我里边写的叫date点配置S，配置S是不是就是最后一页，所以这里边我们显示就是它的最后一页，就是它的尾页啊，把这个最后显示。这各位知道啊，然后除了它之外，上面还有你看这个前一页，还有后页以及中间的页码数，那咱分别看一下啊，先看前页。什么叫前夜呢？这什么意思啊？是不是就是当前页减一啊，看我这写法啊，这是得到当前页减一，然后什么叫后页。是不是就是当前页加一，中间部分是你的页码数，看我这怎么做到的啊，咱就把这个总页数取到，然后把它变利，把每个页码数在里边显示，假如说我有三页，那遍历之后就是123，我有四页，遍历之后就是1234，这是里边的结构，首页、尾页，前页、后页，还有中间的页码数啊，用这个做到，然后你看在里边每个地方我都加了一个C样式，样式就为了让他是否能选中。

那这样式咱们看的具体点啊，大家看两个地方。这个。还有这个或者是否记得啊，刚才我们写接口中见过，咱看一下接口啊。就里边这两个，这表示是不是是不是有下页，这表示是不是有上页，那里边你看我的写法啊，比如咱们以这为例，前页它就表示如果说你现在没有上一页，那我这个东西就不能点啊，如果说你这个没有下一页，它就不能点，也就说你如果有的话，他可以再点击往下操作，如果没有的话，那这个就不能再点击，里边咱用CSS样式做一个控制，就是判断里面这个效果。主要是写的这个地方，这个我也知道啊，首页就是第一页尾页最后一页，上页就是当前页减一，下页是当页加一，还有中间的页码数，如果说我现在在第一页，它就没有上页，如果说我在最后一页，那它肯定就没有下页啊，主要这么一个过程啊，所以咱们加了这么一个分页条里边啊，咱就填写好，各位把它复制改就可以了，只是里边你需要自己写一个分页切换的方法。

就是咱们写的这个方法。这个啊，我们把它就整出来了啊，注意这些值咱要给它对上啊。然后这个写完之后，咱最后把这效果咱试一下啊，看一下分页的效果是什么样的，那我们来做个测试啊。这个我先刷新啊，当然这这些服务我就不启动，咱主要看这功能啊，现在我点名师。我们看啊，数据是不是有了，然后大家往下看，下面显示就是首页尾页上页下页B页第二页，但大家仔细看我的鼠标，我说是否能看到啊，你看啊，在我的首页这个箭头上页和一的时候，鼠标它是这种情况，就是不是手的标志，当我在第二页这个的时候是手，手就表示可以点击，这就是用我们那个CS的样式做出控制。

比如我现在看看效果啊，我点这个第二页，大家看数据鼠表就是一条啊，然后你看点第二页的时候，我后面就不能点了，因为第二页之后它就没有下页，没有尾页，它就是最后一页，包括这个也变成一个圆圈的取用状态，现在我再点首页上页应该都可以了啊，这就可以点击，所以这样的话，废叶条我们就整出来了，就是这么一个基本效果，包括前页后叶啊，这些效果应该都对。这个咱们就完成了课程列表功能，然后这个功能中也要各位记住啊，我再强调第一部分，咱接口中是返回了map集合，Map集合里边是把所有分页数据都放到里边，它是为了咱们前端取值方便，但是肯定有其他方式啊，这是这种比较通用。然后第二个就是在页面中咱是写了一个叫异步调用方式，就是直接我们加载页面不会马上有数据，还要调一次接口才有数据，而这种方式它的特点就是异步调用，你能直接取你里边的值，叫点ID，跟这一样。另外这个结构只会调一次，如果说你想调多次，咱只能还是按照之前写法再启用method才可以调多次，这个只能调一次，然后得到数据中的这个结构中，你需要加re，不能少。

在这里边这个date冒号，它相于咱之前写了一个this这个结构，只这个date不需要定义，你这么写会帮咱定义，咱下面可以直接去用，然后最后把这个date咱在上面做了一个V-for便利做了一个显示，啊这咱刚才做到了最后分页条。这个扉页条我们是自己写了一个手写方式。没有用IUI，但是结构是固定的，可以把它复制，直接改一改就可以了，最终我们写了一个分页切换方法，就是你的第一页第二页这个切换，最终把效果咱也做到了就能看到的。

第一页包括第二页，包括这个分页的切换啊，所以这是关于讲师列表功能，就是讲师分页查询列表功能的最终实现，咱把它的前端后端部分都最终完成了啊，这个啊我们就做到了啊。我把给大家也截过来啊，这是分页切换的这么一个方法。我给它放到我们的这个位置啊，所以咱们这个功能最终我们就做到了啊。各位按照我刚才这个流程，也要能把这个功能给他提现出来啊。就是这部分啊。