The search of this module mainly uses solr search engine + Ik word segmentation package and cache redis to achieve a piece of business.

1. Excellent purchase - Highlight

demand

The key words entered by the user are displayed in red font in the title, which is the common highlight in search.

The main idea is to add HTML bold color and other tags to the search keywords in the background, and then the foreground display needs to solve the problem of HTML display instead of text.

Backend code

Modify the service layer code ItemSearchServiceImpl.java

Create a private method to return the results of the query list (highlighted)

 　　/**
     * Search list by keyword
     * @param keywords
     * @return
     */
    private Map searchList(MapsearchMap){

        Map map=newHashMap();
        HighlightQuery query=new SimpleHighlightQuery();
        HighlightOptions highlightOptions=new HighlightOptions().addField("item_title");//Set highlighted fields
        highlightOptions.setSimplePrefix("<em style='color:red'>");//Highlight prefix
        highlightOptions.setSimplePostfix("</em>");//Highlight suffix
        query.setHighlightOptions(highlightOptions);//Set highlight options
        //Query by keyword
        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()){//Cycle highlight entry set
            TbItem item = h.getEntity();//Get original entity class           
            if(h.getHighlights().size()>0 &&h.getHighlights().get(0).getSnipplets().size()>0){
                item.setTitle(h.getHighlights().get(0).getSnipplets().get(0));//Set highlighted results
            }          
        }      
        map.put("rows",page.getContent());
        return map;

    }

Modify the search method of ItemSearchServiceImpl, and call the private method just written.

@Override
    public Map<String, Object> search(MapsearchMap) {
        Map<String,Object>map=new HashMap<>(); 
        //1. Query list    
        map.putAll(searchList(searchMap));
        returnmap;
    }

After testing, we found that the highlighted html code is output as is, which is the security mechanism adopted by angularJS to prevent html attacks. How do we display html results on the page? We will use the trustAsHtml method of the $sce service to implement the transformation.

Front-end code

Because this function has certain generality, we can simplify development through the filter of angularJS. In this way, it is very convenient to write once and call. Look at the code:

(1) modify base.js

// Define module:

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

/*$sce Service write filter*/
app.filter('trustHtml',['$sce',function($sce){
　　returnfunction(data){
　　return $sce.trustAsHtml(data);
  }
}]);

Ng bind html instruction is used to display html content (2) use filter

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

Vertical line | used to call filter

|It's just the vertical line. It looks a little slanted because of the font.