目录
一、购物流程
1.1 购买的业务流程
1. 登录
2. 访问产品页
3. 立即购买
4. 进入结算页面
5. 加入购物车
6. 查看购物车
7. 选中购物车中的商品
8. 又到了第4步的结算页面
9. 在结算页面生成订单
10. 付款
11. 确认收货
12. 评价
1.2 购物流程环节与表关系
围绕购物流程最重要的两个表是OrderItem 和 Order表
关于OrderItem的业务行为
1. 立即购买 —— 新增 OrderItem
2. 加入购物车 —— 新增 OrderItem
3. 查看购物车 —— 显示未和Order关联的OrderItem
4. 选中购物车中的商品 —— 选中OrderItem
5. 结算页面 —— 显示选中的OrderItem
6. 生成订单 —— 新增Order
7 .付款 —— 修改Order状态
8. 我的订单 —— 显示Order
9. 确认收货 —— 修改Order状态
二、立即购买
2.1 在产品页点击立即购买
如果未登录，那么点击立即购买之前会弹出登录窗口。登录之后，点击立即购买，会访问地址：
http://127.0.0.1:8080/tmall_ssm/forebuyone?pid=844&num=3并带上了产品id 844和购买数量3。
会在OrderItem表里插入一条数据，这条数据会表示:
1. pid =844 购买的商品id
2. oid = null, 这个订单项还没有生成对应的订单，即还在购物车中
3. uid= 3，用户的id是3
4. number=3, 购买了3件产品
2.2 OrderItemService
为OrderItemService新增方法listByUser
2.2 OrderItemServiceImpl
为OrderItemServiceImpl新增加方法listByUser的实现
@Override
public List<OrderItem> listByUser(int uid) {
OrderItemExample example = new OrderItemExample();
example.createCriteria().andUidEqualTo(uid);
List<OrderItem> orderItems = orderItemMapper.selectByExample(example);
setProduct(orderItems);
return orderItems;
}2.3 ForeController.byone()
通过上个步骤访问的地址 /forebuyone 导致ForeController.buyone()方法被调用
1. 获取参数pid
2. 获取参数num
3. 根据pid获取产品对象p
4. 从session中获取用户对象user
接下来就是新增订单项OrderItem， 新增订单项要考虑两个情况
a. 如果已经存在这个产品对应的OrderItem，并且还没有生成订单，即还在购物车中。 那么就应该在对应的OrderItem基础上，调整数量
a.1 基于用户对象user，查询没有生成订单的订单项集合
a.2 遍历这个集合
a.3 如果产品是一样的话，就进行数量追加
a.4 获取这个订单项的 id
b. 如果不存在对应的OrderItem,那么就新增一个订单项OrderItem
b.1 生成新的订单项
b.2 设置数量，用户和产品
b.3 插入到数据库
b.4 获取这个订单项的 id
最后， 基于这个订单项id客户端跳转到结算页面/forebuy
@RequestMapping("forebuyone")
public String buyone(@RequestParam("pid") int pid,@RequestParam("num") int num,HttpSession session){
Product product =productService.get(pid);
User user = (User) session.getAttribute("user");
boolean found = false;
int orderItemId = 0;
List<OrderItem> orderItems = orderItemService.listByUser(user.getId());
for (OrderItem orderItem : orderItems){
if (orderItem.getPid().intValue() == product.getId().intValue()){
orderItem.setNumber(orderItem.getNumber()+num);
orderItemService.update(orderItem);
found = true;
orderItemId = orderItem.getId();
break;
}
}
if (!found){
OrderItem orderItem = new OrderItem();
orderItem.setUid(user.getId());
orderItem.setNumber(num);
orderItem.setPid(product.getId());
orderItemService.add(orderItem);
orderItemId = orderItem.getId();
}
return "redirect:forebuy?oiid="+orderItemId;
}三、结算页面
3.1 界面效果
3.2 ForeController.buy()
点击立即购买后，客户端跳转到结算路径： "@forebuy?oiid="+orderItemId;
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
@RequestMapping("forebuy")
public String buy(Model model,String[] oiid,HttpSession session){
List<OrderItem> orderItems = new ArrayList<>();
float total = 0;
for (String str_id : oiid){
int id = Integer.parseInt(str_id);
OrderItem orderItem = orderItemService.get(id);
total += orderItem.getNumber()*orderItem.getProduct().getPromotePrice();
orderItems.add(orderItem);
}
//为以后生成订单时使用
session.setAttribute("ois",orderItems);
model.addAttribute("total",total);
return "fore/buy";
}3.3 buy.jsp
<%--
Created by IntelliJ IDEA.
User:
Date: 2018/9/29
Time: 13:22
To change this template use File | Settings | File Templates.
--%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8" isELIgnored="false"%>
<%@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"%>3.4 buyPage.jsp
<%--
Created by IntelliJ IDEA.
User:
Date: 2018/9/29
Time: 13:23
To change this template use File | Settings | File Templates.
--%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8" isELIgnored="false"%>
<div class="buyPageDiv">
<form action="forecreateOrder" method="post">
<div class="buyFlow">
<img class="pull-left" src="${pageContext.request.contextPath}/img/site/simpleLogo.png">
<img class="pull-right" src="${pageContext.request.contextPath}/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="${pageContext.request.contextPath}/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="${pageContext.request.contextPath}/img/productSingle_middle/${oi.product.productImage.id}.jpg"></td>
<td class="orderItemProductInfo">
<a href="foreproduct?pid=${oi.product.id}" class="orderItemProductLink">
${oi.product.name}
</a>
<img src="${pageContext.request.contextPath}/img/site/creditcard.png" title="支持信用卡支付">
<img src="${pageContext.request.contextPath}/img/site/7day.png" title="消费者保障服务,承诺7天退货">
<img src="${pageContext.request.contextPath}/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>