黑马畅购商城---6.品牌、规格统计、条件筛选、分页排序、高亮显示

布满荆棘的人生 2023-07-06 14:59 0阅读 0赞

## 学习目标 ##

*  条件筛选
 *  多条件搜索\[品牌、规格条件搜索\]
 *  规格过滤
 *  价格区间搜索
 *  搜索分页
 *  搜索排序
 *  搜索高亮

## 1. 品牌统计 ##

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3F6YzIwMTc_size_16_color_FFFFFF_t_70][]

用户搜索的时候，除了使用分类搜索外，还有可能使用品牌搜索，所以我们还需要显示品牌数据和规格数据，品牌数据和规格数据的显示比较容易，都可以考虑使用分类统计的方式进行分组实现。

### 1.1 品牌统计分析 ###

看下面的SQL语句，我们在执行搜索的时候，第1条SQL语句是执行搜，第2条语句是根据品牌名字分组查看有多少品牌，大概执行了2个步骤就可以获取数据结果以及品牌统计，我们可以发现他们的搜索条件完全一样。

1
    2
    3
    4
    -- 查询所有
    SELECT * FROM tb_sku WHERE name LIKE '%手机%';
    -- 根据品牌名字分组查询
    SELECT brand_name FROM  tb_sku WHERE name LIKE '%手机%' GROUP BY brand_name;

我们每次执行搜索的时候，需要显示商品品牌名称，这里要显示的品牌名称其实就是符合搜素条件的所有商品的品牌集合，我们可以按照上面的实现思路，使用ES根据分组名称做一次分组查询即可实现。

### 1.2 品牌分组统计实现 ###

修改search微服务的com.changgou.search.service.impl.SkuServiceImpl类，添加一个品牌分组搜索,如图:

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3F6YzIwMTc_size_16_color_FFFFFF_t_70 1][]

添加的代码如下:

1
    2
    //设置分组条件  商品品牌
    nativeSearchQueryBuilder.addAggregation(AggregationBuilders.terms("skuBrandgroup").field("brandName").size(50));

执行获取分组结果:

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3F6YzIwMTc_size_16_color_FFFFFF_t_70 2][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3F6YzIwMTc_size_16_color_FFFFFF_t_70 3][]

整体代码如下：

1
 2
 3
 4
 5
 6
 7
 8
 9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 public Map search(Map<String, String> searchMap) {
 
 //1.获取关键字的值
 String keywords = searchMap.get("keywords");
 
 if (StringUtils.isEmpty(keywords)) {
 keywords = "华为";//赋值给一个默认的值
 }
 //2.创建查询对象 的构建对象
 NativeSearchQueryBuilder nativeSearchQueryBuilder = new NativeSearchQueryBuilder();
 
 //3.设置查询的条件
 
 //设置分组条件 商品分类
 nativeSearchQueryBuilder.addAggregation(AggregationBuilders.terms("skuCategorygroup").field("categoryName").size(50));
 
 //设置分组条件 商品品牌
 nativeSearchQueryBuilder.addAggregation(AggregationBuilders.terms("skuBrandgroup").field("brandName").size(50));
 
 
 
 
 nativeSearchQueryBuilder.withQuery(QueryBuilders.matchQuery("name", keywords));
 
 //4.构建查询对象
 NativeSearchQuery query = nativeSearchQueryBuilder.build();
 
 //5.执行查询
 AggregatedPage<SkuInfo> skuPage = esTemplate.queryForPage(query, SkuInfo.class);
 
 //获取分组结果 商品分类
 StringTerms stringTermsCategory = (StringTerms) skuPage.getAggregation("skuCategorygroup");
 //获取分组结果 商品品牌
 StringTerms stringTermsBrand = (StringTerms) skuPage.getAggregation("skuBrandgroup");
 
 
 List<String> categoryList = getStringsCategoryList(stringTermsCategory);
 
 List<String> brandList = getStringsBrandList(stringTermsBrand);
 
 
 
 //6.返回结果
 Map resultMap = new HashMap<>();
 
 
 resultMap.put("categoryList", categoryList);
 resultMap.put("brandList", brandList);
 resultMap.put("rows", skuPage.getContent());
 resultMap.put("total", skuPage.getTotalElements());
 resultMap.put("totalPages", skuPage.getTotalPages());
 
 return resultMap;
 }
 /**
 * 获取品牌列表
 *
 * @param stringTermsBrand
 * @return
 */
 private List<String> getStringsBrandList(StringTerms stringTermsBrand) {
 List<String> brandList = new ArrayList<>();
 if (stringTermsBrand != null) {
 for (StringTerms.Bucket bucket : stringTermsBrand.getBuckets()) {
 brandList.add(bucket.getKeyAsString());
 }
 }
 return brandList;
 }
 
 /**
 * 获取分类列表数据
 *
 * @param stringTerms
 * @return
 */
 private List<String> getStringsCategoryList(StringTerms stringTerms) {
 List<String> categoryList = new ArrayList<>();
 if (stringTerms != null) {
 for (StringTerms.Bucket bucket : stringTerms.getBuckets()) {
 String keyAsString = bucket.getKeyAsString();//分组的值
 categoryList.add(keyAsString);
 }
 }
 return categoryList;
 }

