一、分页查询：

1.1 前台：

  1. <!DOCTYPE html>
  2. <html  xmlns:th="http://www.thymeleaf.org">
  4.     <head>
  5.         <meta charset="utf-8" />
  6.         <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
  7.         <title>产品列表页</title>
  8.         <link rel="icon" href="/static/search/assets/img/favicon.ico">
  10.         <link rel="stylesheet" type="text/css" href="/static/search/css/webbase.css" />
  11.         <link rel="stylesheet" type="text/css" href="/static/search/css/pages-list.css" />
  12.         <link rel="stylesheet" type="text/css" href="/static/search/css/widget-cartPanelView.css" />
  14.         <style>
  15.             #chooseCategory{
  16.                 display: none;
  17.             }
  18.             .dotted{
  19.                 display: none;
  20.             }
  21.         </style>
  22.         <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  23.         <script>
  25.             //1. 向字符串类扩展方法
  26.             String.prototype.contains=function(str){
  27.                 return this.indexOf(str) > -1;
  28.             }
  30.             //2. 关键字查询
  31.             function search(){
  32.                 drawPageNav()
  33.                 location.href = replaceParamVal(location.href,"keywords",$("#keywords").val());
  34.             }
  36.             //3. 添加分类
  37.             function addCategory(v){
  38.                 //在location.href中添加分类字段
  39.                 drawPageNav()
  40.                 location.href = replaceParamVal(location.href,"category",v);
  41.                 return false;
  42.             }
  44.             //4. 显示分类面板，隐藏面包屑导航中的分类
  45.             // function hideCategory(v){
  46.             //     $(v).css("display","none");
  47.             //     categoryPanel.css("display","block");
  48.             // }
  49.             //5. 添加品牌
  50.             function addBrand(v) {
  51.                 drawPageNav()
  52.                 location.href = replaceParamVal(location.href,"brand",v);
  53.                 return false;
  54.             }
  56.             //6. 添加规格
  57.             function addSpec(specText,optionName){
  58.                 let val = (specText + ":" + optionName);
  59.                 drawPageNav()
  60.                 location.href =  replaceParamVal(location.href,"spec",val,true);
  61.                 return false;
  62.             }
  64.             //7. 添加价格区间
  65.             function addPrice(price){
  66.                 drawPageNav()
  67.                 location.href = replaceParamVal(location.href,"price",price);
  68.                 return false;
  69.             }
  71.             //8. 排序价格
  72.             function addSort(sortField,sortOrder){        //参数1：排序字段 参数2：排序升序(asc)还是降序(desc)
  73.                 drawPageNav()
  74.                 location.href = replaceParamVal(location.href,"sort",sortOrder + ":" + sortField);
  75.                 return false;
  76.             }
  78.             //9. 分页查询
  79.             function findByPage(p){
  80.                 drawPageNav();
  81.                 location.href = replaceParamVal(location.href,"page",p);
  82.                 return false;
  83.             }
  85.             $(function(){
  86.                 drawPageNav();
  87.             })
  90.             /**
  91.              * 功能: 绘制按钮导航
  92.              * 参数:
  93.              * 返回值:
  94.              * 时间: 2021/8/5 15:10
  95.              */
  96.              function drawPageNav(){
  97.                  //0. 定义代表前后省略号的变量
  98.                 let firstDot = true;
  99.                 let lastDot = true;
  100.                  //1. 得到当前页
  101.                  let page = [[${param.page == null ? 1 : param.page}]]
  102.                  //2. 得到总页数
  103.                 let totalPage = [[${resultMap.totalPage}]]
  104.                 //3. 定义首页和尾页变量
  105.                 let firstPage = 1;
  106.                  let lastPage = totalPage;
  107.                  //4. 根据情况得到首页与尾页
  108.                 if(totalPage > 5){
  109.                     if(page <= 3){
  110.                         lastPage = 5;
  111.                         firstDot = false;
  112.                     }else if(page >= totalPage - 2){
  113.                         firstPage = totalPage - 4;
  114.                         lastDot = false;
  115.                     }else{
  116.                         firstPage = page - 2;
  117.                         lastPage = page + 2;
  118.                     }
  119.                 }else{
  120.                     firstDot = false;
  121.                     lastDot = false;
  122.                 }
  124.                 //5. 根据首页与尾页遍历得到分页导航
  125.                 //5.1 定义最终生成的标签字符串
  126.                 let info = "";
  127.                 for(let i = firstPage;i <= lastPage; i++){
  128.                     info += "<li class="+ (i == page ? 'active' : '') +">";
  129.                     info += "<a onclick=findByPage("+i+")>" + i + "</a>";
  130.                     info += "</li>";
  131.                 }
  133.                 //6. 为pageNav导航层赋值
  134.                 $($(".page ul li")[1]).after(info);
  136.                 //7. 动态生成省略号
  137.                 $(".dotted").css("display","none");
  138.                 if(firstDot){
  139.                     $("#first").css("display","inline-block");
  140.                 }
  141.                 if(lastDot){
  142.                     $("#last").css("display","inline-block");
  143.                 }
  144.             }
  146.             /**
  147.              * 功能：路径替换函数
  148.              * @param url 目前的url
  149.              * @param paramName 需要替换的参数属性名
  150.              * @param replaceVal 需要替换的参数的新属性值
  151.              * @param forceAdd 该参数是否可以重复查询(spec=网络:4G&spec=机身内存：32G),即一次可以查询多个规格
  152.              * @returns {string} 替换或添加后的url
  153.              */
  154.             function replaceParamVal(url, paramName, replaceVal,forceAdd=false) {
  155.                 let oUrl = decodeURI(url.toString());
  156.                 let nUrl = "";
  157.                 if (oUrl.contains(paramName+"=")) {
  159.                     let split = replaceVal.toString().split(":");
  160.                     let str = paramName+"="+split[0];
  162.                     if( forceAdd && !oUrl.contains(str)) {   //第一次时向url添加内容
  163.                         if (oUrl.contains("?")) {
  164.                             nUrl = oUrl + "&" + paramName + "=" + replaceVal;
  165.                         } else {
  166.                             nUrl = oUrl + "?" + paramName + "=" + replaceVal;
  167.                         }
  168.                     } else {
  169.                         // /category=手机/ig
  170.                         if(paramName.startsWith("spec")){   //替换规格内容
  171.                             let re = eval('/(' + str + ':)([^&]*)/gi');
  172.                             nUrl = oUrl.replace(re,  str + ':' + split[1]);
  173.                          } else{                            //替换除规格外的其它内容
  174.                             let re = eval('/(' + paramName + '=)([^&]*)/gi');
  175.                             nUrl = oUrl.replace(re,  paramName + '=' + replaceVal);
  176.                         }
  177.                     }
  178.                 } else {
  179.                     // http://localhost:9001/student/list?username=aaa&pwd=123
  180.                     if (oUrl.contains("?")) {        //包含?
  181.                         nUrl = oUrl + "&" + paramName + "=" + replaceVal;
  182.                     } else {                        //不包含?
  183.                         nUrl = oUrl + "?" + paramName + "=" + replaceVal;
  184.                     }
  185.                 }
  186.                 return nUrl;
  187.             }
  188.         </script>
  189.     </head>
  191.     <body>
  193.         <!-- 头部栏位 -->
  194.         <!--页面顶部-->
  195.         <div id="nav-bottom">
  196.             <!--顶部-->
  197.             <div class="nav-top">
  198.                 <div class="top">
  199.                     <div class="py-container">
  200.                         <div class="shortcut">
  201.                             <ul class="fl">
  202.                                 <li class="f-item">泽易购欢迎您！</li>
  203.                                 <li class="f-item">请
  204.                                     <a href="/static/search/login.html" target="_blank">登录</a>　
  205.                                     <span><a href="/static/search/register.html" target="_blank">免费注册</a></span></li>
  206.                             </ul>
  207.                             <ul class="fr">
  208.                                 <li class="f-item">我的订单</li>
  209.                                 <li class="f-item space"></li>
  210.                                 <li class="f-item">
  211.                                     <a href="/static/search/home.html" target="_blank">我的泽易购</a>
  212.                                 </li>
  213.                                 <li class="f-item space"></li>
  214.                                 <li class="f-item">泽易购会员</li>
  215.                                 <li class="f-item space"></li>
  216.                                 <li class="f-item">企业采购</li>
  217.                                 <li class="f-item space"></li>
  218.                                 <li class="f-item">关注泽易购</li>
  219.                                 <li class="f-item space"></li>
  220.                                 <li class="f-item" id="service">
  221.                                     <span>客户服务</span>
  222.                                     <ul class="service">
  223.                                         <li>
  224.                                             <a href="/static/search/cooperation.html" target="_blank">合作招商</a>
  225.                                         </li>
  226.                                         <li>
  227.                                             <a href="/static/search/shoplogin.html" target="_blank">商家后台</a>
  228.                                         </li>
  229.                                         <li>
  230.                                             <a href="/static/search/cooperation.html" target="_blank">合作招商</a>
  231.                                         </li>
  232.                                         <li>
  233.                                             <a href="#">商家后台</a>
  234.                                         </li>
  235.                                     </ul>
  236.                                 </li>
  237.                                 <li class="f-item space"></li>
  238.                                 <li class="f-item">网站导航</li>
  239.                             </ul>
  240.                         </div>
  241.                     </div>
  242.                 </div>
  244.                 <!--头部-->
  245.                 <div class="header">
  246.                     <div class="py-container">
  247.                         <div class="yui3-g Logo">
  248.                             <div class="yui3-u Left logoArea">
  249.                                 <a class="logo-bd" title="泽易购" href="/static/search/JD-index.html" target="_blank"></a>
  250.                             </div>
  251.                             <div class="yui3-u Center searchArea">
  252.                                 <div class="search">
  254.                                     <form  class="sui-form form-inline" >
  255.                                         <!--searchAutoComplete-->
  256.                                         <div class="input-append">
  257.                                             <input type="text"  th:value="${vo.keywords}" id="keywords" class="input-error input-xxlarge" />
  258.                                             <input class="sui-btn btn-xlarge btn-danger" type="button" onclick="search()" value="搜索">
  259.                                         </div>
  260.                                     </form>
  261.                                 </div>
  262.                                 <div class="hotwords">
  263.                                     <ul>
  264.                                         <li class="f-item">泽易购首发</li>
  265.                                         <li class="f-item">亿元优惠</li>
  266.                                         <li class="f-item">9.9元团购</li>
  267.                                         <li class="f-item">每满99减30</li>
  268.                                         <li class="f-item">亿元优惠</li>
  269.                                         <li class="f-item">9.9元团购</li>
  270.                                         <li class="f-item">办公用品</li>
  272.                                     </ul>
  273.                                 </div>
  274.                             </div>
  275.                             <div class="yui3-u Right shopArea">
  276.                                 <div class="fr shopcar">
  277.                                     <div class="show-shopcar" id="shopcar">
  278.                                         <span class="car"></span>
  279.                                         <a class="sui-btn btn-default btn-xlarge" href="/static/search/cart.html" target="_blank">
  280.                                             <span>我的购物车</span>
  281.                                             <i class="shopnum">0</i>
  282.                                         </a>
  283.                                         <div class="clearfix shopcarlist" id="shopcarlist" style="display:none">
  284.                                             <p>"啊哦，你的购物车还没有商品哦！"</p>
  285.                                             <p>"啊哦，你的购物车还没有商品哦！"</p>
  286.                                         </div>
  287.                                     </div>
  288.                                 </div>
  289.                             </div>
  290.                         </div>
  292.                         <div class="yui3-g NavList">
  293.                             <div class="yui3-u Left all-sort">
  294.                                 <h4>全部商品分类</h4>
  295.                             </div>
  296.                             <div class="yui3-u Center navArea">
  297.                                 <ul class="nav">
  298.                                     <li class="f-item">服装城</li>
  299.                                     <li class="f-item">美妆馆</li>
  300.                                     <li class="f-item">品优超市</li>
  301.                                     <li class="f-item">全球购</li>
  302.                                     <li class="f-item">闪购</li>
  303.                                     <li class="f-item">团购</li>
  304.                                     <li class="f-item">有趣</li>
  305.                                     <li class="f-item">
  306.                                         <a href="/static/search/seckill-index.html" target="_blank">秒杀</a>
  307.                                     </li>
  308.                                 </ul>
  309.                             </div>
  310.                             <div class="yui3-u Right"></div>
  311.                         </div>
  312.                     </div>
  313.                 </div>
  314.             </div>
  315.         </div>
  318.     <!--list-content-->
  319.     <div class="main">
  320.         <div class="py-container">
  321.             <!--bread-->
  322.             <div class="bread">
  323.                 <ul class="fl sui-breadcrumb">
  324.                     <li>
  325.                         <a href="#">全部结果
  326.                         总共：<span th:text="${resultMap.total}"/>条
  327.                         </a>
  328.                     </li>                    
  329.                     <li class="active">智能手机</li>                    
  330.                 </ul>
  332.                 <ul class="tags-choose" id="chooseCategory">
  333.                     <li class="tag">商品分类:<span></span><i class="sui-icon icon-tb-close"
  334.                                                          onclick="hideCategory(this.parentNode.parentNode)"></i></li>
  335.                 </ul>
  336.                 <div class="clearfix"></div>
  337.             </div>
  338.             <!--selector-->
  339.             <div class="clearfix selector">
  340.                 <div class="type-wrap">
  341.                     <div class="fl key">商品分类</div>
  342.                     <div class="fl value">
  343.                         <a href="#" th:each="category : ${resultMap.categoryList}"
  344.                                        th:onclick="addCategory([[${category}]])">[[${category}]] </a>
  345.                     </div>
  346.                     <div class="fl ext"></div>
  347.                 </div>
  348.                 <div class="type-wrap logo">
  349.                     <div class="fl key brand">品牌</div>
  350.                     <div class="value logos">
  351.                         <ul class="logo-list">
  352.                             <!--1.显示品牌-->
  353.                             <li th:each="brand : ${resultMap.brandList}" th:align="center">
  354.                                 <a href="#" th:onclick="addBrand([[${brand.text}]])">[[${brand.text}]]</a>
  355.                             </li>
  356.                         </ul>
  357.                     </div>
  358.                 </div>
  359.                 <!--2.显示规格列表-->
  360.                 <div class="type-wrap" th:each="spec,stat : ${resultMap.specList}">
  361.                     <div class="fl key">[[${spec.text}]]</div>
  362.                     <div class="fl value">
  363.                         <ul class="type-list">
  364.                             <li th:each="option : ${spec.options}">
  365.                                 <a  th:onclick="addSpec([[${spec.text}]],[[${option.optionName}]])">
  366.                                     [[${option.optionName}]]</a>
  367.                             </li>
  368.                         </ul>
  369.                     </div>
  370.                     <div class="fl ext"></div>
  371.                 </div>
  373.                 <div class="type-wrap">
  374.                     <div class="fl key">价格</div>
  375.                     <div class="fl value">
  376.                         <ul class="type-list">
  377.                             <li>
  378.                                 <a onclick="addPrice('0_500')">0-500元</a>
  379.                             </li>
  380.                             <li>
  381.                                 <a onclick="addPrice('500_1000')">500-1000元</a>
  382.                             </li>
  383.                             <li>
  384.                                 <a onclick="addPrice('1000_1500')">1000-1500元</a>
  385.                             </li>
  386.                             <li>
  387.                                 <a onclick="addPrice('1500_2000')">1500-2000元</a>
  388.                             </li>
  389.                             <li>
  390.                                 <a onclick="addPrice('2000_3000')">2000-3000元 </a>
  391.                             </li>
  392.                             <li>
  393.                                 <a onclick="addPrice('3000_*')">3000元以上</a>
  394.                             </li>
  395.                         </ul>
  396.                     </div>
  397.                     <div class="fl ext">
  398.                     </div>
  399.                 </div>
  400.                 <div class="type-wrap">
  401.                     <div class="fl key">更多筛选项</div>
  402.                     <div class="fl value">
  403.                         <ul class="type-list">
  404.                             <li>
  405.                                 <a>特点</a>
  406.                             </li>
  407.                             <li>
  408.                                 <a>系统</a>
  409.                             </li>
  410.                             <li>
  411.                                 <a>手机内存 </a>
  412.                             </li>
  413.                             <li>
  414.                                 <a>单卡双卡</a>
  415.                             </li>
  416.                             <li>
  417.                                 <a>其他</a>
  418.                             </li>
  419.                         </ul>
  420.                     </div>
  421.                     <div class="fl ext">
  422.                     </div>
  423.                 </div>
  424.             </div>
  425.             <!--details-->
  426.             <div class="details">
  427.                 <div class="sui-navbar">
  428.                     <div class="navbar-inner filter">
  429.                         <ul class="sui-nav">
  430.                             <li class="active">
  431.                                 <a href="#">综合</a>
  432.                             </li>
  433.                             <li>
  434.                                 <a href="#">销量</a>
  435.                             </li>
  436.                             <li>
  437.                                 <a href="#">新品</a>
  438.                             </li>
  439.                             <li>
  440.                                 <a href="#">评价</a>
  441.                             </li>
  442.                             <li>
  443.                                 <a href="#"  onclick="addSort('price','asc')">价格↑</a>
  444.                             </li>
  445.                             <li>
  446.                                 <a href="#"  onclick="addSort('price','desc')">价格↓</a>
  447.                             </li>
  448.                         </ul>
  449.                     </div>
  450.                 </div>
  451.                 <div class="goods-list">
  452.                     <ul class="yui3-g">
  453.                         <li class="yui3-u-1-5" th:each="result : ${resultMap.rows}">
  454.                             <div class="list-wrap">
  455.                                 <div class="p-img">
  456.                                     <a href="#" target="_blank">
  457.                                         <img th:src="${result.image}" /></a>
  458.                                 </div>
  459.                                 <div class="price">
  460.                                     <strong>
  461.                                             <em>¥</em>
  462.                                         <i th:text="${result.price}"></i>
  463.                                         </strong>
  464.                                 </div>
  465.                                 <div class="attr">
  466.                                     <em th:utext="${result.title}"></em>
  467.                                 </div>
  468.                                 <div class="cu">
  469.                                     <em></em>
  470.                                 </div>
  471.                                 <div class="commit">
  472.                                     <i class="command">已有2000人评价</i>
  473.                                 </div>
  474.                                 <div class="operate">
  475.                                     <a href="/static/search/success-cart.html" target="_blank" class="sui-btn btn-bordered btn-danger">加入购物车</a>
  476.                                     <a href="javascript:void(0);" class="sui-btn btn-bordered">对比</a>
  477.                                     <a href="javascript:void(0);" class="sui-btn btn-bordered">关注</a>
  478.                                 </div>
  479.                             </div>
  480.                         </li>
  481.                     </ul>
  482.                 </div>
  483.                 <div class="fr page">
  484.                     <div class="sui-pagination pagination-large">
  485.                         <ul>
  486.                             <li class="prev disabled">
  487.                                 <a href="#">«上一页</a>
  488.                             </li>
  489.                             <li class="dotted" id="first"><span>...</span></li>
  490.                             <!--两种处理数字与字符串转换的方式-->
  491.                             <!--<li th:class="${p+'' == param.page+''} ? 'active' : '' "  th:each="p : ${#numbers.sequence(1,resultMap.totalPage)}">-->
  493.                             <!--<li th:class="${#numbers.formatInteger(p,0) == #numbers.formatInteger(param.page,0)} ? 'active' : '' "-->
  494.                             <!--    th:each="p : ${#numbers.sequence(1,resultMap.totalPage)}">-->
  495.                             <!--    <a href="#" th:onclick="findByPage([[${p}]])">[[${p}]]</a>-->
  496.                             <!--</li>-->
  498.                             <li class="dotted" id="last"><span>...</span></li>
  499.                             <li class="next">
  500.                                 <a href="#">下一页»</a>
  501.                             </li>
  502.                         </ul>
  503.                         <div><span>共[[${resultMap.totalPage}]]页&nbsp;</span><span>
  504.       到第
  505.       <input type="text" class="page-num">
  506.       页 <button class="page-confirm" onclick="alert(1)">确定</button></span></div>
  507.                     </div>
  508.                 </div>
  509.             </div>
  510.             <!--hotsale-->
  511.             <div class="clearfix hot-sale">
  512.                 <h4 class="title">热卖商品</h4>
  513.                 <div class="hot-list">
  514.                     <ul class="yui3-g">
  515.                         <li class="yui3-u-1-4">
  516.                             <div class="list-wrap">
  517.                                 <div class="p-img">
  518.                                     <img src="/static/search/img/like_01.png" />
  519.                                 </div>
  520.                                 <div class="attr">
  521.                                     <em>Apple苹果iPhone 6s (A1699)</em>
  522.                                 </div>
  523.                                 <div class="price">
  524.                                     <strong>
  525.                                             <em>¥</em>
  526.                                             <i>4088.00</i>
  527.                                         </strong>
  528.                                 </div>
  529.                                 <div class="commit">
  530.                                     <i class="command">已有700人评价</i>
  531.                                 </div>
  532.                             </div>
  533.                         </li>
  534.                         <li class="yui3-u-1-4">
  535.                             <div class="list-wrap">
  536.                                 <div class="p-img">
  537.                                     <img src="/static/search/img/like_03.png" />
  538.                                 </div>
  539.                                 <div class="attr">
  540.                                     <em>金属A面，360°翻转，APP下单省300！</em>
  541.                                 </div>
  542.                                 <div class="price">
  543.                                     <strong>
  544.                                             <em>¥</em>
  545.                                             <i>4088.00</i>
  546.                                         </strong>
  547.                                 </div>
  548.                                 <div class="commit">
  549.                                     <i class="command">已有700人评价</i>
  550.                                 </div>
  551.                             </div>
  552.                         </li>
  553.                         <li class="yui3-u-1-4">
  554.                             <div class="list-wrap">
  555.                                 <div class="p-img">
  556.                                     <img src="/static/search/img/like_04.png" />
  557.                                 </div>
  558.                                 <div class="attr">
  559.                                     <em>256SSD商务大咖，完爆职场，APP下单立减200</em>
  560.                                 </div>
  561.                                 <div class="price">
  562.                                     <strong>
  563.                                             <em>¥</em>
  564.                                             <i>4068.00</i>
  565.                                         </strong>
  566.                                 </div>
  567.                                 <div class="commit">
  568.                                     <i class="command">已有20人评价</i>
  569.                                 </div>
  570.                             </div>
  571.                         </li>
  572.                         <li class="yui3-u-1-4">
  573.                             <div class="list-wrap">
  574.                                 <div class="p-img">
  575.                                     <img src="/static/search/img/like_02.png" />
  576.                                 </div>
  577.                                 <div class="attr">
  578.                                     <em>Apple苹果iPhone 6s (A1699)</em>
  579.                                 </div>
  580.                                 <div class="price">
  581.                                     <strong>
  582.                                             <em>¥</em>
  583.                                             <i>4088.00</i>
  584.                                         </strong>
  585.                                 </div>
  586.                                 <div class="commit">
  587.                                     <i class="command">已有700人评价</i>
  588.                                 </div>
  589.                             </div>
  590.                         </li>
  591.                     </ul>
  592.                 </div>
  593.             </div>
  594.         </div>
  595.     </div>
  596.     <!-- 底部栏位 -->
  597.     <!--页面底部-->
  598.     <div class="clearfix footer">
  599.         <div class="py-container">
  600.             <div class="footlink">
  601.                 <div class="Mod-service">
  602.                     <ul class="Mod-Service-list">
  603.                         <li class="grid-service-item intro  intro1">
  605.                             <i class="serivce-item fl"></i>
  606.                             <div class="service-text">
  607.                                 <h4>正品保障</h4>
  608.                                 <p>正品保障，提供发票</p>
  609.                             </div>
  611.                         </li>
  612.                         <li class="grid-service-item  intro intro2">
  614.                             <i class="serivce-item fl"></i>
  615.                             <div class="service-text">
  616.                                 <h4>正品保障</h4>
  617.                                 <p>正品保障，提供发票</p>
  618.                             </div>
  620.                         </li>
  621.                         <li class="grid-service-item intro  intro3">
  623.                             <i class="serivce-item fl"></i>
  624.                             <div class="service-text">
  625.                                 <h4>正品保障</h4>
  626.                                 <p>正品保障，提供发票</p>
  627.                             </div>
  629.                         </li>
  630.                         <li class="grid-service-item  intro intro4">
  632.                             <i class="serivce-item fl"></i>
  633.                             <div class="service-text">
  634.                                 <h4>正品保障</h4>
  635.                                 <p>正品保障，提供发票</p>
  636.                             </div>
  638.                         </li>
  639.                         <li class="grid-service-item intro intro5">
  641.                             <i class="serivce-item fl"></i>
  642.                             <div class="service-text">
  643.                                 <h4>正品保障</h4>
  644.                                 <p>正品保障，提供发票</p>
  645.                             </div>
  647.                         </li>
  648.                     </ul>
  649.                 </div>
  650.                 <div class="clearfix Mod-list">
  651.                     <div class="yui3-g">
  652.                         <div class="yui3-u-1-6">
  653.                             <h4>购物指南</h4>
  654.                             <ul class="unstyled">
  655.                                 <li>购物流程</li>
  656.                                 <li>会员介绍</li>
  657.                                 <li>生活旅行/团购</li>
  658.                                 <li>常见问题</li>
  659.                                 <li>购物指南</li>
  660.                             </ul>
  662.                         </div>
  663.                         <div class="yui3-u-1-6">
  664.                             <h4>配送方式</h4>
  665.                             <ul class="unstyled">
  666.                                 <li>上门自提</li>
  667.                                 <li>211限时达</li>
  668.                                 <li>配送服务查询</li>
  669.                                 <li>配送费收取标准</li>
  670.                                 <li>海外配送</li>
  671.                             </ul>
  672.                         </div>
  673.                         <div class="yui3-u-1-6">
  674.                             <h4>支付方式</h4>
  675.                             <ul class="unstyled">
  676.                                 <li>货到付款</li>
  677.                                 <li>在线支付</li>
  678.                                 <li>分期付款</li>
  679.                                 <li>邮局汇款</li>
  680.                                 <li>公司转账</li>
  681.                             </ul>
  682.                         </div>
  683.                         <div class="yui3-u-1-6">
  684.                             <h4>售后服务</h4>
  685.                             <ul class="unstyled">
  686.                                 <li>售后政策</li>
  687.                                 <li>价格保护</li>
  688.                                 <li>退款说明</li>
  689.                                 <li>返修/退换货</li>
  690.                                 <li>取消订单</li>
  691.                             </ul>
  692.                         </div>
  693.                         <div class="yui3-u-1-6">
  694.                             <h4>特色服务</h4>
  695.                             <ul class="unstyled">
  696.                                 <li>夺宝岛</li>
  697.                                 <li>DIY装机</li>
  698.                                 <li>延保服务</li>
  699.                                 <li>泽易购E卡</li>
  700.                                 <li>泽易购通信</li>
  701.                             </ul>
  702.                         </div>
  703.                         <div class="yui3-u-1-6">
  704.                             <h4>帮助中心</h4>
  705.                             <img src="/static/search/img/wx_cz.jpg">
  706.                         </div>
  707.                     </div>
  708.                 </div>
  709.                 <div class="Mod-copyright">
  710.                     <ul class="helpLink">
  711.                         <li>关于我们<span class="space"></span></li>
  712.                         <li>联系我们<span class="space"></span></li>
  713.                         <li>关于我们<span class="space"></span></li>
  714.                         <li>商家入驻<span class="space"></span></li>
  715.                         <li>营销中心<span class="space"></span></li>
  716.                         <li>友情链接<span class="space"></span></li>
  717.                         <li>关于我们<span class="space"></span></li>
  718.                         <li>营销中心<span class="space"></span></li>
  719.                         <li>友情链接<span class="space"></span></li>
  720.                         <li>关于我们</li>
  721.                     </ul>
  722.                     <p>地址：深圳市大冲国际</p>
  723.                 </div>
  724.             </div>
  725.         </div>
  726.     </div>
  727.     <!--页面底部END-->
  728.     <!--侧栏面板开始-->
  729.     <div class="J-global-toolbar">
  730.         <div class="toolbar-wrap J-wrap">
  731.             <div class="toolbar">
  732.                 <div class="toolbar-panels J-panel">
  734.                     <!-- 购物车 -->
  735.                     <div style="visibility: hidden;" class="J-content toolbar-panel tbar-panel-cart toolbar-animate-out">
  736.                         <h3 class="tbar-panel-header J-panel-header">
  737.                         <a href="" class="title"><i></i><em class="title">购物车</em></a>
  738.                         <span class="close-panel J-close" onclick="cartPanelView.tbar_panel_close('cart');" ></span>
  739.                     </h3>
  740.                         <div class="tbar-panel-main">
  741.                             <div class="tbar-panel-content J-panel-content">
  742.                                 <div id="J-cart-tips" class="tbar-tipbox hide">
  743.                                     <div class="tip-inner">
  744.                                         <span class="tip-text">还没有登录，登录后商品将被保存</span>
  745.                                         <a href="#none" class="tip-btn J-login">登录</a>
  746.                                     </div>
  747.                                 </div>
  748.                                 <div id="J-cart-render">
  749.                                     <!-- 列表 -->
  750.                                     <div id="cart-list" class="tbar-cart-list">
  751.                                     </div>
  752.                                 </div>
  753.                             </div>
  754.                         </div>
  755.                         <!-- 小计 -->
  756.                         <div id="cart-footer" class="tbar-panel-footer J-panel-footer">
  757.                             <div class="tbar-checkout">
  758.                                 <div class="jtc-number"> <strong class="J-count" id="cart-number">0</strong>件商品 </div>
  759.                                 <div class="jtc-sum"> 共计：<strong class="J-total" id="cart-sum">¥0</strong> </div>
  760.                                 <a class="jtc-btn J-btn" href="/static/search/#none" target="_blank">去购物车结算</a>
  761.                             </div>
  762.                         </div>
  763.                     </div>
  765.                     <!-- 我的关注 -->
  766.                     <div style="visibility: hidden;" data-name="follow" class="J-content toolbar-panel tbar-panel-follow">
  767.                         <h3 class="tbar-panel-header J-panel-header">
  768.                         <a href="#" target="_blank" class="title"> <i></i> <em class="title">我的关注</em> </a>
  769.                         <span class="close-panel J-close" onclick="cartPanelView.tbar_panel_close('follow');"></span>
  770.                     </h3>
  771.                         <div class="tbar-panel-main">
  772.                             <div class="tbar-panel-content J-panel-content">
  773.                                 <div class="tbar-tipbox2">
  774.                                     <div class="tip-inner"> <i class="i-loading"></i> </div>
  775.                                 </div>
  776.                             </div>
  777.                         </div>
  778.                         <div class="tbar-panel-footer J-panel-footer"></div>
  779.                     </div>
  781.                     <!-- 我的足迹 -->
  782.                     <div style="visibility: hidden;" class="J-content toolbar-panel tbar-panel-history toolbar-animate-in">
  783.                         <h3 class="tbar-panel-header J-panel-header">
  784.                         <a href="#" target="_blank" class="title"> <i></i> <em class="title">我的足迹</em> </a>
  785.                         <span class="close-panel J-close" onclick="cartPanelView.tbar_panel_close('history');"></span>
  786.                     </h3>
  787.                         <div class="tbar-panel-main">
  788.                             <div class="tbar-panel-content J-panel-content">
  789.                                 <div class="jt-history-wrap">
  790.                                     <ul>
  791.                                         <!--<li class="jth-item">
  792.                                         <a href="/static/search/#" class="img-wrap"> <img src="/static/search/.portal/img/like_03.png" height="100" width="100" /> </a>
  793.                                         <a class="add-cart-button" href="/static/search/#" target="_blank">加入购物车</a>
  794.                                         <a href="/static/search/#" target="_blank" class="price">￥498.00</a>
  795.                                     </li>
  796.                                     <li class="jth-item">
  797.                                         <a href="/static/search/#" class="img-wrap"> <img src="/static/search/portal/img/like_02.png" height="100" width="100" /></a>
  798.                                         <a class="add-cart-button" href="/static/search/#" target="_blank">加入购物车</a>
  799.                                         <a href="/static/search/#" target="_blank" class="price">￥498.00</a>
  800.                                     </li>-->
  801.                                     </ul>
  802.                                     <a href="/static/search/#" class="history-bottom-more" target="_blank">查看更多足迹商品 &gt;&gt;</a>
  803.                                 </div>
  804.                             </div>
  805.                         </div>
  806.                         <div class="tbar-panel-footer J-panel-footer"></div>
  807.                     </div>
  809.                 </div>
  811.                 <div class="toolbar-header"></div>
  813.                 <!-- 侧栏按钮 -->
  814.                 <div class="toolbar-tabs J-tab">
  815.                     <div onclick="cartPanelView.tabItemClick('cart')" class="toolbar-tab tbar-tab-cart" data="购物车" tag="cart">
  816.                         <i class="tab-ico"></i>
  817.                         <em class="tab-text"></em>
  818.                         <span class="tab-sub J-count " id="tab-sub-cart-count">0</span>
  819.                     </div>
  820.                     <div onclick="cartPanelView.tabItemClick('follow')" class="toolbar-tab tbar-tab-follow" data="我的关注" tag="follow">
  821.                         <i class="tab-ico"></i>
  822.                         <em class="tab-text"></em>
  823.                         <span class="tab-sub J-count hide">0</span>
  824.                     </div>
  825.                     <div onclick="cartPanelView.tabItemClick('history')" class="toolbar-tab tbar-tab-history" data="我的足迹" tag="history">
  826.                         <i class="tab-ico"></i>
  827.                         <em class="tab-text"></em>
  828.                         <span class="tab-sub J-count hide">0</span>
  829.                     </div>
  830.                 </div>
  832.                 <div class="toolbar-footer">
  833.                     <div class="toolbar-tab tbar-tab-top">
  834.                         <a href="/static/search/#"> <i class="tab-ico  "></i> <em class="footer-tab-text">顶部</em> </a>
  835.                     </div>
  836.                     <div class="toolbar-tab tbar-tab-feedback">
  837.                         <a href="/static/search/#" target="_blank"> <i class="tab-ico"></i> <em class="footer-tab-text ">反馈</em> </a>
  838.                     </div>
  839.                 </div>
  841.                 <div class="toolbar-mini"></div>
  843.             </div>
  845.             <div id="J-toolbar-load-hook"></div>
  847.         </div>
  848.     </div>
  850.     <!--购物车单元格 模板-->
  851.     <script type="text/template" id="tbar-cart-item-template">
  852.         <div class="tbar-cart-item">
  853.             <div class="jtc-item-promo">
  854.                 <em class="promo-tag promo-mz">满赠<i class="arrow"></i></em>
  855.                 <div class="promo-text">已购满600元，您可领赠品</div>
  856.             </div>
  857.             <div class="jtc-item-goods">
  858.                 <span class="p-img"><a href="/static/search/#" target="_blank"><img src="/static/search/{2}" alt="{1}" height="50" width="50" /></a></span>
  859.                 <div class="p-name">
  860.                     <a href="/static/search/#">{1}</a>
  861.                 </div>
  862.                 <div class="p-price"><strong>¥{3}</strong>×{4} </div>
  863.                 <a href="/static/search/#none" class="p-del J-del">删除</a>
  864.             </div>
  865.         </div>
  866.     </script>
  867.     <!--侧栏面板结束-->
  868.         <script type="text/javascript" src="/static/search/js/plugins/jquery/jquery.min.js"></script>
  869.     <!--    -->
  870.         <script type="text/javascript">
  871.             $(function() {
  872.                 $("#service").hover(function() {
  873.                     $(".service").show();
  874.                 }, function() {
  875.                     $(".service").hide();
  876.                 });
  877.                 $("#shopcar").hover(function() {
  878.                     $("#shopcarlist").show();
  879.                 }, function() {
  880.                     $("#shopcarlist").hide();
  881.                 });
  883.             })
  885.         </script>
  887.         <script type="text/javascript" src="/static/search/js/model/cartModel.js"></script>
  888.         <script type="text/javascript" src="/static/search/js/czFunction.js"></script>
  889.         <script type="text/javascript" src="/static/search/js/plugins/jquery.easing/jquery.easing.min.js"></script>
  890.         <script type="text/javascript" src="/static/search/js/plugins/sui/sui.min.js"></script>
  891.         <script type="text/javascript" src="/static/search/js/widget/cartPanelView.js"></script>
  892.     </body>
  894. </html>

