[TOC] ## 步驟 1 : 先運行，看到效果，再學習 先將完整的 tmall_ssm 項目（向老師要相關資料），配置運行起來，確認可用之后，再學習做了哪些步驟以達到這樣的效果。 ## 步驟 2 : 模仿和排錯 在確保可運行項目能夠正確無誤地運行之后，再嚴格照著教程的步驟，對代碼模仿一遍。 模仿過程難免代碼有出入，導致無法得到期望的運行結果，此時此刻通過比較**正確答案** ( 可運行項目 ) 和自己的代碼，來定位問題所在。 采用這種方式，**學習有效果，排錯有效率**，可以較為明顯地提升學習速度，跨過學習路上的各個檻。 ## 步驟 3 : 界面效果  ## 步驟 4 : ForeController.cart() 訪問地址/forecart導致ForeController.cart()方法被調用 1. 通過session獲取當前用戶 所以一定要登錄才訪問，否則拿不到用戶對象,會報錯 2. 獲取為這個用戶關聯的訂單項集合 ois 3. 把ois放在model中 4. 服務端跳轉到cart.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"; } @RequestMapping("foreaddCart") @ResponseBody public String addCart(int pid, int num, Model model, HttpSession session) { Product p = productService.get(pid); 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; break; } } if (!found) { OrderItem oi = new OrderItem(); oi.setUserId(user.getId()); oi.setNumber(num); oi.setProductId(pid); orderItemService.add(oi); } return "success"; } @RequestMapping("forecart") public String cart(Model model, HttpSession session) { User user = (User) session.getAttribute("user"); List<OrderItem> ois = orderItemService.listByUser(user.getId()); model.addAttribute("ois", ois); return "fore/cart"; } } ~~~ ## 步驟 5 : cart.jsp 與` register.jsp` 相仿，cart.jsp也包含了header.jsp, top.jsp, simpleSearch.jsp， footer.jsp 等公共頁面。 中間是產品業務頁面 `cartPage.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/simpleSearch.jsp"%> <%@include file="../include/fore/cart/cartPage.jsp"%> <%@include file="../include/fore/footer.jsp"%> ~~~ ## 步驟 6 : cartPage.jsp 遍歷訂單項集合ois ## 步驟 7：cartPage.jsp中js 講解 購物車的js交互是相當復雜的,有如下事件需要監聽 1. 點擊全選 2. 點擊某一個商品 3. 點擊減少數量 4. 點擊增加數量 5. 在數量輸入框中修改數量 監聽之后，需要做一些列響應動作 1. 結算按鈕的狀態調整 無任何商品選中是一種狀態，有任意商品選中是一種狀態 2. 全部選中按鈕的狀態同步 所有商品選中是一種狀態，商品沒有全選是一種狀態 3. 計算一共有多少件商品被選中，以及價格小計和價格合計的顯示 4. 被選中行背景高亮顯示 ### 1. 公共函數 雖然業務比較復雜，但是有些功能是重復使用的，比如點擊全選和點擊某一種商品，都會去調整總價格和總數的顯示。 把這些功能抽象出來，放在公共函數里，就可以大大的減少代碼的冗余，降低維護的難度。 有如下幾種公共函數： 以千進制格式化金額，比如金額是123456,就會顯示成123,456 formatMoney放置到head.jsp中 ~~~ // 百度搜索到的工具函數，直接拿來用，感興趣的可以深入了解下 // 以千進制格式化金額，比如金額是123456,就會顯示成123,456 function formatMoney(num) { // 把美元符號，逗號先去掉 num = num.toString().replace(/\$|\,/g, ''); // 使用isNaN(x) 函數檢查其參數是否是非數字值，x是數字返回false，返回true表示非數字。 if(isNaN(num)) { num = "0"; } // 判斷是否為負數 sign = (num == (num = Math.abs(num))); // Math.floor就是求一個最接近它的整數，它的值小于或等于這個浮點數。 // 0.50000000001，這是浮點數的一個限制，它們并不是那么準確是。+0.5，向上取整吧。 num = Math.floor(num * 100 + 0.50000000001); // 得到最后兩位數 cents = num % 100; num = Math.floor(num / 100).toString(); // 余數是1個時,補足0 if(cents < 10) { cents = "0" + cents; } // Math.floor((num.length - (1 + i)) / 3) 計算出需要加幾個逗號 for(var i = 0; i < Math.floor((num.length - (1 + i)) / 3); i++) { // 這邊的“4”，是包括逗號在內。 num = num.substring(0, num.length - (4 * i + 3)) + ',' + num.substring(num.length - (4 * i + 3)); } // 若為負數，則加上負號 return(((sign) ? '' : '-') + num + '.' + cents); } ~~~ 判斷是否有商品被選中，只要有任意商品被選中了，就把結算按鈕的顏色變為天貓紅，并且是可點擊狀態，否則就是灰色，并且無法點擊。 ~~~ function syncCreateOrderButton() { var selectAny = false; $(".cartProductItemIfSelected").each(function() { if ("selectit" == $(this).attr("selectit")) { selectAny = true; } }); if (selectAny) { $("button.createOrderButton").css("background-color", "#C40000"); $("button.createOrderButton").removeAttr("disabled"); } else { $("button.createOrderButton").css("background-color", "#AAAAAA"); $("button.createOrderButton").attr("disabled", "disabled"); } } ~~~ 同步"全選"狀態。 選中和未選中是采用了兩個不同的圖片實現的，遍歷所有的商品，看是否全部都選中了，只要有任意一個沒有選中，那么就不是全選狀態。 然后通過切換圖片顯示是否全選狀態的效果。 ~~~ function syncSelect() { var selectAll = true; $(".cartProductItemIfSelected").each(function() { if ("false" == $(this).attr("selectit")) { selectAll = false; } }); if (selectAll) { $("img.selectAllItem").attr("src", "img/site/cartSelected.png"); } else { $("img.selectAllItem").attr("src", "img/site/cartNotSelected.png"); } } ~~~ 顯示被選中的商品總數，以及總價格。 通過遍歷每種商品是否被選中，累加被選中商品的總數和總價格，然后修改在上方的總價格，以及下方的總價格，總數。 ~~~ function calcCartSumPriceAndNumber() { // 總價格 var sum = 0; // 總數目 var totalNumber = 0; $("img.cartProductItemIfSelected[selectit='selectit']").each(function() { var oiid = $(this).attr("oiid"); var price = $(".cartProductItemSmallSumPrice[oiid=" + oiid + "]").text(); price = price.replace(/,/g, ""); price = price.replace(/￥/g, ""); sum += new Number(price); var num = $(".orderItemNumberSetting[oiid=" + oiid + "]").val(); totalNumber += new Number(num); }); // 下方的總價格 $("span.cartSumPrice").html("￥" + formatMoney(sum)); // 上方的總價格 $("span.cartTitlePrice").html("￥" + formatMoney(sum)); // 已選商品總件數 $("span.cartSumNumber").html(totalNumber); } ~~~ 根據商品數量，商品價格，同步小計價格，接著調用calcCartSumPriceAndNumber()函數同步商品總數和總價格 ~~~ // 根據商品數量，商品價格，同步小計價格，接著調用calcCartSumPriceAndNumber()函數同步商品總數和總價格 function syncPrice(pid, num, price) { // 設定pid對應該商品購買數量 $(".orderItemNumberSetting[pid=" + pid + "]").val(num); // 根據商品數量，商品價格，同步小計價格 var cartProductItemSmallSumPrice = formatMoney(num * price); // 設定小計價格 $(".cartProductItemSmallSumPrice[pid=" + pid + "]").html("￥" + cartProductItemSmallSumPrice); // 重新計算上下總價格，總數量 calcCartSumPriceAndNumber(); var page = "forechangeOrderItem"; $.post(page, { "pid" : pid, "number" : num }, function(result) { if ("success" != result) { location.href = "login.jsp"; } }); } ~~~ ### 2.事件響應 接下來是對各種不停的事件進行監聽，并作出響應，有如下4中事件需要監聽 1. 選中一種商品 2. 商品全選 3. 增加和減少數量 4. 直接修改數量 ### 3. 選中一種商品 ~~~ // 判斷某行商品是否選中，改變圖片，行背景色，并同步全選狀態，更改結算按鈕，重新計算商品總數，總價格 $("img.cartProductItemIfSelected").click(function() { var selectit = $(this).attr("selectit") if ("selectit" == selectit) { $(this).attr("src", "img/site/cartNotSelected.png"); $(this).attr("selectit", "false") $(this).parents("tr.cartProductItemTR").css("background-color", "#fff"); } else { $(this).attr("src", "img/site/cartSelected.png"); $(this).attr("selectit", "selectit") $(this).parents("tr.cartProductItemTR").css("background-color", "#FFF8E1"); } // 同步"全選"狀態 syncSelect(); // 判斷是否有商品被選中，改變結算按鈕 syncCreateOrderButton(); // 顯示被選中的商品總數，以及總價格。 calcCartSumPriceAndNumber(); }); ~~~ 當選中某一種商品的時候，根據這個圖片上的自定義屬性selectit，判斷當前的選中狀態。 ~~~ <img selectit="false" class="selectAllItem" src="img/site/cartNotSelected.png"> ~~~ 如果已經選中了，那么就切換為未選中圖片，修改selectit屬性為false,并且把所在的tr背景色換為白色 如果是未選中，那么就切換為已選中圖片，修改selectit屬性為selected,并且把所在的tr背景色換為`#FFF8E1` 然后調用 ~~~ // 同步"全選"狀態 syncSelect(); // 判斷是否有商品被選中，改變結算按鈕 syncCreateOrderButton(); // 顯示被選中的商品總數，以及總價格。 calcCartSumPriceAndNumber(); ~~~ 對結算按鈕，是否全選按鈕，總數量、總價格信息顯示進行同步 ### 4. 商品全選 ~~~ // 全選圖片點擊事件 $("img.selectAllItem").click(function() { var selectit = $(this).attr("selectit") if ("selectit" == selectit) { $("img.selectAllItem").attr("src", "img/site/cartNotSelected.png"); $("img.selectAllItem").attr("selectit", "false") $(".cartProductItemIfSelected").each(function() { $(this).attr("src", "img/site/cartNotSelected.png"); $(this).attr("selectit", "false"); $(this).parents("tr.cartProductItemTR").css("background-color", "#fff"); }); } else { $("img.selectAllItem").attr("src", "img/site/cartSelected.png"); $("img.selectAllItem").attr("selectit", "selectit") $(".cartProductItemIfSelected").each(function() { $(this).attr("src", "img/site/cartSelected.png"); $(this).attr("selectit", "selectit"); $(this).parents("tr.cartProductItemTR").css("background-color", "#FFF8E1"); }); } // 判斷是否有商品被選中，改變結算按鈕 syncCreateOrderButton(); // 顯示被選中的商品總數，以及總價格。 calcCartSumPriceAndNumber(); }); ~~~ 當點擊全選圖片的時候，做出的響應 首選全選圖片上有一個自定義的selectit屬性，用于表示該圖片是否被選中 ~~~ <img selectit="false" class="selectAllItem" src="img/site/cartNotSelected.png"> ~~~ 通過 `$(this).attr("selectit")`獲取當前的選中狀態。 如果是已選中，那么就把圖片切換為未選中狀態，并把selectit屬性值修改為false，然后把每種商品對應的圖片，都修改為未選中圖片，屬性selected也修改為false，背景顏色修改為白色。 如果是未選中，那么就把圖片切換為以選中狀態，并把selectit屬性值修改為selected，然后把每種商品對應的圖片，都修改為已選中圖片，屬性selected也修改為selected，背景顏色修改為`#FFF8E1`。 最后調用 ~~~ syncCreateOrderButton(); calcCartSumPriceAndNumber(); ~~~ 同步結算按鈕和價格數量信息 ### 5.增加和減少數量 ~~~ // 點擊增加按鈕，根據超鏈上的pid，獲取這種商品對應的庫存，價格和數量。 如果數量超過了庫存，那么就取庫存值。 最后調用syncPrice，同步價格和總數信息。 $(".numberPlus").click(function() { // 商品id var pid = $(this).attr("pid"); // 庫存 var stock = $("span.orderItemStock[pid=" + pid + "]").text(); // 價格 var price = $("span.orderItemPromotePrice[pid=" + pid + "]").text(); // 數量 var num = $(".orderItemNumberSetting[pid=" + pid + "]").val(); // 數量加1 num++; // 界限判斷 if (num > stock) { num = stock; } // 同步價格和總數信息 syncPrice(pid, num, price); }); // 點擊減少按鈕，根據超鏈上的pid，獲取這種商品對應的庫存，價格和數量。 如果數量小于1，那么就取1。最后調用syncPrice，同步價格和總數信息。 $(".numberMinus").click(function() { var pid = $(this).attr("pid"); var stock = $("span.orderItemStock[pid=" + pid + "]").text(); var price = $("span.orderItemPromotePrice[pid=" + pid + "]").text(); var num = $(".orderItemNumberSetting[pid=" + pid + "]").val(); --num; if (num <= 0) { num = 1; } syncPrice(pid, num, price); }); ~~~ ### 6.直接修改數量 ~~~ // 直接修改數量 $(".orderItemNumberSetting").keyup(function() { // 商品id var pid = $(this).attr("pid"); // 庫存 var stock = $("span.orderItemStock[pid=" + pid + "]").text(); // 價格 var price = $("span.orderItemPromotePrice[pid=" + pid + "]").text(); // 數量 var num = $(".orderItemNumberSetting[pid=" + pid + "]").val(); num = parseInt(num); // 判斷是否是數值 if (isNaN(num)) { num = 1; } // 如果數量小于1，那么就取1 if (num <= 0) { num = 1; } // 如果大于庫存，就取庫存值 if (num > stock) { num = stock; } // 同步小計價格，重新計算上下總價格，總數量 syncPrice(pid, num, price); }); ~~~ 監聽keyup事件，根據超鏈上的pid，獲取這種商品對應的庫存，價格和數量。 如果數量小于1，那么就取1,如果大于庫存，就取庫存值。 最后調用syncPrice，同步價格和總數信息。 > javascript 里的數字有兩種類型，一種是基本類型數字number,一種是對象類型Number。 > > `var str = "123";` parseInt(str) 得到一個基本類型數字。 new Number(str) 得到一個對象類型數字。 當str的值，不是數字的時候，處理結果也有所不同。 如果str="123s"，那么parseInt返回的是 123。 如果str="123s" ，那么new Number返回的是NaN (javascript內置對象，表示不是一個數字 Number A Number的縮寫)。 在這個業務場景下面，如果用戶輸入數量123s, 比較好的處理是把它轉換為123，而不是一個NaN，所以更適合使用parseInt。 ## 注意 1. js里雙引號和單引號沒有區別。 但是盡量只使用雙引號，這樣可讀性也更高點。 那么什么時候使用單引號呢？ 在雙引號里不得不再使用引號的時候，就應該使用單引號了，否則要使用轉義符\" 這樣，這種形式的可讀性比單引號就差了。 > 換句話說，引號內部嵌套引號，就必須用其他形式的引號 —— 外面是雙 里面就是單，外面是單，里面就是雙