Elastic搜索的使用方法

本篇內(nèi)容主要講解“Elastic搜索的使用方法”，感興趣的朋友不妨來(lái)看看。本文介紹的方法操作簡(jiǎn)單快捷，實(shí)用性強(qiáng)。下面就讓小編來(lái)帶大家學(xué)習(xí)“Elastic搜索的使用方法”吧!

網(wǎng)站建設(shè)哪家好，找創(chuàng)新互聯(lián)！專注于網(wǎng)頁(yè)設(shè)計(jì)、網(wǎng)站建設(shè)、微信開發(fā)、重慶小程序開發(fā)、集團(tuán)企業(yè)網(wǎng)站建設(shè)等服務(wù)項(xiàng)目。為回饋新老客戶創(chuàng)新互聯(lián)還提供了博羅免費(fèi)建站歡迎大家使用！

1、前端

規(guī)格選項(xiàng)：點(diǎn)擊規(guī)格選項(xiàng)，需要拼湊條件
點(diǎn)擊不限，需要將對(duì)應(yīng)條件移除

Elastic搜索的使用方法

	"specList": {
		"機(jī)身顏色": "金色",
        "內(nèi)存": "3GB"
	},

1.2、前端實(shí)現(xiàn)

1、修改 ~/pages/_cid.vue組件，給每一個(gè)選項(xiàng)綁定事件(含"不限")

參數(shù)：規(guī)格名稱、選項(xiàng)的值、event(鼠標(biāo)事件對(duì)象，用于回顯)

Elastic搜索的使用方法

2、編寫specSearch函數(shù)，用于操作data查詢條件，需要在searchMap添加specList條件

如果選項(xiàng)值不為Null，添加條件
如果選項(xiàng)值為Null，刪除條件

Elastic搜索的使用方法

specSearch(specName, optionName, e) {
   //參數(shù)1：specName 規(guī)格名稱
   //參數(shù)2：optionName 規(guī)格選項(xiàng)的值
   //1) 處理?xiàng)l件：選擇值，如果存在添加條件，如果不存在刪除條件
    if (optionName){
      //存在
      this.searchMap.specList[specName] = optionName;
    } else {
      //不存在
      delete this.searchMap.specList[specName];
    }
      
      //重新查詢
      this.searchList();
    
  //方式1：jquery代碼 處理回顯
  //獲得事件源 a 標(biāo)簽，再獲得父標(biāo)簽，再添加用時(shí)
  $(e.target).parent().addClass("cur");
  
  //獲得 a 標(biāo)簽父元素的所有，將樣式移除
  $(e.target).parent().siblings().removeClass("cur");
    
},

1.2.1、品牌查詢

需要使用修改后的品牌進(jìn)行查詢

   brandSearch(bid) {
      //切換品牌
      this.searchMap.brandId = bid;
      //查詢
      this.searchList();
    },

1.2.2、關(guān)鍵字查詢

Elastic搜索的使用方法

1、修改頭部搜索的組件，添加keyword變量與文本框進(jìn)行數(shù)據(jù)綁，給搜索按鈕綁定事件
```
  data() {
    return {
      keyword: ""
    };
  }
```

Elastic搜索的使用方法

2、操作vuex，將keyword保存到vuex中

注意：vuex中必須有對(duì)應(yīng)的變量

sotre/index.js

//state區(qū)域，相當(dāng)于定義變量
export const state = () => ({
    user: null,
    keyword: null
})

//mutations區(qū)域，用于修改數(shù)據(jù)
export const mutations = {
    setData(state, obj) {
        state[obj.key] = obj.value
    }
}

HeaderSearch.vue

Elastic搜索的使用方法

3、修改列表頁(yè)面，添加 watch 對(duì) vuex 中keyword進(jìn)行監(jiān)控，如果數(shù)據(jù)發(fā)生改變進(jìn)行查詢

注意：在 watch 只能使用普通fuction，不能使用箭頭函數(shù)

  watch: {
    "$store.state.keyword": 
function(newValue, oldValue) {
      //添加 keyword 查詢條件
      this.searchMap.keyword = newValue;
      //查詢
      this.searchList();
    }
  }

1.2.3、排序

Elastic搜索的使用方法

價(jià)格的需求：

第一次點(diǎn)擊時(shí)，按照價(jià)格升序進(jìn)行排序
第一次之后，按照當(dāng)前排序取反進(jìn)行操作。

1、給排序的按鈕綁定事件，傳遞唯一標(biāo)識(shí)(xl、sj等)、點(diǎn)擊后加上高亮

  
            排序：
            
              銷量
            
            
              
                價(jià)格
                
                ↑
                
                ↓
              
            
            
              評(píng)論數(shù)
            
            
              上架時(shí)間
            價(jià)格：
             -