1.2 后台：

1.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.     //7. 当前页
  18.     private int page = 1;
  19.     //8. 每页大小
  20.     private int pageSize = 10;
  21. }

1.2.2 ItemSearchServiceImpl服务层：

  1. ...
  2. //3.1 得到当前页
  3.         int page = params.getPage();
  4.         //3.2 得到每页大小
  5.         int pageSize = params.getPageSize();
  6.         NativeSearchQueryBuilder searchQueryBuilder = new NativeSearchQueryBuilder()
  7.                                                       .withPageable(PageRequest.of(page - 1,pageSize));
  8. ...
  9.  //21. 存放高亮数据到大集合
  10.         resultMap.put("rows",highlights);               //当前分页记录集合
  11.         resultMap.put("categoryList",categoryList);     //分类
  12.         resultMap.put("total",total);                   //总记录数
  13.         resultMap.put("totalPage",totalPage);           //总页数

二、与首页对接 ：

2.1 在portal-web这个模块中的resources/index.html文件中添加：

  1. <!-- JS部分: -->
  2. <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  3.     <script>
  4.         function search(){
  5.             //1. 得到搜索框中的内容
  6.             let keywords = $("#keywords").val();
  7.             //2. 跳转到搜索页面
  8.             location.href = "http://search.zeyigou.com?keywords=" + keywords;
  9.         }
  10.     </script>
  12. <!-- HTML部分: -->
  13. <form action="" class="sui-form form-inline">
  14.                                 <!--searchAutoComplete-->
  15.     <div class="input-append">
  16.     <input type="text" id="keywords"  class="input-error input-xxlarge" />
  17.     <button class="sui-btn btn-xlarge btn-danger" type="button" onclick="search()">搜索</button>
  18.     </div>
  19. </form>

