乐优商城学习笔记十四-搜素微服务（二）

作者: smallmartial | 来源:发表于2019-04-19 15:21 被阅读0次

title: 乐优商城学习笔记十四-搜素微服务（二）
date: 2019-04-19 15:01:59
tags:
- 乐优商城
- java
- springboot
categories:
- 乐优商城

2.实现基本搜索

2.1.页面分析

2.1.1.页面跳转

在首页的顶部，有一个输入框：

1526629923970

当我们输入任何文本，点击搜索，就会跳转到搜索页search.html了：

并且将搜索关键字以请求参数携带过来：

[图片上传失败...(image-d459-1555658500384)]

我们打开search.html，在最下面会有提前定义好的Vue实例：
我们打开search.html，在最下面会有提前定义好的Vue实例：

<script type="text/javascript">
    var vm = new Vue({
        el: "#searchApp",
        data: {
        },
        components:{
            // 加载页面顶部组件
            lyTop: () => import("./js/pages/top.js")
        }
    });
</script>

2.1.2.发起异步请求

要想在页面加载后，就展示出搜索结果。我们应该在页面加载时，获取地址栏请求参数，并发起异步请求，查询后台数据，然后在页面渲染。

我们在data中定义一个对象，记录请求的参数：

data: {
    search:{
        key:"", // 搜索页面的关键字
    }
}

我们通过钩子函数created，在页面加载时获取请求参数，并记录下来。

created(){
    // 判断是否有请求参数
    if(!location.search){
        return;
    }
    // 将请求参数转为对象
    const search = ly.parse(location.search.substring(1));
    // 记录在data的search对象中
    this.search = search;
    
    // 发起请求，根据条件搜索
    this.searchFromServer();
}

然后发起请求，搜索数据。

methods:{
    searchFromServer(){
        // 发起异步请求
        ly.http.post("/search/page",this.search)
            .then(resp => {
            console.log(resp.data);
        })
    }
}

我们这里使用ly是common.js中定义的工具对象。
这里使用的是post请求，这样可以携带更多参数，并且以json格式发送

刷新页面试试：

[图片上传失败...(image-7e64ab-1555658500384)]

请求体：

[图片上传失败...(image-a22bcf-1555658500384)]

因为后台没有提供接口，所以无法访问。没关系，接下来我们实现后台接口

2.2.后台提供搜索接口

2.2.1.controller

首先分析几个问题：

请求方式：Post
请求路径：/search/page，不过前面的/search应该是网关的映射路径，因此真实映射路径page，代表分页查询
请求参数：json格式，目前只有一个属性：key,搜索关键字，但是搜索结果页一定是带有分页查询的，所以将来肯定会有page属性，因此我们可以用一个对象来接收请求的json数据：

public class SearchRequest {
    private String key;// 搜索条件

    private Integer page;// 当前页

    private static final Integer DEFAULT_SIZE = 20;// 每页大小，不从页面接收，而是固定大小
    private static final Integer DEFAULT_PAGE = 1;// 默认页

    public String getKey() {
        return key;
    }

    public void setKey(String key) {
        this.key = key;
    }

    public Integer getPage() {
        if(page == null){
            return DEFAULT_PAGE;
        }
        // 获取页码时做一些校验，不能小于1
        return Math.max(DEFAULT_PAGE, page);
    }

    public void setPage(Integer page) {
        this.page = page;
    }

    public Integer getSize() {
        return DEFAULT_SIZE;
    }
}

返回结果：作为分页结果，一般都两个属性：当前页数据、总条数信息，我们可以使用之前定义的PageResult类
代码：

@RestController
@RequestMapping
public class SearchController {

    @Autowired
    private IndexService indexService;

    /**
     * 搜索商品
     *
     * @param request
     * @return
     */
    @PostMapping("page")
    public ResponseEntity<PageResult<Goods>> search(@RequestBody SearchRequest request) {
        PageResult<Goods> result = this.searchService.search(request);
        if (result == null) {
            return new ResponseEntity<>(HttpStatus.NOT_FOUND);
        }
        return ResponseEntity.ok(result);
    }
}

2.2.2.service

    public PageResult<Goods> search(SearchRequest request) {
        Integer page = request.getPage() - 1;
        Integer size = request.getSize();
        //创建查询构建器
        NativeSearchQueryBuilder queryBuilder = new NativeSearchQueryBuilder();
        //过滤
        queryBuilder.withSourceFilter(new FetchSourceFilter(new String[]{"id","skus","subTitle"}, null));
        //分页
        queryBuilder.withPageable(PageRequest.of(page,size));
        //过滤
        //queryBuilder.withQuery(QueryBuilders.matchQuery("all",request.getKey()));
        //查询
        Page<Goods> result = repository.search(queryBuilder.build());
        //解析结果
        long total = result.getTotalElements();
        Integer totalPage =result.getTotalPages();
        List<Goods> goodsList = result.getContent();
        return new PageResult<>(total, totalPage, goodsList);
    }

注意点：对于过滤字段，如果添加会报500错误

2.2.3.测试

刷新页面测试：

[图片上传失败...(image-bd11a2-1555658500384)]

[图片上传失败...(image-272ece-1555658500384)]