### 1.3 测试 ###

使用PostMan请求http://localhost:18086/search

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3F6YzIwMTc_size_16_color_FFFFFF_t_70 4][]

## 2. 规格统计 ##

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3F6YzIwMTc_size_16_color_FFFFFF_t_70 5][]

用户搜索的时候，除了使用分类、品牌搜索外，还有可能使用规格搜索，所以我们还需要显示规格数据，规格数据的显示相比上面2种实现略微较难一些，需要对数据进行处理，我们也可以考虑使用分类统计和品牌统计的方式进行分组实现。

### 2.1 规格统计分析 ###

看下面的SQL语句，我们在执行搜索的时候，第1条SQL语句是执行搜，第2条语句是根据规格分组查看有多少规格，大概执行了2个步骤就可以获取数据结果以及规格统计，我们可以发现他们的搜索条件完全一样。

1
    2
    3
    4
    -- 查询所有
    SELECT * FROM tb_sku WHERE name LIKE '%手机%';
    -- 根据规格名字分组查询
    SELECT spec FROM  tb_sku WHERE name LIKE '%手机%' GROUP BY spec;

上述SQL语句执行后的结果如下图：

![2020022011284954.jpg][]

获取到的规格数据我们发现有重复，不过也可以解决，解决思路如下：

1
 2
 3
 4
 1.获取所有规格数据
 2.将所有规格数据转换成Map
 3.定义一个Map<String,Set>,key是规格名字，防止重复所以用Map，valu是规格值，规格值有多个，所以用集合，为了防止规格重复，用Set去除重复
 4.循环规格的Map，将数据填充到定义的Map<String,Set>中

我们每次执行搜索的时候，需要显示商品规格数据，这里要显示的规格数据其实就是符合搜素条件的所有商品的规格集合，我们可以按照上面的实现思路，使用ES根据分组名称做一次分组查询，并去除重复数据即可实现。

### 2.2 规格统计分组实现 ###

修改search微服务的com.changgou.search.service.impl.SkuServiceImpl类，添加一个规格分组搜索

如图:添加规格分组条件

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3F6YzIwMTc_size_16_color_FFFFFF_t_70 6][]

上图代码如下:

1
    2
    //设置分组条件  商品的规格
    nativeSearchQueryBuilder.addAggregation(AggregationBuilders.terms("skuSpecgroup").field("spec.keyword").size(100));

如图:获取规格分组结果:

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3F6YzIwMTc_size_16_color_FFFFFF_t_70 7][]

封装调用分组结果的方法:

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3F6YzIwMTc_size_16_color_FFFFFF_t_70 8][]

上图代码如下:

1
 2
 3
 4
 5
 6
 7
 8
 9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 /**
 * 获取规格列表数据
 *
 * @param stringTermsSpec
 * @return
 */
 private Map<String, Set<String>> getStringSetMap(StringTerms stringTermsSpec) {
 Map<String, Set<String>> specMap = new HashMap<String, Set<String>>();
 Set<String> specList = new HashSet<>();
 if (stringTermsSpec != null) {
 for (StringTerms.Bucket bucket : stringTermsSpec.getBuckets()) {
 specList.add(bucket.getKeyAsString());
 }
 }
 for (String specjson : specList) {
 Map<String, String> map = JSON.parseObject(specjson, Map.class);
 for (Map.Entry<String, String> entry : map.entrySet()) {//
 String key = entry.getKey(); //规格名字
 String value = entry.getValue(); //规格选项值
 //获取当前规格名字对应的规格数据
 Set<String> specValues = specMap.get(key);
 if (specValues == null) {
 specValues = new HashSet<String>();
 }
 //将当前规格加入到集合中
 specValues.add(value);
 //将数据存入到specMap中
 specMap.put(key, specValues);
 }
 }
 return specMap;
 }

整体代码如下:

### 2.3 测试 ###

使用Postman测试访问http://localhost:18086/search 效果如下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3F6YzIwMTc_size_16_color_FFFFFF_t_70 9][]

## 3 条件筛选 ##

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3F6YzIwMTc_size_16_color_FFFFFF_t_70 10][]

用户有可能会根据分类搜索、品牌搜索，还有可能根据规格搜索，以及价格搜索和排序操作。根据分类和品牌搜索的时候，可以直接根据指定域搜索，而规格搜索的域数据是不确定的，价格是一个区间搜索，所以我们可以分为三段时间，先实现分类、品牌搜素，再实现规格搜索，然后实现价格区间搜索。

### 3.1 分类、品牌筛选 ###

3.1.1 需求分析

页面每次向后台传入对应的分类和品牌，后台据分类和品牌进行条件过滤即可。

3.1.2 代码实现

