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

分类页

一、提供五个比较器

分类这个页面有排序功能，先准备5个Comparator比较器

1.1 ProductAllComparator 综合比较器

把销量x评价高的放前面

package comparator;

import com.li.tmall.pojo.Product;

import java.util.Comparator;

/**
 * @Author: 98050
 * Time: 2018-09-27 23:16
 * Feature:
 */
public class ProductAllComparator implements Comparator<Product> {
    @Override
    public int compare(Product o1, Product o2) {
        return o2.getReviewCount()*o2.getSaleCount() - o1.getReviewCount()*o1.getSaleCount();
    }
}

1.2 ProductReviewComparator 人气比较器

把评价数量多的放前面

package comparator;

import com.li.tmall.pojo.Product;

import java.util.Comparator;

/**
 * @Author: 98050
 * Time: 2018-09-27 23:30
 * Feature:
 */
public class ProductReviewComparator implements Comparator<Product> {
    @Override
    public int compare(Product o1, Product o2) {
        return o2.getReviewCount() - o1.getReviewCount();
    }
}

1.3 ProductDateComparator 新品比较器

把创建日期晚的放前面

package comparator;

import com.li.tmall.pojo.Product;

import java.util.Comparator;

/**
 * @Author: 98050
 * Time: 2018-09-27 23:20
 * Feature:
 */
public class ProductDateComparator implements Comparator<Product> {
    @Override
    public int compare(Product o1, Product o2) {
        return o2.getCreateDate().compareTo(o1.getCreateDate());
    }
}

1.4 ProductSaleCountComparator 销量比较器

把销量高的放前面

package comparator;

import com.li.tmall.pojo.Product;

import java.util.Comparator;

/**
 * @Author: 98050
 * Time: 2018-09-27 23:32
 * Feature:
 */
public class ProductSaleCountComparator implements Comparator<Product> {
    @Override
    public int compare(Product o1, Product o2) {
        return o2.getSaleCount() - o1.getSaleCount();
    }
}

1.5 ProductPriceComparator 价格比较器

把价格低的放前面

package comparator;

import com.li.tmall.pojo.Product;

import java.util.Comparator;

/**
 * Author: 98050
 * Time: 2018-09-27 23:22
 * Feature:
 */
public class ProductPriceComparator implements Comparator<Product> {
    @Override
    public int compare(Product o1, Product o2) {
        double result = o1.getPromotePrice() - o2.getPromotePrice();

        if (result > 0){
            return (int)(result+1);
        }else if (result == 0){
            return 0;
        }else {
            return (int) (result - 1);
        }

    }
}

二、ForeController.category()

获取参数cid
根据cid获取分类Category对象 c
为c填充产品
为产品填充销量和评价数据
获取参数sort

如果sort==null，即不排序

如果sort!=null，则根据sort的值，从5个比较器中选择一个对应的排序器进行排序

把c放在model中
服务端跳转到 category.jsp

    @RequestMapping("forecategory")
    public String category(@RequestParam("cid") int cid,String sort, Model model) {
        Category c = categoryService.get(cid);
        productService.fill(c);
        productService.setSaleAndReviewNumber(c.getProducts());

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

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

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

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

                default:
            }
        }

        model.addAttribute("c", c);
        return "fore/category";
    }

三、category.jsp

<%@ 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/category/categoryPage.jsp"%>
<%@include file="../include/fore/footer.jsp"%>

四、categoryPage.jsp

<%--
  Created by IntelliJ IDEA.
  User: 
  Date: 2018/9/28
  Time: 0:01
  To change this template use File | Settings | File Templates.
--%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" isELIgnored="false"%>
<title>模仿天猫官网-${c.name}</title>
<div id="category">
    <div class="categoryPageDiv">
        <img src="${pageContext.request.contextPath}/img/category/${c.id}.jpg">
        <%@include file="sortBar.jsp"%>
        <%@include file="productsByCategory.jsp"%>
    </div>

</div>

五、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="?cid=${c.id}&sort=all">综合<span class="glyphicon glyphicon-arrow-down"></span></a></td>
            <td <c:if test="${'review'==param.sort}">class="grayColumn"</c:if> ><a href="?cid=${c.id}&sort=review">人气<span class="glyphicon glyphicon-arrow-down"></span></a></td>
            <td <c:if test="${'date'==param.sort}">class="grayColumn"</c:if>><a href="?cid=${c.id}&sort=date">新品<span class="glyphicon glyphicon-arrow-down"></span></a></td>
            <td <c:if test="${'saleCount'==param.sort}">class="grayColumn"</c:if>><a href="?cid=${c.id}&sort=saleCount">销量<span class="glyphicon glyphicon-arrow-down"></span></a></td>
            <td <c:if test="${'price'==param.sort}">class="grayColumn"</c:if>><a href="?cid=${c.id}&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>

六、productsByCategory.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"%>

<c:if test="${empty param.categorycount}">
    <c:set var="categorycount" scope="page" value="100"/>
</c:if>

<c:if test="${!empty param.categorycount}">
    <c:set var="categorycount" scope="page" value="${param.categorycount}"/>
</c:if>

<div class="categoryProducts">
    <c:forEach items="${c.products}" var="p" varStatus="stc">
        <c:if test="${stc.count<=categorycount}">
            <div class="productUnit" price="${p.promotePrice}">
                <div class="productUnitFrame">
                    <a href="foreproduct?pid=${p.id}">
                        <img class="productImage" src="${pageContext.request.contextPath}/img/productSingle_middle/${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="show1 productInfo">
                        <span class="monthDeal ">月成交 <span class="productDealNumber">${p.saleCount}笔</span></span>
                        <span class="productReview">评价<span class="productReviewNumber">${p.reviewCount}</span></span>
                        <span class="wangwang">
                    <a class="wangwanglink" href="#nowhere">
                        <img src="${pageContext.request.contextPath}/img/site/wangwang.png">
                    </a>

                    </span>
                    </div>
                </div>
            </div>
        </c:if>
    </c:forEach>
    <div style="clear:both"></div>
</div>

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

分类页

一、提供五个比较器

1.1 ProductAllComparator 综合比较器

1.2 ProductReviewComparator 人气比较器

1.3 ProductDateComparator 新品比较器

1.4 ProductSaleCountComparator 销量比较器

1.5 ProductPriceComparator 价格比较器

二、ForeController.category()

三、category.jsp

四、categoryPage.jsp

五、sortBar.jsp

六、productsByCategory.jsp

猜你喜欢