Java之品优购课程讲义_day10（1）

最新推荐文章于 2021-03-08 05:29:48 发布

转载最新推荐文章于 2021-03-08 05:29:48 发布 · 120 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://blog.51cto.com/13517854/2176657

文章标签：

#java #javascript #前端 #ViewUI

本文介绍如何在品优购项目中实现商品搜索结果的高亮显示，包括后端代码修改和服务层的具体实现，以及前端如何通过AngularJS的$sce服务和自定义过滤器展示高亮后的HTML内容。

品优购-高亮显示
1.1 需求分析
将用户输入的关键字在标题中以红色的字体显示出来，就是搜索中常用的高亮显示.

Java之品优购课程讲义_day10（1）
1.1 后端代码
修改服务层代码 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.1 前端代码
我们测试后发现高亮显示的 html 代码原样输出，这是 angularJS 为了防止 html ×××采取的安全机制。我们如何在页面上显示 html 的结果呢？我们会用到$sce 服务的 trustAsHtml 方法来实现转换。

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

// 定义模块:

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

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

return  function(data){

return  $sce.trustAsHtml(data);

}

}]);

（2）使用过滤器

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

<div class="attr" ng-bind-html="item.title | trustHtml"></div>
|就是竖线，看起来有点斜是因为字体原因。

转载于:https://blog.51cto.com/13517854/2176657