使用solr模擬京東搜素功能

時間  2020-06-29
標籤 使用 solr 模擬 京東 功能 简体版
原文   原文鏈接

1 項目需求

1.能夠根據關鍵字搜索商品javascript

2.能夠根據商品的分類和價格過濾搜索結果css

3.能夠根據價格排序html

4.能夠實現基本的分頁功能前端

2 界面效果

3 項目環境搭建

1.建立一個動態的web工程java

2.導入springmvc相關的jar包jquery

3.導入solrJ的jar包和依賴包git

4.導入solr/example/lib/ext下的jar包web

5.配置springmvc.xml配置文件spring

6.配置web.xml配置文件apache

7.配置圖片文件的虛擬路徑

8.拷貝樣式文件到項目中

springmvc.xml配置文件

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
       xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
       xmlns:p="http://www.springframework.org/schema/p"
       xmlns:context="http://www.springframework.org/schema/context"
       xmlns:mvc="http://www.springframework.org/schema/mvc"
       xsi:schemaLocation="http://www.springframework.org/schema/beans 
                           http://www.springframework.org/schema/beans/spring-beans-4.0.xsd
                           http://www.springframework.org/schema/mvc 
                           http://www.springframework.org/schema/mvc/spring-mvc-4.0.xsd
                           http://www.springframework.org/schema/context 
                           http://www.springframework.org/schema/context/spring-context-4.0.xsd">
                           
       <!-- 配置掃描組件 ,掃描@Controller，@Service等-->
       <context:component-scan base-package="com.query.jd"></context:component-scan>
       
       <!-- 配置註解驅動，若是配置此標籤能夠不用配置處理器映射器和適配器 -->
       <mvc:annotation-driven />
       
       <!-- 配置視圖解析器 -->
       <bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">
               <property name="prefix" value="/WEB-INF/jsp/"></property>
               <property name="suffix" value=".jsp"></property>
       </bean>
       
       <!-- 配置solrserver -->
       <bean name="solrServer" class="org.apache.solr.client.solrj.impl.HttpSolrServer">
               <constructor-arg index="0" value="http://localhost:8080/solr/collection1"></constructor-arg>
       </bean>
</beans>
View Code

web.xml配置文件

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xmlns="http://java.sun.com/xml/ns/javaee"
         xsi:schemaLocation="http://java.sun.com/xml/ns/javaee 
                             http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
         id="WebApp_ID" version="2.5">
    <display-name>jd</display-name>
    <welcome-file-list>
        <welcome-file>index.html</welcome-file>
        <welcome-file>index.htm</welcome-file>
        <welcome-file>index.jsp</welcome-file>
        <welcome-file>default.html</welcome-file>
        <welcome-file>default.htm</welcome-file>
        <welcome-file>default.jsp</welcome-file>
    </welcome-file-list>

    <!-- 解決post亂碼問題 -->
    <filter>
        <filter-name>CharacterEncodingFilter</filter-name>
        <filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class>
        <init-param>
            <param-name>encoding</param-name>
            <param-value>utf-8</param-value>
        </init-param>
    </filter>
    <filter-mapping>
        <filter-name>CharacterEncodingFilter</filter-name>
        <url-pattern>/*</url-pattern>
    </filter-mapping>

    <!-- 配置前段控制器 -->
    <servlet>
        <servlet-name>springmvc</servlet-name>
        <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
        <init-param>
            <!-- 指定springmvc配置文件的路徑 若是不指定默認爲：/WEB-INF/${servlet-name}-servlet.xml -->
            <param-name>contextConfigLocation</param-name>
            <param-value>classpath:springmvc.xml</param-value>
        </init-param>
        <load-on-startup>1</load-on-startup>
    </servlet>
    <servlet-mapping>
        <servlet-name>springmvc</servlet-name>
        <url-pattern>*.action</url-pattern>
    </servlet-mapping>
</web-app>
View Code

虛擬路徑的配置

4 前端實現

1. 前端須要提供後端查詢須要的參數 ：

關鍵詞：queryString

商品分類：catalog_name 【隱藏域】

商品價格：price 【隱藏域】

價格排序：sort 【隱藏域】

分頁所需的當前頁：currentPage 【隱藏域】

2.後端須要返回給前端頁面的信息：

商品的集合：ProductModelList

分頁相關的數據：好比currentPage , totalCount,pageCount

  1 <%@ page language="java" contentType="text/html; charset=UTF-8"
  2     pageEncoding="UTF-8"%>
  3 <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
  4 <%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
  5 <!DOCTYPE html>
  6 <!-- saved from url=(0047)http://list.jd.com/list.html?cat=1315,1343,1355 -->
  7 <html lang="en">
  8 <head>
  9 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 10 <meta content="utf-8" http-equiv="charset">
 11 <link rel="stylesheet" type="text/css"
 12     href="<c:url value='/resource'/>/base.css" media="all">
 13 <link rel="stylesheet" type="text/css"
 14     href="<c:url value='/resource'/>/plist20131112.css" media="all">
 15 <link rel="stylesheet" type="text/css"
 16     href="<c:url value='/resource'/>/list-page-20141009.css" media="all">
 17 <link rel="stylesheet" type="text/css"
 18     href="<c:url value='/resource'/>/pop_compare.css" media="all">
 19 <link rel="shortcut icon" type="image/ico"
 20     href="http://list.jd.com/favicon.ico">
 21 <script type="text/javascript"
 22     src="<c:url value='/resource'/>/jquery-1.2.6.pack.js"></script>
 23 <style id="style-1-cropbar-clipper">/* Copyright 2014 Evernote Corporation. All rights reserved. */
 24 .en-markup-crop-options {
 25     top: 18px !important;
 26     left: 50% !important;
 27     margin-left: -100px !important;
 28     width: 200px !important;
 29     border: 2px rgba(255,255,255,.38) solid !important;
 30     border-radius: 4px !important;
 31 }
 32 
 33 .en-markup-crop-options div div:first-of-type {
 34     margin-left: 0px !important;
 35 }
 36 </style>
 37 <script type="text/javascript">
 38     function query() {
 39         //執行關鍵詞查詢時清空過濾條件
 40         document.getElementById("catalog_name").value="";
 41         document.getElementById("price").value="";
 42         document.getElementById("page").value="";
 43         //執行查詢
 44         queryList();
 45     }
 46     function queryList() {
 47         //提交表單
 48         document.getElementById("actionForm").submit();
 49     }
 50     function filter(key, value) {
 51         document.getElementById(key).value=value;
 52         queryList();
 53     }
 54     function sort() {
 55         var s = document.getElementById("sort").value;
 56         if (s != "1") {
 57             s = "1";
 58         } else {
 59             s = "0";
 60         }
 61         document.getElementById("sort").value = s;
 62         queryList();
 63     }
 64     function changePage(p) {
 65         var currentPage = Number(document.getElementById("page").value);
 66         currentPage = currentPage + p;
 67         document.getElementById("page").value = currentPage;
 68         queryList();
 69     }
 70 </script>
 71 </head>
 72 <body class="root61">
 73 <div id="shortcut-2013">
 74     <div class="w">
 75         <ul class="fl lh">
 76             <li class="fore1 ld"><b></b><a href="#" rel="nofollow">收藏京東</a></li>
 77         </ul>
 78         <ul class="fr lh">
 79             <li class="fore1" id="loginbar">您好，歡迎來到京東！<span><a href="#">[登陸]</a> <a href="#" class="link-regist">[免費註冊]</a></span></li>
 80             <li class="fore2 ld">
 81                 <s></s>
 82                 <a href="#" rel="nofollow">個人訂單</a>
 83             </li>
 84             <li class="fore2-1 ld" id="jd-vip"><i></i>
 85                 <i></i>
 86                 <s></s>
 87                 <a target="_blank" rel="nofollow" href="http://vip.jd.com/">會員俱樂部</a>
 88             </li>
 89             <li class="fore2-2 ld" id="jd-dakehu">        <i></i><s></s>        <a href="http://b.jd.com/" target="_blank" rel="nofollow">企業頻道</a>    </li>
 90             <li class="fore3 ld menu" id="app-jd" data-widget="dropdown" clstag="homepage|keycount|home2013|01d"><s></s>
 91                 <i></i>
 92                 <span class="outline"></span>
 93                 <span class="blank"></span>
 94                 <a href="http://app.jd.com/" target="_blank">手機京東</a>
 95                 <b></b>
 96             </li>
 97             <li class="fore4 ld menu" id="biz-service" data-widget="dropdown">
 98                 <s></s>
 99                 <span class="outline"></span>