修改搜索微服务com.changgou.search.service.impl.SkuServiceImpl的search方法，添加分类和品牌过滤,

添加过滤条件如下:

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3F6YzIwMTc_size_16_color_FFFFFF_t_70 11][]

PS说明: 以上,我们建议使用filter ,它的搜索效率要优于must.可以参考官方文档说明:

[https://www.elastic.co/guide/en/elasticsearch/reference/current/query-dsl-bool-query.html][https_www.elastic.co_guide_en_elasticsearch_reference_current_query-dsl-bool-query.html]

执行过滤查询如下:

![20200220112848742.jpg][]

上图整体代码如下：

1
 2
 3
 4
 5
 6
 7
 8
 9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 @Override
 public Map search(Map<String, String> searchMap) {
 
 //1.获取关键字的值
 String keywords = searchMap.get("keywords");
 
 if (StringUtils.isEmpty(keywords)) {
 keywords = "华为";//赋值给一个默认的值
 }
 //2.创建查询对象 的构建对象
 NativeSearchQueryBuilder nativeSearchQueryBuilder = new NativeSearchQueryBuilder();
 
 //3.设置查询的条件
 
 //设置分组条件 商品分类
 nativeSearchQueryBuilder.addAggregation(AggregationBuilders.terms("skuCategorygroup").field("categoryName").size(50));
 
 //设置分组条件 商品品牌
 nativeSearchQueryBuilder.addAggregation(AggregationBuilders.terms("skuBrandgroup").field("brandName").size(50));
 
 //设置分组条件 商品的规格
 nativeSearchQueryBuilder.addAggregation(AggregationBuilders.terms("skuSpecgroup").field("spec.keyword").size(1000));
 
 
 //设置主关键字查询
 nativeSearchQueryBuilder.withQuery(QueryBuilders.matchQuery("name", keywords));
 
 
 BoolQueryBuilder boolQueryBuilder = QueryBuilders.boolQuery();
 
 
 if (!StringUtils.isEmpty(searchMap.get("brand"))) {
 boolQueryBuilder.filter(QueryBuilders.termQuery("brandName", searchMap.get("brand")));
 }
 
 if (!StringUtils.isEmpty(searchMap.get("category"))) {
 boolQueryBuilder.filter(QueryBuilders.termQuery("categoryName", searchMap.get("category")));
 }
 
 //构建过滤查询
 nativeSearchQueryBuilder.withFilter(boolQueryBuilder);
 
 //4.构建查询对象
 NativeSearchQuery query = nativeSearchQueryBuilder.build();
 
 //5.执行查询
 AggregatedPage<SkuInfo> skuPage = esTemplate.queryForPage(query, SkuInfo.class, new SearchResultMapperImpl());
 
 //获取分组结果 商品分类
 StringTerms stringTermsCategory = (StringTerms) skuPage.getAggregation("skuCategorygroup");
 //获取分组结果 商品品牌
 StringTerms stringTermsBrand = (StringTerms) skuPage.getAggregation("skuBrandgroup");
 //获取分组结果 商品规格数据
 StringTerms stringTermsSpec = (StringTerms) skuPage.getAggregation("skuSpecgroup");
 
 List<String> categoryList = getStringsCategoryList(stringTermsCategory);
 
 List<String> brandList = getStringsBrandList(stringTermsBrand);
 
 Map<String, Set<String>> specMap = getStringSetMap(stringTermsSpec);
 
 
 //6.返回结果
 Map resultMap = new HashMap<>();
 
 resultMap.put("specMap", specMap);
 resultMap.put("categoryList", categoryList);
 resultMap.put("brandList", brandList);
 resultMap.put("rows", skuPage.getContent());
 resultMap.put("total", skuPage.getTotalElements());
 resultMap.put("totalPages", skuPage.getTotalPages());
 
 return resultMap;
 }

3.1.3 测试

测试效果如下：

访问地址：http://localhost:18085/search

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3F6YzIwMTc_size_16_color_FFFFFF_t_70 12][]

此时只能搜到华为手环设备

### 3.2 规格过滤 ###

3.2.1 需求分析

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3F6YzIwMTc_size_16_color_FFFFFF_t_70 13][]

规格这一块，需要向后台发送规格名字以及规格值，我们可以按照一定要求来发送数据，例如规格名字以特殊前缀提交到后台：`spec_网络制式：电信4G、spec_显示屏尺寸：4.0-4.9英寸`

后台接到数据后，可以根据前缀spec\_来区分是否是规格，如果以`spec_xxx`开始的数据则为规格数据，需要根据指定规格找信息。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3F6YzIwMTc_size_16_color_FFFFFF_t_70 14][]

上图是规格的索引存储格式，真实数据在spechMap.规格名字.keyword中，所以找数据也是按照如下格式去找：

`spechMap.规格名字.keyword`

3.2.2 代码实现

修改com.changgou.search.service.impl.SkuServiceImpl的search方法，增加规格查询操作，代码如下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3F6YzIwMTc_size_16_color_FFFFFF_t_70 15][]

