【J2EE】模仿天猫商城（前台篇）-03加入购物车和结算

水深无声 2022-04-18 05:23 177阅读 0赞

购物车里的商品，其实就是一堆没有生成订单的订单项

同样，点击进入一个产品的详情页 ，点击加入购物车，如果未登录，那么点击加入购物车也是会弹出模态登录窗口的。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTg2Njk2MA_size_16_color_FFFFFF_t_70][]

点击加入购物车，这时用ajax异步访问地址，并且携带了参数pid和num

![20181108222654727.png][]

js代码如下

$(".addCartLink").click(function(){
            var page = "forecheckLogin";
            $.get(
                    page,
                    function(result){
                        if("success"==result){
                            var pid = ${p.id};
                            var num= $(".productNumberSetting").val();
                            var addCartpage = "foreaddCart";
                            $.get(
                                    addCartpage,
                                    {"pid":pid,"num":num},
                                    function(result){
                                        if("success"==result){
                                            $(".addCartButton").html("已加入购物车");
                                            $(".addCartButton").attr("disabled","disabled");
                                            $(".addCartButton").css("background-color","lightgray")
                                            $(".addCartButton").css("border-color","lightgray")
                                            $(".addCartButton").css("color","black")
                                             
                                        }
                                        else{
                                             
                                        }
                                    }
                            );                         
                        }
                        else{
                            $("#loginModal").modal('show');                    
                        }
                    }
            );     
            return false;

上一步访问地址/foreaddCart导致ForeServlet.addCart()方法被调用，addCart()方法和立即购买中的buyone步骤是一样的，只是最后返回的值不一样。addCart返回的是一个success，当收到返回时success时，改变按钮样式

addCart代码

public String addCart(HttpServletRequest request, HttpServletResponse response, Page page) {
            int pid = Integer.parseInt(request.getParameter("pid"));
            Product p = productDAO.get(pid);
            int num = Integer.parseInt(request.getParameter("num"));
             
            User user =(User) request.getSession().getAttribute("user");
            boolean found = false;
     
            List<OrderItem> ois = orderItemDAO.listByUser(user.getId());
            for (OrderItem oi : ois) {
                if(oi.getProduct().getId()==p.getId()){
                    oi.setNumber(oi.getNumber()+num);
                    orderItemDAO.update(oi);
                    found = true;
                    break;
                }
            }      
             
            if(!found){
                OrderItem oi = new OrderItem();
                oi.setUser(user);
                oi.setNumber(num);
                oi.setProduct(p);
                orderItemDAO.add(oi);
            }
            return "%success";
        }

查看购物车，点击右上角![20181108223838383.png][]

访问地址/forecart导致ForeServlet.cart()方法被调用  
1. 通过session获取当前用户  
所以一定要登录才访问，否则拿不到用户对象  
2. 获取未这个用户关联的订单项集合 ois  
3. 把ois放在request中  
4. 服务端跳转到cart.jsp

public String cart(HttpServletRequest request, HttpServletResponse response, Page page) {
        User user =(User) request.getSession().getAttribute("user");
        List<OrderItem> ois = orderItemDAO.listByUser(user.getId());
        request.setAttribute("ois", ois);
        return "cart.jsp";
    }

接下来是对购物车商品进行结算，即生成一张订单，点击  结算，执行对应的js代码

$("button.createOrderButton").click(function(){
            var params = "";
            $(".cartProductItemIfSelected").each(function(){
                if("selectit"==$(this).attr("selectit")){
                    var oiid = $(this).attr("oiid");
                    params += "&oiid="+oiid;
                }
            });
            params = params.substring(1);
            location.href="forebuy?"+params;
        });

这段代码意思是提取勾选上的商品 的id，然后跳转到forebuy并且携带oiid；如何判断订单项是否被勾选上？看jsp中的这段代码

![2018110823034258.png][]

当selectit为false时，就是表示没有被勾选上，当值为selectit时，就是被勾选上了，下面这段js代码是实现这个操作的方法

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTg2Njk2MA_size_16_color_FFFFFF_t_70 1][]

扯远了。。。然后是到foreServlet中的buy方法，当我们购物车中有多件商品时，我们跳转的地址中会这样显示![20181108230908459.png][]

可以看到携带了多个oiid，调用buy方法

1. 通过getParameterValues获取参数oiid  
2. 准备一个泛型是OrderItem的集合ois  
3. 根据前面步骤获取的oiids，从数据库中取出OrderItem对象，并放入ois集合中  
4. 累计这些ois的价格总数，赋值在total上  
5. 把订单项集合放在session的属性 "ois" 上  
6. 把总价格放在 request的属性 "total" 上  
7. 服务端跳转到buy.jsp

public String buy(HttpServletRequest request, HttpServletResponse response, Page page){
        String[] oiids=request.getParameterValues("oiid");
        List<OrderItem> ois = new ArrayList<>();
        float total = 0;
     
        for (String strid : oiids) {
            int oiid = Integer.parseInt(strid);
            OrderItem oi= orderItemDAO.get(oiid);
            total +=oi.getProduct().getPromotePrice()*oi.getNumber();
            ois.add(oi);
        }
         
        request.getSession().setAttribute("ois", ois);
        request.setAttribute("total", total);
        return "buy.jsp";
    }

接下来结算页面的就和前一节一样了，这里就不写了

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTg2Njk2MA_size_16_color_FFFFFF_t_70]: /images/20220418/2132051ca69140b3bd45be293760d474.png
[20181108222654727.png]: /images/20220418/40d5819ce1e149fbb89e4276c0fb85d9.png
[20181108223838383.png]: /images/20220418/2a5d7213830b43018f6f3a480153f289.png
[2018110823034258.png]: /images/20220418/27b8c8d88a0a49c3954a1a1f80898626.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTg2Njk2MA_size_16_color_FFFFFF_t_70 1]: /images/20220418/2fa45cc61fab4b98b08e74f61e9522e3.png
[20181108230908459.png]: /images/20220418/8b29c56314d24e1bb0d1f51452b7481e.png