一、在search.html文件中组合查询字符串

1.1 JS部分

  1.         <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  2.         <script>
  4.             //1. 向字符串类扩展方法
  5.             String.prototype.contains=function(str){
  6.                 return this.indexOf(str) > -1;
  7.             }
  9.             //2. 关键字查询
  10.             function search(){
  11.                 location.href = replaceParamVal(location.href,"keywords",$("#keywords").val());
  12.             }
  14.             //3. 添加分类
  15.             function addCategory(v){
  16.                 //在location.href中添加分类字段
  17.                 location.href = replaceParamVal(location.href,"category",v);
  18.                 return false;
  19.             }
  21.             //4. 显示分类面板，隐藏面包屑导航中的分类
  22.             // function hideCategory(v){
  23.             //     $(v).css("display","none");
  24.             //     categoryPanel.css("display","block");
  25.             // }
  26.             //5. 添加品牌
  27.             function addBrand(v) {
  28.                 location.href = replaceParamVal(location.href,"brand",v);
  29.                 return false;
  30.             }
  32.             //6. 添加规格
  33.             function addSpec(specText,optionName){
  34.                 let val = (specText + ":" + optionName);
  35.                 location.href =  replaceParamVal(location.href,"spec",val,true);
  36.                 return false;
  37.             }
  39.             //7. 添加价格区间
  40.             function addPrice(price){
  41.                 location.href = replaceParamVal(location.href,"price",price);
  42.                 return false;
  43.             }
  45.             //8. 排序价格
  46.             function addSort(sortField,sortOrder){        //参数1：排序字段 参数2：排序升序(asc)还是降序(desc)
  47.                 location.href = replaceParamVal(location.href,"sort",sortOrder + ":" + sortField);
  48.                 return false;
  49.             }
  51.             /**
  52.              * 功能：路径替换函数
  53.              * @param url 目前的url
  54.              * @param paramName 需要替换的参数属性名
  55.              * @param replaceVal 需要替换的参数的新属性值
  56.              * @param forceAdd 该参数是否可以重复查询(spec=网络:4G&spec=机身内存：32G),即一次可以查询多个规格
  57.              * @returns {string} 替换或添加后的url
  58.              */
  59.             function replaceParamVal(url, paramName, replaceVal,forceAdd=false) {
  60.                 let oUrl = decodeURI(url.toString());
  61.                 let nUrl;
  62.                 if (oUrl.contains(paramName+"=")) {
  63.                     let split = replaceVal.split(":");
  64.                     let str = paramName+"="+split[0];
  66.                     if( forceAdd && !oUrl.contains(str)) {
  67.                         if (oUrl.contains("?")) {
  68.                             nUrl = oUrl + "&" + paramName + "=" + replaceVal;
  69.                         } else {
  70.                             nUrl = oUrl + "?" + paramName + "=" + replaceVal;
  71.                         }
  72.                     } else {
  73.                         // /category=手机/ig
  74.                         if(paramName.startsWith("spec")){
  75.                             let re = eval('/(' + str + ':)([^&]*)/gi');
  76.                             nUrl = oUrl.replace(re,  str + ':' + split[1]);
  77.                         }else{
  78.                             let re = eval('/(' + paramName + '=)([^&]*)/gi');
  79.                             nUrl = oUrl.replace(re,  paramName + '=' + replaceVal);
  80.                         }
  81.                     }
  82.                 } else {
  83.                     // http://localhost:9001/student/list?username=aaa&pwd=123
  84.                     if (oUrl.contains("?")) {        //包含?
  85.                         nUrl = oUrl + "&" + paramName + "=" + replaceVal;
  86.                     } else {                        //不包含?
  87.                         nUrl = oUrl + "?" + paramName + "=" + replaceVal;
  88.                     }
  89.                 }
  90.                 return nUrl;
  91.             }
  92.         </script>