1
    2
    3
    4
    5
    6
    7
    8
    //规格过滤查询
    if (searchMap != null) {
        for (String key : searchMap.keySet()) {
            if (key.startsWith("spec_")) {
                boolQueryBuilder.filter(QueryBuilders.termQuery("specMap." + key.substring(5) + ".keyword", searchMap.get(key)));
            }
        }
    }

3.2.3 测试

访问地址：http://localhost:18085/search

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3F6YzIwMTc_size_16_color_FFFFFF_t_70 16][]

### 3.3 价格区间查询 ###

3.3.1 需求分析

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3F6YzIwMTc_size_16_color_FFFFFF_t_70 17][]

价格区间查询，每次需要将价格传入到后台，前端传入后台的价格大概是`price=0-500`或者`price=500-1000`依次类推，最后一个是`price=3000`,后台可以根据-分割，如果分割得到的结果最多有2个，第1个表示`x<price`，第2个表示`price<=y`。

1.3.2 代码实现

修改com.changgou.search.service.impl.SkuServiceImpl的search方法，增加价格区间查询操作，代码如下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3F6YzIwMTc_size_16_color_FFFFFF_t_70 18][]

上图代码如下：

1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    //价格过滤查询
    String price = searchMap.get("price");
    if (!StringUtils.isEmpty(price)) {
        String[] split = price.split("-");
        if (!split[1].equalsIgnoreCase("*")) {
            boolQueryBuilder.filter(QueryBuilders.rangeQuery("price").from(split[0], true).to(split[1], true));
        } else {
            boolQueryBuilder.filter(QueryBuilders.rangeQuery("price").gte(split[0]));
        }
    }

3.3.3 测试

访问地址：http://localhost:18085/search

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3F6YzIwMTc_size_16_color_FFFFFF_t_70 19][]

效果如下(部分数据)：

1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
     [
            {
                "id": 1088256019328536576,
                "name": "守护宝幼儿安全手环",
                "price": 500,
                "num": 100,
                "image": "http://img10.360buyimg.com/n1/s450x450_jfs/t3457/294/236823024/102048/c97f5825/58072422Ndd7e66c4.jpg",
                "status": "1",
                "createTime": "2019-01-24T10:03:48.000+0000",
                "updateTime": "2019-01-24T10:03:48.000+0000",
                "isDefault": null,
                "spuId": 1088256019315953664,
                "categoryId": 1108,
                "categoryName": "户外工具",
                "brandName": "守护宝",
                "spec": "{\"颜色\":\"红\",\"机身内存\":\"64G\"}",
                "specMap": {
                    "颜色": "红",
                    "机身内存": "64G"
                }
            },
            {
                "id": 1088256014043713536,
                "name": "计步器小米手环，适用老人、小孩",
                "price": 800,
                "num": 100,
                "image": "http://img10.360buyimg.com/n1/s450x450_jfs/t3457/294/236823024/102048/c97f5825/58072422Ndd7e66c4.jpg",
                "status": "1",
                "createTime": "2019-01-24T10:03:47.000+0000",
                "updateTime": "2019-01-24T10:03:47.000+0000",
                "isDefault": null,
                "spuId": 1088256014026936320,
                "categoryId": 1192,
                "categoryName": "小家电",
                "brandName": "小米",
                "spec": "{\"颜色\":\"红\",\"机身内存\":\"64G\"}",
                "specMap": {
                    "颜色": "红",
                    "机身内存": "64G"
                }
            }
        ]

## 4 搜索分页 ##

### 4.1 分页分析 ###

![20200220112848841.jpg][]

页面需要实现分页搜索，所以我们后台每次查询的时候，需要实现分页。用户页面每次会传入当前页和每页查询多少条数据，当然如果不传入每页显示多少条数据，默认查询30条即可。

### 4.2 分页实现 ###

分页使用PageRequest.of( pageNo- 1, pageSize);实现，第1个参数表示第N页，从0开始，第2个参数表示每页显示多少条，实现代码如下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3F6YzIwMTc_size_16_color_FFFFFF_t_70 20][]

上图代码如下：

1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
     		//略
    
    		//构建过滤查询
            nativeSearchQueryBuilder.withFilter(boolQueryBuilder);
    
            //构建分页查询
            Integer pageNum = 1;
            if (!StringUtils.isEmpty(searchMap.get("pageNum"))) {
                try {
                    pageNum = Integer.valueOf(searchMap.get("pageNum"));
                } catch (NumberFormatException e) {
                    e.printStackTrace();
                    pageNum=1;
                }
            }
            Integer pageSize = 3;
            nativeSearchQueryBuilder.withPageable(PageRequest.of(pageNum - 1, pageSize));
    
    		//略
    
    
            //4.构建查询对象
            NativeSearchQuery query = nativeSearchQueryBuilder.build();
    		//略

测试如下:

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3F6YzIwMTc_size_16_color_FFFFFF_t_70 21][]

## 5 搜索排序 ##

### 5.1 排序分析 ###