2、編寫排序函數(shù) sortSearch，根據(jù)點(diǎn)擊次數(shù)，修改升降序方法

    sortSearch(sortBy) {
      //第一次點(diǎn)擊、之后切換排序方式  
      if (this.searchMap.sortBy == sortBy) {
        //點(diǎn)擊第二次切換排序方式
        this.searchMap.sortWay =
          this.searchMap.sortWay == "asc" ? "desc" : "asc";
      } else {
        //第一次默認(rèn)升序
        this.searchMap.sortBy = sortBy;
        this.searchMap.sortWay = "asc";
      }
      this.searchList();
    }

1.2.4、價(jià)格區(qū)間

Elastic搜索的使用方法

1.2.5、分頁(yè)

1、拷貝分頁(yè)組件

2、導(dǎo)入分頁(yè)組件

Elastic搜索的使用方法

3、使用分頁(yè)組件，總條數(shù)、每頁(yè)顯示的個(gè)數(shù)、回調(diào)函數(shù)

total屬性：總條數(shù) （查詢結(jié)果）
page_size：每頁(yè)顯示個(gè)數(shù)（查詢條件）
@page_changed ：每一頁(yè)需要執(zhí)行函數(shù)

4、編寫回調(diào)函數(shù)，處理頁(yè)面切換

   pageChanged: function(pageNum) {
      //根據(jù)第幾頁(yè)查詢數(shù)據(jù)
      this.searchMap.pageNum = pageNum;
      //查詢
      this.searchList();
    }

2、后端

Controller

package com.czxy.controller;

import com.czxy.service.SkuSearchService;
import com.czxy.vo.BaseResult;
import com.czxy.vo.SearchVo;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import javax.annotation.Resource;
import java.util.Map;

/**
 * @author 庭前云落
 * @Date 2020/4/15 21:39
 * @description
 */
@RestController
@RequestMapping("/sku")
public class SkuSearchController {

    @Resource
    private SkuSearchService skuSearchService;

    @PostMapping("/search")
    public BaseResult findSkus(@RequestBody SearchVo searchVo) {
        if (searchVo.getCatId() == null) {
            return BaseResult.error("分類不能為空");
        }
        Map search = skuSearchService.search(searchVo);
        System.out.println(search);
        return BaseResult.ok("查詢成功", search);
    }
}

Service

package com.czxy.service.impl;

import com.czxy.repository.SkuRepository;
import com.czxy.service.SkuSearchService;
import com.czxy.vo.ReturnSku;
import com.czxy.vo.SearchSku;
import com.czxy.vo.SearchVo;
import org.apache.commons.lang.StringUtils;
import org.elasticsearch.index.query.BoolQueryBuilder;
import org.elasticsearch.index.query.QueryBuilders;
import org.elasticsearch.search.sort.SortBuilders;
import org.elasticsearch.search.sort.SortOrder;
import org.springframework.data.domain.Page;
import org.springframework.data.domain.PageRequest;
import org.springframework.data.elasticsearch.core.query.NativeSearchQueryBuilder;
import org.springframework.stereotype.Service;

import javax.annotation.Resource;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

/**
 * @author 庭前云落
 * @Date 2020/4/15 21:40
 * @description
 */
@Service
public class SkuSearchServiceImpl implements SkuSearchService {
    @Resource
    private SkuRepository skuRepository;

