乐优商城学习笔记十五-搜索微服务（三）
3.页面分页效果
刚才的查询中，我们默认了查询的页码和每页大小，因此所有的分页功能都无法使用，接下来我们一起看看分页功能条该如何制作。
这里要分两步，
- 第一步：如何生成分页条
- 第二步：点击分页按钮，我们做什么
3.1.如何生成分页条
先看下页面关于分页部分的代码：
可以看到所有的分页栏内容都是写死的。
3.1.1.需要的数据
分页数据应该是根据总页数、当前页、总条数等信息来计算得出。
- 当前页：肯定是由页面来决定的，点击按钮会生成不同的页
- 总页数：需要后台传递给我们
- 总条数：需要后台传递给我们
我们首先在data中记录下这几个值：
因为page是搜索条件之一，所以记录在search对象中。
要注意：我们在created钩子函数中，会读取url路径的参数，然后赋值给search。如果是第一次请求页面，page是不存在的。因此为了避免page被覆盖，我们应该这么做：
不过，这个时候我们自己的search对象中的值就可有可无了
3.1.2.后台提供数据
后台返回的结果中，要包含total和totalPage，我们改造下刚才的接口：
在我们返回的PageResult对象中，其实是有totalPage字段的：
我们在返回时，把这个值填上：
页面测试一下：
OK
3.1.3.页面计算分页条
首先，把后台提供的数据保存在data中：
然后看下我们要实现的效果：
这里最复杂的是中间的1~5的分页按钮，它需要动态变化。
思路分析：
- 最多有5个按钮，因此我们可以用
v-for循环从1到5即可，假如遍历得到的值为i - 但是分页条不一定是从1开始：
- 如果当前页值小于等于3的时候，分页条位置从1开始到5结束，页码就是遍历得到的
i的值 - 但是如果大于3，则不应该是
i，而是要比i大了（page-3），所以就是page-3 + i
- 如果当前页值小于等于3的时候，分页条位置从1开始到5结束，页码就是遍历得到的
所以，我们的页面这样来做：
a标签中的分页数字通过index函数来计算，需要把i传递过去：
index(i) {
if (this.search.page <= 3 || this.totalPage <= 5) {
// 当前页小于3，则页码就是从 i 开始
return i;
} else if(this.search.page <= this.totalPage - 2) {
// 大于3，则从page-2开始，然后逐个加1
return this.search.page - 3 + i;
} else{
return this.totalPage - 5 + i;
}
}
需要注意的是，如果总页数不足5页，我们就不应该遍历15，而是1总页数，稍作改进：
分页条的其它部分就比较简单了：
-
«上一页
-
{
{index(i)}}
- ...
-
下一页»
共{
{totalPage}}页
到第
页
3.2.点击分页做什么
点击分页按钮后，自然是要修改page的值
所以，我们在上一页、下一页按钮添加点击事件，对page进行修改，在数字按钮上绑定点击事件，点击直接修改page：
翻页事件的方法：
prevPage(){
if(this.search.page > 1){
this.search.page--
}
},
nextPage(){
if(this.search.page < this.totalPage){
this.search.page++
}
}
当page发生变化，我们应该去后台重新查询数据。
不过，如果我们直接发起ajax请求，那么浏览器的地址栏中是不会有变化的，没有记录下分页信息。如果用户刷新页面，那么就会回到第一页。
这样不太友好，我们应该把搜索条件记录在地址栏的查询参数中。
因此，我们监听search的变化，然后把search的过滤字段拼接在url路径后：
watch:{
search:{
deep:true,
handler(val){
// 把search对象变成请求参数，拼接在url路径
window.location.href = "http://www.leyou.com/search.html?" + ly.stringify(val);
}
}
},
刷新页面测试，然后就出现重大bug：页面无限刷新！为什么？
因为Vue实例初始化的钩子函数中，我们读取请求参数，赋值给search的时候，也触发了watch监视！也就是说，每次页面创建完成，都会触发watch，然后就会去修改window.location路径，然后页面被刷新，再次触发created钩子，又触发watch，周而复始，无限循环。
所以，我们需要在watch中进行监控，如果发现是第一次初始化，则不继续向下执行。
那么问题是，如何判断是不是第一次？
第一次初始化时，search中的key值肯定是空的，所以，我们这么做：
watch:{
search:{
deep:true,
handler(val,old){
if(!old || !old.key){
// 如果旧的search值为空，或者search中的key为空，证明是第一次
return;
}
// 把search对象变成请求参数，拼接在url路径
window.location.href = "http://www.leyou.com/search.html?" + ly.stringify(val);
}
}
}
再次刷新，OK了！
3.3.页面顶部分页条
在页面商品列表的顶部，也有一个分页条：
我们把这一部分，也加上点击事件：
###3.4.页面跳转
代码
到第
<input type="text" class="page-num" ref="page">
页 <button class="page-confirm" @click="navPage">确定button>span>div>
div>
div>
div>
navPage(){
this.search.page = this.$refs.page.value;
},
4.排序(作业)
4.1.页面搜索排序条件
在搜索商品列表的顶部，有这么一部分内容：
这是用来做排序的，默认按照综合排序。点击新品，应该按照商品创建时间排序，点击价格应该按照价格排序。因为我们没有统计销量和评价，这里咱们以新品和价格为例，进行讲解，做法是想通的。
排序需要知道两个内容：
- 排序的字段
- 排序的方式
因此，我们首先在search中记录这两个信息，因为created钩子函数会对search进行覆盖，因此我们在钩子函数中对这两个信息进行初始化即可：
然后，在页面上给按钮绑定点击事件，修改sortBy和descending的值：
可以看到，页面请求参数中已经有了排序字段了：
4.2.后台添加排序逻辑
接下来，后台需要接收请求参数中的排序信息，然后在搜索中加入排序的逻辑。
现在，我们的请求参数对象SearchRequest中，只有page、key两个字段。需要进行扩展：
然后在搜索业务逻辑中，添加排序条件：
注意，因为我们存储在索引库中的的价格是一个数组，因此在按照价格排序时，会进行智能处理：
- 如果是价格降序，则会把数组中的最大值拿来排序
- 如果是价格升序，则会把数组中的最小值拿来排序
