代码已上传至GitHub
地址：https://github.com/ylw-github/pingyougou.git
版本：59815018ccbe7ad5ce16749a5b92400bae27573e
打开搜索页面，在搜索框输入要搜索的关键字，点击搜索按钮即可进行搜索，展示搜索结果，效果图如下：
后端的代码
代码主要在service层，根据条件使用solr查询，代码如下：
@Service public class ItemSearchServiceImpl implements ItemSearchService { // 注入solr模版对象 @Autowired private SolrTemplate solrTemplate; /** * 需求:根据前台页面传递搜索关键字进行搜索 $scope.searchMap = {"keywords":"华为"}; * * @param searchMap * @return */ public Map<String, Object> searchList(Map<String, Object> searchMap) { // 创建返回值对象,封装结果 Map<String, Object> maps = new HashMap<String, Object>(); // 获取主查询条件 String keywords = (String) searchMap.get("keywords"); // 创建高亮查询SimpleHighlightQuery对象,封装所有查询条件 SimpleHighlightQuery query = new SimpleHighlightQuery(); // 创建criteria对象,封装查询参数 // 指定复制域为查询字段 Criteria criteria = null; // 1,主查询条件 // 判断主查询条件是否为空 if (keywords != null && !"".equals(keywords)) { // 添加条件 criteria = new Criteria("item_keywords").is(keywords); } else { // 查询所有 criteria = new Criteria().expression("*:*"); } // 把条件添加query对象 query.addCriteria(criteria); // 2,高亮设置 // 创建高亮设置对象 HighlightOptions highlightOptions = new HighlightOptions(); // 指定设置高亮域字段 highlightOptions.addField("item_title"); // 设置前缀 highlightOptions.setSimplePrefix("<font color='red'>"); // 设置后缀 highlightOptions.setSimplePostfix("</font>"); // 设置高亮查询 query.setHighlightOptions(highlightOptions); // 3,根据分类查询 // 获取分类参数 String category = (String) searchMap.get("category"); // 判断分类值是否存在 if (category != null && !"".equals(category)) { // 根据分类查询 Criteria criteria2 = new Criteria("item_category").is(category); // 创建过滤对象 FilterQuery filterQuery = new SimpleFilterQuery(criteria2); // 把过滤查询添加query对象 query.addFilterQuery(filterQuery); } // 4,根据品牌过滤查询 // 获取品牌参数 String brand = (String) searchMap.get("brand"); // 判断分类值是否存在 if (brand != null && !"".equals(brand)) { // 根据分类查询 Criteria criteria2 = new Criteria("item_brand").is(brand); // 创建过滤对象 FilterQuery filterQuery = new SimpleFilterQuery(criteria2); // 把过滤查询添加query对象 query.addFilterQuery(filterQuery); } // 5,根据规格查询 // 获取规格对象 Map<String, String> specMap = (Map<String, String>) searchMap .get("spec"); // 获取规格值 for (String key : specMap.keySet()) { String value = (String) specMap.get(key); // 根据分类查询 Criteria criteria2 = new Criteria("item_spec_" + key).is(value); // 创建过滤对象 FilterQuery filterQuery = new SimpleFilterQuery(criteria2); // 把过滤查询添加query对象 query.addFilterQuery(filterQuery); } // 6,价格过滤查询 // 获取价格值 // 数据格式:0-500,500-1000.... String price = (String) searchMap.get("price"); // 判断分类值是否存在 if (price != null && !"".equals(price)) { // 切割价格 String[] prices = price.split("-"); // 判断最低价格如何不是0 if (prices[0] != "0") { // 根据分类查询 Criteria criteria2 = new Criteria("item_price") .greaterThanEqual(prices[0]); // 创建过滤对象 FilterQuery filterQuery = new SimpleFilterQuery(criteria2); // 把过滤查询添加query对象 query.addFilterQuery(filterQuery); } // 判断最高价格不为* if (prices[1] != "*") { // 根据分类查询 Criteria criteria2 = new Criteria("item_price") .lessThanEqual(prices[1]); // 创建过滤对象 FilterQuery filterQuery = new SimpleFilterQuery(criteria2); // 把过滤查询添加query对象 query.addFilterQuery(filterQuery); } } // 执行查询 HighlightPage<TbItem> hpage = solrTemplate.queryForHighlightPage(query, TbItem.class); // 获取高亮 List<TbItem> itemList = hpage.getContent(); // 循环搜索商品集合,获取高亮 for (TbItem tbItem : itemList) { // 获取高亮 List<Highlight> highlights = hpage.getHighlights(tbItem); // 判断高亮是否存在 if (highlights != null && highlights.size() > 0) { // 获取高亮 Highlight highlight = highlights.get(0); // 获取高亮值[{}] List<String> snipplets = highlight.getSnipplets(); // 设置高亮字段 tbItem.setTitle(snipplets.get(0)); } } // 封装结果 maps.put("rows", hpage.getContent()); return maps; } }
前端代码
searchService.js:
//服务层 app.service('searchService',function($http){ //读取列表数据绑定到表单中 this.searchList=function(searchMap){ return $http.post('../searchs',searchMap); }; });
searchController.js:
//控制层 app.controller('searchController', function($scope, $location, searchService) { // 对searchMap进行初始化工作 // 封装页面向后台传递所有搜索参数 $scope.searchMap = { "keywords" : "", "category" : "", "brand" : "", "spec" : {}, "price" : "", "sort" : "", "sortField" : "", "pageNo" : 1, "pageSize" : 30 }; // 主要用来封装主查询条件 // 接受参数,向搜索系统发送搜索请求 $scope.loadkeywords = function() { // 接受页面参数 $scope.searchMap.keywords = $location.search()["keywords"]; // 调用搜索服务 searchService.searchList($scope.searchMap).success(function(data) { // 回调函数结果 $scope.searchResult = data; }); }; // 定义条件搜索方法 $scope.searchList = function() { // 调用service searchService.searchList($scope.searchMap).success(function(data) { // 回调函数结果 $scope.searchResult = data; }); }; //定义添加过滤条件函数 //点击:addFilterCondition('category','手机') $scope.addFilterCondition = function(key,value){ //判断过滤条件类型 if(key=="category" || key=="brand" || key=="price" ){ $scope.searchMap[key]=value; }else{ $scope.searchMap.spec[key]=value; } //调用搜索方法 $scope.searchList(); } //撤销查询选项 $scope.removeSearchItem = function(key){ //判断 if(key=="category" || key=="brand" || key=="price"){ $scope.searchMap[key]=""; }else{ delete $scope.searchMap.spec[key]; } //调用搜索方法 $scope.searchList(); }; });
search.html(显示数据部分):
<div class="goods-list"> <ul class="yui3-g"> <li class="yui3-u-1-5" ng-repeat="entity in searchResult.rows"> <div class="list-wrap"> <div class="p-img"> <a href="item.html" target="_blank"><img src="{{entity.image}}" /></a> </div> <div class="price"> <strong> <em>¥</em> <i>{{entity.price}}</i> </strong> </div> <div class="attr"> <em ng-bind-html="entity.title | trustHtml"></em> </div> <div class="cu"> <em><span>促</span>满一件可参加超值换购</em> </div> <div class="commit"> <i class="command">已有2000人评价</i> </div> <div class="operate"> <a href="success-cart.html" target="_blank" class="sui-btn btn-bordered btn-danger">加入购物车</a> <a href="javascript:void(0);" class="sui-btn btn-bordered">对比</a> <a href="javascript:void(0);" class="sui-btn btn-bordered">关注</a> </div> </div> </li> </ul> </div>
