[TOC] ## 步驟 1 : 先運行，看到效果，再學習 先將完整的 tmall_ssm 項目（向老師要相關資料），配置運行起來，確認可用之后，再學習做了哪些步驟以達到這樣的效果。 ## 步驟 2 : 模仿和排錯 在確保可運行項目能夠正確無誤地運行之后，再嚴格照著教程的步驟，對代碼模仿一遍。 模仿過程難免代碼有出入，導致無法得到期望的運行結果，此時此刻通過比較**正確答案** ( 可運行項目 ) 和自己的代碼，來定位問題所在。 采用這種方式，**學習有效果，排錯有效率**，可以較為明顯地提升學習速度，跨過學習路上的各個檻。 ## 步驟 3 : 界面效果  ## 步驟 4 : ForeController.buy() 在上個知識點立即購買最后，客戶端跳轉到結算路徑： `"@forebuy?oiid="+oiid;` `http://127.0.0.1:8080/tmall_ssm/forebuy?oiid=1` 導致ForeController.buy()方法被調用 1. 通過字符串數組獲取參數oiid 為什么這里要用字符串數組試圖獲取多個oiid，而不是int類型僅僅獲取一個oiid? 因為根據購物流程環節與表關系，結算頁面還需要顯示在購物車中選中的多條OrderItem數據，所以為了兼容從購物車頁面跳轉過來的需求，要用字符串數組獲取多個oiid 2. 準備一個泛型是OrderItem的集合ois 3. 根據前面步驟獲取的oiids，從數據庫中取出OrderItem對象，并放入ois集合中 4. 累計這些ois的價格總數，賦值在total上 5. 把訂單項集合放在session的屬性 "ois" 上 6. 把總價格放在 model的屬性 "total" 上 7. 服務端跳轉到buy.jsp  ~~~ package com.dodoke.tmall.controller; import java.util.ArrayList; 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.OrderItem; 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"; } @RequestMapping("forebuyone") public String buyone(int pid, int num, HttpSession session) { Product p = productService.get(pid); int oiid = 0; User user = (User) session.getAttribute("user"); boolean found = false; List<OrderItem> ois = orderItemService.listByUser(user.getId()); for (OrderItem oi : ois) { if (oi.getProduct().getId().intValue() == p.getId().intValue()) { oi.setNumber(oi.getNumber() + num); orderItemService.update(oi); found = true; oiid = oi.getId(); break; } } if (!found) { OrderItem oi = new OrderItem(); oi.setUserId(user.getId()); oi.setNumber(num); oi.setProductId(pid); orderItemService.add(oi); oiid = oi.getId(); } return "redirect:forebuy?oiid=" + oiid; } @RequestMapping("forebuy") public String buy(Model model, String[] oiid, HttpSession session) { List<OrderItem> ois = new ArrayList<>(); float total = 0; for (String strid : oiid) { int id = Integer.parseInt(strid); OrderItem oi = orderItemService.get(id); total += oi.getProduct().getPromotePrice() * oi.getNumber(); ois.add(oi); } session.setAttribute("ois", ois); model.addAttribute("total", total); return "fore/buy"; } } ~~~ ## 步驟 5 : buy.jsp 與**register.jsp** 相仿，buy.jsp也包含了header.jsp, top.jsp, footer.jsp 等公共頁面。 中間是結算業務頁面 buyPage.jsp ~~~ <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> <%@ taglib prefix='fmt' uri="http://java.sun.com/jsp/jstl/fmt" %> <%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %> <%@include file="../include/fore/header.jsp"%> <%@include file="../include/fore/top.jsp"%> <%@include file="../include/fore/cart/buyPage.jsp"%> <%@include file="../include/fore/footer.jsp"%> ~~~ ## 步驟 6 : buyPage.jsp 1. 遍歷出訂單項集合 ois 中的訂單項數據 從立即購買跳轉到結算頁面來只會有一件產品 2. 顯示總金額  ~~~ <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <div class="buyPageDiv"> <form action="forecreateOrder" method="post"> <div class="buyFlow"> <img class="pull-left" src="img/site/simpleLogo.png"> <img class="pull-right" src="img/site/buyflow.png"> <div style="clear: both"></div> </div> <div class="address"> <div class="addressTip">輸入收貨地址</div> <div> <table class="addressTable"> <tr> <td class="firstColumn">詳細地址<span class="redStar">*</span></td> <td><textarea name="address" placeholder="建議您如實填寫詳細收貨地址，例如接到名稱，門牌好嗎，樓層和房間號等信息"></textarea></td> </tr> <tr> <td>郵政編碼</td> <td><input name="post" placeholder="如果您不清楚郵遞區號，請填寫000000" type="text"></td> </tr> <tr> <td>收貨人姓名<span class="redStar">*</span></td> <td><input name="receiver" placeholder="長度不超過25個字符" type="text"></td> </tr> <tr> <td>手機號碼 <span class="redStar">*</span></td> <td><input name="mobile" placeholder="請輸入11位手機號碼" type="text"></td> </tr> </table> </div> </div> <div class="productList"> <div class="productListTip">確認訂單信息</div> <table class="productListTable"> <thead> <tr> <th colspan="2" class="productListTableFirstColumn"><img class="tmallbuy" src="img/site/tmallbuy.png"> <a class="marketLink" href="#nowhere">店鋪：天貓店鋪</a> <a class="wangwanglink" href="#nowhere"> <span class="wangwangGif"></span> </a></th> <th>單價</th> <th>數量</th> <th>小計</th> <th>配送方式</th> </tr> <tr class="rowborder"> <td colspan="2"></td> <td></td> <td></td> <td></td> <td></td> </tr> </thead> <tbody class="productListTableTbody"> <c:forEach items="${ois}" var="oi" varStatus="st"> <tr class="orderItemTR"> <td class="orderItemFirstTD"><img class="orderItemImg" src="img/productSingle_middle/${oi.product.firstProductImage.id}.jpg"></td> <td class="orderItemProductInfo"><a href="foreproduct?pid=${oi.product.id}" class="orderItemProductLink"> ${oi.product.name} </a> <img src="img/site/creditcard.png" title="支持信用卡支付"> <img src="img/site/7day.png" title="消費者保障服務,承諾7天退貨"> <img src="img/site/promise.png" title="消費者保障服務,承諾如實描述"></td> <td><span class="orderItemProductPrice">￥<fmt:formatNumber type="number" value="${oi.product.promotePrice}" minFractionDigits="2" /></span></td> <td><span class="orderItemProductNumber">${oi.number}</span></td> <td><span class="orderItemUnitSum"> ￥<fmt:formatNumber type="number" value="${oi.number*oi.product.promotePrice}" minFractionDigits="2" /> </span></td> <c:if test="${st.count==1}"> <td rowspan="5" class="orderItemLastTD"><label class="orderItemDeliveryLabel"> <input type="radio" value="" checked="checked"> 普通配送 </label> <select class="orderItemDeliverySelect" class="form-control"> <option>快遞 免郵費</option> </select></td> </c:if> </tr> </c:forEach> </tbody> </table> <div class="orderItemSumDiv"> <div class="pull-left"> <span class="leaveMessageText">給賣家留言:</span> <span> <img class="leaveMessageImg" src="img/site/leaveMessage.png"> </span> <span class="leaveMessageTextareaSpan"> <textarea name="userMessage" class="leaveMessageTextarea"></textarea> <div> <span>還可以輸入200個字符</span> </div> </span> </div> <span class="pull-right">店鋪合計(含運費): ￥<fmt:formatNumber type="number" value="${total}" minFractionDigits="2" /></span> </div> </div> <div class="orderItemTotalSumDiv"> <div class="pull-right"> <span>實付款：</span> <span class="orderItemTotalSumSpan">￥<fmt:formatNumber type="number" value="${total}" minFractionDigits="2" /></span> </div> </div> <div class="submitOrderDiv"> <button type="submit" class="submitOrderButton">提交訂單</button> </div> </form> </div> ~~~