1.2 页面部分：

  1. <!-- 1.关键字搜索 -->
  2. <form  class="sui-form form-inline" >
  3.   <!--searchAutoComplete-->
  4.   <div class="input-append">
  5.     <input type="text"  th:value="${vo.keywords}" id="keywords" class="input-error input-xxlarge" />
  6.     <input class="sui-btn btn-xlarge btn-danger" type="button" onclick="search()" value="搜索">
  7.   </div>
  8. </form>
  10. <!-- 2.分类、品牌、规格选项、价格区间、排序一系列查询 -->
  11. <div class="main">
  12.         <div class="py-container">
  13.             <!--bread-->
  14.             <div class="bread">
  15.                 <ul class="fl sui-breadcrumb">
  16.                     <li>
  17.                         <a href="#">全部结果
  18.                         总共：<span th:text="${resultMap.total}"/>条
  19.                         </a>
  20.                     </li>                    
  21.                     <li class="active">智能手机</li>                    
  22.                 </ul>
  24.                 <ul class="tags-choose" id="chooseCategory">
  25.                     <li class="tag">商品分类:<span></span><i class="sui-icon icon-tb-close"
  26.                                                          onclick="hideCategory(this.parentNode.parentNode)"></i></li>
  27.                 </ul>
  28.                 <div class="clearfix"></div>
  29.             </div>
  30.             <!--selector-->
  31.             <div class="clearfix selector">
  32.                 <div class="type-wrap">
  33.                     <div class="fl key">商品分类</div>
  34.                     <div class="fl value">
  35.                         <a href="#" th:each="category : ${resultMap.categoryList}"
  36.                                        th:onclick="addCategory([[${category}]])">[[${category}]] </a>
  37.                     </div>
  38.                     <div class="fl ext"></div>
  39.                 </div>
  40.                 <div class="type-wrap logo">
  41.                     <div class="fl key brand">品牌</div>
  42.                     <div class="value logos">
  43.                         <ul class="logo-list">
  44.                             <!--1.显示品牌-->
  45.                             <li th:each="brand : ${resultMap.brandList}" th:align="center">
  46.                                 <a href="#" th:onclick="addBrand([[${brand.text}]])">[[${brand.text}]]</a>
  47.                             </li>
  48.                         </ul>
  49.                     </div>
  50.                 </div>
  51.                 <!--2.显示规格列表-->
  52.                 <div class="type-wrap" th:each="spec,stat : ${resultMap.specList}">
  53.                     <div class="fl key">[[${spec.text}]]</div>
  54.                     <div class="fl value">
  55.                         <ul class="type-list">
  56.                             <li th:each="option : ${spec.options}">
  57.                                 <a  th:onclick="addSpec([[${spec.text}]],[[${option.optionName}]])">
  58.                                     [[${option.optionName}]]</a>
  59.                             </li>
  60.                         </ul>
  61.                     </div>
  62.                     <div class="fl ext"></div>
  63.                 </div>
  65.                 <div class="type-wrap">
  66.                     <div class="fl key">价格</div>
  67.                     <div class="fl value">
  68.                         <ul class="type-list">
  69.                             <li>
  70.                                 <a onclick="addPrice('0_500')">0-500元</a>
  71.                             </li>
  72.                             <li>
  73.                                 <a onclick="addPrice('500_1000')">500-1000元</a>
  74.                             </li>
  75.                             <li>
  76.                                 <a onclick="addPrice('1000_1500')">1000-1500元</a>
  77.                             </li>
  78.                             <li>
  79.                                 <a onclick="addPrice('1500_2000')">1500-2000元</a>
  80.                             </li>
  81.                             <li>
  82.                                 <a onclick="addPrice('2000_3000')">2000-3000元 </a>
  83.                             </li>
  84.                             <li>
  85.                                 <a onclick="addPrice('3000_*')">3000元以上</a>
  86.                             </li>
  87.                         </ul>
  88.                     </div>
  89.                     <div class="fl ext">
  90.                     </div>
  91.                 </div>
  92.                 <div class="type-wrap">
  93.                     <div class="fl key">更多筛选项</div>
  94.                     <div class="fl value">
  95.                         <ul class="type-list">
  96.                             <li>
  97.                                 <a>特点</a>
  98.                             </li>
  99.                             <li>
  100.                                 <a>系统</a>
  101.                             </li>
  102.                             <li>
  103.                                 <a>手机内存 </a>
  104.                             </li>
  105.                             <li>
  106.                                 <a>单卡双卡</a>
  107.                             </li>
  108.                             <li>
  109.                                 <a>其他</a>
  110.                             </li>
  111.                         </ul>
  112.                     </div>
  113.                     <div class="fl ext">
  114.                     </div>
  115.                 </div>
  116.             </div>
  117.             <!--details-->
  118.             <div class="details">
  119.                 <div class="sui-navbar">
  120.                     <div class="navbar-inner filter">
  121.                         <ul class="sui-nav">
  122.                             <li class="active">
  123.                                 <a href="#">综合</a>
  124.                             </li>
  125.                             <li>
  126.                                 <a href="#">销量</a>
  127.                             </li>
  128.                             <li>
  129.                                 <a href="#">新品</a>
  130.                             </li>
  131.                             <li>
  132.                                 <a href="#">评价</a>
  133.                             </li>
  134.                             <li>
  135.                                 <a href="#"  onclick="addSort('price','asc')">价格↑</a>
  136.                             </li>
  137.                             <li>
  138.                                 <a href="#"  onclick="addSort('price','desc')">价格↓</a>
  139.                             </li>
  140.                         </ul>
  141.                     </div>
  142.                 </div>
  143.                 <div class="goods-list">
  144.                     <ul class="yui3-g">
  145.                         <li class="yui3-u-1-5" th:each="result : ${resultMap.rows}">
  146.                             <div class="list-wrap">
  147.                                 <div class="p-img">
  148.                                     <a href="#" target="_blank">
  149.                                         <img th:src="${result.image}" /></a>
  150.                                 </div>
  151.                                 <div class="price">
  152.                                     <strong>
  153.                                             <em>¥</em>
  154.                                         <i th:text="${result.price}"></i>
  155.                                         </strong>
  156.                                 </div>
  157.                                 <div class="attr">
  158.                                     <em th:utext="${result.title}"></em>
  159.                                 </div>
  160.                                 <div class="cu">
  161.                                     <em></em>
  162.                                 </div>
  163.                                 <div class="commit">
  164.                                     <i class="command">已有2000人评价</i>
  165.                                 </div>
  166.                                 <div class="operate">
  167.                                     <a href="/static/search/success-cart.html" target="_blank" class="sui-btn btn-bordered btn-danger">加入购物车</a>
  168.                                     <a href="javascript:void(0);" class="sui-btn btn-bordered">对比</a>
  169.                                     <a href="javascript:void(0);" class="sui-btn btn-bordered">关注</a>
  170.                                 </div>
  171.                             </div>
  172.                         </li>
  173.                     </ul>
  174.                 </div>
  175.                 <div class="fr page">
  176.                     <div class="sui-pagination pagination-large">
  177.                         <ul>
  178.                             <li class="prev disabled">
  179.                                 <a href="#">«上一页</a>
  180.                             </li>
  181.                             <li class="active">
  182.                                 <a href="#">1</a>
  183.                             </li>
  184.                             <li>
  185.                                 <a href="#">2</a>
  186.                             </li>
  187.                             <li>
  188.                                 <a href="#">3</a>
  189.                             </li>
  190.                             <li>
  191.                                 <a href="#">4</a>
  192.                             </li>
  193.                             <li>
  194.                                 <a href="#">5</a>
  195.                             </li>
  196.                             <li class="dotted"><span>...</span></li>
  197.                             <li class="next">
  198.                                 <a href="#">下一页»</a>
  199.                             </li>
  200.                         </ul>
  201.                         <div><span>共10页&nbsp;</span><span>
  202.       到第
  203.       <input type="text" class="page-num">
  204.       页 <button class="page-confirm" onclick="alert(1)">确定</button></span></div>
  205.                     </div>
  206.                 </div>
  207.             </div>
  208.             <!--hotsale-->
  209.             <div class="clearfix hot-sale">
  210.                 <h4 class="title">热卖商品</h4>
  211.                 <div class="hot-list">
  212.                     <ul class="yui3-g">
  213.                         <li class="yui3-u-1-4">
  214.                             <div class="list-wrap">
  215.                                 <div class="p-img">
  216.                                     <img src="/static/search/img/like_01.png" />
  217.                                 </div>
  218.                                 <div class="attr">
  219.                                     <em>Apple苹果iPhone 6s (A1699)</em>
  220.                                 </div>
  221.                                 <div class="price">
  222.                                     <strong>
  223.                                             <em>¥</em>
  224.                                             <i>4088.00</i>
  225.                                         </strong>
  226.                                 </div>
  227.                                 <div class="commit">
  228.                                     <i class="command">已有700人评价</i>
  229.                                 </div>
  230.                             </div>
  231.                         </li>
  232.                         <li class="yui3-u-1-4">
  233.                             <div class="list-wrap">
  234.                                 <div class="p-img">
  235.                                     <img src="/static/search/img/like_03.png" />
  236.                                 </div>
  237.                                 <div class="attr">
  238.                                     <em>金属A面，360°翻转，APP下单省300！</em>
  239.                                 </div>
  240.                                 <div class="price">
  241.                                     <strong>
  242.                                             <em>¥</em>
  243.                                             <i>4088.00</i>
  244.                                         </strong>
  245.                                 </div>
  246.                                 <div class="commit">
  247.                                     <i class="command">已有700人评价</i>
  248.                                 </div>
  249.                             </div>
  250.                         </li>
  251.                         <li class="yui3-u-1-4">
  252.                             <div class="list-wrap">
  253.                                 <div class="p-img">
  254.                                     <img src="/static/search/img/like_04.png" />
  255.                                 </div>
  256.                                 <div class="attr">
  257.                                     <em>256SSD商务大咖，完爆职场，APP下单立减200</em>
  258.                                 </div>
  259.                                 <div class="price">
  260.                                     <strong>
  261.                                             <em>¥</em>
  262.                                             <i>4068.00</i>
  263.                                         </strong>
  264.                                 </div>
  265.                                 <div class="commit">
  266.                                     <i class="command">已有20人评价</i>
  267.                                 </div>
  268.                             </div>
  269.                         </li>
  270.                         <li class="yui3-u-1-4">
  271.                             <div class="list-wrap">
  272.                                 <div class="p-img">
  273.                                     <img src="/static/search/img/like_02.png" />
  274.                                 </div>
  275.                                 <div class="attr">
  276.                                     <em>Apple苹果iPhone 6s (A1699)</em>
  277.                                 </div>
  278.                                 <div class="price">
  279.                                     <strong>
  280.                                             <em>¥</em>
  281.                                             <i>4088.00</i>
  282.                                         </strong>
  283.                                 </div>
  284.                                 <div class="commit">
  285.                                     <i class="command">已有700人评价</i>
  286.                                 </div>
  287.                             </div>
  288.                         </li>
  289.                     </ul>
  290.                 </div>
  291.             </div>
  292.         </div>
  293.     </div>

