|
【郑州校区】品优购电商系统开发第 10 章 一
品优购电商系统开发
第 10 章
搜索解决方案-Solr 【2】
课程目标
目标 1：实现品优购搜索结果高亮显示功能
目标 2：说出品优购搜索的业务规则和实现思路
目标 3：完成查询分类列表的功能
目标 4：完成缓存品牌和规格数据的功能
目标 5：完成显示品牌和规格数据的功能
目标 6：完成过滤条件构建的功能
目标 7：完成过滤查询的功能
1.品优购-高亮显示
1.1 需求分析
将用户输入的关键字在标题中以红色的字体显示出来，就是搜索中常用的高亮显示
1.2 后端代码
修改服务层代码 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()){//循环高亮入口集合
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.3 前端代码
我们测试后发现高亮显示的 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);
}
}]);
（2）使用过滤器
ng-bind-html 指令用于显示 html 内容
竖线 |用于调用过滤器
[AppleScript] 纯文本查看 复制代码 <div class="attr" ng-bind-html="item.title | trustHtml"></div>
|就是竖线，看起来有点斜是因为字体原因。
|
|
收藏
淘帖
踩
