[TOC] ## 步骤 1 : 先运行，看到效果，再学习 先将完整的 tmall_ssm 项目（向老师要相关资料），配置运行起来，确认可用之后，再学习做了哪些步骤以达到这样的效果。 ## 步骤 2 : 模仿和排错 在确保可运行项目能够正确无误地运行之后，再严格照着教程的步骤，对代码模仿一遍。 模仿过程难免代码有出入，导致无法得到期望的运行结果，此时此刻通过比较**正确答案** ( 可运行项目 ) 和自己的代码，来定位问题所在。 采用这种方式，**学习有效果，排错有效率**，可以较为明显地提升学习速度，跨过学习路上的各个槛。 ## 步骤 3 :购物车页面操作 购物车页面和服务端的交互主要是三个 1. 增加、减少某种产品的数量 2. 删除某种产品 3. 选中产品后，提交到结算页面  ## 步骤 4 : 调整订单数量 点击增加或者减少按钮后，根据 **cartPage.jsp** 中的js代码，会通过Ajax访问`/forechangeOrderItem`路径，导致``ForeController.changeOrderItem()``方法被调用 1. 判断用户是否登录 2. 获取pid和number 3. 遍历出用户当前所有的未生成订单的OrderItem 4. 根据pid找到匹配的OrderItem，并修改数量后更新到数据库 5. 返回字符串"success"  cartPage.jsp： ~~~ // 根据商品数量，商品价格，同步小计价格，接着调用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"; } }); } ~~~ ForeController： ~~~ 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"; } @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"; } } ~~~ ## 步骤 5 : 删除订单项 点击删除按钮后，根据 cartPage.jsp 中的js代码，会通过Ajax访问/foredeleteOrderItem路径，导致ForeController.deleteOrderItem方法被调用 1. 判断用户是否登录 2. 获取oiid 3. 删除oiid对应的OrderItem数据 4. 返回字符串"success"  ~~~ // 点击删除链接，显示模态框 $("a.deleteOrderItem").click(function() { deleteOrderItem = false; var oiid = $(this).attr("oiid") deleteOrderItemid = oiid; $("#deleteConfirmModal").modal('show'); }); // 点击模态框中确认按钮，隐藏模态框 $("button.deleteConfirmButton").click(function() { deleteOrderItem = true; $("#deleteConfirmModal").modal('hide'); }); // hidden.bs.modal的意思就是当弹出的模态框消失的时候，接下来回调的函数 $('#deleteConfirmModal').on('hidden.bs.modal', function(e) { if (deleteOrderItem) { var page = "foredeleteOrderItem"; // 根据订单项id,删除订单项 $.post(page, { "oiid" : deleteOrderItemid }, function(result) { if ("success" == result) { $("tr.cartProductItemTR[oiid=" + deleteOrderItemid + "]").remove(); calcCartSumPriceAndNumber(); } else { location.href = "loginPage"; } }); } }); ~~~ ## 步骤 6 : 提交到结算页面 在选中了购物车中的任意商品之后，结算按钮呈现可点击状态。 点击之后，提交到**结算页面**，并带上(多个)被选中的OrderItem对象的id 之后的流程就进入了前面讲解过的**结算页面**，在此不作赘述。