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,这样得出的是评价的综合得分。

  • 相关阅读:
    CodeForces 734F Anton and School
    CodeForces 733F Drivers Dissatisfaction
    CodeForces 733C Epidemic in Monstropolis
    ZOJ 3498 Javabeans
    ZOJ 3497 Mistwald
    ZOJ 3495 Lego Bricks
    CodeForces 732F Tourist Reform
    CodeForces 732E Sockets
    CodeForces 731E Funny Game
    CodeForces 731D 80-th Level Archeology
  • 原文地址:https://www.cnblogs.com/zeussbook/p/11212271.html
Copyright © 2011-2022 走看看