day10-功能實現09

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

家居網購專案實現09

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

21.功能20-修改購物車

21.1需求分析/圖解

image-20221226211829037
  1. 進入購物車頁面,可以修改購買數量
  2. 更新該商品的金額
  3. 更新購物車商品數量和總金額

21.2思路分析

day10-功能實現09

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完成測試

image-20221227180751201

修改家居數量:

image-20221227180837612

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

22.1需求分析/圖解

image-20221227185033474
  1. 進入購物車,可以刪除某商品
  2. 可以清空購物車
  3. 要求該出適當的確認資訊

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 + "嗎?")
})
image-20221227192117207 image-20221227194032831

22.4完成測試

刪除購物車項:

image-20221227192245013 image-20221227192257075

清空購物車:

image-20221227194405872 image-20221227194415362

23.功能22-生成訂單

23.1需求分析/圖解

image-20221227195655878 image-20221227204858133 image-20221227201044836 image-20221227201115765
  1. 進入購物車,點選購物車結賬
  2. 生成訂單和訂單項
  3. 如果會員沒有登入,則先進入登入頁面,完成登入後再結賬

23.2思路分析

day10-功能實現09

23.3程式碼實現

23.3.1設計order和order_item表

23.4完成測試

相關文章