JavaWeb - 小米商城：提交订单(上篇)

最新推荐文章于 2023-07-25 20:12:45 发布

仰望、未来

最新推荐文章于 2023-07-25 20:12:45 发布

阅读量1.5k

点赞数

CC 4.0 BY-SA版权

分类专栏： java web html 文章标签：前端 java

本文链接：https://blog.youkuaiyun.com/qq_52029763/article/details/124827739

本文详细介绍了在JavaWeb环境下，如何实现小米商城从购物车提交订单的整个流程，包括前端页面的交互和后端数据处理。在用户点击生成订单后，首先检查用户是否已登录，接着获取购物车数据创建订单和订单详情，并存储到数据库。同时展示了订单预览、支付提示、订单列表和订单详情等关键页面的实现。在后端，通过Servlet、Service、Dao层进行逻辑处理，使用事务控制确保数据一致性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

JavaWeb - 小米商城：创建订单

1.功能描述

接上篇 JavaWeb - 小米商城：商品添加到购物车本篇博客将分析和实现小米商城通过购物车提交。如以下H5页面所示：

购物车界面

通过购物界面点击生成订单按钮，依据购物车数据创建订单信息

在这里插入图片描述

订单预览界面

订单创建成功, 显示订单预览界面, 在预览界面可以显示和添加收货地址

在这里插入图片描述

支付提示界面:

当点击提交订单, 此时将订单数据存储到数据表

在这里插入图片描述

支付宝支付:

一般的开发中使用的是沙箱做模拟支付

在这里插入图片描述

我的订单列表:

支付成功可以通过点击我的订单查看订单列表

在这里插入图片描述

订单详情界面

通过点击订单列表中订单详情按钮打开该

在这里插入图片描述

2.提交功能分析

2.1 功能逻辑抽象

商品购物车成功点击生成订单时, 先判断一行是否登录, 如果用户没有登录, 则需要用户先完成登录, 获取到用户对象 , 然后从session中取得购物车数据, 根据购物车数据创建订单对象和订单详情List集合数据

商品购物车是面向数据库中的tb_cart表, 订单面向的是tb_order表和订单详情表tb_orderdetail, 在订单预览页面添加数据到对应的表, 在开发时基于三层架构体系购物车建立对应的CartServlet类, CartService接口和实现类, CartDao接口和实现类, 订单建立对应的OrderServlet类, OrderService接口和实现类, OrderDao接口和实现类, 订单建立对应的OrderDetailServlet类, OrderDetailService接口和实现类, OrderDetaDao接口和实现类

提示: 还需要创建辅助的vo类

OdersView : oid,uid,orderTime,userName,telphon,address,totalMoney,ostate

GoodOdersDeailVo : pid,pimg,pname,star,pubdate,price,num,money

3.代码实现

3.1前端

3.1.1修改购物车中添加收货地址a链接地址

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PxDcWEq9-1652785135869)(修改跳转连接.png)]

3.1.2修改order.html代码

   <script type="text/javascript">
        $(function () {
     
     
            $("#btn_add").click(function () {
     
     
                location.href = "order.do?action=generateOrder&aid=" + $("#address").val();
            })
        })
        $(document).ready(function () {
     
     
            //获取购物车的session数据显示到页面
            $.get("cart.do?action=showCart", "", function (result) {
     
     
                if (result.flag === true) {
     
     
                    var sum = 0;//计算总金额变量
                    var index = 1;
                    for (var i in result.data) {
     
     
                        var tbhtm ='<tr>' +
                            '<td>' + index + '</td>' +
                            '<td>' + result.data[i].goodsName + '</td>' +
                            '<td>¥&nbsp;' + result.data[i].price + '</td>' +
                            '<td>' + result.data[i].quantity + '</td>' +
                            '<td>¥&nbsp;' + result.data[i].subtotal + '</td>' +
                            '</tr>';
                        index++;
                        sum += result.data[i].subtotal;
                        $("#cartBody").append(tbhtm);
                    }
                    //显示总计
                    $("#total").html("<b>￥&nbsp;&nbsp;" + sum + "</b>");
                }
            });
            //获取地址列表的数据显示到页面
            $.get("address.do?action=showAddress", "", function (result) {
     
     
                var addStr = '';
                var address = '<tr>' +
                    '<td colspan="5">' +
                    '<h5>收货地址</h5>' +
                    '<select id="address" style="width:60%" class="form-control">';
                if (result.flag === true) {
     
     
                    for (var i in result.data) {
     
     
                        address += '<option value="' + result.data[i].id + '">' +
                            result.data[i].name + '&nbsp;&nbsp;' + result.data[i].phone + '&nbsp;&nbsp;' +
                            result.data[i].detail + '</option>';
                    }
                } else {
     
     
                    addStr = '<a href="self_info.html">添加收货地址</a>';
                }
                address += '</select>' + addStr + '</td>' + '</tr>';
                $("#addressFoot").append(address);
            });
        });
    </script>
    <script type="text/javascript" src="js/includeHeader.js"></script>
</head>
<body style="background-color:#f5f5f5">
<div id="headtop">
</div>
<div class