目录

一、购物车页面操作

1.1 调整订单数量

1.2 删除订单项

1.3 提交到结算页面

二、订单状态图

三、生成订单

3.1 结算页操作

3.2 事务管理

3.3 ForeController.createOrder

3.4 确认支付

3.5 支付成功

四、我的订单

4.1 我的订单页

4.2 OrderService

4.3 OrderServiceImpl

4.4 ForeController.bought()

4.5 bought.jsp

4.6 boughtPage.jsp


一、购物车页面操作

购物车页面和服务端的交互主要是三个
1. 增加、减少某种产品的数量
2. 删除某种产品
3. 选中产品后,提交到结算页面

1.1 调整订单数量

点击增加或者减少按钮后,根据cartPage.jsp 中的js代码,会通过Ajax访问/forechangeOrderItem路径

导致ForeController.changeOrderItem()方法被调用
1. 判断用户是否登录
2. 获取pid和number
3. 遍历出用户当前所有的未生成订单的OrderItem
4. 根据pid找到匹配的OrderItem,并修改数量后更新到数据库
5. 返回字符串"success"

    @RequestMapping("forechangeOrderItem")@ResponseBodypublic String changeOrderItem(@RequestParam("pid") int pid,@RequestParam("number") int number,Model model,HttpSession session){User user = (User) session.getAttribute("user");if (user == null){return "fail";}else {List<OrderItem> orderItems = orderItemService.listByUser(user.getId());for (OrderItem orderItem : orderItems){if (orderItem.getPid() == pid){orderItem.setNumber(number);orderItemService.update(orderItem);break;}}return "success";}}

1.2 删除订单项

点击删除按钮后,根据 cartPage.jsp中的js代码,会通过Ajax访问/foredeleteOrderItem路径

导致ForeController.deleteOrderItem方法被调用
1. 判断用户是否登录
2. 获取oiid
3. 删除oiid对应的OrderItem数据
4. 返回字符串"success"

    @RequestMapping("foredeleteOrderItem")@ResponseBodypublic String deleteOrderItem(@RequestParam("oiid") int oiid,Model model,HttpSession session){User user = (User)session.getAttribute("user");if (user != null){orderItemService.delete(oiid);return "success";}else {return "fail";}}

1.3 提交到结算页面

在选中了购物车中的任意商品之后,结算按钮呈现可点击状态。
点击之后,提交到结算页面,并带上(多个)被选中的OrderItem对象的id

http://localhost:8080/tmall_ssm/forebuy?oiid=8&oiid=9

二、订单状态图

1. 首先是创建订单,刚创建好之后,订单处于waitPay 待付款状态
2. 接着是付款,付款后,订单处于waitDelivery 待发货状态
3. 前两步都是前台用户操作导致的,接下来需要到后台做发货操作,发货后,订单处于waitConfirm 待确认收货状态
4. 接着又是前台用户进行确认收货操作,操作之后,订单处于waitReview 待评价状态
5. 最后进行评价,评价之后,订单处于finish 完成状态

以上状态都是一个接一个的,不能跳状态进行。
比较特殊的是,无论当前订单处于哪个状态,都可以进行删除操作。 像订单这样极其重要的业务数据,实际上是不允许真正从数据库中删除掉的,而是把状态标记为删除,以表示其被删掉了,所以在删除之后,订单处于 delete 已删除状态

三、生成订单

3.1 结算页操作

通过立即购买或者购物车中点击结算进入结算页面,然后提交订单

3.2 事务管理

在applicationContext.xml中配置事务管理

因为增加订单行为需要同时修改两个表
1. 为Order表新增数据
2. 修改OrderItem表
所以需要进行事务管理,否则当新增了Order表的数据,还没有来得及修改OrderItem的时候出问题,比如突然断电,那么OrderItem的数据就会是脏数据了(没有指向正确的Order表数据)。

    <tx:annotation-driven transaction-manager="transactionManager"/><bean id="transactionManager" class="org.springframework.jdbc.datasource.DataSourceTransactionManager"><property name="dataSource" ref="dataSource" /></bean>

3.3 ForeController.createOrder

