JavaWeb购物系统（五）购物车模块的实现

艺术留白

已于 2022-11-04 11:20:57 修改

阅读量5.2k

点赞数 11

分类专栏： JavaWeb购物系统文章标签： java json 前端

于 2022-11-01 19:33:04 首次发布

本文链接：https://blog.csdn.net/qq_35947021/article/details/127631275

版权

JavaWeb购物系统专栏收录该内容

13 篇文章 57 订阅

订阅专栏

效果图

未添加商品效果图
在这里插入图片描述
添加商品之后的效果图

功能

添加商品
购物车中商品的数量增加、减少、通过键盘输入改变数量
清空购物车
计算购物车商品的总价格

正文

我们的购物车采用的是在服务端，即：使用session来存储。这样做的
缺点：无法永久存储，当服务端关闭的时候，会销毁。
优点：不用在本地数据库建相应的表。

说明

在开始之前我们得明白一些概念：在Java里每个实体都对应一个Java类。所以我们这里的购物车就是一个类，每个用户的购物车就是一个具体的对象。而购物车里边的每个商品就是一个购物项。
我这里的购物车类是Car，购物项类ShopCarItem。
在这里插入图片描述

jsp页面

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page import="java.util.HashMap" %>
<%@ page import="com.entity.ShopCarItem" %>
<%@ page import="java.util.List" %>
<%@ page import="com.entity.User" %>
<%@ page import="com.myUtil.ProcessUtil" %>
<%@ page import="com.entity.Cart" %><%--
  Created by IntelliJ IDEA.
  User: huawei
  Date: 2022/10/18
  Time: 13:47
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>购物车</title>
    <script type="text/javascript" src="script/jquery-3.6.0.min.js"></script>
    <!-- 新 Bootstrap5 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css">
    <!--  popper.min.js 用于弹窗、提示、下拉菜单 -->
    <script src="https://cdn.staticfile.org/popper.js/2.9.3/umd/popper.min.js"></script>
    <!-- 最新的 Bootstrap5 核心 JavaScript 文件 -->
    <script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.min.js"></script>
    <script type="text/javascript">
        $(function () {
            // 清空购物车
            $("#removeAll").click(
                function () {
                    if (confirm("是否清空购物车") == true) {
                        $.post(
                            "/MyProject/cartProcessServlet",
                            {
                                method: "removeAll"
                            },
                            function (data) {
                                if ("success" == data){
                                    location.reload(true);
                                }
                            },
                            "json"
                        )
                    } else {
                        return false;
                    }

                }
            )

            // 数量加按钮
            $("button[id^='numSum_']").click(
                function (e) {
                    var goodId = e.target.id;
                    // 获取对应的数量值
                    var $number = $(document.getElementById("number_" + goodId.split("_")[1]));
                    $number.val(parseInt($number.val()) + 1);
                    var val = $number.val();
                    // 将修改后的值写入数据库
                    sendAjax(goodId,val);
                }
            )

            // 数量减按钮
            $("button[id^='numSub_']").click(
                function (e) {
                    var goodId = e.target.id;
                    // 获取对应的数量值
                    var $number = $(document.getElementById("number_" + goodId.split("_")[1]));
                    if ((parseInt($number.val()) -1) >= 1){
                        $number.val((parseInt($number.val()) -1));
                        sendAjax(goodId,$number.val());
                    }
                }
            )

            // 数值框内容变化监听
            $("input[id^='number_']").blur(
                function(e){
                    var id = e.target.id;
                    var val = $(document.getElementById("number_" + e.target.id.split("_")[1])).val();
                    if (!((/^[1-9]*[1-9][0-9]*$/).test(val))){ //如果不是是正整数
                        $(document.getElementById("number_" + e.target.id.split("_")[1])).val(1)
                    }
                    sendAjax(id,val);
                })

            // 发送Ajax请求(用于更改购物项信息)
            var sendAjax = function (goodId,count) {
                $.post(
                    "/MyProject/cartProcessServlet",
                    {
                        method: "updateShopCartItem",
                        goodId: goodId,
                        number: count
                    },
                    function (data) {
                        if ("success" == data){
                            location.reload(true);
                        }
                    },
                    "json"
                )
            }

            // 删除购物项
            $("button[id^='delete_']").click(
                function (e) {
                    var goodId = e.target.id.split("_")[1];
                    $.post(
                        "/MyProject/cartProcessServlet",
                        {
                            method: "removeShopItem",
                            goodId: goodId
                        },
                        function (data) {
                            if ("success" == data){
                                location.reload(true);
                            }
                        },
                        "json"
                    )
                }
            )



            // 结算
            $("#settlement").click(
                function () {
                    $.post(
                        "/MyProject/orderProcessServlet",
                        {
                            method: ""
                        },
                        function (data) {
                            if ("success" == data){
                                alert("订单生成成功!");
                                location.reload(true);
                            }
                        },
                        "json"
                    )
                }
            )

        })
    </script>