二、后端部分：

2.1 定义接收查询参数的对象ItemVo:

  1. @Data
  2. @AllArgsConstructor
  3. @NoArgsConstructor
  4. public class ItemVo implements Serializable {
  5.     //1. 查询关键字对象
  6.     private String keywords;
  7.     //2. 商品分类
  8.     private String category;
  9.     //3. 品牌查询
  10.     private String brand;
  11.     //4. 规格查询(类似：[网络：4G,机身内存：128G])
  12.     private List<String> spec;
  13.     //5. 价格区间（price:500_1000）
  14.     private String price;
  15.     //6. 排序(类似：asc:price)
  16.     private String sort;
  17. }

2.2 ItemSearchServiceImpl服务层定义查询功能：

  1. /**
  2.  * ------------------------------
  3.  * 功能：
  4.  * 作者：WF
  5.  * 微信：hbxfwf13590332912
  6.  * 创建时间：2021/8/2-16:06
  7.  * ------------------------------
  8.  */
  9. @Service
  10. public class ItemSearchServiceImpl implements ItemSearchService {
  12.     @Autowired
  13.     private RedisTemplate redisTemplate;
  14.     @Autowired
  15.     private ElasticsearchRestTemplate restTemplate;
  16.     /**
  17.      * 功能: 根据查询参数得到查询结果
  18.      * 参数:
  19.      * 返回值: java.util.Map
  20.      * 时间: 2021/8/2 16:06
  21.      * @param params
  22.      */
  23.     @Override
  24.     public Map<String, Object> search(ItemVo params) {
  26.         System.out.println("ItemVo = " + params);
  27.         //1. 得到查询关键字
  28.         String keyword = params.getKeywords();
  29.         if(StringUtils.isBlank(keyword)){
  30.             keyword = "华为";
  31.         }
  33.         //2. 定义返回结果
  34.         Map<String, Object> resultMap  = new HashMap<>();
  36.         //3. 定义NativeSearchQueryBuilder对象
  37.         NativeSearchQueryBuilder searchQueryBuilder = new NativeSearchQueryBuilder()
  38.                                                       .withPageable(PageRequest.of(0,10));
  40.         //4. 按关键字进行分组查询
  41.         searchQueryBuilder.addAggregation(AggregationBuilders.terms("categoryGroup")
  42.                                                              .field("category.keyword").size(50));
  44.         //5. 添加高亮查询
  45.         //5.1 设置高亮查询
  46.         searchQueryBuilder.withHighlightBuilder(new HighlightBuilder()
  47.                 .field("title") //设置高亮字段
  48.                 .preTags("<span style='color:red'>")  //设置高亮显示内容的前缀部分
  49.                 .postTags("</span>"));                //设置高亮显示内容的后缀部分
  50.         //6. 添加多字段查询
  51.         searchQueryBuilder.withQuery(QueryBuilders.multiMatchQuery( keyword,"title","brand","category"));
  53.         //7. 定义过滤查询对象(性能优于must查询)，用于组合多个查询
  54.         BoolQueryBuilder boolQueryBuilder = QueryBuilders.boolQuery();
  55.         //7.1 分类查询
  56.         if(StringUtils.isNotBlank(params.getCategory())){
  57.             boolQueryBuilder.filter(QueryBuilders.termQuery("category.keyword",params.getCategory()));
  58.         }
  59.         //7.2 品牌查询
  60.         if(StringUtils.isNotBlank(params.getBrand())){
  61.             boolQueryBuilder.filter(QueryBuilders.termQuery("brand.keyword",params.getBrand()));
  62.         }
  63.         //7.3 添加规格查询
  64.         if(params.getSpec() != null && params.getSpec().size() > 0){
  65.             for (String spec : params.getSpec()) {
  66.                 //7.3.1 处理得到的规格数据
  67.                 String[] split = spec.split(":");
  68.                 //7.3.2 进行规格的过滤查询
  69.                 boolQueryBuilder.filter(QueryBuilders.termQuery("specMap."+split[0]+".keyword",split[1]));
  70.             }
  71.         }
  72.         //7.4 价格区间查询
  73.         String price = params.getPrice();
  74.         if(StringUtils.isNotBlank(price)){
  75.             //7.4.1 拆出出两个价格区间
  76.             String[] s = price.split("_");
  77.             //7.4.2 判断是否结束值带有*号
  78.             if(!s[1].equals("*")){    //0-500
  79.                 boolQueryBuilder.filter(QueryBuilders.rangeQuery("price").gt(s[0]).lte(s[1]));
  80.             }else{                    //3000-*
  81.                 boolQueryBuilder.filter(QueryBuilders.rangeQuery("price").gte(s[0]));
  82.             }
  83.         }
  85.         //7.5 按照升序、降序排序查询
  86.         //7.5.1 得到排序关键字
  87.         String sort = params.getSort();
  88.         if(StringUtils.isNotBlank(sort)){
  89.             //7.5.2 拆分字符串
  90.             String[] split = sort.split(":");       //数组第一部分：升序/降序 第二部分：排序字段
  91.             //7.5.3 进行排序
  92.             searchQueryBuilder.withSort(SortBuilders.fieldSort(split[1]).order(split[0].equals("asc") ? SortOrder.ASC : SortOrder.DESC));
  93.         }
  95.         //7.6 添加过滤查询
  97.         searchQueryBuilder.withFilter(boolQueryBuilder);
  98.         //8. 得到查询对象
  99.         NativeSearchQuery searchQuery = searchQueryBuilder.build();
  101.         //9. 得到命中对象
  102.         SearchHits<ItemEntity> searchHits = restTemplate.search(searchQuery, ItemEntity.class, IndexCoordinates.of("item"));
  103.         //10. 得到命中的结果
  104.         List<SearchHit<ItemEntity>> list = searchHits.getSearchHits();
  105.         //11. 得到命中结果的选项
  106.         long total = searchHits.getTotalHits();     //总记录数
  107.         int totalPage = (int) Math.ceil(total/10.0);//总页数
  108.         //12. 处理命中结果(原始的关键字查询)
  109.         //List<ItemEntity> collect = list.stream().map(m -> m.getContent()).collect(Collectors.toList());
  111.         //13. 得到分组数据
  112.         Aggregations aggregations = searchHits.getAggregations();
  113.         //14. 得到关于分类的分组
  114.         ParsedStringTerms categoryGroupResult = aggregations.get("categoryGroup");
  115.         //15. 处理分类分组的结果数据
  116.         List<String> categoryList = categoryGroupResult.getBuckets().stream()
  117.                 .map(m -> m.getKeyAsString()).collect(Collectors.toList());
  118.         System.out.println("categoryList = " + categoryList);
  120.         //16. 得到高亮查询的结果
  121.         //16.1 定义存放高亮字段的内容
  122.         List<ItemEntity> highlights = new ArrayList<>();
  123.         //16.2 遍历所有命中的数据，从中挑选出高亮数据
  124.         for (SearchHit<ItemEntity> searchHit : list) {   //list: 所有命中的结果对象
  125.             //16.3 可以直接通过高亮字段名称得到此高亮字段的值
  126.             List<String> title = searchHit.getHighlightField("title");
  127.             //16.4 得到未高亮前的数据
  128.             ItemEntity itemEntity = searchHit.getContent();
  129.             //16.5 定义存放高亮字段的字符串
  130.             StringBuffer buffer = new StringBuffer();
  131.             //16.6 组合高亮字段的值
  132.             for (String s : title) {
  133.                 buffer.append(s);
  134.             }
  135.             //16.7 将高亮字段的值重新设置回原来的对象
  136.             itemEntity.setTitle(buffer.toString());
  137.             //16.8 将高亮对象添加到集合中
  138.             highlights.add(itemEntity);
  139.         }
  140.         System.out.println("highlights = " + highlights);
  142.         //17. 从redis中得到品牌及规格列表
  143.         Map brandAndSpecMap = new HashMap();
  144.         //18. 得到用户选择的分类
  145.         String category = params.getCategory();
  146.         if(StringUtils.isBlank(category)){
  147.             if(categoryList != null && categoryList.size() > 0) {
  148.                 category = categoryList.get(0);
  149.             }
  150.         }
  152.         //19. 根据分类进行查询品牌及规格
  153.         brandAndSpecMap = findBrandAndSpecList(category);
  154.         //20. 将品牌及规格列表放到大集合中
  155.         resultMap.putAll(brandAndSpecMap);
  156.         //21. 存放高亮数据到大集合
  157.         resultMap.put("rows",highlights);               //当前分页记录集合
  158.         resultMap.put("total",total);                   //总记录数
  159.         resultMap.put("categoryList",categoryList);     //分类
  160.         resultMap.put("totalPage",totalPage);           //总页数
  162.         return resultMap;
  163.     }
  166.     /**
  167.      * 功能: 根据分类名称得到品牌列表及规格列表
  168.      * 参数:
  169.      * 返回值: java.util.Map
  170.      * 时间: 2021/8/3 8:39
  171.      */
  172.     private Map findBrandAndSpecList(String category) {
  173.         //1. 根据分类名称得到模板id
  174.         Object typeId =  redisTemplate.boundHashOps("itemCats").get(category);
  176.         //2. 根据模板id得到品牌列表
  177.         List<Map> brandList = (List<Map>) redisTemplate.boundHashOps("brandList").get(typeId);
  178.         //3. 根据模板id得到规格列表
  179.         List<Map> specList = (List<Map>) redisTemplate.boundHashOps("specList").get(typeId);
  180.         //4. 定义结果map
  181.         Map brandAndSpecmap = new HashMap();
  182.         //5. 将上面得到的品牌列表及规格列表都放到map中
  183.         brandAndSpecmap.put("brandList",brandList);
  184.         brandAndSpecmap.put("specList",specList);
  185.         //6. 返回
  186.         return brandAndSpecmap;
  187.     }
  188. }

2.3 控制层ItemSearchController：

  1. @Controller
  2. @RequestMapping
  3. public class SearchController {
  5.     @Reference(timeout = 5000)
  6.     private ItemSearchService itemSearchService;
  7.     /**
  8.      * 功能: 根据条件进行查询
  9.      * 参数:
  10.      * params: 代表查询参数
  11.      * model: 代表存放查询到的结果
  12.      * 返回值: java.lang.String
  13.      * 时间: 2021/8/2 16:00
  14.      */
  15.     @RequestMapping({"/","/search.html"})
  16.     public String start(ItemVo vo, Model model){
  17.         //1. 开始进行查询
  18.         Map<String,Object> resultMap = itemSearchService.search(vo);
  19.         model.addAttribute("resultMap",resultMap);
  20.         model.addAttribute("vo",vo);
  21.         return "search";
  22.     }

2.4 查看整体效果：

image.png
image.png