購物車模組

一大岐發表於2020-12-06

抽取購物車模型

  1. 購物項：圖片路徑，商品名稱，商品價格，購買數量，小計
public class CartItem {
	private Product product;//目的攜帶購物項3種引數(圖片路徑,商品名稱,商品價格)
	private int num;//當前類別商品數量
	private double subTotal;//小計
	
	//小計是經過計算可以獲取到的
	public double getSubTotal() {
		return product.getShop_price()*num;
	}
	
	public Product getProduct() {
		return product;
	}
	
	public void setProduct(Product product) {
		this.product = product;
	}
	
	public int getNum() {
		return num;
	}
	
	public void setNum(int num) {
		this.num = num;
	}
	
	public void setSubTotal(double subTotal) {
		this.subTotal = subTotal;
	}
	
}
  1. 購物車：購物項不確定
//2個屬性3個方法
public class Cart {
    //總計/積分
    private double total = 0;
    //個數不確定的購物項 商品pid<===>CartItem
    Map<String, CartItem> map = new HashMap<>();
    //新增購物項到購物車
    //當使用者點選加入購物車按鈕,可以將當前要購買的商品id,商品數量傳送到服務端,服務端根據商品id查詢到商品資訊
    //有了商品資訊Product物件,有了要購買商品數量,當前的購物項也就可以獲取到了
    public void addCartItemToCar(CartItem cartItem) {
        //獲取到正在想購物車中新增的商品pid
        String pid = cartItem.getProduct().getPid();
        //將當前的購物項加入購物車之前,判斷之前是否買過這類商品
        //如果沒有買過    list.add(cartItem);
        //如果買過: 獲取到原先的數量,獲取到本次的數量,相加之後設定到原先購物項上
        if (map.containsKey(pid)) {
            //獲取到原先的購物項
            CartItem oldItem = map.get(pid);
            oldItem.setNum(oldItem.getNum() + cartItem.getNum());

        } else {
            map.put(pid, cartItem);
        }
    }


    //返回MAP中所有的值
    public Collection<CartItem> getCartItems() {
        return map.values();
    }

    //移除購物項
    public void removeCartItem(String pid) {
        map.remove(pid);
    }

    //清空購物車
    public void clearCart() {
        map.clear();
    }

    //總計是可以經過計算獲取到
    public double getTotal() {
        //向讓總計請0
        total = 0;
        //獲取到Map中所有的購物項
        Collection<CartItem> values = map.values();

        //遍歷所有的購物項,將購物項上的小計相加
        for (CartItem cartItem : values) {
            total += cartItem.getSubTotal();
        }

        return total;
    }


    public void setTotal(double total) {
        this.total = total;
    }

    public Map<String, CartItem> getMap() {
        return map;
    }


    public void setMap(Map<String, CartItem> map) {
        this.map = map;
    }
}

新增商品到購物車

開發流程

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片儲存下來直接上傳(img-k1wTaqif-1607233626735)(新增商品到購物車開發流程.png)]

設定form表單，設定隱藏域向服務端傳遞商品pid

<div style="padding:10px;border:1px solid #e7dbb1;width:330px;margin:15px 0 10px 0;;background-color: #fffee6;">
    <div style="margin:5px 0 10px 0;">白色</div>

    <div style="border-bottom: 1px solid #faeac7;margin-top:20px;padding-left: 10px;">購買數量:

        <!-- 向服務端傳送 購買數量-->
        <input id="quantity" name="quantity" value="1" maxlength="4" size="10" type="text"> </div>
    <!-- 向服務端傳送 商品pid-->
    <input type="hidden" name="pid" value="${product.pid}"/>


    <div style="margin:20px 0 10px 0;;text-align: center;">
        <%--加入到購物車 --%>
        <!-- 取消連結的預設行為 -->
        <a href="javascript:void(0)">
            <input id="btnId" style="background: url('${pageContext.request.contextPath}/img/product.gif') no-repeat scroll 0 -600px rgba(0, 0, 0, 0);height:36px;width:127px;" value="加入購物車" type="button">
        </a> &nbsp;收藏商品</div>
</div>

如果一個表單中有多個按鈕，點選不同按鈕提交到不同路徑

<script>
    $(function(){
        $("#btnId").click(function(){
            var formObj=document.getElementById("myForm");
            //formObj.action="${pageContext.request.contextPath}/cartServlet";
            //formObj.method="get";
            formObj.submit();
        });
    });
</script>

在cartServlet下新增addCartItemToCart方法