![20200220112848746.jpg][]

排序这里总共有根据价格排序、根据评价排序、根据新品排序、根据销量排序，排序要想实现非常简单，只需要告知排序的域以及排序方式即可实现。

价格排序：只需要根据价格高低排序即可，降序价格高->低，升序价格低->高

评价排序：评价分为好评、中评、差评，可以在数据库中设计3个列，用来记录好评、中评、差评的量，每次排序的时候，好评的比例来排序，当然还要有条数限制，评价条数需要超过N条。

新品排序：直接根据商品的发布时间或者更新时间排序。

销量排序：销量排序除了销售数量外，还应该要有时间段限制。

### 5.2 排序实现 ###

这里我们不单独针对某个功能实现排序，我们只需要在后台接收2个参数，分别是排序域名字和排序方式，代码如下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3F6YzIwMTc_size_16_color_FFFFFF_t_70 22][]

解释: 前端页面传递要排序的字段(field)和要排序的类型(ASC,DESC),后台接收.

上图代码如下：

1
    2
    3
    4
    5
    6
    //构建排序查询
    String sortRule = searchMap.get("sortRule");
    String sortField = searchMap.get("sortField");
    if (!StringUtils.isEmpty(sortRule) && !StringUtils.isEmpty(sortField)) {
        nativeSearchQueryBuilder.withSort(SortBuilders.fieldSort(sortField).order(sortRule.equals("DESC") ? SortOrder.DESC : SortOrder.ASC));
    }

测试

根据价格降序：

{"keywords":"手机","pageNum":"1","sortRule":"DESC","sortField":"price"}

根据价格升序：

{"keywords":"手机","pageNum":"1","sortRule":"ASC","sortField":"price"}

## 6 高亮显示 ##

### 6.1 高亮分析 ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3F6YzIwMTc_size_16_color_FFFFFF_t_70 23][]

高亮显示是指根据商品关键字搜索商品的时候，显示的页面对关键字给定了特殊样式，让它显示更加突出，如上图商品搜索中，关键字编程了红色，其实就是给定了红色样式。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3F6YzIwMTc_size_16_color_FFFFFF_t_70 17][]

### 6.2 高亮搜索实现步骤解析 ###

将之前的搜索换掉，换成高亮搜索，我们需要做3个步骤：

1
    2
    3
    4
    1.指定高亮域，也就是设置哪个域需要高亮显示
      设置高亮域的时候，需要指定前缀和后缀，也就是关键词用什么html标签包裹，再给该标签样式
    2.高亮搜索实现
    3.将非高亮数据替换成高亮数据

第1点，例如在百度中搜索数据的时候，会有2个地方高亮显示，分别是标题和描述，商城搜索的时候，只是商品名称高亮显示了。而高亮显示其实就是添加了样式，例如`笔记本`,而其中span开始标签可以称为前缀，span结束标签可以称为后缀。

第2点，高亮搜索使用ElasticsearchTemplate实现。

第3点，高亮搜索后，会搜出非高亮数据和高亮数据，高亮数据会加上第1点中的高亮样式，此时我们需要将非高亮数据换成高亮数据即可。例如非高亮:`华为笔记本性能超强悍` 高亮数据：`华为性能超强悍`,将非高亮的换成高亮的，到页面就能显示样式了。

### 6.3 高亮代码实现 ###

修改com.changgou.search.service.impl.SkuServiceImpl的search方法搜索代码，添加高亮显示的域:

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3F6YzIwMTc_size_16_color_FFFFFF_t_70 24][]

上图代码如下：

1
 2
 3
 4
 5
 6
 //设置高亮条件
 nativeSearchQueryBuilder.withHighlightFields(new HighlightBuilder.Field("name"));
 nativeSearchQueryBuilder.withHighlightBuilder(new HighlightBuilder().preTags("").postTags(""));
 
 //设置主关键字查询
 nativeSearchQueryBuilder.withQuery(QueryBuilders.multiMatchQuery(keywords,"name","brandName","categoryName"));

修改 查询的方法,自定义结果映射器,入下图:

![20200220112848957.jpg][]

上图图片如下:

AggregatedPage<SkuInfo> skuPage = esTemplate.queryForPage(query, SkuInfo.class, new SearchResultMapperImpl());

自定义一个映射结果类实现接口,作用就是:自定义映射结果集,获取高亮的数据展示,如下图:

![20200220112848747.jpg][]

代码如下:

1
 2
 3
 4
 5
 6
 7
 8
 9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 public class SearchResultMapperImpl implements SearchResultMapper {
 @Override
 public <T> AggregatedPage<T> mapResults(SearchResponse response, Class<T> clazz, Pageable pageable) {
 List<T> content = new ArrayList<>();
 //如果没有结果返回为空
 if (response.getHits() == null || response.getHits().getTotalHits() <= 0) {
 return new AggregatedPageImpl<T>(content);
 }
 for (SearchHit searchHit : response.getHits()) {
 String sourceAsString = searchHit.getSourceAsString();
 SkuInfo skuInfo = JSON.parseObject(sourceAsString, SkuInfo.class);
 
 Map<String, HighlightField> highlightFields = searchHit.getHighlightFields();
 HighlightField highlightField = highlightFields.get("name");
 
 //有高亮则设置高亮的值
 if (highlightField != null) {
 StringBuffer stringBuffer = new StringBuffer();
 for (Text text : highlightField.getFragments()) {
 stringBuffer.append(text.string());
 }
 skuInfo.setName(stringBuffer.toString());
 }
 content.add((T) skuInfo);
 }
 
 
 return new AggregatedPageImpl<T>(content, pageable, response.getHits().getTotalHits(), response.getAggregations(), response.getScrollId());
 }
 }

### 6.4 测试 ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3F6YzIwMTc_size_16_color_FFFFFF_t_70 25][]

效果如下：

"name": "HTC M8Sd (E8) 波尔多红 电信4G手机 双卡双待双通",

整体代码如下:

1
 2
 3
 4
 5
 6
 7
 8
 9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
 100
 101
 102
 103
 104
 105
 106
 107
 108
 109
 110
 111
 112
 113
 114
 115
 116
 117
 118
 119
 120
 121
 122
 123
 124
 125
 126
 127
 128
 129
 130
 131
 132
 133
 134
 135
 136
 137
 138
 139
 140
 141
 142
 143
 144
 145
 146
 147
 148
 149
 150
 151
 152
 153
 154
 155
 156
 157
 158
 159
 160
 161
 162
 163
 164
 165
 166
 167
 168
 169
 170
 171
 172
 173
 174
 175
 176
 177
 178
 179
 180
 181
 182
 183
 184
 185
 186
 187
 188
 189
 190
 191
 192
 193
 194
 195
 196
 197
 198
 199
 200
 201
 202
 203
 204
 205
 206
 207
 208
 209
 210
 211
 212
 213
 214
 215
 216
 217
 218
 219
 220
 221
 222
 223
 @Service
 public class SkuServiceImpl implements SkuService {
 @Autowired
 private SkuEsMapper skuEsMapper;
 
 @Autowired
 private SkuFeign skuFeign;
 
 @Override
 public void importSku() {
 Result<List<Sku>> listResult = skuFeign.findByStatus("1");
 
 List<Sku> data = listResult.getData();
 
 List<SkuInfo> skuInfos = JSON.parseArray(JSON.toJSONString(data), SkuInfo.class);
 
 for (SkuInfo skuInfo : skuInfos) {
 String spec = skuInfo.getSpec();
 Map map = JSON.parseObject(spec, Map.class);
 skuInfo.setSpecMap(map);
 }
 
 skuEsMapper.saveAll(skuInfos);
 }
 
 @Autowired
 private ElasticsearchTemplate esTemplate;
 
 /**
 * @param searchMap
 * @return
 */
 @Override
 public Map search(Map<String, String> searchMap) {
 
 //1.获取关键字的值
 String keywords = searchMap.get("keywords");
 
 if (StringUtils.isEmpty(keywords)) {
 keywords = "华为";//赋值给一个默认的值
 }
 //2.创建查询对象 的构建对象
 NativeSearchQueryBuilder nativeSearchQueryBuilder = new NativeSearchQueryBuilder();
 
 //3.设置查询的条件
 
 //设置分组条件 商品分类
 nativeSearchQueryBuilder.addAggregation(AggregationBuilders.terms("skuCategorygroup").field("categoryName").size(50));
 
 //设置分组条件 商品品牌
 nativeSearchQueryBuilder.addAggregation(AggregationBuilders.terms("skuBrandgroup").field("brandName").size(50));
 
 //设置分组条件 商品的规格
 nativeSearchQueryBuilder.addAggregation(AggregationBuilders.terms("skuSpecgroup").field("spec.keyword").size(500000));
 
 
 //设置高亮条件
 nativeSearchQueryBuilder.withHighlightFields(new HighlightBuilder.Field("name"));
 nativeSearchQueryBuilder.withHighlightBuilder(new HighlightBuilder().preTags("").postTags(""));
 
 //设置主关键字查询
 nativeSearchQueryBuilder.withQuery(QueryBuilders.multiMatchQuery(keywords,"name","brandName","categoryName"));
 
 
 BoolQueryBuilder boolQueryBuilder = QueryBuilders.boolQuery();
 
 
 if (!StringUtils.isEmpty(searchMap.get("brand"))) {
 boolQueryBuilder.filter(QueryBuilders.termQuery("brandName", searchMap.get("brand")));
 }
 
 if (!StringUtils.isEmpty(searchMap.get("category"))) {
 boolQueryBuilder.filter(QueryBuilders.termQuery("categoryName", searchMap.get("category")));
 }
 
 //规格过滤查询
 if (searchMap != null) {
 for (String key : searchMap.keySet()) {
 if (key.startsWith("spec_")) {
 boolQueryBuilder.filter(QueryBuilders.termQuery("specMap." + key.substring(5) + ".keyword", searchMap.get(key)));
 }
 }
 }
 
 //价格过滤查询
 String price = searchMap.get("price");
 if (!StringUtils.isEmpty(price)) {
 String[] split = price.split("-");
 if (!split[1].equalsIgnoreCase("*")) {
 boolQueryBuilder.filter(QueryBuilders.rangeQuery("price").from(split[0], true).to(split[1], true));
 } else {
 boolQueryBuilder.filter(QueryBuilders.rangeQuery("price").gte(split[0]));
 }
 }
 
 
 //构建过滤查询
 nativeSearchQueryBuilder.withFilter(boolQueryBuilder);
 
 //构建分页查询
 Integer pageNum = 1;
 if (!StringUtils.isEmpty(searchMap.get("pageNum"))) {
 try {
 pageNum = Integer.valueOf(searchMap.get("pageNum"));
 } catch (NumberFormatException e) {
 e.printStackTrace();
 pageNum=1;
 }
 }
 Integer pageSize = 3;
 nativeSearchQueryBuilder.withPageable(PageRequest.of(pageNum - 1, pageSize));
 
 
 //构建排序查询
 String sortRule = searchMap.get("sortRule");
 String sortField = searchMap.get("sortField");
 if (!StringUtils.isEmpty(sortRule) && !StringUtils.isEmpty(sortField)) {
 nativeSearchQueryBuilder.withSort(SortBuilders.fieldSort(sortField).order(sortRule.equals("DESC") ? SortOrder.DESC : SortOrder.ASC));
 }
 
 
 //4.构建查询对象
 NativeSearchQuery query = nativeSearchQueryBuilder.build();
 
 //5.执行查询
 AggregatedPage<SkuInfo> skuPage = esTemplate.queryForPage(query, SkuInfo.class, new SearchResultMapperImpl());
 
 //获取分组结果 商品分类
 StringTerms stringTermsCategory = (StringTerms) skuPage.getAggregation("skuCategorygroup");
 //获取分组结果 商品品牌
 StringTerms stringTermsBrand = (StringTerms) skuPage.getAggregation("skuBrandgroup");
 //获取分组结果 商品规格数据
 StringTerms stringTermsSpec = (StringTerms) skuPage.getAggregation("skuSpecgroup");
 
 List<String> categoryList = getStringsCategoryList(stringTermsCategory);
 
 List<String> brandList = getStringsBrandList(stringTermsBrand);
 
 Map<String, Set<String>> specMap = getStringSetMap(stringTermsSpec);
 
 
 //6.返回结果
 Map resultMap = new HashMap<>();
 
 resultMap.put("specMap", specMap);
 resultMap.put("categoryList", categoryList);
 resultMap.put("brandList", brandList);
 resultMap.put("rows", skuPage.getContent());
 resultMap.put("total", skuPage.getTotalElements());
 resultMap.put("totalPages", skuPage.getTotalPages());
 
 return resultMap;
 }
 
 /**
 * 获取品牌列表
 *
 * @param stringTermsBrand
 * @return
 */
 private List<String> getStringsBrandList(StringTerms stringTermsBrand) {
 List<String> brandList = new ArrayList<>();
 if (stringTermsBrand != null) {
 for (StringTerms.Bucket bucket : stringTermsBrand.getBuckets()) {
 brandList.add(bucket.getKeyAsString());
 }
 }
 return brandList;
 }
 
 /**
 * 获取分类列表数据
 *
 * @param stringTerms
 * @return
 */
 private List<String> getStringsCategoryList(StringTerms stringTerms) {
 List<String> categoryList = new ArrayList<>();
 if (stringTerms != null) {
 for (StringTerms.Bucket bucket : stringTerms.getBuckets()) {
 String keyAsString = bucket.getKeyAsString();//分组的值
 categoryList.add(keyAsString);
 }
 }
 return categoryList;
 }
 
 /**
 * 获取规格列表数据
 *
 * @param stringTermsSpec
 * @return
 */
 private Map<String, Set<String>> getStringSetMap(StringTerms stringTermsSpec) {
 Map<String, Set<String>> specMap = new HashMap<String, Set<String>>();
 
 Set<String> specList = new HashSet<>();
 
 if (stringTermsSpec != null) {
 for (StringTerms.Bucket bucket : stringTermsSpec.getBuckets()) {
 specList.add(bucket.getKeyAsString());
 }
 }
 
 for (String specjson : specList) {
 Map<String, String> map = JSON.parseObject(specjson, Map.class);
 for (Map.Entry<String, String> entry : map.entrySet()) {//
 String key = entry.getKey(); //规格名字
 String value = entry.getValue(); //规格选项值
 //获取当前规格名字对应的规格数据
 Set<String> specValues = specMap.get(key);
 if (specValues == null) {
 specValues = new HashSet<String>();
 }
 //将当前规格加入到集合中
 specValues.add(value);
 //将数据存入到specMap中
 specMap.put(key, specValues);
 }
 }
 return specMap;
 }
 }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3F6YzIwMTc_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/2020022011284931.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3F6YzIwMTc=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3F6YzIwMTc_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/2020022011284949.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3F6YzIwMTc=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3F6YzIwMTc_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200220112848992.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3F6YzIwMTc=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3F6YzIwMTc_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20200220112848960.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3F6YzIwMTc=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3F6YzIwMTc_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20200220112849124.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3F6YzIwMTc=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3F6YzIwMTc_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/2020022011284947.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3F6YzIwMTc=,size_16,color_FFFFFF,t_70
