家居网购项目（购物车功能）-CSDN博客

本文链接：https://blog.csdn.net/m0_64637029/article/details/137757735

本文详细描述了一个电商网站中购物车功能的实现过程，包括添加商品、删除、清空、动态修改数量以及购物车结果展示的各个环节，涉及CartServlet的编写和使用，以及如何处理Ajax请求、会话管理和购物车数据的存储与更新。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

1.添加购物车

1.需求分析

2.程序框架图

3.修改index.jsp

1.将信息发送给后端

2.session中获取总数

4.编写CartServlet

package com.sxs.furns.web;

import com.sxs.furns.entity.CartItem;
import com.sxs.furns.utils.DataUtils;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
import java.io.IOException;
import java.math.BigDecimal;
import java.net.URLEncoder;
import java.util.Collection;
import java.util.HashMap;


/**
 * @author 孙显圣
 * @version 1.0
 */
@WebServlet(urlPatterns = "/cartServlet")
public class CartServlet extends BasicServlet {
    //购物车添加操作
    public void addItem(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //获取name和pageNo用于返回原来的页面（主要是解决搜索到的第一个界面添加到购物车无法正常返回）
        String name = req.getParameter("name");
        String pageNo = req.getParameter("pageNo");
        //获取前端物品信息
        Integer cartItemId = DataUtils.parseInt(req.getParameter("cartItemId"), -1);
        String cartItemName = req.getParameter("cartItemName");
        BigDecimal cartItemPrice = new BigDecimal(req.getParameter("cartItemPrice"));
        //计算剩余数据项
        Integer cartItemCount = 1;
        BigDecimal cartItemTotalPrice = null;
        //获取session
        HttpSession session = req.getSession();
        //获取存放物品信息的map
        HashMap<Integer, CartItem> cart = (HashMap<Integer, CartItem>) session.getAttribute("Cart");
        if (cart == null || cart.isEmpty()) { //如果map是空的或者没有数据
            HashMap<Integer, CartItem> CartItemHashMap = new HashMap<>();
            //只有一件，总价格就是一件的价格
            cartItemTotalPrice = cartItemPrice;
            //封装到bean中
            CartItem cartItem = new CartItem(cartItemId, cartItemName, cartItemPrice, cartItemCount, cartItemTotalPrice);
            CartItemHashMap.put(cartItemId, cartItem);
            session.setAttribute("Cart", CartItemHashMap);
            session.setAttribute("totalNum", cartItemCount);
        } else {
            //只要map里包含了同样的id则数量加一
            if (cart.containsKey(cartItemId)) {
                cartItemCount = cart.get(cartItemId).getCount() + 1;
            }
            //计算总价格
            cartItemTotalPrice = cartItemPrice.multiply(new BigDecimal(cartItemCount));
            //封装到bean中
            CartItem cartItem = new CartItem(cartItemId, cartItemName, cartItemPrice, cartItemCount, cartItemTotalPrice);
            cart.put(cartItemId, cartItem);
            //计算总数
            Collection<CartItem> values = cart.values();
            Integer totalNum = 0;
            //遍历所有value，计算总数
            for (CartItem value : values) {
                totalNum += value.getCount();
            }
            session.setAttribute("totalNum", totalNum);
        }


        resp.setContentType("html/text;charset=utf-8");
        if (name != null && pageNo != null) {
            // 对name参数进行URL编码
            String encodedName = URLEncoder.encode(name, "UTF-8");
            String url = "/jiaju_mail/customerFurnServlet?action=pageByName&name=" + encodedName + "&pageNo=" + pageNo;
            resp.sendRedirect(url);
        }
        else {
            // 回到原页面
            String header = req.getHeader("Referer");
            resp.sendRedirect(header);
        }
    }
}

5.调试阶段

模糊查询进入第一页之后加入购物车无法跳转回来

原因：

下面是我原来的逻辑，就是获取到请求方的url，然后再次向那个url发送请求即可返回原页面

这个在其他情况下都适用，但是在模糊查询进入第一页时是不好使的，因为模糊查询，第一次查询到第一页的时候，有一个数据是post请求，也就是查到第一页的内容不仅仅需要url的部分，还需要这个name，所以只是向url发送请求是不足以返回这个第一页的

这是我最后的解决方案，值得注意的是，在重定向的时候需要手动进行url编码才行

6.结果展示

1.初始状态

2.首页添加到购物车

3.首页切换页添加到购物车

4.查询之后添加到购物车

5.查询之后切换页添加到购物车

2.显示购物车

1.需求分析

2.代码框架图

3.引入cart.jsp

1.修改头部

2.展示信息

3.查找替换

4.根据登录状态显示提示信息

4.修改index.html

5.结果展示

1.头部状态显示

2.显示购物车

