开发者学堂课程【微服务+全栈在线教育实战项目演练（SpringCloud Alibaba+SpringBoot）：讲师分页查询（分页添加）】学习笔记，与课程紧密连接，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/667/detail/11470
讲师分页查询（分页添加）
内容介绍：
一、分页切换方法
二、分页结构修改
三、总结
一、分页切换方法
上节查询中，在页面中显示了八个讲师，在下方显示分页
而分页中我们要实现，当点击上一页下一页时要做分页的切换。如果使用Element-ui 组件直接传值就可以，而讲解的该方式存在一个固定结构，接下来在该结构中进行修改
现在先写一个方法：
找到异步调用功能模块的代码，在 asyncData({params,error}){}后添加代码，因为异步调用只访问一次，所以在做分页切换时就调取不到该方法，所以接下来要写一个方法专门做分页切换。
添加代码如下：
methods:｛
//分页切换的方法
//参数是页码数
gotoPage(page) ｛//方法名为gotoPage，然后传页码数，当前页码是哪一页。
teacherApi . getTeacherList(page,8)//仍然调用该函数，但是其中的参数变为page，8。
假如是第一页，page 值就为1，是第二页，page值就为2
then( response => ｛
this.data = response.data.data
})
}
二、分页结构修改
接着做分页的结构，将课件中的固定结构复制进行修改：
找到代码中的<!--公共分页 开始--><!--公共分页 结束 -->将其中内容改为如下：
<div>
<div class="paging">
<!-- undisablei 这个class是否存在,取决于数据属性hasPrevious -->
<a
class="{undisable:!data.hasPrevious}"//添加class样式:
当点击首页，首页被选中时颜色发生变化
href="#"
title="首页"
@click.prevent="gotoPage(1)">首页</a> //第一部分首页中存在一个click事件，调用刚才的方法 gotoPage，之后在gotoPage中传的值就为1，即首页第一页。
prevent是阻止标签默认的行为：<a>标签是超链接，超链接会跳转，写prevent后会执行后面的内容，阻止默认跳转
<a
:class="{undisable:!data.hasPrevious}" //如果没有上一页，那么不能点击
href="#"
title="前一页"
@click.prevent="gotoPage(data.current-1)"><</a> //当前页减一页
<a
v-for="page in data.pages" //取到总页数之后遍历，将每个页数都显示，例如三页，遍历结果为1、2、3
:key="page"
:class="{current: data.current == page, undisable: data.current == page}"
:title="’第’+page+'页'"
href="#"
@click.prevent=" gotoPage(page)">{{ page }}</a>
<a
:class="{undisable: !data.hasNext}" //如果没有下一页不能点击
href="#"
title="后一页"
@click.prevent="gotoPage(data.current+1)">></a>
<a
:class="{undisable:!data.hasNext}"
href="#"
title="末页"
@click.prevent="gotoPage(data.pages)">末页</a> //显示最后一页
<div class="clear"/>
</div>
</div>
最终测试结果，打开网页 localhost:3000，点击名师，显示如图
存在首页，尾页，上一页，下一页。但是注意在当前第一页时，点击下一页和末页鼠标都是显示手的标志，不能点击上一页。
三、总结
总结：
以上就完成了课程列表功能，
注意：
接口中是返回了 map 集合，map 集合存放所有数据。
在页面中采用异步调用方式，在加载页面时不会马上显示数据，需要调一次接口才有数据，这种方式特点是可以直接取里面的值params.id，只能调用一次，想要调用多次可以使用之前的写法methods。
然后在异步调用的结构中需要添加
return，data:response.data.data相当于之前的写法 this.data=response.data.data 。
之后将data在上方做了一个 v-for 遍历显示。最后是分页条，使用固定结构进行修改，最终写了一个分页切换方法，即第一页第二页切换。