</head>
<body>
<%
    session.setAttribute("totalPrice",0.0);
%>
<%--头部导航栏--%>
<nav class="navbar-expand-lg navbar navbar-dark bg-primary">
        <div class="container-fluid ">
            <a class="navbar-brand" href="#">购物车</a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNavDropdown">
                <ul class="navbar-nav">
                    <li class="nav-item">
                        <a class="nav-link active" aria-current="page" href="/MyProject/index.jsp">Home</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

<c:if test="${empty sessionScope.cart.items}">
    <div class="container" >
        <div class="card position-relative" style="margin: 50px;height: 280px;background: #ffffff url(img/CartBackground.png) no-repeat; background-position: center left;">
            <div class="position-absolute top-50 start-50 translate-middle">
                <h7>
                    您的购物车还是空的，赶紧行动吧！您可以：
                </h7><br>
                <a class="btn btn-primary btn-lg" href="/MyProject/index.jsp">购物</a>
            </div>
        </div>
    </div>
</c:if>


<c:if test="${!empty sessionScope.cart.items}">
<div class="container">
    <div class="card">
        <table class="table table-hover text-center">
            <tr>
                <td>商品</td>
                <td>单价</td>
                <td>商品数量</td>
                <td>总价</td>
                <td>操作</td>
            </tr>
            <c:forEach items="${sessionScope.cart.items}" var="shopCarItem">
                <tr style="vertical-align: middle !important;text-align: center;">
                    <td>
                        <img style="width: 100px;height: 100px" src="${shopCarItem.value.img}"/>
                        <span>${shopCarItem.value.goodsName}</span>
                    </td>
                    <td>${shopCarItem.value.price}</td>
                    <td class="col-lg-2">
                        <div class="input-group">
                             <span class="input-group-btn">
                                 <button class="btn btn-default" type="button" id="numSub_${shopCarItem.value.goodsId}">-</button>
                             </span>
                            <input type="text" class="form-control text-center" id="number_${shopCarItem.value.goodsId}" value="${shopCarItem.value.number}">
                            <span class="input-group-btn">
                               <button class="btn btn-default" type="button" id="numSum_${shopCarItem.value.goodsId}">+</button>
                             </span>
                        </div>
                    </td>
                    <td>${shopCarItem.value.totalPrice}</td>
                    <%--计算总价格--%>
                    <c:set scope="session" value="${sessionScope.totalPrice + shopCarItem.value.totalPrice}" var="totalPrice"></c:set>
                    <td><button class="btn btn-danger" id="delete_${shopCarItem.value.goodsId}">删除</button></td>
                </tr>
            </c:forEach>
        </table>
        <div class="row justify-content-between">
            <div class="col-4 m-auto">
                <a class="btn btn-primary btn-lg" href="/MyProject/index.jsp">
                    继续购物
                </a>
            </div>
            <div class="col-4">
                <button type="button" class="btn btn-warning btn-lg" id="removeAll">清空购物车</button>
                <span>
                    <span class="fs-3">
                        合计
                    </span>
                    <span class="fs-3 fw-bold" id="total" style="color: red">
                            ${sessionScope.totalPrice}
                            <button type="button" class="btn btn-dark " id="settlement">结算</button>
                    </span>
                </span>
            </div>
        </div>
    </div>
</div>
</c:if>

<div class="container">
    <%--footer--%>
    <div class="row align-items-end">
        <footer class="py-5" >
            <div class="row">
                <div class="col-2">
                    <h5>Section</h5>
                    <ul class="nav flex-column">
                        <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">Home</a></li>
                        <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">Features</a></li>
                        <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">Pricing</a></li>
                        <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">FAQs</a></li>
                        <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">About</a></li>
                    </ul>
                </div>

                <div class="col-2">
                    <h5>Section</h5>
                    <ul class="nav flex-column">
                        <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">Home</a></li>
                        <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">Features</a></li>
                        <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">Pricing</a></li>
                        <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">FAQs</a></li>
                        <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">About</a></li>
                    </ul>
                </div>

                <div class="col-2">
                    <h5>Section</h5>
                    <ul class="nav flex-column">
                        <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">Home</a></li>
                        <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">Features</a></li>
                        <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">Pricing</a></li>
                        <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">FAQs</a></li>
                        <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">About</a></li>
                    </ul>
                </div>
            </div>
            <div class="d-flex justify-content-between py-4 my-4 border-top">
                <p>&copy; 2021 Company, Inc. All rights reserved.</p>
                <ul class="list-unstyled d-flex">
                    <li class="ms-3"><a class="link-dark" href="#"><svg class="bi" width="24" height="24"><use xlink:href="#twitter"/></svg></a></li>
                    <li class="ms-3"><a class="link-dark" href="#"><svg class="bi" width="24" height="24"><use xlink:href="#instagram"/></svg></a></li>
                    <li class="ms-3"><a class="link-dark" href="#"><svg class="bi" width="24" height="24"><use xlink:href="#facebook"/></svg></a></li>
                </ul>
            </div>
        </footer>
    </div>
