天猫整站（简易版）SSM（十一）无需登录即可使用的功能

搜索

一、search.jsp以及simpleSearch.jsp

每个页面都包含了搜索的jsp，首页和搜索结果页包含的是search.jsp，其他页面包含的是simpleSearch.jsp。这两个页面都提供了一个form，提交数据keyword到foresearch这个路径。

search.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
		 pageEncoding="UTF-8" isELIgnored="false"%>

<a href="${contextPath}/forehome">
	<img id="logo" src="${pageContext.request.contextPath}/img/site/logo.gif" class="logo">
</a>

<form action="foresearch" method="post" >
	<div class="searchDiv">
		<input name="keyword" type="text" value="${param.keyword}" placeholder="时尚男鞋  太阳镜 ">
		<button  type="submit" class="searchButton">搜索</button>
		<div class="searchBelow">
			<c:forEach items="${cs}" var="c" varStatus="st">
				<c:if test="${st.count>=5 and st.count<=8}">
						<span>
							<a href="forecategory?cid=${c.id}">
									${c.name}
							</a>
							<c:if test="${st.count!=8}">
								<span>|</span>
							</c:if>
						</span>
				</c:if>
			</c:forEach>
		</div>
	</div>
</form>

simpleSearch.jsp

<%--
  Created by IntelliJ IDEA.
  User: 
  Date: 2018/9/27
  Time: 11:55
  To change this template use File | Settings | File Templates.
--%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" isELIgnored="false"%>

<div >
    <a href="${contextPath}/forehome">
        <img id="simpleLogo" class="simpleLogo" src="${pageContext.request.contextPath}/img/site/simpleLogo.png">
    </a>

    <form action="foresearch" method="post" >
        <div class="simpleSearchDiv pull-right">
            <input type="text" placeholder="平衡车 原汁机" name="keyword">
            <button class="searchButton" type="submit">搜天猫</button>
            <div class="searchBelow">
                <c:forEach items="${cs}" var="c" varStatus="st">
                    <c:if test="${st.count>=8 and st.count<=11}">
                    <span>
                        <a href="forecategory?cid=${c.id}">
                                ${c.name}
                        </a>
                        <c:if test="${st.count!=11}">
                            <span>|</span>
                        </c:if>
                    </span>
                    </c:if>
                </c:forEach>
            </div>
        </div>
    </form>
    <div style="clear:both"></div>
</div>

再添加一个功能，在搜索结果页添加一个sortBar，目前只有商品分类页有排序。

sortBar.jsp

<%--
  Created by IntelliJ IDEA.
  User: 
  Date: 2018/9/28
  Time: 0:02
  To change this template use File | Settings | File Templates.
--%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" isELIgnored="false"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>

<script>
    $(function(){
        $("input.sortBarPrice").keyup(function(){
            var num= $(this).val();
            if(num.length===0){
                $("div.productUnit").show();
                return;
            }

            num = parseInt(num);
            if(isNaN(num))
                num= 1;
            if(num<=0)
                num = 1;
            $(this).val(num);

            var begin = $("input.beginPrice").val();
            var end = $("input.endPrice").val();
            if(!isNaN(begin) && !isNaN(end)){
                console.log(begin);
                console.log(end);
                $("div.productUnit").hide();
                $("div.productUnit").each(function(){
                    var price = $(this).attr("price");
                    price = new Number(price);

                    if(price<=end && price>=begin)
                        $(this).show();
                });
            }

        });
    });
</script>
<div class="categorySortBar">

    <table class="categorySortBarTable categorySortTable">
        <tr>
            <td <c:if test="${'all'==param.sort||empty param.sort}">class="grayColumn"</c:if> ><a href="?keyword=${keyword}&sort=all">综合<span class="glyphicon glyphicon-arrow-down"></span></a></td>
            <td <c:if test="${'review'==param.sort}">class="grayColumn"</c:if> ><a href="?keyword=${keyword}&sort=review">人气<span class="glyphicon glyphicon-arrow-down"></span></a></td>
            <td <c:if test="${'date'==param.sort}">class="grayColumn"</c:if>><a href="?keyword=${keyword}&sort=date">新品<span class="glyphicon glyphicon-arrow-down"></span></a></td>
            <td <c:if test="${'saleCount'==param.sort}">class="grayColumn"</c:if>><a href="?keyword=${keyword}&sort=saleCount">销量<span class="glyphicon glyphicon-arrow-down"></span></a></td>
            <td <c:if test="${'price'==param.sort}">class="grayColumn"</c:if>><a href="?keyword=${keyword}&sort=price">价格<span class="glyphicon glyphicon-resize-vertical"></span></a></td>
        </tr>
    </table>

    <table class="categorySortBarTable">
        <tr>
            <td><input class="sortBarPrice beginPrice" type="text" placeholder="请输入"></td>
            <td class="grayColumn priceMiddleColumn">-</td>
            <td><input class="sortBarPrice endPrice" type="text" placeholder="请输入"></td>
        </tr>
    </table>

