搜索
一、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>