本篇文章讲的是如何使用javaweb相关知识模拟购物车功能

(web练手小项目)

使用到的相关知识(部分知识点在文章中简单涉及到):

       html  cs  javascript  jsp  servlet   ajax  jQuery  Mysql  MyBatis(持久层框架，用来连接数据库，这里可以使用jdbc进行数据库的连接)  功能使用MVC设计模式，以及三层架构思想

注: 本篇使用Session对购物车进行存储,具体参考下文WelcomeServlet.java

功能实现效果:

购物车为空状态 

 功能大致目录结构:

 

前端界面代码:

 (1) shopcar.jsp(购物车界面)

    
    
    


    th, td {
        border-bottom: 1px solid green;
    }
    th {
        background-color: #4CAF50;
        color: white;
    }
    table{
        text-align: center;
    }


购物车

    
        function judgeDelete(carGoodsName) {
            if (confirm("是否删除" + carGoodsName)) {
                window.location.href = "${pageContext.request.contextPath}/deleteCarGoods?carGoodsName=" + carGoodsName
            } else {
                alert("取消删除成功")
            }
        }
    

    
        购物车为空--%>
        

            
        

    

    
        

            
商品名称
            
商品描述
            
价格
            
购买数量
            
操作
        
    
    

        
            

                
${CarGoods.carGoodsName}
                
${CarGoods.carGoodsDes}
                
${CarGoods.carGoodsPrice}
                
${CarGoods.buyCount}
                

                    
                
            

        
    



    
目前您购物车的总价格为:${money}元人民币

 

 (2) shoplist.jsp(商品页)

    
    
    


    th, td {
        border-bottom: 1px solid green;
    }
    th {
        background-color: #4CAF50;
        color: white;
    }
    table{
        text-align: center;
    }



:)


    $(function () {
        $("#showbtn").click(function () {
            $.ajax({
                type: "GET",
                url: "${pageContext.request.contextPath}/judgecar",
                async: true,
                success: function (j) {
                    if (j == "购物车为空") {
                        alert("购物车为空")
                    } else {
                        window.location.href = "${pageContext.request.contextPath}/shopcar.jsp"
                    }
                }
            })
        })
    })

商品页
查看购物车

    

        

            
序号
            
商品名称
            
商品描述
            
商品价格(元)
            
库存数量
            
添至购物车
        

        
            

                
${goodStatus.count}
                
${goods.goodsName}
                
${goods.goodsDes}
                
${goods.goodsPrice}
                
${goods.goodsCount}
                

                    
                
            
        
    
    


    
        
    




    $(function () {
        $("#btn").click(function () {
            var flag = false;
            var $checkbox = $(":checkbox");
            /*for (var i = 0; i < $checkbox.length; i++) {
                if($checkbox[i].checked){
                    flag = true;
                }
            }*/
            //使用jQuery循环jQuery对象，其实jQuery对象就是一个dom数组
            /*$checkbox.each(function (i , n) {
                if(n.checked){
                    flag = true
                }
            })*/
            $.each($checkbox,function (i,n) {
                if(n.checked){
                    flag = true;
                }
            })
            if (flag == false) {
                alert("未选择商品")
            } else {
                var $formElement = $("#form_")[0];
                $formElement.submit();
            }
        })
    })