devbox
神奇cpp
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

Elastic搜索

作者：神奇cpp | 2024-08-20 07:14:39

赞

踩

elastic 页面根据关键词查询

1、前端

  • 规格选项：点击规格选项，需要拼凑条件

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

  1. 	"specList": {
  2. 		"机身颜色": "金色",
  3.         "内存": "3GB"
  4. 	},

1.2、前端实现

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

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

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

    • 如果选项值不为Null，添加条件
    • 如果选项值为Null，删除条件

  1. specSearch(specName, optionName, e) {
  2.    //参数1：specName 规格名称
  3.    //参数2：optionName 规格选项的值
  4.    //1) 处理条件：选择值，如果存在添加条件，如果不存在删除条件
  5.     if (optionName){
  6.       //存在
  7.       this.searchMap.specList[specName] = optionName;
  8.     } else {
  9.       //不存在
  10.       delete this.searchMap.specList[specName];
  11.     }
  12.       
  13.       //重新查询
  14.       this.searchList();
  15.     
  16.   //方式1：jquery代码 处理回显
  17.   //获得事件源 a 标签，再获得父标签<dd>，再添加用时
  18.   $(e.target).parent().addClass("cur");
  19.   
  20.   //获得 a 标签父元素的所有，将样式移除
  21.   $(e.target).parent().siblings().removeClass("cur");
  22.     
  23. },

1.2.1、品牌查询

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

  1.    brandSearch(bid) {
  2.       //切换品牌
  3.       this.searchMap.brandId = bid;
  4.       //查询
  5.       this.searchList();
  6.     },

1.2.2、关键字查询

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

    1.   data() {
    2.     return {
    3.       keyword: ""
    4.     };
    5.   }

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

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

    • sotre/index.js

      1. //state区域，相当于定义变量
      2. export const state = () => ({
      3.     user: null,
      4.     keyword: null
      5. })
      6.  
      7. //mutations区域，用于修改数据
      8. export const mutations = {
      9.     setData(state, obj) {
      10.         state[obj.key] = obj.value
      11.     }
      12. }

    • HeaderSearch.vue

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

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

    1.   watch: {
    2.     "$store.state.keyword": 
    3. function(newValue, oldValue) {
    4.       //添加 keyword 查询条件
    5.       this.searchMap.keyword = newValue;
    6.       //查询
    7.       this.searchList();
    8.     }
    9.   }

1.2.3、排序

  • 价格的需求：

    • 第一次点击时，按照价格升序进行排序
    • 第一次之后，按照当前排序取反进行操作。

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

    1.   <dl>
    2.             <dt>排序：</dt>
    3.             <dd :class="{'cur': searchMap.sortBy == 'xl'}">
    4.               <a href @click.prevent="sortSearch('xl')">销量</a>
    5.             </dd>
    6.             <dd :class="{'cur': searchMap.sortBy == 'jg'}">
    7.               <a href @click.prevent="sortSearch('jg')">
    8.                 价格
    9.                 <!-- 升序：价格由低到高 -->
    10.                 <span v-if="searchMap.sortBy == 'jg' && searchMap.sortWay=='asc'">↑</span>
    11.                 <!-- 降序：价格由高到低 -->
    12.                 <span v-if="searchMap.sortBy == 'jg' && searchMap.sortWay=='desc'">↓</span>
    13.               </a>
    14.             </dd>
    15.             <dd :class="{'cur': searchMap.sortBy == 'pl'}">
    16.               <a href @click.prevent="sortSearch('pl')">评论数</a>
    17.             </dd>
    18.             <dd :class="{'cur': searchMap.sortBy == 'sj'}">
    19.               <a href @click.prevent="sortSearch('sj')">上架时间</a>
    20.             </dd>价格：
    21.             <input
    22.               type="number"
    23.               v-model="searchMap.minPrice"
    24.               style="width:100px"
    25.               placeholder="￥"
    26.             /> -
    27.             <input type="number" v-model="searchMap.maxPrice" style="width:100px" placeholder="￥" />
    28.             <input type="submit" value="搜索" @click.prevent="searchList()" />
    29.           </dl>

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

    1.     sortSearch(sortBy) {
    2.       //第一次点击、之后切换排序方式  
    3.       if (this.searchMap.sortBy == sortBy) {
    4.         //点击第二次切换排序方式
    5.         this.searchMap.sortWay =
    6.           this.searchMap.sortWay == "asc" ? "desc" : "asc";
    7.       } else {
    8.         //第一次默认升序
    9.         this.searchMap.sortBy = sortBy;
    10.         this.searchMap.sortWay = "asc";
    11.       }
    12.       this.searchList();
    13.     }

