day10-功能實現09

一刀一個小西瓜發表於2022-12-27

原文網址 : https://www.cnblogs.com/liyuelian/p/17009003.html

家居網購專案實現09

以下皆為部分程式碼，詳見 https://github.com/liyuelian/furniture_mall.git

21.功能20-修改購物車

21.1需求分析/圖解

進入購物車頁面，可以修改購買數量
更新該商品的金額
更新購物車商品數量和總金額

21.2思路分析

21.3程式碼實現

21.3.1entity層

Cart.java

增加方法updateCount()

/**
 * 根據家居id和count，修改指定cartItem的數量和總價
 *
 * @param id    家居id
 * @param count 指定id的家居的數量
 */
public void updateCount(int id, int count) {
    //獲取指定的cartItem
    CartItem item = items.get(id);
    if (null != item) {//如果cartItem不為空
        //更新數量
        item.setCount(count);
        //某家居總價 = 單價 * 數量（為了安全使用get方法獲取數量count）
        item.setTotalPrice(item.getPrice().multiply(new BigDecimal(item.getCount())));
    }
}

21.3.2web層

CartServlet.java

增加方法updateCount()

/**
 * 更新購物車的某個家居數量
 *
 * @param req
 * @param resp
 * @throws ServletException
 * @throws IOException
 */
protected void updateCount(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
    int id = DataUtils.parseInt(req.getParameter("id"), 0);
    int count = DataUtils.parseInt(req.getParameter("count"), 1);
    //獲取session中的購物車
    Cart cart = (Cart) req.getSession().getAttribute("cart");
    if (null != cart) {
        cart.updateCount(id, count);
    }
    //回到請求更新家居購物車的頁面
    resp.sendRedirect(req.getHeader("Referer"));
}

21.3.3前端

cart.jsp

新增繫結事件，當點選修改對應的家居數量時，向伺服器傳送更新家居資訊的請求

<script type="text/javascript">
    $(function () {
        /*--------------------------
            Cart Plus Minus Button
        ----------------------------*/
        var CartPlusMinus = $(".cart-plus-minus");
        CartPlusMinus.prepend('<div class="dec qtybutton">-</div>');
        CartPlusMinus.append('<div class="inc qtybutton">+</div>');
        $(".qtybutton").on("click", function () {
            var $button = $(this);
            var oldValue = $button.parent().find("input").val();
            if ($button.text() === "+") {
                var newVal = parseFloat(oldValue) + 1;
            } else {
                // Don't allow decrementing below zero
                if (oldValue > 1) {
                    var newVal = parseFloat(oldValue) - 1;
                } else {
                    newVal = 1;
                }
            }
            $button.parent().find("input").val(newVal);
            var furnId = $button.parent().find("input").attr("furnId");
            //發出修改購物車的請求
            location.href =
                "cartServlet?action=updateCount&count=" + newVal + "&id=" + furnId;
        });
    })
</script>

21.4完成測試

修改家居數量：

22.功能21-刪除/清空購物車

22.1需求分析/圖解

進入購物車，可以刪除某商品
可以清空購物車
要求該出適當的確認資訊

22.2思路分析

見21.2思路分析圖

22.3程式碼實現

22.3.1entity層

Cart.java新增刪除購物車家居項的方法delItem()

/**
 * 根據家居id刪除對應的cartItem
 *
 * @param id 家居id
 */
public void delItem(int id) {
    items.remove(id);
}

增加清空方法clear()

/**
 * 清空items
 */
public void clear() {
    items.clear();
}

22.3.2web層

CartServlet.java新增方法delItem()

/**
 * 根據id刪除購物車的某個家居資訊
 *
 * @param req
 * @param resp
 * @throws ServletException
 * @throws IOException
 */
protected void delItem(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
    int id = DataUtils.parseInt(req.getParameter("id"), 0);
    //獲取session中的購物車
    Cart cart = (Cart) req.getSession().getAttribute("cart");
    if (null != cart) {
        cart.delItem(id);
    }
    //回到請求刪除家居項的購物車頁面
    resp.sendRedirect(req.getHeader("Referer"));
}

增加clear()方法

/**
 * 清空購物車
 *
 * @param req
 * @param resp
 * @throws ServletException
 * @throws IOException
 */
protected void clear(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
    //獲取session的購物車
    Cart cart = (Cart) req.getSession().getAttribute("cart");
    if (null != cart) {
        cart.clear();
    }
    //回到請求清空家居項的購物車頁面
    resp.sendRedirect(req.getHeader("Referer"));
}

22.3.3前端

cart.jsp

//清空購物車繫結確認事件
$("a.clearCart").click(function () {
    return window.confirm("你確認要清空購物車嗎?")
})

//給刪除購物車繫結事件
$("a.delItem").click(function () {
    //獲取要刪除的家居名
    var furnName = $(this).parent().parent().find("td:eq(1)").text();
    //使用確認彈窗
    //點選確認，返回true，點選取消，返回false
    return window.confirm("你確認要刪除" + furnName + "嗎?")
})