[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里双引号和单引号没有区别。 但是尽量只使用双引号，这样可读性也更高点。
那么什么时候使用单引号呢？ 在双引号里不得不再使用引号的时候，就应该使用单引号了，否则要使用转义符\" 这样，这种形式的可读性比单引号就差了。
> 换句话说，引号内部嵌套引号，就必须用其他形式的引号 —— 外面是双 里面就是单，外面是单，里面就是双
- 项目简介
- 功能一览
- 前台
- 后台
- 开发流程
- 需求分析-展示
- 首页
- 产品页
- 分类页
- 搜索结果页
- 购物车查看页
- 结算页
- 确认支付页
- 支付成功页
- 我的订单页
- 确认收货页
- 确认收货成功页
- 评价页
- 需求分析-交互
- 分类页排序
- 立即购买
- 加入购物车
- 调整订单项数量
- 删除订单项
- 生成订单
- 订单页功能
- 确认付款
- 确认收货
- 提交评价信息
- 登录
- 注册
- 退出
- 搜索
- 前台需求列表
- 需求分析后台
- 分类管理
- 属性管理
- 产品管理
- 产品图片管理
- 产品属性设置
- 用户管理
- 订单管理
- 后台需求列表
- 表结构设计
- 数据建模
- 表与表之间的关系
- 后台-分类管理
- 可运行的项目
- 静态资源
- JSP包含关系
- 查询
- 分页
- 增加
- 删除
- 编辑
- 修改
- 做一遍
- 重构
- 分页方式
- 分类逆向工程
- 所有逆向工程
- 后台其他页面
- 属性管理实现
- 产品管理实现
- 产品图片管理实现
- 产品属性值设置
- 用户管理实现
- 订单管理实现
- 前端
- 前台-首页
- 可运行的项目
- 静态资源
- ForeController
- home方法
- home.jsp
- homePage.jsp
- 前台-无需登录
- 注册
- 登录
- 退出
- 产品页
- 模态登录
- 分类页
- 搜索
- 前台-需要登录
- 购物流程
- 立即购买
- 结算页面
- 加入购物车
- 查看购物车页面
- 登录状态拦截器
- 其他拦截器
- 购物车页面操作
- 订单状态图
- 生成订单
- 我的订单页
- 我的订单页操作
- 评价产品
- 总结