    public Map search(SearchVo searchVo){
        BoolQueryBuilder boolQueryBuilder = QueryBuilders.boolQuery();
        //分類查詢
        boolQueryBuilder.must(QueryBuilders.termQuery("catId",searchVo.getCatId()));
        //關(guān)鍵字查詢
        if(StringUtils.isNotBlank(searchVo.getKeyword())){
            boolQueryBuilder.must(QueryBuilders.matchQuery("skuName",searchVo.getKeyword()));
        }
        //品牌查詢
        if(searchVo.getBrandId()!=null){
           boolQueryBuilder.must(QueryBuilders.termQuery("brandId",searchVo.getBrandId()));
        }
        //規(guī)格查詢
        Map specList = searchVo.getSpecList();
        if(specList!=null){
            for (Map.Entry entry : specList.entrySet()) {
                String key = entry.getKey();
                String value = entry.getValue();
                boolQueryBuilder.must(QueryBuilders.termQuery("spces."+key+".keyword",value));
            }
        }
        if(searchVo.getMaxPrice()!=null&&searchVo.getMaxPrice()!=null){
            boolQueryBuilder.must(QueryBuilders.rangeQuery("price").gte(searchVo.getMinPrice()).lt(searchVo.getMaxPrice()));
        }
        NativeSearchQueryBuilder queryBuilder = new NativeSearchQueryBuilder();
        queryBuilder.withQuery(boolQueryBuilder);


        if (searchVo.getSortBy()!=null){
            if(searchVo.getSortBy().equals("xl")&&searchVo.getSortWay().equals("asc")){
                //銷量升序
                queryBuilder.withSort(SortBuilders.fieldSort("sellerCount").order(SortOrder.ASC));
            }else  if(searchVo.getSortBy().equals("xl")&&searchVo.getSortWay().equals("desc")) {
                // 銷量降序
                queryBuilder.withSort(SortBuilders.fieldSort("sellerCount").order(SortOrder.DESC));
            }else if(searchVo.getSortBy().equals("jg")&&searchVo.getSortWay().equals("asc")){
                // 價(jià)格升序
                queryBuilder.withSort(SortBuilders.fieldSort("price").order(SortOrder.ASC));
            }else  if(searchVo.getSortBy().equals("jg")&&searchVo.getSortWay().equals("desc")) {
                // 價(jià)格降序
                queryBuilder.withSort(SortBuilders.fieldSort("price").order(SortOrder.DESC));
            }else if(searchVo.getSortBy().equals("pl")&&searchVo.getSortWay().equals("asc")){
                // 評(píng)論升序
                queryBuilder.withSort(SortBuilders.fieldSort("commentCount").order(SortOrder.ASC));
            }else  if(searchVo.getSortBy().equals("pl")&&searchVo.getSortWay().equals("desc")) {
                // 評(píng)論降序
                queryBuilder.withSort(SortBuilders.fieldSort("commentCount").order(SortOrder.DESC));
            }else if(searchVo.getSortBy().equals("sj")&&searchVo.getSortWay().equals("asc")){
                // 上架時(shí)間
                queryBuilder.withSort(SortBuilders.fieldSort("onSaleTime").order(SortOrder.ASC));
            }else  if(searchVo.getSortBy().equals("sj")&&searchVo.getSortWay().equals("desc")) {
                // 上架時(shí)間
                queryBuilder.withSort(SortBuilders.fieldSort("onSaleTime").order(SortOrder.DESC));
            }
        }

        // 2.2 分頁(yè)
        queryBuilder.withPageable(PageRequest.of(searchVo.getPageNum() - 1 ,searchVo.getPageSize()));


        //3 查詢,獲取結(jié)果
        // 3.1 查詢
        Page pageInfo = this.skuRepository.search(queryBuilder.build());

        // 2.2 總條數(shù)
        long total = pageInfo.getTotalElements();

        // 3.3 獲取返回結(jié)果 ，組裝返回?cái)?shù)據(jù)(SearchSku-->Return)
        List list = pageInfo.getContent();

        List returnList = new ArrayList<>();

        for(SearchSku sku:list){
            //創(chuàng)建 ReturnSku對(duì)象
            ReturnSku rs = new ReturnSku();
            //依次填充數(shù)據(jù)
            rs.setId(sku.getId().intValue());
            rs.setGoodsName(sku.getSkuName());
            rs.setMidlogo(sku.getLogo());
            rs.setCommentCount(sku.getCommentCount());
            rs.setPrice(sku.getPrice());

            returnList.add(rs);
        }

        // 3.4 封裝
        Map result = new HashMap();
        result.put("count" , total);
        result.put("list" ,returnList);

        return result;
    }
}

到此，相信大家對(duì)“Elastic搜索的使用方法”有了更深的了解，不妨來(lái)實(shí)際操作一番吧！這里是創(chuàng)新互聯(lián)網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！

文章標(biāo)題：Elastic搜索的使用方法
文章分享：http://weahome.cn/article/gphjoo.html

真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

Elastic搜索的使用方法

1、前端

1.2、前端實(shí)現(xiàn)

1.2.1、品牌查詢

1.2.2、關(guān)鍵字查詢

1.2.3、排序

1.2.4、價(jià)格區(qū)間

1.2.5、分頁(yè)

2、后端

其他資訊

網(wǎng)站制作

企業(yè)服務(wù)

網(wǎng)站建設(shè)

服務(wù)器托管

真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

Elastic搜索的使用方法

1、前端

1.2、前端實(shí)現(xiàn)

1.2.1、品牌查詢

1.2.2、關(guān)鍵字查詢

1.2.3、排序

1.2.4、價(jià)格區(qū)間

1.2.5、分頁(yè)

2、后端

其他資訊

網(wǎng)站制作

企業(yè)服務(wù)

網(wǎng)站建設(shè)

服務(wù)器托管

1、前端

1.2.2、關(guān)鍵字查詢

1.2.3、排序

1.2.4、價(jià)格區(qū)間

1.2.5、分頁(yè)