1.2.4、价格区间

  1. <input type="text" style="width:80px" v-model="searchMap.minPrice" name="" id=""> -
  2. <input type="text" style="width:80px" v-model="searchMap.maxPrice" name="" id="">
  3. <input type="button" @click.prevent="searchList" value="搜索">

1.2.5、分页

  • 1、拷贝分页组件

    1. <template>
    2.   <div class="page mt20">
    3.     <a href v-if="page > 1" @click.prevent="pageClick(1)">首页</a>
    4.     <a href v-if="page > 1" @click.prevent="pageClick(page-1)">上一页</a>
    5.     <a
    6.       href
    7.       v-for="n in pageRange"
    8.       :key="n"
    9.       @click.prevent="pageClick(n)"
    10.       :class="{'cur': page == n}"
    11.     >{{n}}</a>
    12.     <a href v-if="page < totalPage" @click.prevent="pageClick(page+1)">下一页</a>
    13.     <a href v-if="page < totalPage" @click.prevent="pageClick(totalPage)">尾页</a>&nbsp;&nbsp;
    14.     <span>
    15.       <em>
    16.         共{{totalPage}}页&nbsp;&nbsp;到第
    17.         <input type="text" class="page_num" v-model="goNum" /> 页
    18.       </em>
    19.       <a href class="skipsearch" @click.prevent="pageClick(goNum)">确定</a>
    20.     </span>
    21.   </div>
    22. </template>
    23.  
    24. <script>
    25. export default {
    26.   data() {
    27.     return {
    28.       page: 1, //当前第几页
    29.       totalPage: 0, //总分页数
    30.       goNum: 1 //跳转页面
    31.     };
    32.   },
    33.   methods: {
    34.     pageClick: function(n) {
    35.       //修改当前页
    36.       this.page = parseInt(n);
    37.       //通知调用，修改数据
    38.       this.$emit("page_changed", n);
    39.     }
    40.   },
    41.   computed: {
    42.     //计算属性
    43.     pageRange: function() {
    44.       //计算总分页数 -- 100/20 = 5   102/20 = 6
    45.       if (this.total % this.page_size == 0) {
    46.         //整除
    47.         this.totalPage = this.total / this.page_size;
    48.       } else {
    49.         this.totalPage = parseInt(this.total / this.page_size) + 1;
    50.       }
    51.  
    52.       //分页范围
    53.       let star = Math.max(this.page - 5, 1); //范围开始：得到一个 >=1 的数字
    54.       let end = Math.min(this.page + 4, this.totalPage); //范围结束：得到一个 <=end 的数字
    55.       let arr = [];
    56.       for (let i = star; i <= end; i++) {
    57.         arr.push(i);
    58.       }
    59.       return arr;
    60.     }
    61.   },
    62.   props: ["total", "page_size"] //总条数 , 每页显示个数
    63. };
    64. </script>
    65.  
    66. <style>
    67. </style>

  • 2、导入分页组件

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

    • total属性：总条数 （查询结果）
    • page_size：每页显示个数（查询条件）
    • @page_changed ：每一页需要执行函数
    1. <pagination
    2.    :total="searchResult.count"
    3.    :page_size="searchMap.pageSize"
    4.    @page_changed="pageChanged">
    5. </pagination>

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

    1.    pageChanged: function(pageNum) {
    2.       //根据第几页查询数据
    3.       this.searchMap.pageNum = pageNum;
    4.       //查询
    5.       this.searchList();
    6.     }

