品优购_day10_课程讲义_V1.3.docx

北京市昌平区建材城西路金燕龙办公楼一层 电话：400-618-9090 品优购电商系统开发 第10章 搜索解决方案-Solr 【2】 传智播客.黑马程序员 课程目标 目标1：实现品优购搜索结果高亮显示功能 目标2：说出品优购搜索的业务规则和实现思路 目标3：完成查询分类列表的功能 目标4：完成缓存品牌和规格数据的功能 目标5：完成显示品牌和规格数据的功能 目标6：完成过滤条件构建的功能 目标7：完成过滤查询的功能 1.品优购-高亮显示 1.1需求分析 将用户输入的关键字在标题中以红色的字体显示出来，就是搜索中常用的高亮显示. 1.2后端代码 修改服务层代码ItemSearchServiceImpl.java 创建私有方法，用于返回查询列表的结果（高亮） /** * 根据关键字搜索列表 * @param keywords * @return */ private Map searchList(Map searchMap){ Map map=new HashMap(); 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(Map searchMap) { Map<String,Object> map=new HashMap<>(); //1.查询列表 map.putAll(searchList(searchMap)); return map; } 1.3前端代码 我们测试后发现高亮显示的html代码原样输出，这是angularJS为了防止html攻击采取的安全机制。我们如何在页面上显示html的结果呢？我们会用到$sce服务的trustAsHtml方法来实现转换。 因为这个功能具有一定通用性，我们可以通过angularJS的过滤器来简化开发，这样只写一次，调用的时候就非常方便了，看代码： 修改base.js // 定义模块: var app = angular.module("pinyougou",[]); /*$sce服务写成过滤器*/ app.filter('trustHtml',['$sce',function($sce){ return function(data){ return $sce.trustAsHtml(data); } }]); 使用过滤器 ng-bind-html指令用于显示html内容 竖线 |用于调用过滤器 <div class="attr" ng-bind-html="item