乐优商城学习笔记十五-搜索微服务（三）

最新推荐文章于 2020-05-11 23:26:39 发布

YByuanrensheng

最新推荐文章于 2020-05-11 23:26:39 发布

阅读量237

点赞数

分类专栏：乐优商场

原文链接：https://blog.csdn.net/id5555/article/details/89403998

版权

乐优商场专栏收录该内容

8 篇文章 0 订阅

订阅专栏

3.页面分页效果

刚才的查询中，我们默认了查询的页码和每页大小，因此所有的分页功能都无法使用，接下来我们一起看看分页功能条该如何制作。

这里要分两步，

第一步：如何生成分页条
第二步：点击分页按钮，我们做什么

3.1.如何生成分页条

先看下页面关于分页部分的代码：

1526692249371

可以看到所有的分页栏内容都是写死的。

3.1.1.需要的数据

分页数据应该是根据总页数、当前页、总条数等信息来计算得出。

当前页：肯定是由页面来决定的，点击按钮会生成不同的页
总页数：需要后台传递给我们
总条数：需要后台传递给我们

我们首先在data中记录下这几个值：

1526694848538

因为page是搜索条件之一，所以记录在search对象中。

要注意：我们在created钩子函数中，会读取url路径的参数，然后赋值给search。如果是第一次请求页面，page是不存在的。因此为了避免page被覆盖，我们应该这么做：

1526715358560

不过，这个时候我们自己的search对象中的值就可有可无了

3.1.2.后台提供数据

后台返回的结果中，要包含total和totalPage，我们改造下刚才的接口：

在我们返回的PageResult对象中，其实是有totalPage字段的：

1526695144476

我们在返回时，把这个值填上：

1526695592422

页面测试一下：

1526695713496

3.1.3.页面计算分页条

首先，把后台提供的数据保存在data中：

1526695967230

然后看下我们要实现的效果：

1526695821870

这里最复杂的是中间的1~5的分页按钮，它需要动态变化。

思路分析：

最多有5个按钮，因此我们可以用v-for循环从1到5即可，假如遍历得到的值为i
但是分页条不一定是从1开始：
- 如果当前页值小于等于3的时候，分页条位置从1开始到5结束，页码就是遍历得到的i的值
- 但是如果大于3，则不应该是i，而是要比i大了（page-3），所以就是page-3 + i

所以，我们的页面这样来做：

1526698486165

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;
    }
}

    
    
    
    1
2
3
4
5
6
7
8
9
10
11

需要注意的是，如果总页数不足5页，我们就不应该遍历1_5，而是1总页数，稍作改进：

1526698842013

分页条的其它部分就比较简单了：

<div class="sui-pagination pagination-large">
    <ul style="width: 550px">
        <li :class="{prev:true,disabled:search.page === 1}">
            <a href="#">«上一页</a>
        </li>
        <li :class="{active: index(i) === search.page}" v-for="i in Math.min(5,totalPage)" :key="i">
            <a href="#">{{index(i)}}</a>
        </li>
        <li class="dotted" v-show="totalPage > 5"><span>...</span></li>
        <li :class="{next:true,disabled:search.page === totalPage}">
            <a href="#">下一页»</a>
        </li>
    </ul>
    <div>
        <span>共{{totalPage}}页&nbsp;</span>
        <span>
            到第
            <input type="text" class="page-num" :value="search.page">
            页 <button class="page-confirm" "alert(1)">确定</button>
        </span>
    </div>
</div>

    
    
    
    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

3.2.点击分页做什么

点击分页按钮后，自然是要修改page的值

所以，我们在上一页、下一页按钮添加点击事件，对page进行修改，在数字按钮上绑定点击事件，点击直接修改page：

1526716056879

翻页事件的方法：

    prevPage(){
        if(this.search.page > 1){
            this.search.page--
        }
    },
    nextPage(){
        if(this.search.page < this.totalPage){
            this.search.page++
        }
    }

    
    
    
    1
2
3
4
5
6
7
8
9
10

当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);
        }
    }
},

    
    
    
    1
2
3
4
5
6
7
8
9

刷新页面测试，然后就出现重大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);
        }
    }
}

    
    
    
    1
2
3
4
5
6
7
8
9
10
11
12
13

再次刷新，OK了！

3.3.页面顶部分页条

在页面商品列表的顶部，也有一个分页条：

1526716212704

我们把这一部分，也加上点击事件：

1526716388196

###3.4.页面跳转
代码

      到第
      <input type="text" class="page-num" ref="page">
      页 <button class="page-confirm" @click="navPage">确定</button></span></div>
                </div>
            </div>
        </div>

    
    
    
    1
2
3
4
5
6

        navPage(){
            this.search.page = this.$refs.page.value;
        },

    
    
    
    1
2
3

4.排序(作业)

4.1.页面搜索排序条件

在搜索商品列表的顶部，有这么一部分内容：

1526716565293

