zoukankan      html  css  js  c++  java
  • 品优购商城项目(四)搜索:高亮显示、面板搜索

    这个模块的搜索主要是使用了 solr搜索引擎+Ik分词包,并结合缓存redis实现的一块业务。

    1.品优购-高亮显示

    需求

    将用户输入的关键字在标题中以红色的字体显示出来,就是搜索中常用的高亮显示。

    主要实现的思路是:在后台在查询到的内容中在搜素关键词部分 加上HTML的加粗颜色等其他标签,然后前台显示需要解决以HTML方式展示的问题,而不是文本。

    后端代码

    修改服务层代码ItemSearchServiceImpl.java

    创建私有方法,用于返回查询列表的结果(高亮)

       /**
         * 根据关键字搜索列表
         * @param keywords
         * @return
         */
        private Map searchList(MapsearchMap){
    
            Map map=newHashMap();
            HighlightQuery query=new SimpleHighlightQuery();
            HighlightOptions highlightOptions=new HighlightOptions().addField("item_title");//设置高亮的域
            highlightOptions.setSimplePrefix("<em style='color:red'>");//高亮前缀
            highlightOptions.setSimplePostfix("</em>");//高亮后缀
            query.setHighlightOptions(highlightOptions);//设置高亮选项
            //按照关键字查询
            Criteria criteria=new Criteria("item_keywords").is(searchMap.get("keywords"));
            query.addCriteria(criteria);
            HighlightPage<TbItem>page = solrTemplate.queryForHighlightPage(query, TbItem.class);
            for(HighlightEntry<TbItem>h: page.getHighlighted()){//循环高亮入口集合
                TbItem item = h.getEntity();//获取原实体类           
                if(h.getHighlights().size()>0 &&h.getHighlights().get(0).getSnipplets().size()>0){
                    item.setTitle(h.getHighlights().get(0).getSnipplets().get(0));//设置高亮的结果
                }          
            }      
            map.put("rows",page.getContent());
            return map;
    
        }


    修改ItemSearchServiceImpl 的search方法,调用刚才编写的私有方法 

    @Override
        public Map<String, Object> search(MapsearchMap) {
            Map<String,Object>map=new HashMap<>(); 
            //1.查询列表    
            map.putAll(searchList(searchMap));
            returnmap;
        }

    我们测试后发现高亮显示的html代码原样输出,这是angularJS为了防止html攻击采取的安全机制。我们如何在页面上显示html的结果呢?我们会用到$sce服务的trustAsHtml方法来实现转换。

    前端代码

    因为这个功能具有一定通用性,我们可以通过angularJS的过滤器来简化开发,这样只写一次,调用的时候就非常方便了,看代码:

    (1)修改base.js

    // 定义模块:
    
    var app = angular.module("pinyougou",[]);
    
    /*$sce服务写成过滤器*/
    app.filter('trustHtml',['$sce',function($sce){
      returnfunction(data){
      return $sce.trustAsHtml(data);
      }
    }]);

    ng-bind-html指令用于显示html内容(2)使用过滤器

    <divclass="attr"ng-bind-html="item.title | trustHtml"></div>

    竖线 |用于调用过滤器

    | 就是竖线,看起来有点斜是因为字体原因

    2、面板搜索

    需求

    我们今天要完成的目标是在关键字搜索的基础上添加面板搜索功能。

    面板上有商品分类、品牌、各种规格和价格区间等条件

    业务规则:

    (1)当用户输入关键字搜索后,除了显示列表结果外,还应该显示通过这个关键字搜索到的记录都有哪些商品分类。

    (2)根据第一个商品分类查询对应的模板,根据模板查询出品牌列表

    (3)根据第一个商品分类查询对应的模板,根据模板查询出规格列表

    (4)当用户点击搜索面板的商品分类时,显示按照这个关键字查询结果的基础上,筛选此分类的结果。

    (5)当用户点击搜索面板的品牌时,显示在以上结果的基础上,筛选此品牌的结果

    (6)当用户点击搜索面板的规格时,显示在以上结果的基础上,筛选此规格的结果

    (7)当用户点击价格区间时,显示在以上结果的基础上,按价格进行筛选的结果

    (8)当用户点击搜索面板的相应条件时,隐藏已点击的条件。

    实现思路

    (1)搜索面板的商品分类需要使用Spring Data Solr的分组查询来实现

    (2)为了能够提高查询速度,我们需要把查询面板的品牌、规格数据提前放入redis

    (3)查询条件的构建、面板的隐藏需要使用angularJS来实现

    (4)后端的分类、品牌、规格、价格区间查询需要使用过滤查询来实现

    3、多关键字搜索空格处理

    有些用户会在关键字中间习惯性的输入一些空格,而这个空格输入后,很有可能查询不到结果了。我们测试输入“三星 手机”结果并没有查询到任何结果。所以我们还要对空格至于做一下处理,删除关键字中的空格

    修改pinyougou-search-service的ItemSearchServiceImpl.java

    @Override
    
        publicMap<String, Object> search(Map searchMap) {
            //关键字空格处理
            String keywords = (String) searchMap.get("keywords");
            searchMap.put("keywords", keywords.replace("", ""));
             ..................
    
    }

    这里主要是做了去掉空格的处理

    4、按销量排序(实现思路)

    (1)增加域item_salecount 用于存储每个SKU的销量数据

    (2)编写定时器程序,用于更新每个SKU的销量数据(查询近1个月的销量数据,不是累计数据)

    (3)定时器每天只需执行一次,可以设定为凌晨开始执行。

    定时器可以使用spring task技术来实现,其实个人觉得在数据库增加月销量数据字段更合适,在业务端判断是每月第一天则更新数据为1且增加销售数量,否则增加销售数量。

    5、按评价排序(实现思路)

    与按销量排序思路基本相同,有一个细节需要注意:

    评论分为好评、中评、差评,我们不能简单地将评论数相加,而是应该根据每种评论加权进行统计。比如好评的权重是3 ,中评的权重是1,而差评的权重是 -3,这样得出的是评价的综合得分。

  • 相关阅读:
    EasyUI Combobox组合框(模糊搜索、默认值绑定)
    Asp.Net下载文件时中途失败问题
    VS使用小技巧之——设置调试时启动项目和启动页
    VS使用小技巧之——给代码添加region
    VS使用小技巧之——引入整个文件夹
    VS使用小技巧之——任务列表
    FineUI给表格行内链接设置弹出窗体
    cnpm私服搭建和发布包
    阿里云产品术语和docker
    angularjs1.x的一些知识点整理
  • 原文地址:https://www.cnblogs.com/zeussbook/p/11212271.html
Copyright © 2011-2022 走看看