[2020022011284954.jpg]: https://img-blog.csdnimg.cn/2020022011284954.jpg
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3F6YzIwMTc_size_16_color_FFFFFF_t_70 6]: https://img-blog.csdnimg.cn/2020022011284966.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3F6YzIwMTc=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3F6YzIwMTc_size_16_color_FFFFFF_t_70 7]: https://img-blog.csdnimg.cn/2020022011284986.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3F6YzIwMTc=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3F6YzIwMTc_size_16_color_FFFFFF_t_70 8]: https://img-blog.csdnimg.cn/20200220112849107.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3F6YzIwMTc=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3F6YzIwMTc_size_16_color_FFFFFF_t_70 9]: https://img-blog.csdnimg.cn/20200220112849128.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3F6YzIwMTc=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3F6YzIwMTc_size_16_color_FFFFFF_t_70 10]: https://img-blog.csdnimg.cn/20200220112849243.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3F6YzIwMTc=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3F6YzIwMTc_size_16_color_FFFFFF_t_70 11]: https://img-blog.csdnimg.cn/2020022011284921.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3F6YzIwMTc=,size_16,color_FFFFFF,t_70
[https_www.elastic.co_guide_en_elasticsearch_reference_current_query-dsl-bool-query.html]: https://www.elastic.co/guide/en/elasticsearch/reference/current/query-dsl-bool-query.html
[20200220112848742.jpg]: https://img-blog.csdnimg.cn/20200220112848742.jpg
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3F6YzIwMTc_size_16_color_FFFFFF_t_70 12]: https://img-blog.csdnimg.cn/20200220112849135.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3F6YzIwMTc=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3F6YzIwMTc_size_16_color_FFFFFF_t_70 13]: https://img-blog.csdnimg.cn/20200220112849244.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3F6YzIwMTc=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3F6YzIwMTc_size_16_color_FFFFFF_t_70 14]: https://img-blog.csdnimg.cn/2020022011284983.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3F6YzIwMTc=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3F6YzIwMTc_size_16_color_FFFFFF_t_70 15]: https://img-blog.csdnimg.cn/20200220112848983.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3F6YzIwMTc=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3F6YzIwMTc_size_16_color_FFFFFF_t_70 16]: https://img-blog.csdnimg.cn/20200220112849170.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3F6YzIwMTc=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3F6YzIwMTc_size_16_color_FFFFFF_t_70 17]: https://img-blog.csdnimg.cn/20200220112849240.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3F6YzIwMTc=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3F6YzIwMTc_size_16_color_FFFFFF_t_70 18]: https://img-blog.csdnimg.cn/2020022011284953.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3F6YzIwMTc=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3F6YzIwMTc_size_16_color_FFFFFF_t_70 19]: https://img-blog.csdnimg.cn/20200220112849160.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3F6YzIwMTc=,size_16,color_FFFFFF,t_70
[20200220112848841.jpg]: https://img-blog.csdnimg.cn/20200220112848841.jpg
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3F6YzIwMTc_size_16_color_FFFFFF_t_70 20]: https://img-blog.csdnimg.cn/2020022011284923.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3F6YzIwMTc=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3F6YzIwMTc_size_16_color_FFFFFF_t_70 21]: https://img-blog.csdnimg.cn/2020022011284954.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3F6YzIwMTc=,size_16,color_FFFFFF,t_70
[20200220112848746.jpg]: https://img-blog.csdnimg.cn/20200220112848746.jpg
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3F6YzIwMTc_size_16_color_FFFFFF_t_70 22]: https://img-blog.csdnimg.cn/20200220112848989.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3F6YzIwMTc=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3F6YzIwMTc_size_16_color_FFFFFF_t_70 23]: https://img-blog.csdnimg.cn/20200220112849234.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3F6YzIwMTc=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3F6YzIwMTc_size_16_color_FFFFFF_t_70 24]: https://img-blog.csdnimg.cn/2020022011284916.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3F6YzIwMTc=,size_16,color_FFFFFF,t_70
[20200220112848957.jpg]: https://img-blog.csdnimg.cn/20200220112848957.jpg
[20200220112848747.jpg]: https://img-blog.csdnimg.cn/20200220112848747.jpg
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3F6YzIwMTc_size_16_color_FFFFFF_t_70 25]: https://img-blog.csdnimg.cn/20200220112849173.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3F6YzIwMTc=,size_16,color_FFFFFF,t_70