2、后端

Controller

  1. package com.czxy.controller;
  2.  
  3. import com.czxy.service.SkuSearchService;
  4. import com.czxy.vo.BaseResult;
  5. import com.czxy.vo.SearchVo;
  6. import org.springframework.web.bind.annotation.PostMapping;
  7. import org.springframework.web.bind.annotation.RequestBody;
  8. import org.springframework.web.bind.annotation.RequestMapping;
  9. import org.springframework.web.bind.annotation.RestController;
  10.  
  11. import javax.annotation.Resource;
  12. import java.util.Map;
  13.  
  14. /**
  15.  * @author 庭前云落
  16.  * @Date 2020/4/15 21:39
  17.  * @description
  18.  */
  19. @RestController
  20. @RequestMapping("/sku")
  21. public class SkuSearchController {
  22.  
  23.     @Resource
  24.     private SkuSearchService skuSearchService;
  25.  
  26.     @PostMapping("/search")
  27.     public BaseResult findSkus(@RequestBody SearchVo searchVo) {
  28.         if (searchVo.getCatId() == null) {
  29.             return BaseResult.error("分类不能为空");
  30.         }
  31.         Map search = skuSearchService.search(searchVo);
  32.         System.out.println(search);
  33.         return BaseResult.ok("查询成功", search);
  34.     }
  35. }
  36.

