[TOC] ## 步驟 1 : 先運行，看到效果，再學習 先將完整的 tmall_ssm 項目（向老師要相關資料），配置運行起來，確認可用之后，再學習做了哪些步驟以達到這樣的效果。 ## 步驟 2 : 模仿和排錯 在確保可運行項目能夠正確無誤地運行之后，再嚴格照著教程的步驟，對代碼模仿一遍。 模仿過程難免代碼有出入，導致無法得到期望的運行結果，此時此刻通過比較**正確答案** ( 可運行項目 ) 和自己的代碼，來定位問題所在。 采用這種方式，**學習有效果，排錯有效率**，可以較為明顯地提升學習速度，跨過學習路上的各個檻。 ## 步驟 3 : 界面效果  ## 步驟 4 : 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" %> <a href="${contextPath}"> <img id="logo" src="img/site/logo.gif" class="logo"> </a> <form action="foresearch" method="post" > <div class="searchDiv"> <input name="keyword" type="text" 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： ~~~ <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <div > <a href="${contextPath}"> <img id="simpleLogo" class="simpleLogo" src="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> ~~~ ## 步驟 5 : ForeController.search() 通過search.jsp或者simpleSearch.jsp提交數據到路徑 /foresearch， 導致ForeController.search()方法被調用 1. 獲取參數keyword 2. 根據keyword進行模糊查詢，獲取滿足條件的前20個產品 3. 為這些產品設置銷量和評價數量 4. 把產品結合設置在model的"ps"屬性上 5. 服務端跳轉到 searchResult.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; import com.github.pagehelper.PageHelper; @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"; } @RequestMapping("foresearch") public String search(String keyword, Model model) { PageHelper.offsetPage(0, 20); List<Product> ps = productService.search(keyword); productService.setSaleAndReviewNumber(ps); model.addAttribute("ps", ps); return "fore/searchResult"; } } ~~~ ## 步驟 6 : ProductService 修改ProductService，增加search方法 ~~~ package com.dodoke.tmall.service; import java.util.List; import com.dodoke.tmall.pojo.Category; import com.dodoke.tmall.pojo.Product; public interface ProductService { void add(Product c); void delete(int id); void update(Product c); Product get(int id); List list(int categoryId); void setFirstProductImage(Product p); /** * 為分類填充產品集合 * * @param categorys */ public void fill(List<Category> categorys); /** * 為多個分類填充產品集合 * * @param category */ public void fill(Category category); /** * 為多個分類填充推薦產品集合，即把分類下的產品集合，按照8個為一行，拆成多行，以利于后續頁面上進行顯示 * * @param categorys */ public void fillByRow(List<Category> categorys); /** * 為產品設置銷量和評價數量 * * @param p * 產品對象 */ void setSaleAndReviewNumber(Product p); void setSaleAndReviewNumber(List<Product> ps); /** * 根據keyword進行模糊查詢 * * @param keyword * 搜索關鍵字 * @return List<Product> */ List<Product> search(String keyword); } ~~~ ## 步驟 7 : ProductServiceImpl 修改ProductServiceImpl實現search方法，通過關鍵字進行模糊查詢 ~~~ package com.dodoke.tmall.service.impl; import java.util.ArrayList; import java.util.Date; import java.util.List; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Service; import com.dodoke.tmall.mapper.ProductMapper; import com.dodoke.tmall.pojo.Category; import com.dodoke.tmall.pojo.Product; import com.dodoke.tmall.pojo.ProductExample; import com.dodoke.tmall.pojo.ProductImage; import com.dodoke.tmall.service.CategoryService; import com.dodoke.tmall.service.OrderItemService; import com.dodoke.tmall.service.ProductImageService; import com.dodoke.tmall.service.ProductService; import com.dodoke.tmall.service.ReviewService; @Service public class ProductServiceImpl implements ProductService { @Autowired ProductMapper productMapper; @Autowired CategoryService categoryService; @Autowired ProductImageService productImageService; @Autowired OrderItemService orderItemService; @Autowired ReviewService reviewService; @Override public void add(Product p) { p.setCreateDate(new Date()); productMapper.insert(p); } @Override public void delete(int id) { productMapper.deleteByPrimaryKey(id); } @Override public void update(Product p) { productMapper.updateByPrimaryKeySelective(p); } @Override public Product get(int id) { Product p = productMapper.selectByPrimaryKey(id); setFirstProductImage(p); setCategory(p); return p; } private void setCategory(Product p) { int categoryId = p.getCategoryId(); Category category = categoryService.get(categoryId); p.setCategory(category); } @Override public List list(int categoryId) { ProductExample example = new ProductExample(); example.createCriteria().andCategoryIdEqualTo(categoryId); example.setOrderByClause("id desc"); List result = productMapper.selectByExample(example); setFirstProductImage(result); setCategory(result); return result; } public void setCategory(List<Product> ps) { for (Product p : ps) { setCategory(p); } } /** * 根據productId和圖片類型查詢出所有的單個圖片，然后把第一個取出來放在firstProductImage上。 * * @param p * 產品 */ @Override public void setFirstProductImage(Product p) { List<ProductImage> pis = productImageService.list(p.getId(), ProductImageService.type_single); if (!pis.isEmpty()) { ProductImage pi = pis.get(0); p.setFirstProductImage(pi); } } /** * 給多個產品設置圖片 * * @param ps * 產品集合 */ public void setFirstProductImage(List<Product> ps) { for (Product p : ps) { setFirstProductImage(p); } } /** * 為分類填充產品集合 * * @param categorys */ @Override public void fill(Category c) { List<Product> ps = list(c.getId()); c.setProducts(ps); } /** * 為多個分類填充產品集合 * * @param category */ @Override public void fill(List<Category> cs) { for (Category c : cs) { fill(c); } } /** * 為多個分類填充推薦產品集合，即把分類下的產品集合，按照8個為一行，拆成多行，以利于后續頁面上進行顯示 * * @param categorys */ @Override public void fillByRow(List<Category> cs) { // 把分類下的產品集合，按照8個為一行，拆成多行，以利于后續頁面上進行顯示 int productNumberEachRow = 8; // 將categorylist中每個category拿出來循環 for (Category c : cs) { // 獲取每個分類中對應的產品，在使用fillByRow(List<Category> // cs)這個方法前,需要先使用fill方法，注入分類中的所有產品，因此在這里才可以取出產品 List<Product> products = c.getProducts(); // 每一行產品的list List<List<Product>> productsByRow = new ArrayList<>(); for (int i = 0; i < products.size(); i += productNumberEachRow) { int size = i + productNumberEachRow; // 界限判斷 size = size > products.size() ? products.size() : size; // 該方法返回的是父list的一個子集合，從fromIndex（包含），到toIndex（不包含） List<Product> productsOfEachRow = products.subList(i, size); productsByRow.add(productsOfEachRow); } c.setProductsByRow(productsByRow); } } @Override public void setSaleAndReviewNumber(Product p) { int saleCount = orderItemService.getSaleCount(p.getId()); p.setSaleCount(saleCount); int reviewCount = reviewService.getCount(p.getId()); p.setReviewCount(reviewCount); } @Override public void setSaleAndReviewNumber(List<Product> ps) { for (Product p : ps) { setSaleAndReviewNumber(p); } } @Override public List<Product> search(String keyword) { ProductExample example = new ProductExample(); example.createCriteria().andNameLike("%" + keyword + "%"); example.setOrderByClause("id desc"); List result = productMapper.selectByExample(example); setFirstProductImage(result); setCategory(result); return result; } } ~~~ ## 步驟 8 : searchResult.jsp 與 register.jsp 相仿，searchResult.jsp 也包含了header.jsp, top.jsp, search.jsp， footer.jsp 等公共頁面。 中間是搜索結果業務頁面 searchResultPage.jsp 注： 在search.jsp中，又把參數keyword顯示在輸入框中，因為是foresearch轉發過來的，屬于同一個request，可以使用param獲取相應的值，`${param.xxx}`相當于`request.getParameter("xxx")`。 ~~~ <input name="keyword" type="text" value="${param.keyword}" placeholder="時尚男鞋 太陽鏡 "> ~~~ searchResult.jsp： ~~~ <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@include file="../include/fore/header.jsp"%> <%@include file="../include/fore/top.jsp"%> <%@include file="../include/fore/search.jsp"%> <%@include file="../include/fore/searchResultPage.jsp"%> <%@include file="../include/fore/footer.jsp"%> ~~~ ## 步驟 9 : searchResultPage.jsp searchResultPage.jsp 本身沒做什么。。。。 直接包含了 **productsBySearch.jsp** ~~~ <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <div id="searchResult"> <div class="searchResultDiv"> <%@include file="productsBySearch.jsp"%> </div> </div> ~~~ ## 步驟 10 : productsBySearch.jsp productsBySearch.jsp 顯示產尋結果： 1. 遍歷ps，把每個產品的圖片，價格，標題等信息顯示出來 2. 如果ps為空，則顯示 "沒有滿足條件的產品" ~~~ <%@ 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="searchProducts"> <c:forEach items="${ps}" var="p"> <div class="productUnit"> <a href="foreproduct?pid=${p.id}"> <img class="productImage" src="img/productSingle/${p.firstProductImage.id}.jpg"> </a> <span class="productPrice">￥<fmt:formatNumber type="number" value="${p.promotePrice}" minFractionDigits="2" maxFractionDigits="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="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> ~~~ > 拓展： > 1. 現在需要在搜索結果頁，也要做類似分類頁的排序，如何實現呢？ > 2. 月成交量，最近30天內交易成功的訂單量。也就是已確認收貨的訂單量。 這里后臺是該的產品所有訂單項的數目之和，自己**完善月成交功能**。