100                 <span class="blank"></span>
101                 客戶服務
102                 <b></b>
103             </li>
104             <li class="fore5 ld menu" id="site-nav" data-widget="dropdown">
105                 <s></s>
106                 <span class="outline"></span>
107                 <span class="blank"></span>
108                 網站導航
109                 <b></b>
110             </li>
111         </ul>
112         <span class="clr"></span>
113     </div>
114 </div><!--shortcut end-->
115 <div id="o-header-2013">
116     <div class="w" id="header-2013">
117         <div id="logo-2013" class="ld"><a href="http://www.jd.com/" hidefocus="true"><b></b><img src="<c:url value='/resource'/>/logo-201305.png" width="270" height="60" alt="京東"></a></div>
118         <!--logo end-->
119         <div id="search-2013">
120             <div class="i-search ld">
121                 <ul id="shelper" class="hide"></ul>
122                 <form id="actionForm" action="list.action" method="POST">
123                 <div class="form">
124                     <input type="text" class="text" accesskey="s" name="queryString" id="key" value="${queryString }"
125                         autocomplete="off" onkeydown="javascript:if(event.keyCode==13) {query()}">
126                     <input type="button" value="搜索" class="button" onclick="query()">
127                 </div>
128                 <input type="hidden" name="catalog_name" id="catalog_name" value="${catalog_name }"/> 
129                 <input type="hidden" name="price" id="price" value="${price }"/> 
130                 <input type="hidden" name="currentPage" id="page" value="${currentPage }"/> 
131                 <input type="hidden" name="sort" id="sort" value="${sort }"/> 
132                 </form>
133             </div>
134             <div id="hotwords"></div>
135         </div>
136         <!--search end-->
137         <div id="my360buy-2013">
138             <dl>
139                 <dt class="ld"><s></s><a href="http://home.jd.com/">個人京東</a><b></b></dt>
140                 <dd>
141                     <div class="loading-style1"><b></b>加載中，請稍候...</div>
142                 </dd>
143             </dl>
144         </div>
145         <!--my360buy end-->
146         <div id="settleup-2013">
147             <dl>
148                 <dt class="ld"><s></s><span class="shopping"><span id="shopping-amount">0</span></span><a href="http://cart.jd.com/cart/cart.html" id="settleup-url">去購物車結算</a> <b></b> </dt>
149                 <dd>
150                     <div class="prompt">
151                         <div class="loading-style1"><b></b>加載中，請稍候...</div>
152                     </div>
153                 </dd>
154             </dl>
155         </div>
156         <!--settleup end-->
157     </div>
158     <!--header end-->
159     <div class="w">
160         <div id="nav-2013">
161             <div id="categorys-2013" class="categorys-2014">
162                 <div class="mt ld">
163                     <h2><a href="http://www.jd.com/allSort.aspx">所有商品分類<b></b></a></h2>
164                 </div>
165             </div>
166             <div id="treasure"></div>
167             <ul id="navitems-2013">
168                 <li class="fore1" id="nav-home"><a href="http://www.jd.com/">首頁</a></li>
169                 <li class="fore2" id="nav-fashion"><a href="http://fashion.jd.com/">服裝城</a></li>
170                 <li class="fore3" id="nav-chaoshi"><a href="http://channel.jd.com/chaoshi.html">食品</a></li>
171                 <li class="fore4" id="nav-tuan"><a href="http://tuan.jd.com/" target="_blank">團購</a></li>
172                 <li class="fore5" id="nav-auction"><a href="http://auction.jd.com/">奪寶島</a></li>
173                 <li class="fore6" id="nav-shan"><a href="http://red.jd.com/">閃購</a></li>
174                 <li class="fore7" id="nav-jinrong"><a href="http://jr.jd.com/" target="_blank">金融</a></li>
175             </ul>
176         </div>
177     </div>
178 </div>
179 <div class="w">
180     <div class="breadcrumb">
181         <strong><a href="#">服飾內衣</a></strong><span> > <a
182             href="#">女裝</a> > <a href="#">T恤</a></span>
183     </div>
184 </div>
185 <div class="w main">
186 <div class="right-extra">
187 <div id="select" clstag="thirdtype|keycount|thirdtype|select" class="m">
188     <div class="mt">
189         <h1>
190             T恤 -<strong> 商品篩選</strong>
191         </h1>
192     </div>
193     <div class="mc attrs">
194         <div data-id="100001" class="brand-attr">
195             <div class="attr">
196                 <div class="a-key">商品類別：</div>
197                 <div class="a-values">
198                     <div class="v-tabs">
199                         <div class="tabcon">
200                             <div>
201                                 <a href="javascript:filter('catalog_name', '幽默雜貨')" >幽默雜貨</a>
202                             </div>
203                             <div>
204                                 <a href="javascript:filter('catalog_name', '時尚衛浴')">時尚衛浴</a>
205                             </div>
206                             <div>
207                                 <a href="javascript:filter('catalog_name', '另類文體')">另類文體</a>
208                             </div>
209                             <div>
210                                 <a href="javascript:filter('catalog_name', '創意相架')">創意相架</a>
211                             </div>
212                             <div>
213                                 <a href="javascript:filter('catalog_name', '巧妙收納')">巧妙收納</a>
214                             </div>
215                             <div>
216                                 <a href="javascript:filter('catalog_name', '與鐘不一樣')">與鐘不一樣</a>
217                             </div>
218                             <div>
219                                 <a href="javascript:filter('catalog_name', '個性男人')">個性男人</a>
220                             </div>
221                             <div>
222                                 <a href="javascript:filter('catalog_name', '電腦周邊')">電腦周邊</a>
223                             </div>
224                             <div>
225                                 <a href="javascript:filter('catalog_name', '品質家電')">品質家電</a>
226                             </div>                                              
227                             <div>                                              
228                                 <a href="javascript:filter('catalog_name', '品味茶杯')">品味茶杯</a>
229                             </div>                                              
230                             <div>                                              
231                                 <a href="javascript:filter('catalog_name', '四季用品')">四季用品</a>
232                             </div>                                              
233                             <div>                                              
234                                 <a href="javascript:filter('catalog_name', '健康寶寶')">健康寶寶</a>
235                             </div>                                              
236                             <div>                                              
237                                 <a href="javascript:filter('catalog_name', '新潮美容')">新潮美容</a>
238                             </div>                                              
239                             <div>                                              
240                                 <a href="javascript:filter('catalog_name', '產品配件')">產品配件</a>
241                             </div>                                              
242                             <div>                                              
243                                 <a href="javascript:filter('catalog_name', '雅緻燈飾')">雅緻燈飾</a>
244                             </div>                                              
245                             <div>                                              
246                                 <a href="javascript:filter('catalog_name', '陽光車飾')">陽光車飾</a>
247                             </div>                                              
248                             <div>                                              
249                                 <a href="javascript:filter('catalog_name', '趣味紙抽')">趣味紙抽</a>
250                             </div>                                              
251                             <div>                                              
252                                 <a href="javascript:filter('catalog_name', '布藝毛絨')">布藝毛絨</a>
253                             </div>                                              
254                             <div>                                              
255                                 <a href="javascript:filter('catalog_name', '益智手工')">益智手工</a>
256                             </div>                                              
257                             <div>                                              
258                                 <a href="javascript:filter('catalog_name', '環保餐具')">環保餐具</a>
259                             </div>                                              
260                             <div>                                              
261                                 <a href="javascript:filter('catalog_name', '閃亮匙扣')">閃亮匙扣</a>
262                             </div>                                              
263                             <div>                                              
264                                 <a href="javascript:filter('catalog_name', '手機飾品')">手機飾品</a>
265                             </div>                                              
266                             <div>                                              
267                                 <a href="javascript:filter('catalog_name', '精品數碼')">精品數碼</a>
268                             </div>                                              
269                             <div>                                              
270                                 <a href="javascript:filter('catalog_name', '理財錢罐')">理財錢罐</a>
271                             </div>                                              
272                             <div>                                              
273                                 <a href="javascript:filter('catalog_name', '美味廚房')">美味廚房</a>
274                             </div>                                              
275                             <div>                                              
276                                 <a href="javascript:filter('catalog_name', '保健按摩')">保健按摩</a>
277                             </div>                                              
278                             <div>                                              
279                                 <a href="javascript:filter('catalog_name', '魅力女人')">魅力女人</a>
280                             </div>
281                         </div>
282                     </div>
283                 </div>
284             </div>
285         </div>
286         <div data-id="100002" class="prop-attrs">
287             <div class="attr">
288                 <div class="a-key">價格：</div>
289                 <div class="a-values">
290                     <div class="v-fold">
291                         <ul class="f-list">
292                             <li><a href="javascript:filter('price','0-9')">0-9</a></li>
293                             <li><a href="javascript:filter('price','10-19')">10-19</a></li>
294                             <li><a href="javascript:filter('price','20-29')">20-29</a></li>
295                             <li><a href="javascript:filter('price','30-39')">30-39</a></li>
296                             <li><a href="javascript:filter('price','40-49')">40-49</a></li>
297                             <li><a href="javascript:filter('price','50-*')">50以上</a></li>
298                         </ul>
299                     </div>
300                 </div>
301             </div>
302         </div>
303     </div>
304 </div>
305 <div id="filter">
306     <div class="cls"></div>
307     <div class="fore1">
308         <dl class="order">
309             <dt>排序：</dt>
310             <dd>
311                 <a href="javascript:sort()">價格</a><b></b>
312             </dd>
313         </dl>
314         <dl class="activity">
315             <dd></dd>
316         </dl>
317         <div class="pagin pagin-m">
318             <span class="text"><i>${currentPage }</i>/${totalPage }</span>
319             <a onclick="changePage(-1)" class="prev">上一頁</a>
320             <a onclick="changePage(1)" class="next">下一頁</a>
321         </div>
322         <div class="total">
323             <span>共<strong>${totalCount }</strong>個商品
324             </span>
325         </div>
326         <span class="clr"></span>
327     </div>
328 </div>
329 <!--商品列表開始-->
330 <div id="plist" class="m plist-n7 plist-n8 prebuy">
331     <ul class="list-h">
332         <c:forEach var="item" items="${ProductModelList }">
333         <li pid="${item.pid }">
334             <div class="lh-wrap">
335                 <div class="p-img">
336                     <a target="_blank" href="#">
337                         <img width="220" height="282" class="err-product" src="/images/${item.picture}">
338                     </a>
339                 </div>
340                 <div class="p-name">
341                     <a target="_blank" href="#">${item.name }</a>
342                 </div>
343                 <div class="p-price">
344                     <strong>￥<fmt:formatNumber value="${item.price}" maxFractionDigits="2"/></strong><span id="p1269191543"></span>
345                 </div>
346             </div>
347         </li>
348         </c:forEach>
349     </ul>
350 </div>
351 <!--商品列表結束-->
352 </div>
353 <div class="left">
354     <div id="sortlist" clstag="thirdtype|keycount|thirdtype|sortlist"
355         class="m">
356         <div class="mt">
357             <h2>服飾內衣</h2>
358         </div>
359         <div class="mc">
360             <div class="item current">
361                 <h3>
362                     <b></b>女裝
363                 </h3>
364                 <ul>
365                     <li><a href="http://list.jd.com/1315-1343-1355.html">T恤</a></li>
366                     <li><a href="http://list.jd.com/1315-1343-1354.html">襯衫</a></li>
367                     <li><a href="http://list.jd.com/1315-1343-1356.html">針織衫</a></li>
368                     <li><a href="http://list.jd.com/1315-1343-9713.html">雪紡衫</a></li>
369                     <li><a href="http://list.jd.com/1315-1343-9710.html">衛衣</a></li>
370                     <li><a href="http://list.jd.com/1315-1343-9714.html">馬甲</a></li>
371                     <li><a href="http://list.jd.com/1315-1343-9719.html">連衣裙</a></li>
372                     <li><a href="http://list.jd.com/1315-1343-9720.html">半身裙</a></li>
373                     <li><a href="http://list.jd.com/1315-1343-9715.html">牛仔褲</a></li>
374                     <li><a href="http://list.jd.com/1315-1343-9717.html">休閒褲</a></li>
375                     <li><a href="http://list.jd.com/1315-1343-9716.html">打底褲</a></li>
376                     <li><a href="http://list.jd.com/1315-1343-9718.html">正裝褲</a></li>
377                     <li><a href="http://list.jd.com/1315-1343-9711.html">小西裝</a></li>
378                     <li><a href="http://list.jd.com/1315-1343-9712.html">短外套</a></li>
379                     <li><a href="http://list.jd.com/1315-1343-9708.html">風衣</a></li>
380                     <li><a href="http://list.jd.com/1315-1343-9706.html">毛呢大衣</a></li>
381                     <li><a href="http://list.jd.com/1315-1343-9707.html">真皮皮衣</a></li>
382                     <li><a href="http://list.jd.com/1315-1343-9705.html">棉服</a></li>
383                     <li><a href="http://list.jd.com/1315-1343-3983.html">羽絨服</a></li>
384                     <li><a href="http://list.jd.com/1315-1343-9722.html">大碼女裝</a></li>
385                     <li><a href="http://list.jd.com/1315-1343-9721.html">中老年女裝</a></li>
386                     <li><a href="http://list.jd.com/1315-1343-9723.html">婚紗</a></li>
387                     <li><a href="http://list.jd.com/1315-1343-11985.html">打底衫</a></li>
388                     <li><a href="http://list.jd.com/1315-1343-11986.html">旗袍/唐裝</a></li>
389                     <li><a href="http://list.jd.com/1315-1343-11987.html">加絨褲</a></li>
390                     <li><a href="http://list.jd.com/1315-1343-11988.html">吊帶/背心</a></li>
391                     <li><a href="http://list.jd.com/1315-1343-11989.html">羊絨衫</a></li>
392                     <li><a href="http://list.jd.com/1315-1343-11991.html">短褲</a></li>
393                     <li><a href="http://list.jd.com/1315-1343-11993.html">皮草</a></li>
394                     <li><a href="http://list.jd.com/1315-1343-11996.html">禮服</a></li>
395                     <li><a href="http://list.jd.com/1315-1343-11998.html">仿皮皮衣</a></li>
396                     <li><a href="http://list.jd.com/1315-1343-11999.html">羊毛衫</a></li>
397                     <li><a href="http://list.jd.com/1315-1343-12000.html">設計師/潮牌</a></li>
398                 </ul>
399             </div>
400             <div class="item">
401                 <h3>
402                     <b></b>男裝
403                 </h3>
404             </div>
405             <div class="item">
406                 <h3>
407                     <b></b>內衣
408                 </h3>
409             </div>
410             <div class="item">
411                 <h3>
412                     <b></b>服飾配件
413                 </h3>
414             </div>
415         </div>
416     </div>
417     <div id="limitBuy">
418         <div id="limitbuy9199"
419             clstag="thirdtype|keycount|thirdtype|limitbuy536"
420             class="m limitbuy hide">
421             <div class="mt">
422                 <h2>服飾鞋帽</h2>
423             </div>
424             <div class="mc">
425                 <div id="clock9199" class="clock">正在加載…</div>
426                 <div id="limit9199"></div>
427             </div>
428         </div>
429     </div>
430     <div id="ad_left" reco_id="6" class="m m0 hide"></div>
431     <!--用戶最終購買-->
432     <div id="finalbuy" class="hide m m0" style="display: block;">
433         <div class="mt">
434             <h2>
435                 瀏覽<font color="red">T恤</font>最終購買
436             </h2>
437         </div>
438         <div class="mc">
439         </div>
440     </div>
441     <div id="weekRank" clstag="thirdtype|keycount|thirdtype|mrank"
442         class="m rank">
443         <div class="mt">
444             <h2>一週銷量排行</h2>
445         </div>
446         <div class="mc">
447         </div>
448     </div>
449 </div><!--<div class="left">-->
450 
451 <span class="clr"></span>
452 <div id="Collect_Tip" class="Tip360 w260"></div>
453 
454 </div><!--<div class="w main">-->
455 
456 
457 <div class="w">
458     <div id="service-2013">
459         <dl class="fore1">
460             <dt><b></b><strong>購物指南</strong></dt>
461             <dd>
462                 <div><a href="http://help.jd.com/help/question-56.html" target="_blank" rel="nofollow">購物流程</a></div>
463                 <div><a href="http://help.jd.com/help/question-57.html" target="_blank" rel="nofollow">會員介紹</a></div>
464                 <div><a href="http://help.jd.com/help/question-181.html" target="_blank" rel="nofollow">團購/機票</a></div>
465                 <div><a href="http://help.jd.com/help/question-61.html" target="_blank" rel="nofollow">常見問題</a></div>
466                 <div><a href="http://help.jd.com/help/question-63.html" target="_blank" rel="nofollow">你們電</a></div>
467                 <div><a href="http://help.jd.com/index.html" target="_blank" rel="nofollow">聯繫客服</a></div>
468             </dd>
469         </dl>
470         <dl class="fore2">
471             <dt><b></b><strong>配送方式</strong></dt>
472             <dd>
473                 <div><a href="http://help.jd.com/help/question-64.html" target="_blank" rel="nofollow">上門自提</a></div>
474                 <div><a href="http://help.jd.com/help/question-360.html" target="_blank" rel="nofollow">211限時達</a></div>
475                 <div><a href="http://help.jd.com/help/distribution-768.html" target="_blank" rel="nofollow">配送服務查詢</a></div>
476                 <div><a href="http://help.jd.com/help/question-892.html#help2215" target="_blank" rel="nofollow">配送費收取標準</a></div>
477                 
478                 <div><a href="http://en.jd.com/chinese.html" target="_blank">海外配送</a></div>
479             </dd>
480         </dl>
481         <dl class="fore3">
482             <dt><b></b><strong>支付方式</strong></dt>
483             <dd>
484                 <div><a href="http://help.jd.com/help/question-67.html" target="_blank" rel="nofollow">貨到付款</a></div>
485                 <div><a href="http://help.jd.com/help/question-68.html" target="_blank" rel="nofollow">在線支付</a></div>
486                 <div><a href="http://help.jd.com/help/question-71.html" target="_blank" rel="nofollow">分期付款</a></div>
487                 <div><a href="http://help.jd.com/help/question-69.html" target="_blank" rel="nofollow">郵局匯款</a></div>
488                 <div><a href="http://help.jd.com/help/question-70.html" target="_blank" rel="nofollow">公司轉帳</a></div>
489             </dd>
490         </dl>
491         <dl class="fore4">
492             <dt><b></b><strong>售後服務</strong></dt>
493             <dd>
494                 <div><a href="http://myjd.jd.com/afs/help/afshelp.action" target="_blank" rel="nofollow">售後政策</a></div>
495                 <div><a href="http://help.jd.com/help/question-99.html" target="_blank" rel="nofollow">價格保護</a></div>
496                 <div><a href="http://help.jd.com/help/question-100.html" target="_blank" rel="nofollow">退款說明</a></div>
497                 <div><a href="http://myjd.jd.com/repair/repairs.action" target="_blank" rel="nofollow">返修/退換貨</a></div>
498                 <div><a href="http://help.jd.com/help/question-881.html" target="_blank" rel="nofollow">取消訂單</a></div>
499             </dd>
500         </dl>
501         <dl class="fore5">
502             <dt><b></b><strong>特點服務</strong></dt>
503             <dd>
504                 <div><a href="http://help.jd.com/help/question-79.html" target="_blank">奪寶島</a></div>
505                 <div><a href="http://help.jd.com/help/question-86.html" target="_blank">DIY裝機</a></div>
506                 <div><a href="http://fuwu.jd.com/" target="_blank" rel="nofollow">延保服務</a></div>
507                 <div><a href="http://giftcard.jd.com/market/index.action" target="_blank" rel="nofollow">京東E卡</a></div>
508                 <div><a href="http://help.jd.com/help/question-91.html" target="_blank" rel="nofollow">節能補貼</a></div>
509                 <div><a href="http://mobile.jd.com/" target="_blank" rel="nofollow">京東通訊</a></div>
510             </dd>
511         </dl>
512         <span class="clr"></span>
513     </div>
514 </div><!-- service end --><div class="w">
515     <div id="footer-2013">
516         <div class="links">
517             <a rel="nofollow" target="_blank" href="http://www.jd.com/intro/about.aspx">關於咱們</a>|<a rel="nofollow" target="_blank" href="http://www.jd.com/contact/">聯繫咱們</a>|<a rel="nofollow" target="_blank" href="http://zhaopin.jd.com/">人才招聘</a>|<a rel="nofollow" target="_blank" href="http://www.jd.com/contact/joinin.aspx">商家入駐</a>|<a rel="nofollow" target="_blank" href="http://sale.jd.com/act/y3surX7qpM.html">廣告服務</a>|<a rel="nofollow" target="_blank" href="http://app.jd.com/">手機京東</a>|<a target="_blank" href="http://club.jd.com/links.aspx">友情連接</a>|<a target="_blank" href="http://cps.jd.com/">銷售聯盟</a>|<a href="http://club.jd.com/" target="_blank">京東社區</a>|<a href="http://gongyi.jd.com/" target="_blank">京東公益</a></div>
518         <div class="copyright">北京市公安局朝陽分局備案編號110105014669  |  京ICP證070359號  |  互聯網藥品信息服務資格證編號(京)-非經營性-2011-0034<br><a rel="nofollow" href="http://misc.360buyimg.com/skin/df/i/com/f_music.jpg" target="_blank">音像製品經營許可證蘇宿批005號</a>|  出版物經營許可證編號新出發(蘇)批字第N-012號  |  互聯網出版許可證編號新出網證(京)字150號<br><a href="http://misc.360buyimg.com/wz/wlwhjyxkz.jpg" target="_blank">網絡文化經營許可證京網文[2011]0168-061號</a>Copyright © 2004-2015  京東JD.com 版權全部<br>京東旗下網站：<a href="http://en.jd.com/" target="_blank">English Site</a></div>
519         <div class="authentication"><a rel="nofollow" target="_blank" href="http://www.hd315.gov.cn/beian/view.asp?bianhao=010202007080200026"><img width="108" height="40" alt="經營性網站備案中心" src="<c:url value='/resource'/>/108_40_zZOKnl.gif" class="err-product"></a>
520             <a rel="nofollow" target="_blank" tabindex="-1"
521                 href="https://ss.cnnic.cn/verifyseal.dll?sn=2008070300100000031&ct=df&pa=294005"
522                 id="urlknet"><img width="108" height="40" border="true"
523                 name="CNNIC_seal" alt="可信網站"
524                 src="<c:url value='/resource'/>/kxwz.gif"
525                 class="err-product"></a>
526             <a rel="nofollow" target="_blank"
527                 href="http://www.bj.cyberpolice.cn/index.do"><img width="108"
528                 height="40" alt="朝陽網絡警察"
529                 src="<c:url value='/resource'/>/cywljc.png"
530                 class="err-product"></a>
531             <a rel="nofollow" target="_blank"
532                 href="https://search.szfw.org/cert/l/CX20120111001803001836"><img
533                 width="112" height="40"
534                 src="<c:url value='/resource'/>/112_40_WvArIl.png"
535                 class="err-product"></a>
536         </div>
537     </div>
538 </div>
539 </body>
540 </html>