Service

  1. package com.czxy.service.impl;
  2.  
  3. import com.czxy.repository.SkuRepository;
  4. import com.czxy.service.SkuSearchService;
  5. import com.czxy.vo.ReturnSku;
  6. import com.czxy.vo.SearchSku;
  7. import com.czxy.vo.SearchVo;
  8. import org.apache.commons.lang.StringUtils;
  9. import org.elasticsearch.index.query.BoolQueryBuilder;
  10. import org.elasticsearch.index.query.QueryBuilders;
  11. import org.elasticsearch.search.sort.SortBuilders;
  12. import org.elasticsearch.search.sort.SortOrder;
  13. import org.springframework.data.domain.Page;
  14. import org.springframework.data.domain.PageRequest;
  15. import org.springframework.data.elasticsearch.core.query.NativeSearchQueryBuilder;
  16. import org.springframework.stereotype.Service;
  17.  
  18. import javax.annotation.Resource;
  19. import java.util.ArrayList;
  20. import java.util.HashMap;
  21. import java.util.List;
  22. import java.util.Map;
  23.  
  24. /**
  25.  * @author 庭前云落
  26.  * @Date 2020/4/15 21:40
  27.  * @description
  28.  */
  29. @Service
  30. public class SkuSearchServiceImpl implements SkuSearchService {
  31.     @Resource
  32.     private SkuRepository skuRepository;
  33.  
  34.     public Map search(SearchVo searchVo){
  35.         BoolQueryBuilder boolQueryBuilder = QueryBuilders.boolQuery();
  36.         //分类查询
  37.         boolQueryBuilder.must(QueryBuilders.termQuery("catId",searchVo.getCatId()));
  38.         //关键字查询
  39.         if(StringUtils.isNotBlank(searchVo.getKeyword())){
  40.             boolQueryBuilder.must(QueryBuilders.matchQuery("skuName",searchVo.getKeyword()));
  41.         }
  42.         //品牌查询
  43.         if(searchVo.getBrandId()!=null){
  44.            boolQueryBuilder.must(QueryBuilders.termQuery("brandId",searchVo.getBrandId()));
  45.         }
  46.         //规格查询
  47.         Map<String, String> specList = searchVo.getSpecList();
  48.         if(specList!=null){
  49.             for (Map.Entry<String, String> entry : specList.entrySet()) {
  50.                 String key = entry.getKey();
  51.                 String value = entry.getValue();
  52.                 boolQueryBuilder.must(QueryBuilders.termQuery("spces."+key+".keyword",value));
  53.             }
  54.         }
  55.         if(searchVo.getMaxPrice()!=null&&searchVo.getMaxPrice()!=null){
  56.             boolQueryBuilder.must(QueryBuilders.rangeQuery("price").gte(searchVo.getMinPrice()).lt(searchVo.getMaxPrice()));
  57.         }
  58.         NativeSearchQueryBuilder queryBuilder = new NativeSearchQueryBuilder();
  59.         queryBuilder.withQuery(boolQueryBuilder);
  60.  
  61.  
  62.         if (searchVo.getSortBy()!=null){
  63.             if(searchVo.getSortBy().equals("xl")&&searchVo.getSortWay().equals("asc")){
  64.                 //销量升序
  65.                 queryBuilder.withSort(SortBuilders.fieldSort("sellerCount").order(SortOrder.ASC));
  66.             }else  if(searchVo.getSortBy().equals("xl")&&searchVo.getSortWay().equals("desc")) {
  67.                 // 销量降序
  68.                 queryBuilder.withSort(SortBuilders.fieldSort("sellerCount").order(SortOrder.DESC));
  69.             }else if(searchVo.getSortBy().equals("jg")&&searchVo.getSortWay().equals("asc")){
  70.                 // 价格升序
  71.                 queryBuilder.withSort(SortBuilders.fieldSort("price").order(SortOrder.ASC));
  72.             }else  if(searchVo.getSortBy().equals("jg")&&searchVo.getSortWay().equals("desc")) {
  73.                 // 价格降序
  74.                 queryBuilder.withSort(SortBuilders.fieldSort("price").order(SortOrder.DESC));
  75.             }else if(searchVo.getSortBy().equals("pl")&&searchVo.getSortWay().equals("asc")){
  76.                 // 评论升序
  77.                 queryBuilder.withSort(SortBuilders.fieldSort("commentCount").order(SortOrder.ASC));
  78.             }else  if(searchVo.getSortBy().equals("pl")&&searchVo.getSortWay().equals("desc")) {
  79.                 // 评论降序
  80.                 queryBuilder.withSort(SortBuilders.fieldSort("commentCount").order(SortOrder.DESC));
  81.             }else if(searchVo.getSortBy().equals("sj")&&searchVo.getSortWay().equals("asc")){
  82.                 // 上架时间
  83.                 queryBuilder.withSort(SortBuilders.fieldSort("onSaleTime").order(SortOrder.ASC));
  84.             }else  if(searchVo.getSortBy().equals("sj")&&searchVo.getSortWay().equals("desc")) {
  85.                 // 上架时间
  86.                 queryBuilder.withSort(SortBuilders.fieldSort("onSaleTime").order(SortOrder.DESC));
  87.             }
  88.         }
  89.  
  90.         // 2.2 分页
  91.         queryBuilder.withPageable(PageRequest.of(searchVo.getPageNum() - 1 ,searchVo.getPageSize()));
  92.  
  93.  
  94.         //3 查询,获取结果
  95.         // 3.1 查询
  96.         Page<SearchSku> pageInfo = this.skuRepository.search(queryBuilder.build());
  97.  
  98.         // 2.2 总条数
  99.         long total = pageInfo.getTotalElements();
  100.  
  101.         // 3.3 获取返回结果 ，组装返回数据(SearchSku-->Return)
  102.         List<SearchSku> list = pageInfo.getContent();
  103.  
  104.         List<ReturnSku> returnList = new ArrayList<>();
  105.  
  106.         for(SearchSku sku:list){
  107.             //创建 ReturnSku对象
  108.             ReturnSku rs = new ReturnSku();
  109.             //依次填充数据
  110.             rs.setId(sku.getId().intValue());
  111.             rs.setGoodsName(sku.getSkuName());
  112.             rs.setMidlogo(sku.getLogo());
  113.             rs.setCommentCount(sku.getCommentCount());
  114.             rs.setPrice(sku.getPrice());
  115.  
  116.             returnList.add(rs);
  117.         }
  118.  
  119.         // 3.4 封装
  120.         Map result = new HashMap();
  121.         result.put("count" , total);
  122.         result.put("list" ,returnList);
  123.  
  124.         return result;
  125.     }
  126. }
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/神奇cpp/article/detail/1005839
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号