[TOC] ## 步驟 1 : 先運行，看到效果，再學習 先將完整的 tmall_ssm 項目（向老師要相關資料），配置運行起來，確認可用之后，再學習做了哪些步驟以達到這樣的效果。 ## 步驟 2 : 模仿和排錯 在確保可運行項目能夠正確無誤地運行之后，再嚴格照著教程的步驟，對代碼模仿一遍。 模仿過程難免代碼有出入，導致無法得到期望的運行結果，此時此刻通過比較**正確答案** ( 可運行項目 ) 和自己的代碼，來定位問題所在。 采用這種方式，**學習有效果，排錯有效率**，可以較為明顯地提升學習速度，跨過學習路上的各個檻。 ## 步驟 3 : 界面效果 訪問地址：`http://localhost:8080/tmall_ssm/forecategory?cid=74`  ## 步驟 4 : 5個Comparator比較器 分類這個頁面有排序功能，所以在講解ForeController之前，先準備5個Comparator比較器 1. ProductAllComparator 綜合比較器 把 銷量x評價 高的放前面 2. ProductReviewComparator 人氣比較器 把 評價數量多的放前面 3. ProductDateComparator 新品比較器 把 創建日期晚的放前面 4. ProductSaleCountComparator 銷量比較器 把 銷量高的放前面 5. ProductPriceComparator 價格比較器 把 價格低的放前面 ProductAllComparator.java ~~~ package com.dodoke.tmall.comparator; import java.util.Comparator; import com.dodoke.tmall.pojo.Product; public class ProductAllComparator implements Comparator<Product> { @Override public int compare(Product p1, Product p2) { return p2.getReviewCount() * p2.getSaleCount() - p1.getReviewCount() * p1.getSaleCount(); } } ~~~ ProductReviewComparator.java ~~~ package com.dodoke.tmall.comparator; import java.util.Comparator; import com.dodoke.tmall.pojo.Product; public class ProductReviewComparator implements Comparator<Product> { @Override public int compare(Product p1, Product p2) { return p2.getReviewCount() - p1.getReviewCount(); } } ~~~ ProductDateComparator.java ~~~ package com.dodoke.tmall.comparator; import java.util.Comparator; import com.dodoke.tmall.pojo.Product; public class ProductDateComparator implements Comparator<Product> { @Override public int compare(Product p1, Product p2) { return p2.getCreateDate().compareTo(p1.getCreateDate()); } } ~~~ ProductSaleCountComparator.java ~~~ package com.dodoke.tmall.comparator; import java.util.Comparator; import com.dodoke.tmall.pojo.Product; public class ProductSaleCountComparator implements Comparator<Product> { @Override public int compare(Product p1, Product p2) { return p2.getSaleCount() - p1.getSaleCount(); } } ~~~ ProductPriceComparator.java ~~~ package com.dodoke.tmall.comparator; import java.util.Comparator; import com.dodoke.tmall.pojo.Product; public class ProductPriceComparator implements Comparator<Product> { @Override public int compare(Product p1, Product p2) { return (int) (p1.getPromotePrice() - p2.getPromotePrice()); } } ~~~ ## 步驟 5 : ForeController.category() 1. 獲取參數cid 2. 根據cid獲取分類Category對象 c 3. 為c填充產品 4. 為產品填充銷量和評價數據 5. 獲取參數sort 5.1 如果`sort==null`，即不排序 5.2 如果`sort!=null`，則根據sort的值，從5個Comparator比較器中選擇一個對應的排序器進行排序 6. 把c放在model中 7. 服務端跳轉到 category.jsp ~~~ package com.dodoke.tmall.controller; import java.util.Collections; import java.util.List; import javax.servlet.http.HttpSession; 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 org.springframework.web.bind.annotation.RequestParam; import org.springframework.web.bind.annotation.ResponseBody; import org.springframework.web.util.HtmlUtils; import com.dodoke.tmall.comparator.ProductAllComparator; import com.dodoke.tmall.comparator.ProductDateComparator; import com.dodoke.tmall.comparator.ProductPriceComparator; import com.dodoke.tmall.comparator.ProductReviewComparator; import com.dodoke.tmall.comparator.ProductSaleCountComparator; import com.dodoke.tmall.pojo.Category; import com.dodoke.tmall.pojo.Product; import com.dodoke.tmall.pojo.ProductImage; import com.dodoke.tmall.pojo.PropertyValue; import com.dodoke.tmall.pojo.Review; import com.dodoke.tmall.pojo.User; import com.dodoke.tmall.service.CategoryService; import com.dodoke.tmall.service.OrderItemService; import com.dodoke.tmall.service.OrderService; import com.dodoke.tmall.service.ProductImageService; import com.dodoke.tmall.service.ProductService; import com.dodoke.tmall.service.PropertyValueService; import com.dodoke.tmall.service.ReviewService; import com.dodoke.tmall.service.UserService; @Controller @RequestMapping("") public class ForeController { @Autowired CategoryService categoryService; @Autowired ProductService productService; @Autowired UserService userService; @Autowired ProductImageService productImageService; @Autowired PropertyValueService propertyValueService; @Autowired OrderService orderService; @Autowired OrderItemService orderItemService; @Autowired ReviewService reviewService; @RequestMapping("forehome") public String home(Model model) { List<Category> cs = categoryService.list(); productService.fill(cs); productService.fillByRow(cs); model.addAttribute("cs", cs); return "fore/home"; } @RequestMapping("foreregister") public String register(Model model, User user) { String name = user.getName(); // 把賬號里的特殊符號進行轉義 name = HtmlUtils.htmlEscape(name); user.setName(name); boolean exist = userService.isExist(name); if (exist) { String m = "用戶名已經被使用,不能使用"; model.addAttribute("msg", m); model.addAttribute("user", null); return "fore/register"; } userService.add(user); return "redirect:registerSuccessPage"; } @RequestMapping("forelogin") public String login(@RequestParam("name") String name, @RequestParam("password") String password, Model model, HttpSession session) { name = HtmlUtils.htmlEscape(name); User user = userService.get(name, password); if (null == user) { model.addAttribute("msg", "賬號密碼錯誤"); return "fore/login"; } session.setAttribute("user", user); return "redirect:forehome"; } @RequestMapping("forelogout") public String logout(HttpSession session) { session.removeAttribute("user"); return "redirect:forehome"; } @RequestMapping("foreproduct") public String product(int pid, Model model) { Product p = productService.get(pid); // 根據對象p，獲取這個產品對應的單個圖片集合 List<ProductImage> productSingleImages = productImageService.list(p.getId(), ProductImageService.type_single); // 根據對象p，獲取這個產品對應的詳情圖片集合 List<ProductImage> productDetailImages = productImageService.list(p.getId(), ProductImageService.type_detail); p.setProductSingleImages(productSingleImages); p.setProductDetailImages(productDetailImages); // 獲取產品的所有屬性值 List<PropertyValue> pvs = propertyValueService.list(p.getId()); // 獲取產品對應的所有的評價 List<Review> reviews = reviewService.list(p.getId()); // 設置產品的銷量和評價數量 productService.setSaleAndReviewNumber(p); model.addAttribute("reviews", reviews); model.addAttribute("p", p); model.addAttribute("pvs", pvs); return "fore/product"; } @RequestMapping("forecheckLogin") @ResponseBody public String checkLogin(HttpSession session) { User user = (User) session.getAttribute("user"); if (null != user) { return "success"; } return "fail"; } @RequestMapping("foreloginAjax") @ResponseBody public String loginAjax(@RequestParam("name") String name, @RequestParam("password") String password, HttpSession session) { name = HtmlUtils.htmlEscape(name); User user = userService.get(name, password); if (null == user) { return "fail"; } session.setAttribute("user", user); return "success"; } @RequestMapping("forecategory") public String category(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; } } model.addAttribute("c", c); return "fore/category"; } } ~~~  ## 步驟 6 : category.jsp 與 register.jsp 相仿，category.jsp也包含了header.jsp, top.jsp, simpleSearch.jsp， footer.jsp 等公共頁面。 中間是分類業務頁面 categoryPage.jsp ~~~ <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %> <%@include file="../include/header.jsp"%> <%@include file="../include/top.jsp"%> <%@include file="../include/search.jsp"%> <%@include file="../include/category/categoryPage.jsp"%> <%@include file="../include/footer.jsp"%> ~~~ ## 步驟 7 : categoryPage.jsp categoryPage.jsp 里有3個內容 1. 顯示當前分類圖片 `<img src="img/category/${c.id}.jpg">` 2. 排序條 sortBar.jsp 3. 產品列表 productsByCategory.jsp ~~~ <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <title>模仿天貓官網-${c.name}</title> <div id="category"> <div class="categoryPageDiv"> <img src="img/category/${c.id}.jpg"> <%@include file="sortBar.jsp"%> <%@include file="productsByCategory.jsp"%> </div> </div> ~~~ ## 步驟 8 : sortBar.jsp sortBar.jsp 即排序條，做了如下幾個與數據相關的事情 1. 根據sort參數判斷哪個排序按鈕高亮 ~~~ <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> ~~~ 2. 每個排序按鈕提交到本頁面，即/forecategory，并帶上參數sort  ### js代碼講解 ~~~ <input class="sortBarPrice beginPrice" type="text" placeholder="請輸入"> <input class="sortBarPrice endPrice" type="text" placeholder="請輸入"> ~~~ 首先開始價格和結束價格的輸入框，都使用了sortBarPrice, 這樣通過 `$("input.sortBarPrice").keyup(function(){})` 就可以給這兩個輸入框添加keyup事件 ~~~ 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); ~~~ 接著判斷輸入的值，是否是數字，如果不是數字，或者是負數就顯示1. ~~~ var begin = $("input.beginPrice").val(); var end = $("input.endPrice").val(); if(!isNaN(begin) && !isNaN(end)){ $("div.productUnit").hide(); $("div.productUnit").each(function(){ var price = $(this).attr("price"); price = new Number(price); if(price<=end && price>=begin) $(this).show(); }); } ~~~ 緊跟著獲取開始和結束價格 `<div price="799.2" class="productUnit">` 首先，產品項上有一個自定義屬性price，標注了該產品項的價格 接著，隱藏所有的產品項，然后遍歷每一個產品項，當產品的價格在開始和結束區間的話，就把它顯示出來。 > `price = new Number(price)；`這一句的作用，是確保price變量是數字類型，否則就有可能是字符串類型，導致后續的運算出現偏差了 ## 步驟 9 : productsByCategory.jsp productsByCategory.jsp顯示當前分類下的所有產品 通過forEach遍歷c.products集合里的每個產品，并把產品標題，價格，圖片，評價數，成交數打印出來 ~~~ <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%> <%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %> <%@ taglib prefix='fmt' uri="http://java.sun.com/jsp/jstl/fmt" %> <div class="categoryProducts"> <c:forEach items="${c.products}" var="p" varStatus="stc"> <div class="productUnit" price="${p.promotePrice}"> <div class="productUnitFrame"> <a href="foreproduct?pid=${p.id}"> <img class="productImage" src="img/productSingle_middle/${p.firstProductImage.id}.jpg"> </a> <span class="productPrice">￥<fmt:formatNumber type="number" value="${p.promotePrice}" maxFractionDigits="2" 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="img/site/wangwang.png"> </a> </span> </div> </div> </div> </c:forEach> <div style="clear:both"></div> </div> ~~~ > 當然這里也可以使用SQL語句排序，實際工作多半都是在數據庫的基礎上做的排序，甚至多字段排序。這里是演示比較器的這種用法。 > 自己可以嘗試使用SQL語句排序。