5 後臺實現

1 封裝pageBean

pageBean也能夠直接封裝到queryVo裏面去。

package com.query.jd.vo;

public class PageBean {

     //當前頁
    private Integer currentPage;
    //總頁數
    private Integer totalPage;
    //總記錄數
    private Long totalCount;
    public Integer getCurrentPage() {
        return currentPage;
    }
    public void setCurrentPage(Integer currentPage) {
        this.currentPage = currentPage;
    }
    public Integer getTotalPage() {
        return totalPage;
    }
    public void setTotalPage(Integer totalPage) {
        this.totalPage = totalPage;
    }
    public Long getTotalCount() {
        return totalCount;
    }
    public void setTotalCount(Long totalCount) {
        this.totalCount = totalCount;
    }
}

2 封裝QueryVo

package com.query.jd.vo;

import java.io.Serializable;

public class QueryVo implements Serializable {

    private static final long serialVersionUID = 1L;

    // 關鍵詞
    private String queryString;
    // 過濾條件   商品類型
    private String catalog_name;
    // 過濾條件   價格區間
    private String price;
    // 排序 1 正 0倒
    private String sort;
    public String getQueryString() {
        return queryString;
    }
    public void setQueryString(String queryString) {
        this.queryString = queryString;
    }
    public String getCatalog_name() {
        return catalog_name;
    }
    public void setCatalog_name(String catalog_name) {
        this.catalog_name = catalog_name;
    }
    public String getPrice() {
        return price;
    }
    public void setPrice(String price) {
        this.price = price;
    }
    public String getSort() {
        return sort;
    }
    public void setSort(String sort) {
        this.sort = sort;
    }
}