数据是查到了，但是因为我们只查询部分字段，所以结果json 数据中有很多null，这很不优雅。

解决办法很简单，在application.yml中添加一行配置，json处理时忽略空值：

spring:
  jackson:
    default-property-inclusion: non_null # 配置json处理时忽略空值

结果：

[图片上传失败...(image-380655-1555658500384)]

2.3.页面渲染

页面已经拿到了结果，接下来就要渲染样式了。

2.3.1.保存搜索结果

首先，在data中定义属性，保存搜索的结果goodList：

    var vm = new Vue({
        el: "#searchApp",
        data: {
            ly,
            key:"",
            search:{},
            goodList:{},
            total: 0,
            totalPage: 0,
            selectedSku:{}
        },

在loadData的异步查询中，将结果赋值给goodsList：

         loadData(){
              //发送到后台
                ly.http.post("/search/page",this.search).then(resp =>{
                    //保存分页结果
                   this.total = resp.data.total;
                    this.totalPage=resp.data.totalPage;
                    this.goodList = resp.data.item;

                console.log(resp);
                }).catch(error => {

                })
            }

2.3.2.循环展示商品

在search.html的中部，有一个div，用来展示所有搜索到的商品：

[图片上传失败...(image-f2dcad-1555658500384)]

可以看到，div中有一个无序列表ul，内部的每一个li就是一个商品spu了。

我们删除多余的，只保留一个li，然后利用vue的循环来展示搜索到的结果：

<li class="yui3-u-1-5" v-for="goods in goodList" :key="goods.id" >

2.3.3.多sku展示

分析

接下来展示具体的商品信息，来看图：

[图片上传失败...(image-f69db6-1555658500384)]

这里我们可以发现，一个商品位置，是多个sku的信息集合。当用户鼠标选择某个sku，对应的图片、价格、标题会随之改变！

我们先来实现sku的选择，才能去展示不同sku的数据。

[图片上传失败...(image-14d752-1555658500384)]

可以看到，在列表中默认第一个是被选中的，那我们就需要做两件事情：

记录当前被选中的是哪一个sku，记录在哪里比较合适呢？显然是遍历到的goods对象自己内部，因为每一个goods都会有自己的sku信息。
在搜索到数据时，先默认把第一个sku作为被选中的，记录下来

初始化sku

我们在查询成功的回调函数中，对goods进行遍历，然后添加一个selected属性，保存被选中的sku：

         loadData(){
              //发送到后台
                ly.http.post("/search/page",this.search).then(resp =>{
                    //保存分页结果
                   this.total = resp.data.total;
                    this.totalPage=resp.data.totalPage;
                    //保存当前页商品
                    resp.data.item.forEach(goods =>{
                        goods.skus = JSON.parse(goods.skus);
                        goods.selectedSku = goods.skus[0];

                    });
                    this.goodList = resp.data.item;

                console.log(resp);
                }).catch(error => {

                })
            }

多sku图片列表

接下来，我们看看多个sku的图片列表位置：

[图片上传失败...(image-53c581-1555658500384)]

看到又是一个无序列表，这里我们也一样删掉多余的，保留一个li，需要注意选中的项有一个样式类：selected

我们的代码：

<!--多sku图片列表-->
<ul class="skus">
    <li :class="{selected: sku.id == goods.selected.id}" v-for="sku in goods.skus" :key="sku.id"
        @mouseEnter="goods.selected=sku">
        <img :src="sku.image">
    </li>
</ul>

注意：

class样式通过 goods.selected的id是否与当前sku的id一致来判断
绑定了鼠标事件，鼠标进入后把当前sku赋值到goods.selected

2.3.4.展示sku其它属性代码

div class="goods-list">
                <ul class="yui3-g">
                    <li class="yui3-u-1-5" v-for="goods in goodList" :key="goods.id" >
                        <div class="list-wrap">
                            <div class="p-img">
                                <a href="item.html" target="_blank"><img :src="goods.selectedSku.image" height="200"/></a>
                                <ul class="skus">
                                    <li :class="{selected:goods.selectedSku.id == sku.id}" 
                                    @mouseenter="goods.selectedSku=sku" v-for="sku in goods.skus" :key="sku.id">
                                        <img :src="sku.image">
                                    </li>
                                  
                                </ul>
                            </div>
                            <div class="clearfix"></div>
                            <div class="price">
                                <strong>
                                    <em>¥</em>
                                    <i v-text="goods.selectedSku.price"></i>
                                </strong>
                            </div>
                            <div class="attr">
                                <em v-text="goods.selectedSku.title.substring(0,21) + '..'"></em>
                            </div>
                            <div class="cu">
                                <em><span>促</span>{{goods.subTitle.substring(0,15)+'..'}}</em>
                            </div>
                            <div class="commit">
                                <i class="command">已有2000人评价</i>
                            </div>
                            <div class="operate">
                                <a href="success-cart.html" target="_blank" class="sui-btn btn-bordered btn-danger">加入购物车</a>
                                <a href="javascript:void(0);" class="sui-btn btn-bordered">对比</a>
                                <a href="javascript:void(0);" class="sui-btn btn-bordered">关注</a>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>

页面效果：

image