这是用来做排序的，默认按照综合排序。点击新品，应该按照商品创建时间排序，点击价格应该按照价格排序。因为我们没有统计销量和评价，这里咱们以新品和价格为例，进行讲解，做法是想通的。

排序需要知道两个内容：

排序的字段
排序的方式

因此，我们首先在search中记录这两个信息，因为created钩子函数会对search进行覆盖，因此我们在钩子函数中对这两个信息进行初始化即可：

1526717586493

然后，在页面上给按钮绑定点击事件，修改sortBy和descending的值：

<!--排序字段-->
<ul class="sui-nav">
    <li :class="{active:!search.sortBy}" @click="search.sortBy=''">
        <a href="#">综合</a>
    </li>
    <li>
        <a href="#">销量</a>
    </li>
    <li @click="search.sortBy='createTime'" :class="{active: search.sortBy==='createTime'}">
        <a href="#">新品</a>
    </li>
    <li>
        <a href="#">评价</a>
    </li>
    <li @click="search.sortBy='price'; search.descending = !search.descending"
        :class="{active: search.sortBy==='price'}">
        <a href="#">
            价格
            <v-icon v-show="search.descending">arrow_drop_down</v-icon>
            <v-icon v-show="!search.descending">arrow_drop_up</v-icon>
        </a>
    </li>
</ul>

    
    
    
    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

可以看到，页面请求参数中已经有了排序字段了：

1526718252315

4.2.后台添加排序逻辑

接下来，后台需要接收请求参数中的排序信息，然后在搜索中加入排序的逻辑。

现在，我们的请求参数对象SearchRequest中，只有page、key两个字段。需要进行扩展：

1526718448918

然后在搜索业务逻辑中，添加排序条件：

1526718637618

注意，因为我们存储在索引库中的的价格是一个数组，因此在按照价格排序时，会进行智能处理：

如果是价格降序，则会把数组中的最大值拿来排序
如果是价格升序，则会把数组中的最小值拿来排序

1526719415219

                                </div>
            <link href="https://csdnimg.cn/release/phoenix/mdeditor/markdown_views-60ecaf1f42.css" rel="stylesheet">
                                            <div class="more-toolbox">
            <div class="left-toolbox">
                <ul class="toolbox-list">
                    
                    <li class="tool-item tool-active is-like "><a href="javascript:;"><svg class="icon" aria-hidden="true">
                        <use xlink:href="#csdnc-thumbsup"></use>
                    </svg><span class="name">点赞</span>
                    <span class="count"></span>
                    </a></li>
                    <li class="tool-item tool-active is-collection "><a href="javascript:;" data-report-click="{&quot;mod&quot;:&quot;popu_824&quot;}"><svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-csdnc-Collection-G"></use>
                    </svg><span class="name">收藏</span></a></li>
                    <li class="tool-item tool-active is-share"><a href="javascript:;" data-report-click="{&quot;mod&quot;:&quot;1582594662_002&quot;}"><svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-csdnc-fenxiang"></use>
                    </svg>分享</a></li>
                    <!--打赏开始-->
                                            <!--打赏结束-->
                                            <li class="tool-item tool-more">
                        <a>
                        <svg t="1575545411852" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5717" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M179.176 499.222m-113.245 0a113.245 113.245 0 1 0 226.49 0 113.245 113.245 0 1 0-226.49 0Z" p-id="5718"></path><path d="M509.684 499.222m-113.245 0a113.245 113.245 0 1 0 226.49 0 113.245 113.245 0 1 0-226.49 0Z" p-id="5719"></path><path d="M846.175 499.222m-113.245 0a113.245 113.245 0 1 0 226.49 0 113.245 113.245 0 1 0-226.49 0Z" p-id="5720"></path></svg>
                        </a>
                        <ul class="more-box">
                            <li class="item"><a class="article-report">文章举报</a></li>
                        </ul>
                    </li>
                                        </ul>
            </div>
                        </div>
        <div class="person-messagebox">
            <div class="left-message"><a href="https://blog.csdn.net/id5555">
                <img src="https://profile.csdnimg.cn/8/6/D/3_id5555" class="avatar_pic" username="id5555">
                                        <img src="https://g.csdnimg.cn/static/user-reg-year/1x/3.png" class="user-years">
                                </a></div>
            <div class="middle-message">
                                    <div class="title"><span class="tit"><a href="https://blog.csdn.net/id5555" data-report-click="{&quot;mod&quot;:&quot;popu_379&quot;}" target="_blank">smallmartial</a></span>
                                        </div>
                <div class="text"><span>发布了94 篇原创文章</span> · <span>获赞 8</span> · <span>访问量 1万+</span></div>
            </div>
                            <div class="right-message">
                                        <a href="https://im.csdn.net/im/main.html?userName=id5555" target="_blank" class="btn btn-sm btn-red-hollow bt-button personal-letter">私信
                    </a>
                                                        <a class="btn btn-sm  bt-button personal-watch" data-report-click="{&quot;mod&quot;:&quot;popu_379&quot;}">关注</a>
                                </div>
                        </div>
                </div>
</article>