提交订单访问路径 /forecreateOrder, 导致ForeController.createOrder 方法被调用
1. 从session中获取user对象
2. 通过参数Order接受地址,邮编,收货人,用户留言等信息
3. 根据当前时间加上一个4位随机数生成订单号
4. 根据上述参数,创建订单对象
5. 把订单状态设置为等待支付
6. 从session中获取订单项集合 ( 在结算功能中的ForeController.buy()方法中,订单项集合被放到了session中 )
7. 把订单加入到数据库,并且遍历订单项集合,设置每个订单项的order,更新到数据库
8. 统计本次订单的总金额,调用orderService中的getTotal方法,根据order和orderItem求订单总合。
9. 客户端跳转到确认支付页forealipay,并带上订单id和总金额

    @RequestMapping("forecreateOrder")public String createOrder(Order order,HttpSession session){User user = (User) session.getAttribute("user");//根据时间加上一个随机的四位数生成订单编号String orderCode = new SimpleDateFormat("yyyyMMddHHmmssSSS").format(new Date())+ RandomUtils.nextInt(10000);order.setOrderCode(orderCode);order.setCreateDate(new Date());order.setUid(user.getId());order.setStatus(OrderService.WAIT_PAY);List<OrderItem> orderItems = (List<OrderItem>) session.getAttribute("ois");float total = orderService.getTotal(order,orderItems);return "redirect:forealipay?oid="+order.getId() +"&total="+total;}

3.4 确认支付

1. 在上一步客户端跳转到路径/forealipay方法,导致PageController.alipay()方法被调用。 alipay()没做什么事情,就是服务端跳转到了alipay.jsp页面。
2. alipay.jsp :
中间是确认支付业务页面 alipayPage.jsp

<%@ 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/alipayPage.jsp"%>
<%@include file="../include/fore/footer.jsp"%>

3. alipayPage.jsp:
显示总金额,并且让确认支付按钮跳转到页面 /forepayed页面,并带上oid和金额

<%--Created by IntelliJ IDEA.User: Date: 2018/10/2Time: 10:21To change this template use File | Settings | File Templates.
--%><%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8" isELIgnored="false"%><div class="aliPayPageDiv"><div class="aliPayPageLogo"><img class="pull-left" src="${pageContext.request.contextPath}/img/site/simpleLogo.png"><div style="clear:both"></div></div><div><span class="confirmMoneyText">扫一扫付款(元)</span><span class="confirmMoney">¥<fmt:formatNumber type="number" value="${param.total}" minFractionDigits="2"/></span></div><div><img class="aliPayImg" src="${pageContext.request.contextPath}/img/site/alipay2wei.png"></div><div><a href="forepayed?oid=${param.oid}&total=${param.total}"><button class="confirmPay">确认支付</button></a></div></div>

3.5 支付成功

1. 在上一步确认访问按钮提交数据到/forepayed,导致ForeController.payed方法被调用
1.1 获取参数oid
1.2 根据oid获取到订单对象order
1.3 修改订单对象的状态和支付时间
1.4 更新这个订单对象到数据库
1.5 把这个订单对象放在model的属性"o"上
1.6 服务端跳转到payed.jsp

    @RequestMapping("forepayed")public String payed(@RequestParam("oid") int oid,@RequestParam("total") float total,Model model){Order order = orderService.get(oid);order.setStatus(OrderService.WAIT_DELIVERY);order.setPayDate(new Date());orderService.update(order);model.addAttribute("o",order);return "fore/payed";}

2. payed.jsp

<%@ 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/simpleSearch.jsp"%>
<%@include file="../include/fore/cart/payedPage.jsp"%>
<%@include file="../include/fore/footer.jsp"%>

中间是支付成功业务页面 payedPage.jsp
3. payedPage.jsp
显示订单中的地址,邮编,收货人,手机号码等等

<%--Created by IntelliJ IDEA.User: Date: 2018/10/2Time: 10:29To change this template use File | Settings | File Templates.
--%>
<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8" isELIgnored="false"%><div class="payedDiv"><div class="payedTextDiv"><img src="${pageContext.request.contextPath}/img/site/paySuccess.png"><span>您已成功付款</span></div><div class="payedAddressInfo"><ul><li>收货地址:${o.address} ${o.receiver} ${o.mobile }</li><li>实付款:<span class="payedInfoPrice">¥<fmt:formatNumber type="number" value="${param.total}" minFractionDigits="2"/></li><li>预计10月18日送达    </li></ul><div class="paedCheckLinkDiv">您可以<a class="payedCheckLink" href="forebought">查看已买到的宝贝</a><a class="payedCheckLink" href="forebought">查看交易详情 </a></div></div><div class="payedSeperateLine"></div><div class="warningDiv"><img src="${pageContext.request.contextPath}/img/site/warning.png"><b>安全提醒:</b>下单后,<span class="redColor boldWord">用QQ给您发送链接办理退款的都是骗子!</span>天猫不存在系统升级,订单异常等问题,谨防假冒客服电话诈骗!</div></div>

四、我的订单

4.1 我的订单页

4.2 OrderService

修改OrderService,新增方法List list(int uid, String excludedStatus)

根据用户id查询所有状态(不包括删除状态)订单

4.3 OrderServiceImpl

    @Overridepublic List<Order> list(int uid, String excludedStatus) {OrderExample example = new OrderExample();example.createCriteria().andUidEqualTo(uid).andStatusNotEqualTo(excludedStatus);example.setOrderByClause("id desc");return orderMapper.selectByExample(example);}

4.4 ForeController.bought()

/forebought导致ForeController.bought()方法被调用
1. 通过session获取用户user
2. 查询user所有的状态不是"delete" 的订单集合os
3. 为这些订单填充订单项
4. 把os放在model的属性"os"上
5. 服务端跳转到bought.jsp

4.5 bought.jsp

中间是我的订单页面 boughtPage.jsp

<%@ 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/simpleSearch.jsp"%>
<%@include file="../include/fore/cart/boughtPage.jsp"%>
<%@include file="../include/fore/footer.jsp"%>

4.6 boughtPage.jsp

<%--Created by IntelliJ IDEA.User: Date: 2018/10/2Time: 12:59To change this template use File | Settings | File Templates.
--%>
<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8" isELIgnored="false"%><script>var deleteOrder = false;var deleteOrderid = 0;$(function(){$("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");});$("a.deleteOrderLink").click(function(){deleteOrderid = $(this).attr("oid");deleteOrder = false;$("#deleteConfirmModal").modal("show");});$("button.deleteConfirmButton").click(function(){deleteOrder = true;$("#deleteConfirmModal").modal('hide');});$('#deleteConfirmModal').on('hidden.bs.modal', function (e) {if(deleteOrder){var page="foredeleteOrder";$.post(page,{"oid":deleteOrderid},function(result){if("success"==result){$("table.orderListItemTable[oid="+deleteOrderid+"]").hide();}else{location.href="login.jsp";}});}})$(".ask2delivery").click(function(){var link = $(this).attr("link");$(this).hide();page = link;$.ajax({url: page,success: function(result){alert("卖家已秒发,刷新当前页面,即可进行确认收货")}});});});</script><div class="boughtDiv"><div class="orderType"><div class="selectedOrderType"><a orderStatus="all" href="#nowhere">所有订单</a></div><div><a  orderStatus="waitPay" href="#nowhere">待付款</a></div><div><a  orderStatus="waitDelivery" href="#nowhere">待发货</a></div><div><a  orderStatus="waitConfirm" href="#nowhere">待收货</a></div><div><a  orderStatus="waitReview" href="#nowhere" class="noRightborder">待评价</a></div><div class="orderTypeLastOne"><a class="noRightborder"> </a></div></div><div style="clear:both"></div><div class="orderListTitle"><table class="orderListTitleTable"><tr><td>宝贝</td><td width="100px">单价</td><td width="100px">数量</td><td width="120px">实付款</td><td width="100px">交易操作</td></tr></table></div><div class="orderListItem"><c:forEach items="${os}" var="o"><table class="orderListItemTable" orderStatus="${o.status}" oid="${o.id}"><tr class="orderListItemFirstTR"><td colspan="2"><b><fmt:formatDate value="${o.createDate}" pattern="yyyy-MM-dd HH:mm:ss"/></b><span>订单号: ${o.orderCode}</span></td><td  colspan="2"><img width="13px" src="${pageContext.request.contextPath}/img/site/orderItemTmall.png">天猫商场</td><td colspan="1"><a class="wangwanglink" href="#nowhere"><div class="orderItemWangWangGif"></div></a></td><td class="orderItemDeleteTD"><a class="deleteOrderLink" oid="${o.id}" href="#nowhere"><span  class="orderListItemDelete glyphicon glyphicon-trash"></span></a></td></tr><c:forEach items="${o.orderItems}" var="oi" varStatus="st"><tr class="orderItemProductInfoPartTR" ><td class="orderItemProductInfoPartTD"><img width="80" height="80" src="${pageContext.request.contextPath}/img/productSingle_middle/${oi.product.productImage.id}.jpg"></td><td class="orderItemProductInfoPartTD"><div class="orderListItemProductLinkOutDiv"><a href="foreproduct?pid=${oi.product.id}">${oi.product.name}</a><div class="orderListItemProductLinkInnerDiv"><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="消费者保障服务,承诺如实描述"></div></div></td><td  class="orderItemProductInfoPartTD" width="100px"><div class="orderListItemProductOriginalPrice">¥<fmt:formatNumber type="number" value="${oi.product.originalPrice}" minFractionDigits="2"/></div><div class="orderListItemProductPrice">¥<fmt:formatNumber type="number" value="${oi.product.promotePrice}" minFractionDigits="2"/></div></td><c:if test="${st.count==1}"><td valign="top" rowspan="${fn:length(o.orderItems)}" class="orderListItemNumberTD orderItemOrderInfoPartTD" width="100px"><span class="orderListItemNumber">${o.totalNumber}</span></td><td valign="top" rowspan="${fn:length(o.orderItems)}" width="120px" class="orderListItemProductRealPriceTD orderItemOrderInfoPartTD"><div class="orderListItemProductRealPrice">¥<fmt:formatNumber  minFractionDigits="2"  maxFractionDigits="2" type="number" value="${o.total}"/></div><div class="orderListItemPriceWithTransport">(含运费:¥0.00)</div></td><td valign="top" rowspan="${fn:length(o.orderItems)}" class="orderListItemButtonTD orderItemOrderInfoPartTD" width="100px"><c:if test="${o.status=='waitConfirm' }"><a href="foreconfirmPay?oid=${o.id}"><button class="orderListItemConfirm">确认收货</button></a></c:if><c:if test="${o.status=='waitPay' }"><a href="forealipay?oid=${o.id}&total=${o.total}"><button class="orderListItemConfirm">付款</button></a></c:if><c:if test="${o.status=='waitDelivery' }"><span>待发货</span><%--                                     <button class="btn btn-info btn-sm ask2delivery" link="admin_order_delivery?id=${o.id}">催卖家发货</button> --%></c:if><c:if test="${o.status=='waitReview' }"><a href="forereview?oid=${o.id}"><button  class="orderListItemReview">评价</button></a></c:if></td></c:if></tr></c:forEach></table></c:forEach></div></div>

天猫整站(简易版)SSM(十四)需要登录才能使用的功能相关推荐

  1. 天猫整站Springboot 从零开始搭建(四(2,3))——后台分类管理功能开发

    3 后台分类管理 3.1概述 到这里就开始讲解功能开发了. 开发整站的顺序,通常来说还是按照依赖性来进行,前端需要的数据,都要先通过后台的功能维护在数据库中,才可以拿到. 所以,先进行后台功能的开发, ...

  2. 天猫整站SSM项目(二)数据库设计

    天猫整站SSM项目(二)数据库设计 一.数据库设计分析 二.创建数据库 1. 建立数据库 2. 表与表之间的关系 2.1 表![在这里插入图片描述](https://img-blog.csdnimg. ...

  3. 天猫整站SSM项目(三)后台demo---数据查询(一)

    天猫整站SSM项目(三)后台demo---数据查询(一 一.分类查询页面包含的jsp文件 二.查询功能的实现 到这里就开始讲解功能开发了. 开发整站的顺序,通常来说还是按照依赖性来进行,前端需要的数据 ...

  4. 用整站程序(网站源代码)十分钟快速建站

     用整站程序(网站源代码)十分钟快速建站 悬赏分:0 - 解决时间:2007-2-2 18:20 怎么做 提问者: guolibao888 - 试用期 一级 最佳答案 现在提起做网站,特别是一些做一些 ...

  5. springboot+veu实战项目-天猫整站

    目录 天猫整站 Springboot 一:技术准备 二:开发流程 三:本地演示 1 : 下载并运行 2 : 访问地址 3 : nginx 4 : nginx.conf 配置文件 5 : 启动nginx ...

  6. SpringBoot实战项目教程----springboot天猫整站

    目录 一:技术准备 二:开发流程 三:本地演示 1 : 下载并运行 2 : 访问地址 3 : nginx 4 : nginx.conf 配置文件 5 : 启动nginx 6 : 访问测试 7 : 动静 ...

  7. springboot实战项目----天猫整站---how2j

    目录 天猫整站 Springboot 一:技术准备 二:开发流程 三:本地演示 1 : 下载并运行 2 : 访问地址 3 : nginx 4 : nginx.conf 配置文件 5 : 启动nginx ...

  8. 天猫整站Springboot 从零开始搭建(二)

    目录 1 技术准备 2 开发流程 2.1 需求分析 2.2.1 需求分析-展示 2.2.2 需求分析-交互 2.2.3 需求分析-后台 2.2 表结构设计 2.3 原型 2.4 后台-分类管理 2.4 ...

  9. springboot mybatis ehcache_SpringBoot入门建站全系列(十四)集成Redis缓存

    SpringBoot入门建站全系列(十四)集成Redis缓存 一.概述 本地缓存,就是使用应用内使用本地内存将数据暂缓存储,一般数据库的查询如果不怎么改动,可以用本地缓存暂存. 远程缓存,比如redi ...

  10. 天猫整站SSM-后台分类管理-增加(做个人学习笔记整理用)

    天猫整站SSM-后台分类管理-增加(做个人学习笔记整理用) CategoryController: request.getSession().getServletContext()// 获取的是pag ...

最新文章

  1. 数据库被黑后留下的数据
  2. linux中生成考核用的GPT分区表结构修复案例
  3. Spring Boot 启动加载数据 CommandLineRunner
  4. [Flashback]开启数据库闪回数据库功能
  5. Asp.net 面向接口框架之应用程序上下文作用域组件
  6. Session共享的四种方法
  7. 30天敏捷结果(1):总体认识Getting Result敏捷方法
  8. python 元类的call_通过 python的 __call__ 函数与元类 实现单例模式
  9. HTM皮质学习算法资料
  10. 单片机编程用什么软件?单片机开发软件有哪些?
  11. oracle 亿级数据迁移,Oracle12c迁移-某风险报告类系统升级暨迁移至12c-3
  12. [2014年10月5日亲测可用]迅雷极速版高速通道加速破解补丁发布
  13. html怎么把音乐播放器放到中间,怎么把音乐播放器放到自己的博客首页面上去?...
  14. ASP.NET Repeater控件使用方法
  15. MFCC和语谱图的关系
  16. yolov1原文地址以及论文翻译
  17. 景深决定照相机什么特性_行政执法考试题库2017 2017摄影专业考试题库
  18. “结果导向型”思维的规则
  19. 详细解读什么是自适应巡航?
  20. atm取款机 oracle实战训练_ATM取款机(Oracle)

热门文章

  1. 我的 Serverless 实战 — Serverless 腾讯云文字识别(OCR)详细部署过程
  2. git鉴权失败问题 以及每次clone 都要输入用户名密码问题
  3. [译] APT分析报告:02.钓鱼邮件网址混淆URL逃避检测
  4. STM32单片机中定义结构体类型指针
  5. android usb 视频播放,如何播放/循环播放USB设备上存储的照片/视频/音乐
  6. kettle数据同步从FTP服务器上下载文件
  7. lagrange量中的u和v的来历
  8. Pyrene-PEG-Biotin,芘丁酸聚乙二醇生物素,Biotin-PEG-Pyrene
  9. excel Cell函数
  10. 谷歌关键字推广操作技巧