3.封裝ProductModelVo

package com.query.jd.vo;

import java.io.Serializable;

public class ProductModelVo implements Serializable{

    private static final long serialVersionUID = 1L;
    // 商品編號
    private String pid;
    // 商品名稱
    private String name;
    // 商品分類名稱
    private String catalog_name;
    // 價格
    private float price;
    // 商品描述
    private String description;
    // 圖片名稱
    private String picture;
    
    public String getPid() {
        return pid;
    }
    public void setPid(String pid) {
        this.pid = pid;
    }
    public String getName() {
        return name;
    }
    public void setName(String name) {
        this.name = name;
    }
    public String getCatalog_name() {
        return catalog_name;
    }
    public void setCatalog_name(String catalog_name) {
        this.catalog_name = catalog_name;
    }
    public float getPrice() {
        return price;
    }
    public void setPrice(float price) {
        this.price = price;
    }
    public String getDescription() {
        return description;
    }
    public void setDescription(String description) {
        this.description = description;
    }
    public String getPicture() {
        return picture;
    }
    public void setPicture(String picture) {
        this.picture = picture;
    }
}

4 controller

controller層主要接收前臺頁面提交過來的參數，已經回寫前臺頁面須要的數據。

package com.query.jd.controller;

import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;

import com.query.jd.service.IGoodsService;
import com.query.jd.vo.PageBean;
import com.query.jd.vo.ProductModelVo;
import com.query.jd.vo.QueryVo;