</div>
</body>
</html>

购物商品的添加

这一部分，我们放到下一章节讲主页部分的时候在详细讲，因为商品购买是在主页。

商品数量的改变

公共部分函数的抽取

这里的参数，goodId也就是购物像的ID，count是当前购物项的数量，如图：
在这里插入图片描述

// 发送Ajax请求(用于更改购物项信息)
var sendAjax = function (goodId,count) {
$.post(
   "/MyProject/cartProcessServlet",
   {
       method: "updateShopCartItem",
       goodId: goodId,
       number: count
   },
   function (data) {
       if ("success" == data){
           location.reload(true);
       }
   },
   "json"
)
}

这里我们因为都是局部数据的刷新，所以用到了大量的Ajax。废话不多说，我们上js代码解释：

商品数量的减（“-”按钮）

// 数量减按钮
$("button[id^='numSub_']").click(
    function (e) {
        var goodId = e.target.id;
        // 获取对应的数量值
        var $number = $(document.getElementById("number_" + goodId.split("_")[1]));
        if ((parseInt($number.val()) -1) >= 1){
            $number.val((parseInt($number.val()) -1));
            sendAjax(goodId,$number.val());
        }
    }
)

我们采用的思路是：获取对应购物项（每个商品是一个购物项）的唯一ID（这里ID的唯一性是通过商品的ID来确定的），然后删除购物车对象中的购物项。同样的，和上一章节留言板中删除留言一样，这里也是通过numSub_这样的前缀来标识这是一个“-”按钮。如下：

<span class="input-group-btn">
	<button class="btn btn-default" type="button" id="numSub_${shopCarItem.value.goodsId}">
		-
	</button>
</span>

补充：我们在减去购物车中购物项的数量时，购物项的数量不能为0，后边通过输入改变也是同样的道理。

商品数量的加（“+”按钮）

“+”按钮和“-”，差不多

 // 数量加按钮
$("button[id^='numSum_']").click(
        function (e) {
            var goodId = e.target.id;
            // 获取对应的数量值
            var $number = $(document.getElementById("number_" + goodId.split("_")[1]));
            $number.val(parseInt($number.val()) + 1);
            var val = $number.val();
            // 将修改后的值写入数据库
            sendAjax(goodId,val);
        }
    )

商品数量的改变（键盘修改）

// 数值框内容变化监听
$("input[id^='number_']").blur(
    function(e){
        var id = e.target.id;
        var val = $(document.getElementById("number_" + e.target.id.split("_")[1])).val();
        if (!((/^[1-9]*[1-9][0-9]*$/).test(val))){ //如果不是是正整数
            $(document.getElementById("number_" + e.target.id.split("_")[1])).val(1)
        }
        sendAjax(id,val);
    })

到这里我们会发现，有关购物项数量的改变（“+”、“-”、“键盘修改”），count购物项数量的获取都是通过输入框中的数据来获取的。

购物项删除功能

和前面讲的留言删除功能的思路差不多，都是通过Ajax将对应购物项的ID发送给后端，后端来删除对应的购物项。和留言删除部分不同的是，这里是通过removeAll()方法来删除Cart对象Map属性中的对应的购物项。

清空购物车功能

这里使用Ajax来向后端发送请求，后端在Controller层来调用相应的方法，先获取session域中的Cart购物车对象，清空所有购物项，然后必须将处理后的Cart对象重新放入session域中。这里贴出相关代码：

// 清空购物车
protected void removeAll(HttpServletRequest request,HttpServletResponse response){
      HttpSession session = request.getSession();
      Cart cart = (Cart)session.getAttribute("cart");
      if (cart!=null){
          cart.removeAll();
          session.setAttribute("cart",cart);
          try {
              response.getWriter().write(new Gson().toJson("success"));
          } catch (IOException e) {
              e.printStackTrace();
          }
      }
  }

