黑马程序员技术交流社区

标题: 【郑州校区】Java之品优购课程讲义_day10（1） [打印本页]

---

作者: 谷粒姐姐    时间: 2018-9-18 14:51
标题: 【郑州校区】Java之品优购课程讲义_day10（1）

品优购-高亮显示

1.1 需求分析

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

1.1 后端代码

修改服务层代码 ItemSearchServiceImpl.java

创建私有方法，用于返回查询列表的结果（高亮）

[AppleScript] 纯文本查看 复制代码

/**



*根据关键字搜索列表



*@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()){//循环高亮入口集合

[AppleScript] 纯文本查看 复制代码

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 方法，调用刚才编写的私有方法

[AppleScript] 纯文本查看 复制代码

@Override



public  Map<String,  Object>  search(Map  searchMap)  { Map<String,Object>  map=new  HashMap<>();

//1.查询列表



map.putAll(searchList(searchMap));



return  map;



}

1.1 前端代码

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

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

（1）修改 base.js

[AppleScript] 纯文本查看 复制代码

// 定义模块:



var  app  =  angular.module("pinyougou",[]);



/*$sce 服 务 写 成 过 滤 器 */ app.filter('trustHtml',['$sce',function($sce){



return  function(data){





return  $sce.trustAsHtml(data);





}





}]);

[AppleScript] 纯文本查看 复制代码

（2）使用过滤器



ng-bind-html 指令用于显示 html 内容竖线 |用于调用过滤器

[AppleScript] 纯文本查看 复制代码

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

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

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2