3.修改购物车

1. 程序框架图

2.删除购物车一条数据

1.修改CartServlet

添加方法

    //删除购物车数据项
    public void delItem(HttpServletRequest req, HttpServletResponse resp) throws IOException {
        //获取id
        Integer cartItemId = DataUtils.parseInt(req.getParameter("cartItemId"), -1);
        //从session中删除该id对应的数据项
        HttpSession session = req.getSession();
        HashMap<Integer, CartItem> cart = (HashMap<Integer, CartItem>) session.getAttribute("Cart");
        cart.remove(cartItemId);
        //重新计算总数和价格
        //计算总数
        Collection<CartItem> values = cart.values();
        Integer totalNum = 0;
        BigDecimal allPrice = BigDecimal.valueOf(0);
        //遍历所有value，计算总数和总价格
        for (CartItem value : values) {
            totalNum += value.getCount();
            allPrice = value.getTotalPrice().add(allPrice);
        }
        //放到session中
        session.setAttribute("totalNum", totalNum);
        session.setAttribute("allPrice", allPrice);
        //回到原页面
        String header = req.getHeader("Referer");
        resp.sendRedirect(header);
    }

2.修改cart.jsp

3.修改bug，计算总价格错误

addItem方法

3.清空购物车

1.修改CartServlet

添加方法

    //清空购物车
    public void clear(HttpServletRequest req, HttpServletResponse resp) throws IOException {
        //从session中删除Cart
        HttpSession session = req.getSession();
        session.removeAttribute("Cart");
        //设置商品的数量和总价为0
        session.setAttribute("totalNum", 0);
        session.setAttribute("allPrice", 0);
        //回到原页面
        String header = req.getHeader("Referer");
        resp.sendRedirect(header);
    }

2.修改cart.jsp

3.修改bug，首次访问购物车总商品数量和总价为空

cart.jsp

4.动态修改购物车商品数量

1.修改CartServlet

添加方法

    public void updateCount(HttpServletRequest req, HttpServletResponse resp) throws IOException {
        //获取id和count
        Integer id = DataUtils.parseInt(req.getParameter("id"), -1);
        Integer count = DataUtils.parseInt(req.getParameter("count"), -1);

        //修改购物车信息
        HttpSession session = req.getSession();
        HashMap<Integer, CartItem> cart = (HashMap<Integer, CartItem>) session.getAttribute("Cart");
        CartItem cartItem = cart.get(id);
        cartItem.setCount(count);
        cartItem.setTotalPrice(cartItem.getPrice().multiply(new BigDecimal(cartItem.getCount())));

        //重新计算总价和商品数量，并放到session中
        CartItem.calTotalNumAndPrice(cart, session);

        //回到原页面
        String header = req.getHeader("Referer");
        resp.sendRedirect(header);
    }

2.修改cart.jsp

与用户交互的js

    <script>
        $(function () {

            //给清空购物车绑定一个点击事件
            $("a.clearCart").click(function () {
                //使用确认弹窗
                //返回一个false(取消删除) 或者 true(删除)
                return confirm("你确认要删除购物车?");
            })

            //给删除购物车绑定一个点击事件
            $("a.delItem").click(function () {
                var furnName = $(this).parent().parent().find("td:eq(1)").text();
                //使用确认弹窗
                //返回一个false(取消删除) 或者 true(删除)
                return confirm("你确认要删除【" + furnName + "】?");
            })

            var CartPlusMinus = $(".cart-plus-minus");
            CartPlusMinus.prepend('<div class="dec qtybutton">-</div>');
            CartPlusMinus.append('<div class="inc qtybutton">+</div>');

            // 绑定change事件到输入框
            CartPlusMinus.on('change', '.cart-plus-minus-box', function () {
                var $input = $(this);
                var value = parseFloat($input.val());

                // 如果值小于1，则将其设置为1
                if (value < 1) {
                    $input.val(1);
                }
                // 当用户完成输入并且输入框失去焦点时的操作
                location.href = "cartServlet?action=updateCount&id=" + $(this).attr("id") + "&count=" + $input.val();

            });

            // 修改原有的点击事件处理器
            $(".qtybutton").on("click", function () {
                var $button = $(this);
                var $input = $button.parent().find("input.cart-plus-minus-box");
                var oldValue = parseFloat($input.val());
                var newVal;

                if ($button.hasClass("inc")) {
                    newVal = oldValue + 1;
                } else {
                    // Don't allow decrementing below one
                    newVal = oldValue > 1 ? oldValue - 1 : 1;
                }

                // 更新输入框的值
                $input.val(newVal);
                // 如果输入框不是当前聚焦的元素，则手动触发change事件
                if (!$input.is(':focus')) {
                    $input.trigger('change');
                }
            });
        })
    </script>