</div>

二、ForeController.search()

通过search.jsp或者simpleSearch.jsp提交数据到路径 /foresearch，导致ForeController.search()方法被调用

获取参数keyword
根据keyword进行模糊查询，获取满足条件的前20个产品
为这些产品设置销量和评价数量
获取排序字段sort
根据不同的排序字段对查询到的products进行排序
把产品集合products设置在model的"ps"属性上
将keyword设置在“keyword”属性上，以便排序的时候带上关键字
属性服务端跳转到 searchResult.jsp 页面

    @RequestMapping("foresearch")
    public String search( @RequestParam("keyword") String keyword,String sort, Model model){

        PageHelper.offsetPage(0,20);
        List<Product> products = productService.search(keyword);
        productService.setSaleAndReviewNumber(products);

        if(null!=sort){
            switch(sort){
                case "review":
                    Collections.sort(products,new ProductReviewComparator());
                    break;
                case "date" :
                    Collections.sort(products,new ProductDateComparator());
                    break;

                case "saleCount" :
                    Collections.sort(products,new ProductSaleCountComparator());
                    break;

                case "price":
                    Collections.sort(products,new ProductPriceComparator());
                    break;

                case "all":
                    Collections.sort(products,new ProductAllComparator());
                    break;

                default:
            }
        }

        model.addAttribute("ps",products);
        model.addAttribute("keyword",keyword);
        return "fore/searchResult";
    }

三、ProductService

修改ProductService，增加search方法

四、ProductServiceImpl

修改ProductServiceImpl实现search方法，通过关键字进行模糊查询

    @Override
    public List<Product> search(String keyword) {
        ProductExample example = new ProductExample();
        example.createCriteria().andNameLike("%"+keyword+"%");
        example.setOrderByClause("id desc");
        List<Product> products = productMapper.selectByExample(example);
        setFirstProductImage(products);
        setCategory(products);
        return products;
    }

五、searchResult.jsp

<%--
  Created by IntelliJ IDEA.
  User: 
  Date: 2018/9/28
  Time: 14:10
  To change this template use File | Settings | File Templates.
--%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" isELIgnored="false"%>

<%@include file="../include/fore/header.jsp"%>
<%@include file="../include/fore/top.jsp"%>
<%@include file="../include/fore/search.jsp"%>
<%@include file="../include/fore/search/searchResultPage.jsp"%>
<%@include file="../include/fore/footer.jsp"%>

六、searchResultPage.jsp

包含了排序条和搜索结果业务页面 productsBySearch.jsp

<%--
  Created by IntelliJ IDEA.
  User: 
  Date: 2018/9/28
  Time: 14:17
  To change this template use File | Settings | File Templates.
--%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" isELIgnored="false"%>

<div id="searchResult">

    <div class="searchResultDiv">
        <%@include file="sortBar.jsp"%>
        <%@include file="productsBySearch.jsp"%>
    </div>

</div>

七、productsBySearch.jsp

<%--
  Created by IntelliJ IDEA.
  User: 
  Date: 2018/9/28
  Time: 14:18
  To change this template use File | Settings | File Templates.
--%>

<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" isELIgnored="false"%>

<div class="searchProducts">

    <c:forEach items="${ps}" var="p">
        <div class="productUnit" price="${p.promotePrice}">
            <a href="foreproduct?pid=${p.id}">
                <img class="productImage" src="${pageContext.request.contextPath}/img/productSingle/${p.productImage.id}.jpg">
            </a>
            <span class="productPrice">¥<fmt:formatNumber type="number" value="${p.promotePrice}" minFractionDigits="2"/></span>
            <a class="productLink" href="foreproduct?pid=${p.id}">
                    ${fn:substring(p.name, 0, 50)}
            </a>

            <a class="tmallLink" href="foreproduct?pid=${p.id}">天猫专卖</a>

            <div class="productInfo">
                <span class="monthDeal ">月成交 <span class="productDealNumber">${p.saleCount}笔</span></span>
                <span class="productReview">评价<span class="productReviewNumber">${p.reviewCount}</span></span>
                <span class="wangwang"><img src="${pageContext.request.contextPath}/img/site/wangwang.png"></span>
            </div>
        </div>
    </c:forEach>
    <c:if test="${empty ps}">
        <div class="noMatch">没有满足条件的产品</div>
    </c:if>
    <div style="clear:both"></div>
</div>