public String addCartItemToCart(HttpServletRequest request, HttpServletResponse response) throws Exception {

    //從session中獲取購物車
    Cart cart = (Cart) request.getSession().getAttribute("cart");
    if (cart == null) {
        cart = new Cart();
        request.getSession().setAttribute("cart",cart);
    }
    //獲取商品pid和數量
    String pid = request.getParameter("pid");
    int num = Integer.parseInt(request.getParameter("quantity")) ;
    //查詢pid的商品
    ProductService productService = new ProductServiceImp();
    Product product = productService.findProductByPid(pid);
    //新增購物項
    CartItem cartItem = new CartItem();
    cartItem.setNum(num);
    //新增購物項到購物車
    cartItem.setProduct(product);
    cart.addCartItemToCar(cartItem);
    //重定向到/jsp/cart.jsp
    //如果轉發，則重新整理頁面會提交，每次重新整理商品數量都會+1
    response.sendRedirect(request.getContextPath() + "/jsp/cart.jsp");
    return  null;
}

編寫購物車頁面jsp/cart.jsp

<div class="container">
    <c:if test="${empty cart.cartItems}">
        <div class="col-md-12">購物車中暫無資料,趕緊剁手去吧!</div>
    </c:if>

    <c:if test="${not empty cart.cartItems }">
        <div class="row">
            <div style="margin:0 auto; margin-top:10px;width:950px;">
                <strong style="font-size:16px;margin:5px 0;">訂單詳情</strong>
                <table class="table table-bordered">
                    <tbody>
                    <tr class="warning">
                        <th>圖片</th>
                        <th>商品</th>
                        <th>價格</th>
                        <th>數量</th>
                        <th>小計</th>
                        <th>操作</th>
                    </tr>
                    <c:forEach items="${cart.cartItems}" var="item">
                        <tr class="active">
                            <td width="60" width="40%">
                                <input type="hidden" name="id" value="22">
                                <img src="${pageContext.request.contextPath}/${item.product.pimage}" width="70"
                                     height="60">
                            </td>
                            <td width="30%">
                                <a target="_blank">${item.product.pname}</a>
                            </td>
                            <td width="20%">
                                ￥${item.product.shop_price}
                            </td>
                            <td width="10%">
                                <input type="text" name="quantity" value="${item.num}" maxlength="4" size="10">
                            </td>
                            <td width="15%">
                                <span class="subtotal">￥${item.subTotal}</span>
                            </td>
                            <td>
                                    <%-- <a href="javascript:void(0);" class="delete" onclick="delCart(${item.product.pid})">刪除</a> --%>
                                <input type="hidden" name="pid" value="${item.product.pid}"/>
                                <a href="javascript:void(0);" title="${item.product.pid}" class="delete"
                                   id="${item.product.pid}">刪除</a>
                            </td>
                        </tr>
                    </c:forEach>
                    </tbody>
                </table>
            </div>
        </div>

        <div style="margin-right:130px;">
            <div style="text-align:right;">
                <em style="color:#ff6600;">
                    登入後確認是否享有優惠&nbsp;&nbsp;
                </em> 贈送積分: <em style="color:#ff6600;">${cart.total}</em>&nbsp; 商品金額: <strong
                    style="color:#ff6600;">￥${cart.total}元</strong>
            </div>
            <div style="text-align:right;margin-top:10px;margin-bottom:10px;">
                <a href="javascript:void(0)" id="clear" class="clear">清空購物車</a>

                <a href="${pageContext.request.contextPath}/OrderServlet?method=saveOrder">
                        <%--提交表單 --%>
                    <input type="button" width="100" value="提交訂單" name="submit" border="0"
                           style="background: url('${pageContext.request.contextPath}/img/register.gif') no-repeat scroll 0 0 rgba(0, 0, 0, 0);
                                   height:35px;width:100px;color:white;">
                </a>
            </div>
        </div>

    </c:if>
</div>

商品移除和清空購物車

繫結點選事件

<script>

    $(function () {
        $("#clear").click(function () {
            if (confirm("忍心刪除我嗎?")) {
                location.href = "${pageContext.request.contextPath}/cartServlet?method=clearCart";
            }
        });


        $(".delete").click(function () {
            var pid = this.id;
            if (confirm("忍心刪除我嗎?")) {
                location.href = "${pageContext.request.contextPath}/cartServlet?method=delCartItem&pid=" + pid;
            }
        });
    });
</script>

在cartServlet下新增delCartItem方法和clearCart方法

新增delCartItem方法

public String delCartItem(HttpServletRequest request, HttpServletResponse response) throws IOException {
    //獲取刪除商品的pid
    String id = request.getParameter("pid");
    //獲取購物車
    Cart cart = (Cart) request.getSession().getAttribute("cart");
    cart.removeCartItem(id);
    //重定向到/jsp/cart.jsp
    response.sendRedirect(request.getContextPath() + "/jsp/cart.jsp");
    return null;
}

新增clearCart方法

public String clearCart(HttpServletRequest request, HttpServletResponse response) throws IOException {
    //獲取購物車
    Cart cart = (Cart) request.getSession().getAttribute("cart");
    cart.clearCart();
    //重定向到/jsp/cart.jsp
    response.sendRedirect(request.getContextPath() + "/jsp/cart.jsp");
    return null;
}

相關文章