[TOC] ## 步驟 1 : 先運行，看到效果，再學習 先將完整的 tmall_ssm 項目（向老師要相關資料），配置運行起來，確認可用之后，再學習做了哪些步驟以達到這樣的效果。 ## 步驟 2 : 模仿和排錯 在確保可運行項目能夠正確無誤地運行之后，再嚴格照著教程的步驟，對代碼模仿一遍。 模仿過程難免代碼有出入，導致無法得到期望的運行結果，此時此刻通過比較**正確答案** ( 可運行項目 ) 和自己的代碼，來定位問題所在。 采用這種方式，**學習有效果，排錯有效率**，可以較為明顯地提升學習速度，跨過學習路上的各個檻。 ## 步驟 3 : 我的訂單頁  ## 步驟 4 : OrderService 修改OrderService，新增方法 `List list(int uid, String excludedStatus);` ~~~ package com.dodoke.tmall.service; import java.util.List; import com.dodoke.tmall.pojo.Order; import com.dodoke.tmall.pojo.OrderItem; public interface OrderService { String waitPay = "waitPay"; String waitDelivery = "waitDelivery"; String waitConfirm = "waitConfirm"; String waitReview = "waitReview"; String finish = "finish"; String delete = "delete"; void add(Order c); void delete(int id); void update(Order c); Order get(int id); List list(); List list(int uid, String excludedStatus); } ~~~ ## 步驟 5 : OrderServiceImpl 修改OrderServiceImpl，實現方法 `List list(int uid, String excludedStatus);` ~~~ package com.dodoke.tmall.service.impl; import java.util.List; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Service; import com.dodoke.tmall.mapper.OrderMapper; import com.dodoke.tmall.pojo.Order; import com.dodoke.tmall.pojo.OrderExample; import com.dodoke.tmall.pojo.User; import com.dodoke.tmall.service.OrderService; import com.dodoke.tmall.service.UserService; @Service public class OrderServiceImpl implements OrderService { @Autowired OrderMapper orderMapper; @Autowired UserService userService; @Override public void add(Order c) { orderMapper.insert(c); } @Override public void delete(int id) { orderMapper.deleteByPrimaryKey(id); } @Override public void update(Order c) { orderMapper.updateByPrimaryKeySelective(c); } @Override public Order get(int id) { return orderMapper.selectByPrimaryKey(id); } public List<Order> list() { OrderExample example = new OrderExample(); example.setOrderByClause("id desc"); List<Order> result = orderMapper.selectByExample(example); setUser(result); return result; } public void setUser(List<Order> os) { for (Order o : os) { setUser(o); } } public void setUser(Order o) { int uid = o.getUserId(); User u = userService.get(uid); o.setUser(u); } @Override public List list(int uid, String excludedStatus) { OrderExample example = new OrderExample(); example.createCriteria().andUserIdEqualTo(uid).andStatusNotEqualTo(excludedStatus); example.setOrderByClause("id desc"); return orderMapper.selectByExample(example); } } ~~~ ## 步驟 6 : ForeController.bought() /forebought導致ForeController.bought()方法被調用 1. 通過session獲取用戶user 2. 查詢user所有的狀態不是"delete" 的訂單集合os 3. 為這些訂單填充訂單項 4. 把os放在model的屬性"os"上 5. 服務端跳轉到bought.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.Order; 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"; } @RequestMapping("forechangeOrderItem") @ResponseBody public String changeOrderItem(Model model, HttpSession session, int pid, int number) { User user = (User) session.getAttribute("user"); if (null == user) { return "fail"; } List<OrderItem> ois = orderItemService.listByUser(user.getId()); for (OrderItem oi : ois) { if (oi.getProduct().getId().intValue() == pid) { oi.setNumber(number); orderItemService.update(oi); break; } } return "success"; } @RequestMapping("foredeleteOrderItem") @ResponseBody public String deleteOrderItem(Model model, HttpSession session, int oiid) { User user = (User) session.getAttribute("user"); if (null == user) { return "fail"; } orderItemService.delete(oiid); return "success"; } @RequestMapping("forebought") public String bought(Model model, HttpSession session) { User user = (User) session.getAttribute("user"); List<Order> os = orderService.list(user.getId(), OrderService.delete); orderItemService.fill(os); model.addAttribute("os", os); return "fore/bought"; } } ~~~ ## 步驟 7 : bought.jsp 與 register.jsp 相仿，bought.jsp 也包含了header.jsp, top.jsp, simpleSearch.jsp， footer.jsp 等公共頁面。 中間是我的訂單頁面 boughtPage.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/simpleSearch.jsp"%> <%@include file="../include/fore/cart/boughtPage.jsp"%> <%@include file="../include/fore/footer.jsp"%> ~~~ ## 步驟 8 : boughtPage.jsp 在boughtPage.jsp中，做二次遍歷 1. 遍歷訂單集合os 取出每個訂單，顯示其創建日期，訂單號，總數量和總金額等 2. 遍歷每個訂單下的訂單項集合o.orderItemsd 顯示每個訂單項對應的產品的圖片，標題，原始價格，優惠價格等 ### 交互效果js代碼講解 ~~~ $("a[orderStatus]").click(function() { var orderStatus = $(this).attr("orderStatus"); if ('all' == orderStatus) { $("table[orderStatus]").show(); } else { $("table[orderStatus]").hide(); $("table[orderStatus=" + orderStatus + "]").show(); } $("div.orderType div").removeClass("selectedOrderType"); $(this).parent("div").addClass("selectedOrderType"); }); ~~~ 每一個訂單類型超鏈都有一個自定義屬性orderStatus，并且對應不同的值 ~~~ <div class="selectedOrderType"><a href="#nowhere" orderstatus="all">所有訂單</a></div> <div class=""><a href="#nowhere" orderstatus="waitPay">待付款</a></div> <div class=""><a href="#nowhere" orderstatus="waitDelivery">待發貨</a></div> <div class=""><a href="#nowhere" orderstatus="waitConfirm">待收貨</a></div> ~~~ 通過選擇器 ~~~ $("a[orderStatus]") ~~~ 就能獲取訂單類型的超鏈 在超鏈的click事件中，獲取自定義屬性orderStatus值，判斷點擊的是哪個超鏈 接著對于每個訂單所對應的table,也有一個orderStatus屬性 ~~~ <table orderstatus="waitReview" class="orderListItemTable" > ~~~ 然后進行邏輯判斷 當orderStatus是all的時候，那么就顯示所有的table ~~~ $("table[orderStatus]").show(); ~~~ 當orderStatus不是all的時候，先把所有的table隱藏，然后把orderStatus對應的table顯示出來 ~~~ $("table[orderStatus="+orderStatus+"]").show(); ~~~ 最后去掉原來的超鏈所在div的選中狀態，為當前的超鏈所在div加上選中狀態 ~~~ $("div.orderType div").removeClass("selectedOrderType"); $(this).parent("div").addClass("selectedOrderType"); ~~~ > 補充說明：日期格式化，可以在getter方法中，寫格式化操作，也可以使用fmt標簽格式化，學員自己完成。