@Controller
public class GoodsController {

    @Autowired
    private IGoodsService goodsService;
    
    @RequestMapping(value="/list.action")
    public String queryGoodsList(QueryVo vo,PageBean pageBean, Model model){
        
        //調用service根據條件查詢
        List<ProductModelVo> ProductModelList = null;
        try {
            ProductModelList = goodsService.queryGoodsList(vo,pageBean);
        } catch (Exception e) {
            e.printStackTrace();
        }
        
        model.addAttribute("ProductModelList", ProductModelList);
        //查詢條件的回顯
        model.addAttribute("queryString", vo.getQueryString());
        model.addAttribute("catalog_name",vo.getCatalog_name() );
        model.addAttribute("price", vo.getPrice());
        model.addAttribute("sort",vo.getSort() );
        
        //分頁相關數據回顯
        model.addAttribute("currentPage", pageBean.getCurrentPage());
        model.addAttribute("totalPage", pageBean.getTotalPage());
        model.addAttribute("totalCount", pageBean.getTotalCount());
        
        return "product_list";
    }
}

 

5 service

service也就調用一下dao層完成查詢功能

package com.query.jd.service.impl;

import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import com.query.jd.dao.IGoodsDao;
import com.query.jd.service.IGoodsService;
import com.query.jd.vo.PageBean;
import com.query.jd.vo.ProductModelVo;
import com.query.jd.vo.QueryVo;

