网创优客建站品牌官网
为成都网站建设公司企业提供高品质网站建设
热线:028-86922220
成都专业网站建设公司

定制建站费用3500元

符合中小企业对网站设计、功能常规化式的企业展示型网站建设

成都品牌网站建设

品牌网站建设费用6000元

本套餐主要针对企业品牌型网站、中高端设计、前端互动体验...

成都商城网站建设

商城网站建设费用8000元

商城网站建设因基本功能的需求不同费用上面也有很大的差别...

成都微信网站建设

手机微信网站建站3000元

手机微信网站开发、微信官网、微信商城网站...

建站知识

当前位置:首页 > 建站知识

Elastic搜索的使用方法

本篇内容主要讲解“Elastic搜索的使用方法”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“Elastic搜索的使用方法”吧!

网站建设哪家好,找创新互联!专注于网页设计、网站建设、微信开发、重庆小程序开发、集团企业网站建设等服务项目。为回馈新老客户创新互联还提供了博罗免费建站欢迎大家使用!

1、前端

  • 规格选项:点击规格选项,需要拼凑条件

  • 点击不限,需要将对应条件移除

Elastic搜索的使用方法

	"specList": {
		"机身颜色": "金色",
        "内存": "3GB"
	},

1.2、前端实现

  • 1、修改 ~/pages/_cid.vue组件,给每一个选项绑定事件(含"不限")

    • 参数:规格名称、选项的值、event(鼠标事件对象,用于回显)

Elastic搜索的使用方法

  • 2、编写specSearch函数,用于操作data查询条件,需要在searchMap添加specList条件

    • 如果选项值不为Null,添加条件

    • 如果选项值为Null,删除条件

Elastic搜索的使用方法

specSearch(specName, optionName, e) {
   //参数1:specName 规格名称
   //参数2:optionName 规格选项的值
   //1) 处理条件:选择值,如果存在添加条件,如果不存在删除条件
    if (optionName){
      //存在
      this.searchMap.specList[specName] = optionName;
    } else {
      //不存在
      delete this.searchMap.specList[specName];
    }
      
      //重新查询
      this.searchList();
    
  //方式1:jquery代码 处理回显
  //获得事件源 a 标签,再获得父标签
,再添加用时   $(e.target).parent().addClass("cur");      //获得 a 标签父元素的所有,将样式移除   $(e.target).parent().siblings().removeClass("cur");      },

1.2.1、品牌查询

需要使用修改后的品牌进行查询

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

1.2.2、关键字查询

Elastic搜索的使用方法

  • 1、修改头部搜索的组件,添加keyword变量与文本框进行数据绑,给搜索按钮绑定事件

      data() {
        return {
          keyword: ""
        };
      }

Elastic搜索的使用方法

  • 2、操作vuex,将keyword保存到vuex中

    • 注意:vuex中必须有对应的变量

    • sotre/index.js

      //state区域,相当于定义变量
      export const state = () => ({
          user: null,
          keyword: null
      })
      
      //mutations区域,用于修改数据
      export const mutations = {
          setData(state, obj) {
              state[obj.key] = obj.value
          }
      }

    • HeaderSearch.vue

Elastic搜索的使用方法

  • 3、修改列表页面,添加 watch 对 vuex 中keyword进行监控,如果数据发生改变进行查询

  • 注意:在 watch 只能使用普通fuction,不能使用箭头函数

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

1.2.3、排序

Elastic搜索的使用方法

  • 价格的需求:

    • 第一次点击时,按照价格升序进行排序

    • 第一次之后,按照当前排序取反进行操作。

  • 1、给排序的按钮绑定事件,传递唯一标识(xl、sj等)、点击后加上高亮

      
                
    排序:
                               销量                                                          价格                                  ↑                                  ↓                                                        评论数                                         上架时间             价格:              -                                     

  • 2、编写排序函数 sortSearch,根据点击次数,修改升降序方法

        sortSearch(sortBy) {
          //第一次点击、之后切换排序方式  
          if (this.searchMap.sortBy == sortBy) {
            //点击第二次切换排序方式
            this.searchMap.sortWay =
              this.searchMap.sortWay == "asc" ? "desc" : "asc";
          } else {
            //第一次默认升序
            this.searchMap.sortBy = sortBy;
            this.searchMap.sortWay = "asc";
          }
          this.searchList();
        }

1.2.4、价格区间

Elastic搜索的使用方法

 -

1.2.5、分页

  • 1、拷贝分页组件

    
    
    
    
    

  • 2、导入分页组件

Elastic搜索的使用方法

  • 3、使用分页组件,总条数、每页显示的个数、回调函数

    
    

    • total属性:总条数 (查询结果)

    • page_size:每页显示个数(查询条件)

    • @page_changed :每一页需要执行函数

  • 4、编写回调函数,处理页面切换

       pageChanged: function(pageNum) {
          //根据第几页查询数据
          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()));
        //关键字查询
        if(StringUtils.isNotBlank(searchVo.getKeyword())){
            boolQueryBuilder.must(QueryBuilders.matchQuery("skuName",searchVo.getKeyword()));
        }
        //品牌查询
        if(searchVo.getBrandId()!=null){
           boolQueryBuilder.must(QueryBuilders.termQuery("brandId",searchVo.getBrandId()));
        }
        //规格查询
        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")){
                // 价格升序
                queryBuilder.withSort(SortBuilders.fieldSort("price").order(SortOrder.ASC));
            }else  if(searchVo.getSortBy().equals("jg")&&searchVo.getSortWay().equals("desc")) {
                // 价格降序
                queryBuilder.withSort(SortBuilders.fieldSort("price").order(SortOrder.DESC));
            }else if(searchVo.getSortBy().equals("pl")&&searchVo.getSortWay().equals("asc")){
                // 评论升序
                queryBuilder.withSort(SortBuilders.fieldSort("commentCount").order(SortOrder.ASC));
            }else  if(searchVo.getSortBy().equals("pl")&&searchVo.getSortWay().equals("desc")) {
                // 评论降序
                queryBuilder.withSort(SortBuilders.fieldSort("commentCount").order(SortOrder.DESC));
            }else if(searchVo.getSortBy().equals("sj")&&searchVo.getSortWay().equals("asc")){
                // 上架时间
                queryBuilder.withSort(SortBuilders.fieldSort("onSaleTime").order(SortOrder.ASC));
            }else  if(searchVo.getSortBy().equals("sj")&&searchVo.getSortWay().equals("desc")) {
                // 上架时间
                queryBuilder.withSort(SortBuilders.fieldSort("onSaleTime").order(SortOrder.DESC));
            }
        }

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


        //3 查询,获取结果
        // 3.1 查询
        Page pageInfo = this.skuRepository.search(queryBuilder.build());

        // 2.2 总条数
        long total = pageInfo.getTotalElements();

        // 3.3 获取返回结果 ,组装返回数据(SearchSku-->Return)
        List list = pageInfo.getContent();

        List returnList = new ArrayList<>();

        for(SearchSku sku:list){
            //创建 ReturnSku对象
            ReturnSku rs = new ReturnSku();
            //依次填充数据
            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;
    }
}

到此,相信大家对“Elastic搜索的使用方法”有了更深的了解,不妨来实际操作一番吧!这里是创新互联网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!


标题名称:Elastic搜索的使用方法
网页URL:http://bjjierui.cn/article/gphjoo.html

其他资讯