购物车合计功能

我们这里的思路就是在jsp页面渲染的时候，我们在for-Each循环之中，每次将每个购物项的总价相加，最后保存到session域中。
这里说明一下，有两个总价格。
在这里插入图片描述

<!--购物项的总价格-->
<td>${shopCarItem.value.totalPrice}</td> 
<!--购物车的总价格-->
<c:set scope="session" value="${sessionScope.totalPrice + shopCarItem.value.totalPrice}" var="totalPrice">
</c:set>

这里我们还得在页面的开头将购物车的总价格在session域中的值重置为0，防止每次刷新，在原来购物车的总价格上相加。

CarProcessServlet

package com.controller;

import com.entity.Cart;
import com.entity.Goods;
import com.entity.ShopCarItem;
import com.google.gson.Gson;
import com.service.GoodsService;
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.util.HashMap;

public class CartProcessServlet extends BasicServlet {
    private GoodsService goodsService = new GoodsService();
    // 添加购物车
    protected void addShopCartItem(HttpServletRequest request,HttpServletResponse response){
        // 得到商品id
        String goodId = request.getParameter("goodId").split("_")[1];
        // 得到商品信息
        Goods good = goodsService.getGoodById(goodId);
        // 将商品信息写入购物项
        ShopCarItem item =
                new ShopCarItem(Integer.parseInt(goodId),good.getImg(),good.getName(),good.getPrice(),1,good.getPrice());
        // 从session中获取购物车
        HttpSession session = request.getSession();
        Cart cart = (Cart)session.getAttribute("cart");
        if (cart == null){ // 还未创建购物车
            cart = new Cart();
            session.setAttribute("cart",cart);
        }
        cart.addShopCartItem(item);
        try {
            response.getWriter().write(new Gson().toJson("success"));
        } catch (IOException e) {
            e.printStackTrace();
        }
    }

    // 修改购物项信息
    protected void updateShopCartItem(HttpServletRequest request,HttpServletResponse response){
        // 得到商品id
        String goodId = request.getParameter("goodId").split("_")[1];
        // 得到商品数量
        String number = request.getParameter("number");
        // 从session中获取购物车
        HttpSession session = request.getSession();
        Cart cart = (Cart)session.getAttribute("cart");
        ShopCarItem item = cart.getItems().get(Integer.parseInt(goodId));
        // 修改数量
        item.setNumber(Integer.parseInt(number));
        // 修改总价格
        item.setTotalPrice(item.getPrice().multiply(new BigDecimal(Integer.parseInt(number))));
        // 更新购物车
        cart.getItems().put(Integer.parseInt(goodId),item);
        try {
            response.getWriter().write(new Gson().toJson("success"));
        } catch (IOException e) {
            e.printStackTrace();
        }
    }

    // 清空购物车
    protected void removeAll(HttpServletRequest request,HttpServletResponse response){
        HttpSession session = request.getSession();
        Cart cart = (Cart)session.getAttribute("cart");
        if (cart!=null){
            cart.removeAll();
            session.setAttribute("cart",cart);
            try {
                response.getWriter().write(new Gson().toJson("success"));
            } catch (IOException e) {
                e.printStackTrace();
            }
        }
    }

    // 根据购物项Id(商品Id)删除购物项
    protected void removeShopItem(HttpServletRequest request,HttpServletResponse response){
        String goodId = request.getParameter("goodId");
        HttpSession session = request.getSession();
        Cart cart = (Cart)session.getAttribute("cart");
        if (cart!=null){
            HashMap<Integer, ShopCarItem> items = cart.getItems();
            items.remove(Integer.parseInt(goodId));
            cart.setItems(items);
            session.setAttribute("cart",cart);
            try {
                response.getWriter().write(new Gson().toJson("success"));
            } catch (IOException e) {
                e.printStackTrace();
            }
        }
    }

}

因为我们没有连接数据库，所以这里没有Service和Dao这两层。

Cart购物车类

Cart类对应购物车对象，购物车有购物项集合和总商品数两个属性。
这里需要注意的是：购物项属性是一个HashMap，它的Key是购物项的ID（这里是将商品的ID来作为购物项ID的），Value是对应的购物项。
除此之外还提供了：

添加购物项方法
删除购物项方法（根据其对应的Id）
清空购物车方法
获取商品总数方法
获得总价格方法

package com.entity;
import java.math.BigDecimal;
import java.util.HashMap;
public class Cart {
    private HashMap<Integer,ShopCarItem> items =  new HashMap<>();
    private Integer totalCount;
    public Cart() {
    }