@Service
public class GoodsServiceImpl implements IGoodsService {

    @Autowired
    private IGoodsDao goodsDao;
    /**
     * 商品篩選
     * @throws Exception 
     */
    @Override
    public List<ProductModelVo> queryGoodsList(QueryVo vo,PageBean pageBean) throws Exception {
        return goodsDao.queryGoodsList(vo,pageBean);
    }
}

6 dao

dao層作的事情最多，主要包括：

1.建立查詢對象

2.設置查詢條件（關鍵詞）

3.設置過濾條件（分類/價格）

4.設置排序

5.高亮顯示的設置

6.執行查詢

7.獲取結果集/高亮顯示內容

8.結果的處理

  1 package com.query.jd.dao.impl;
  2 
  3 import java.util.ArrayList;
  4 import java.util.HashSet;
  5 import java.util.List;
  6 import java.util.Map;
  7 
  8 import org.apache.solr.client.solrj.SolrQuery;
  9 import org.apache.solr.client.solrj.SolrServer;
 10 import org.apache.solr.client.solrj.response.QueryResponse;
 11 import org.apache.solr.common.SolrDocument;
 12 import org.apache.solr.common.SolrDocumentList;
 13 import org.springframework.beans.factory.annotation.Autowired;
 14 import org.springframework.stereotype.Repository;
 15 
 16 import com.query.jd.dao.IGoodsDao;
 17 import com.query.jd.vo.PageBean;
 18 import com.query.jd.vo.ProductModelVo;
 19 import com.query.jd.vo.QueryVo;
 20 
 21 @Repository
 22 public class GoodsDaoImpl implements IGoodsDao {
 23 
 24     @Autowired
 25     private SolrServer solrServer;
 26     
 27     @Override
 28     public List<ProductModelVo> queryGoodsList(QueryVo vo,PageBean pageBean) throws Exception {
 29 
 30         //建立查詢對象
 31         SolrQuery solrQuery = new SolrQuery();
 32         
 33         //關鍵詞
 34         if(null != vo.getQueryString() && !"".equals(vo.getQueryString().trim())){
 35             solrQuery.set("q", vo.getQueryString());
 36             solrQuery.set("df", "product_name");
 37         }
 38         
 39         //商品的類型
 40         if(null != vo.getCatalog_name() && !"".equals(vo.getCatalog_name().trim())){
 41             solrQuery.set("fq","product_catalog_name:"+vo.getCatalog_name());
 42         }
 43         
 44         //商品的價格 10-19 50-*
 45         if(null != vo.getPrice()&& !"".equals(vo.getPrice().trim())){
 46             String[] split = vo.getPrice().split("-");
 47             if(split.length==2){
 48                 //solrQuery.set("fq","product_price:["+split[0]+"TO"+split[1]+"]");
 49                 solrQuery.addFilterQuery("product_price:[" + split[0] + " TO " + split[1] + "]");
 50             }else{
 51                 //solrQuery.set("fq","product_price:["+split[0]+"TO *]");
 52                 solrQuery.addFilterQuery("product_price:[" + split[0] + " TO *]");
 53             }
 54         }
 55         
 56         //價格排序
 57         if("1".equals(vo.getSort())){
 58             solrQuery.set("sort", "product_price desc");
 59             //solrQuery.setSort("product_price", ORDER.asc);
 60         }else{
 61             solrQuery.set("sort", "product_price asc");
 62         }
 63         
 64         //打開高亮顯示
 65         solrQuery.setHighlight(true);
 66         //設置高亮顯示的域
 67         solrQuery.addHighlightField("product_name");
 68         //設置高亮顯示的簡單前綴
 69         solrQuery.setHighlightSimplePre("<span style='color:red;'>");
 70         //設置高亮顯示的簡單後綴
 71         solrQuery.setHighlightSimplePost("</span>");
 72         
 73         
 74         Integer currentPage = 1; //默認顯示第一頁
 75         Integer start = 0; //默認從第一條開始
 76         if(null != pageBean.getCurrentPage()){
 77             currentPage = pageBean.getCurrentPage();
 78             start = (currentPage-1)*12; //默認固定顯示12條
 79         }    
 80         solrQuery.setStart(start);
 81         solrQuery.setRows(12);
 82         
 83         
 84         //執行查詢
 85         QueryResponse queryResponse = solrServer.query(solrQuery);
 86         
 87         //獲取結果集
 88         SolrDocumentList solrDocumentList = queryResponse.getResults();
 89         
 90         //將當前顯示的頁數放回去
 91         pageBean.setCurrentPage(currentPage);
 92         //獲取查詢到總記錄數
 93         long numFound = solrDocumentList.getNumFound();
 94         pageBean.setTotalCount(numFound);
 95         //計算總頁數
 96         Integer totalPage = (int) Math.ceil((numFound*1.0/12.0));
 97         pageBean.setTotalPage(totalPage);
 98         
 99         
100         //獲取高亮顯示內容
101         Map<String, Map<String, List<String>>> highlighting = queryResponse.getHighlighting();
102         
103         List<ProductModelVo> productModelList = new ArrayList<ProductModelVo>();
104         
105         //結果處理
106         for (SolrDocument solrDocument : solrDocumentList) {
107             ProductModelVo productModelVo = new ProductModelVo();
108             
109             //獲取商品的id
110             String id = (String) solrDocument.get("id");
111             productModelVo.setPid(id);
112             
113             //判斷商品的名稱是否高亮顯示
114             Map<String, List<String>> map = highlighting.get(id);
115             List<String> list =null;
116             if(null != map){
117                 list = map.get("product_name");
118             }
119             String productName ="";
120             if(list != null && list.size()>0){
121                 productName = list.get(0);
122             }else{
123                 productName = (String) solrDocument.get("product_name");
124             }
125             productModelVo.setName(productName);
126             
127             //商品的分類
128             String catalog_name = (String) solrDocument.get("product_catalog_name");
129             productModelVo.setCatalog_name(catalog_name);
130             
131             //// 價格
132             float price = (float) solrDocument.get("product_price") ;
133             productModelVo.setPrice(price);
134             
135             // 圖片名稱
136             String picture = (String) solrDocument.get("product_picture");
137             productModelVo.setPicture(picture);
138             
139             productModelList.add(productModelVo);
140         }
141         return productModelList;
142     }
143 }

 

solr服務器的搭建請參照：solr的安裝及配置詳細教程/solr服務器的搭建

源碼下載地址：連接：https://pan.baidu.com/s/1NARcTYOICZn7zl6C8mSpBg 密碼：rytn

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程