2.2 运行效果如下：
image.png

三、商品审核通过后，同步索引库：

3.1 在zyg-manager-web工程的goodsController中审核方法修改如下：

  1.     /**
  2.      * 功能: 批量审核数据
  3.      * 参数:
  4.      * 返回值: com.zelin.utils.R
  5.      * 时间: 2021/7/30 16:11
  6.      */
  7.     @RequestMapping("/updateStatus")
  8.     public R updateStatus(Long[] ids,String status){
  9.         //1. 审核商品
  10.         goodsService.updateStatus(ids,status);
  11.         //2. 根据商品id查询sku列表
  12.         List<ItemEntity> entities =  itemService.findItemsbyGoodsId(ids);
  13.         //3. 查询出tb_item表的数据并同时更新到索引库中(增量更新)
  14.         if(status.equals("1") && entities.size() > 0) {
  15.             searchService.updateToIndex(entities);
  16.         }
  17.         return R.ok();
  18.     }

3.2 在zyg-sellerGoods-Service工程添加findItemsbyGoodsId()

  1.    @Override
  2.     public List<ItemEntity> findItemsbyGoodsId(Long... ids) {
  3.         return this.baseMapper.selectList(new QueryWrapper<ItemEntity>().in("goods_id",ids));
  4.     }

3.3 在zyg-search-Service工程定义导入到索引库方法：

  1.     /**
  2.      * 功能: 将所有的商品添加到索引库中（增量更新）
  3.      * 参数:
  4.      * 返回值: void
  5.      * 时间: 2021/8/5 16:54
  6.      */
  7.     @Override
  8.     public void updateToIndex(List<ItemEntity> entities) {
  9.         restTemplate.save(entities);
  10.     }

3.4 最后在kibana中查询结果：

image.png