    // 添加购物项
    public void addShopCartItem(ShopCarItem shopCarItem){
        ShopCarItem item = items.get(shopCarItem.getGoodsId());
        if (item == null){ // 购物车没有相同的商品
            items.put(shopCarItem.getGoodsId(),shopCarItem);
        }else { // 如果购物车有相同的商品
            Integer number = item.getNumber();
            number++;
            item.setNumber(number);
            item.setTotalPrice(item.getPrice().multiply(new BigDecimal(number)));
            items.put(shopCarItem.getGoodsId(),item);
        }
    }

    // 删除特定的Id购物项
    public void removeShopCartItem(String goodId){
        this.items.remove(goodId);
    }

    // 清空购物车
    public void removeAll(){
        this.items.clear();
    }

    // 获得总价格
    public BigDecimal getTotalPrice(){
        BigDecimal totalPrice = new BigDecimal(0);
        for (Integer integer : items.keySet()) {
            ShopCarItem item = items.get(integer);
            totalPrice = totalPrice.add(item.getTotalPrice());
        }
        return totalPrice;
    }

    // 获得商品的总数
    public Integer getTotalCount(){
        totalCount = 0;
        for (Integer integer : items.keySet()) {
            ShopCarItem item = this.items.get(integer);
            totalCount += item.getNumber();
        }
        return totalCount;
    }
    public HashMap<Integer, ShopCarItem> getItems() {
        return items;
    }

    public void setItems(HashMap<Integer, ShopCarItem> items) {
        this.items = items;
    }
}

ShopCartItem购物项类

ShopCartItem类对应购物项对象，购物项的属性有：

商品编号
商品图片
商品名称
商品单价
商品数量
购物项的总价格

package com.entity;

import java.math.BigDecimal;

/**
 * 此类对应 shopcar表
 */
public class ShopCarItem {
    // 商品编号
    private Integer goodsId;
    // 商品图片
    private String img;
    // 商品名称
    private String goodsName;
    // 单价
    private BigDecimal price;
    // 总量
    private Integer number;
    // 总价格
    private BigDecimal totalPrice;

    public ShopCarItem() {
    }

    public ShopCarItem(Integer goodsId, String img, String goodsName, BigDecimal price, Integer number, BigDecimal totalPrice) {
        this.goodsId = goodsId;
        this.img = img;
        this.goodsName = goodsName;
        this.price = price;
        this.number = number;
        this.totalPrice = totalPrice;
    }

    public Integer getGoodsId() {
        return goodsId;
    }

    public void setGoodsId(Integer goodsId) {
        this.goodsId = goodsId;
    }

    public String getImg() {
        return img;
    }

    public void setImg(String img) {
        this.img = img;
    }

    public String getGoodsName() {
        return goodsName;
    }

    public void setGoodsName(String goodsName) {
        this.goodsName = goodsName;
    }

    public BigDecimal getPrice() {
        return price;
    }

    public void setPrice(BigDecimal price) {
        this.price = price;
    }

    public Integer getNumber() {
        return number;
    }

    public void setNumber(Integer number) {
        this.number = number;
    }

    public BigDecimal getTotalPrice() {
        return totalPrice;
    }

    public void setTotalPrice(BigDecimal totalPrice) {
        this.totalPrice = totalPrice;
    }

    @Override
    public String toString() {
        return "ShopCarItem{" +
                "goodsId=" + goodsId +
                ", img='" + img + '\'' +
                ", goodsName='" + goodsName + '\'' +
                ", price=" + price +
                ", number=" + number +
                ", totalPrice=" + totalPrice +
                '}';
    }
}

这里我们的结算功能使用了事务,在保证有库存的情况下生成订单，否则进行回滚。这一块内容我们放到后边的章节来讲解。

艺术留白

关注

11
点赞
踩
118

收藏

觉得还不错? 一键收藏
打赏
0
评论
JavaWeb购物系统（五）购物车模块的实现

到这里我们会发现，有关购物项数量的改变（“+”、“-”、“键盘修改”），我们的购物车采用的是在服务端，即：使用session来存储。：我们在减去购物车中购物项的数量时，购物项的数量不能为0，后边通过。来确定的），然后删除购物车对象中的购物项。域中的值重置为0，防止每次刷新，在原来购物车的总价格上相加。将对应购物项的ID发送给后端，后端来删除对应的购物项。这里我们因为都是局部数据的刷新，所以用到了大量的。购物项数量的获取都是通过输入框中的数据来获取的。（这里是将商品的ID来作为购物项ID的），
复制链接

扫一扫