当前位置：移动技术网 > IT编程>开发语言>Java > 网上书城的购物车功能（下）

网上书城的购物车功能（下）

2020年07月12日 | 移动技术网IT编程 | 我要评论

购物车功能

前言
所需要的拦截器辅助类，web包

拦截器辅助类
web包
购物车（拦截器，查询功能，删除功能，更新功能）多个功能代码

效果图

下单结算功能
css样式

前言

本次我们学习购物车功能中的拦截器，查询功能，删除功能，更新功能，下单结算功能等这多个功能

所需要的拦截器辅助类，web包

拦截器辅助类

ShoppingFilter 在要把商品加入购物车的时候需要先登录，才能把商品加入购物车

package com.tang.filter;

import javax.servlet.*;
import javax.servlet.annotation.WebFilter;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.tang.entity.User;

import java.io.IOException;
import java.util.Iterator;
import java.util.Map;
import java.util.Set;

/**
 * 除去login.jsp、register.jsp、index.jsp、、/static/*、/user.action
 */
@WebFilter(filterName = "urlFiter",urlPatterns = "/*")
public class ShoppingFilter implements Filter {

    public ShoppingFilter(){
        super();
    }

//    只要以下urls是不需要session的
    private boolean validateUrl(String uri){
        boolean flag  = true;
        String[] urls = new String[]{"login.jsp","register.jsp","ndex.jsp","static","user.action","category.action","book.action"};
        for (String url : urls) {
            if (uri.contains(url)){
                flag = false;
                break;
            }
        }
        return flag;
    }

    @Override
    public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain) throws IOException, ServletException {
        HttpServletRequest req = (HttpServletRequest) request;
        HttpServletResponse resp = (HttpServletResponse) response;

//        这些请求路径之外都要登录后才能访问
        String uri = req.getRequestURI();
        if((!"/".equals(uri)) && validateUrl(uri)) {
            ;String methodName = req.getParameter("methodName");
//            if ("add".equals(methodName) || "pay".equals(methodName) || "list".equals(methodName)){
                User user = (User) req.getSession().getAttribute("currentUser");
                if(user == null){
                    resp.sendRedirect("/login.jsp");
                    return;
                }
//            }
        }

        chain.doFilter(request, response);
    }

    public void destroy() {

    }

    @Override
    public void init(FilterConfig filterConfig) throws ServletException {

    }
}

web包

ShoppingAction （购物列表查询，清空购物车，删除购物车，购物车结算）

package com.tang.web;

import java.io.IOException;
import java.util.ArrayList;
import java.util.List;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.fasterxml.jackson.databind.ObjectMapper;
import com.tang.dao.OrderDao;
import com.tang.dao.OrderItemDao;
import com.tang.entity.Order;
import com.tang.entity.OrderItem;
import com.tang.entity.User;
import com.tang.util.EasyuiResult;
import com.tang.util.ResponseUtil;
import com.tang.util.StringUtils;
import com.tang.vo.ShopGoodsVo;
import com.zking.framework.ActionSupport;
import com.zking.framework.ModelDriven;

public class ShoppingAction extends ActionSupport implements ModelDriven<ShopGoodsVo>{
	
	private ShopGoodsVo shopGoodsVo = new ShopGoodsVo();
    private OrderDao orderDao = new OrderDao();
    private OrderItemDao orderItemDao = new OrderItemDao();
	
	 //    加入购物车
    public String add(HttpServletRequest request, HttpServletResponse response) {
        ObjectMapper om = new ObjectMapper();
        User currentUser = (User) request.getSession().getAttribute("currentUser");
        long uid = currentUser.getId();
        String shopId = "shopId_" + uid;
        String shopVo = (String) request.getServletContext().getAttribute(shopId);
        List<ShopGoodsVo> shopGoodsVos = null;
        try {
            if (StringUtils.isNotBlank(shopVo)) {
//           购物车没有数据处理逻辑
                shopGoodsVos = (List<ShopGoodsVo>) om.readValue(shopVo, List.class);
                shopGoodsVos.add(shopGoodsVo);
            } else {
//            购物车有数据处理逻辑
                shopGoodsVos = new ArrayList<>();
                shopGoodsVos.add(shopGoodsVo);
            }            request.getServletContext().setAttribute(shopId,om.writeValueAsString(shopGoodsVos));
            request.setAttribute("shopGoodsVos",shopGoodsVos);
        } catch (IOException e) {
            e.printStackTrace();
        }
        return "shoppingCar";
    }

	//    购物列表查询
    public String list(HttpServletRequest request, HttpServletResponse response) {
        ObjectMapper om = new ObjectMapper();

        try {
            User currentUser = (User) request.getSession().getAttribute("currentUser");
            long uid = currentUser.getId();
            String shopId = "shopId_" + uid;
            String shopVoStr = (String) request.getServletContext().getAttribute(shopId);
            List<ShopGoodsVo> shopGoodsVos = null;
            if (StringUtils.isNotBlank(shopVoStr)){
                shopGoodsVos = om.readValue(shopVoStr, List.class);
            }else
            {
                shopGoodsVos = new ArrayList<>();
            }

            request.setAttribute("shopGoodsVos",shopGoodsVos);
        } catch (IOException e) {
            e.printStackTrace();
        }

        return "shoppingCar";
    }
	
	//    清空购物车
    public String clear(HttpServletRequest request, HttpServletResponse response) {
        User currentUser = (User) request.getSession().getAttribute("currentUser");
        long uid = currentUser.getId();
        String shopId = "shopId_" + uid;
        request.getServletContext().removeAttribute(shopId);
        try {
            ResponseUtil.writeJson(response, EasyuiResult.SUCCESS);
        } catch (Exception e) {
            e.printStackTrace();
        }
        return null;
    }
	
	//    删除购物车
    public String del(HttpServletRequest request, HttpServletResponse response) {
        ObjectMapper om = new ObjectMapper();
        try {
            User currentUser = (User) request.getSession().getAttribute("currentUser");
            long uid = currentUser.getId();
            String shopId = "shopId_" + uid;
            String shopVoStr = (String) request.getServletContext().getAttribute(shopId);
            List<ShopGoodsVo> shopGoodsVos = om.readValue(shopVoStr, List.class);
            int index = Integer.valueOf(shopGoodsVo.getPageStr());
            shopGoodsVos.remove(index);
            request.getServletContext().setAttribute(shopId,om.writeValueAsString(shopGoodsVos));
        } catch (Exception e) {
            e.printStackTrace();
        }
        return list(request,response);
    }
    
    //    购物车结算
    public String createOrder(HttpServletRequest request, HttpServletResponse response) {
        try {
            User currentUser = (User) request.getSession().getAttribute("currentUser");
            long uid = currentUser.getId();
            /*
            ShopGoodsVo(name=null, price=0.0, num=0, total=0.0, consignee=8, phone=8, postalcode=8, address=8, sendType=1,
            pageStr=,斗破苍穹-0.0-1-66.0,时光走了你还在-0.0-1-33.0,测试-0.0-1-3.0)
             */
            String pageStr = shopGoodsVo.getPageStr();
            float total = 0;
            List<OrderItem> orderItems = new ArrayList<>();
            OrderItem orderItem = null;

//            订单项就暂时不做了
            for (String s : pageStr.substring(1).split(",")) {
                orderItem = new OrderItem();
                String[] items = s.split("-");
                orderItem.setBid(items[0]);
                orderItem.setQuantity(Integer.valueOf(items[2]));
                total += Float.valueOf(items[items.length-1]);
                orderItems.add(orderItem);
            }
//            System.out.println(shopGoodsVo);
            Order order = new Order();
            order.setAddress(shopGoodsVo.getAddress());
            order.setConsignee(shopGoodsVo.getConsignee());
            order.setOrderPrice(total);
            order.setOrderState(1);
            order.setPhone(shopGoodsVo.getPhone());
            order.setPostalcode(shopGoodsVo.getPostalcode());
            order.setSendType(shopGoodsVo.getSendType());
            order.setUid(uid);
            int res = this.orderDao.add(order);


//            按订单生成时间倒序获取新生成订单的id
            Order newest = this.orderDao.newest();

//            然后for入订单项库
            for (OrderItem item : orderItems) {
                item.setOid(newest.getId());
                this.orderItemDao.add(item);
            }


            ResponseUtil.writeJson(response, res);
        } catch (Exception e) {
            e.printStackTrace();
        }
        return null;
    }

    @Override
    public ShopGoodsVo getModel() {
        return shopGoodsVo;
    }

}

购物车（拦截器，查询功能，删除功能，更新功能）多个功能代码

在这里插入图片描述

ShoppingCar.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jstl/core_rt" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>购物车</title>
  <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.css" rel="stylesheet">
	<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/static/css/fg.css" />   
</head>
<body>
<div class="container">
			<!-- 横幅 -->
			<div class="row">
				<div class="col-sm-4">
					您好，欢迎来到网上书城！
				</div>
				<div class="col-sm-4 col-sm-offset-4">
					<a href="#">登录</a> | <a href="#">注册</a> | <b>我的购物车</b> | <i>网站首页</i>
				</div>
			</div>
			<!-- 搜索栏 -->
			<div class="row">
				<div class="col-sm-12 search-parent">
					<!-- 本来这里应该放一张背景图的 -->
					<div class="search"></div>
					<input type="text" id="book_name" name="name" value="" />
					<button type="button" class="btn btn-primary">搜索</button>
				</div>
			</div>
			<!-- 主内容区 -->
			<div class="row content">
				<div class="col-sm-3 l-content">
					<ul class="list-group c-category ">
						<li class="list-group-item" style="color: white;">书籍分类</li>
					</ul>
				</div>
				<div class="col-sm-9">
					<table class="table">
						<thead class="thead-dark">
							<tr style="background-color: papayawhip;">
								<th scope="col">书名</th>
								<th scope="col">单价</th>
								<th scope="col">数量</th>
								<th scope="col">小计</th>
								<th scope="col">操作</th>
							</tr>
						</thead>
						<tbody>
							 <c:forEach var="s" items="${shopGoodsVos}" varStatus="index">
			                    <tr>
			                            <%--<th>${index.index}</th>--%>
			                        <th>${s.name}</th>
			                        <td>${s.price}</td>
			                        <td>
			                            <input type="text" class="text-center item_num" name="num" value="${s.num}"/>
			                        </td>
			                        <td>${s.total}</td>
			                        <td>
			                                <%--<a href="#" class="text-primary" onclick="shopingDel(${s.name},${s.price},${s.num},${s.total})">删除</a>--%>
			                            <a href="${pageContext.request.contextPath}/shopping.action?methodName=del&pageStr=${index.index}"
			                               class="text-primary">删除</a>
			                            <a href="#" class="text-primary" onclick="sshopUpdate(this);">更新</a>
			                        </td>
			                    </tr>
			                </c:forEach>
							<tr>
								<td colspan="5">
									 <button type="button" onclick="clearCar();" class="btn bg-orange2">清空购物车</button>
				                     <button type="button" class="btn bg-orange2 continue-buy">继续购买</button>
				                     <button type="button" class="btn btn-danger car_pay">去结算</button>
								</td>  
							</tr>
						</tbody>
					</table>
				</div>
			</div>
			<!-- 底部版权 -->
			<div class="row">
				<div class="col-sm-12 text-center">
					Copyright 2020 教育，版权所有
				</div>
			</div>
		</div>
	<script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.js"></script>
	<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.js"></script>
    <script src="${pageContext.request.contextPath}/static/js/common.js"></script>
<script type="text/javascript">
    <%--跟新购物车--%>

    function sshopUpdate(ele) {
        // console.log($(ele).parent().parent());
        var $parent = $(ele).parent().parent();
        var $price_td = $parent.children().eq(1);
        var $num_td = $parent.children().eq(2);
        var $total_td = $parent.children().eq(3);

        var price = $price_td.html();
        var num = $num_td.find(":input").val();
        var total = parseInt(num) * parseFloat(price);
        $total_td.html(parseFloat(total).toFixed(1));
    }

    <%--书籍搜索功能--%>

    function searchByType(cid) {
        location.href = '${pageContext.request.contextPath}/book.action?methodName=findByType&cid=' + cid;
    };

    //清除购物车
    function clearCar() {
        $.messager.confirm('确认', '您确认想要清空购物车吗？', function (r) {
            if (r) {
                $.ajax({
                    url: '${pageContext.request.contextPath}/shopping.action?methodName=clear',
                    success: function (data) {
                        location.href = '${pageContext.request.contextPath}/shopping.action?methodName=list';
                    }
                });
            }
        })
    }
  
</script>
		
</body>
</html>

效果图

更新
在这里插入图片描述
删除

清空
在你点击清空购物车的时候，会有一个弹出框，弹出您确认想要清空购物车吗？，点击确定所有的商品被清空

下单结算功能

点击结算弹出在这里插入图片描述

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jstl/core_rt" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>购物车</title>
  <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.css" rel="stylesheet">
	<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/static/css/fg.css" />   
</head>
<body class="text-center">
<div class="container">

   <!-- 购物车新增模态框 -->
    <div class="shop-modal modal" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">订单信息</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form class="shop-form" method="post">
                        <div class="row">
                            <div class="col-md-3">收货人：</div>
                            <div class="col-md-12"><input type="text" name="consignee" id="consignee" placeholder="收货人"
                                                          value=""/></div>
                        </div>
                        <div class="row">
                            <div class="col-md-3">手机号：</div>
                            <div class="col-md-12"><input type="text" name="phone" placeholder="收货人手机号" id="phone"
                                                          value=""/></div>
                        </div>
                        <div class="row">
                            <div class="col-md-3">收货人邮编：</div>
                            <div class="col-md-12"><input type="text" name="postalcode" placeholder="收货人邮编"
                                                          id="postalcode" value=""/></div>
                        </div>
                        <div class="row">
                            <div class="col-md-3">收货地址：</div>
                            <div class="col-md-12"><input type="text" name="address" placeholder="收货地址" id="address"
                                                          value=""/></div>
                        </div>
                        <div class="row">
                            <div class="col-md-3">发货方式</div>
                            <div class="col-md-12">
                                <select class="form-control" name="sendType" id="sendType">
                                    <option value="1">平邮</option>
                                    <option value="2">快递</option>
                                </select>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary order_Create">确定</button>
                </div>
            </div>
        </div>
    </div> 

		<div>
			<!-- 横幅 -->
			<div class="row">
				<div class="col-sm-4">
					您好，欢迎来到网上书城！
				</div>
				<div class="col-sm-4 col-sm-offset-4">
					<a href="#">登录</a> | <a href="#">注册</a> | <b>我的购物车</b> | <i>网站首页</i>
				</div>
			</div>
			<!-- 搜索栏 -->
			<div class="row">
				<div class="col-sm-12 search-parent">
					<!-- 本来这里应该放一张背景图的 -->
					<div class="search"></div>
					<input type="text" id="book_name" name="name" value="" />
					<button type="button" class="btn btn-primary">搜索</button>
				</div>
			</div>
			<!-- 主内容区 -->
			<div class="row content">
				<div class="col-sm-3 l-content">
					<ul class="list-group c-category ">
						<li class="list-group-item" style="color: white;">书籍分类</li>
					</ul>
				</div>
				<div class="col-sm-9">
					<table class="table">
						<thead class="thead-dark">
							<tr style="background-color: papayawhip;">
								<th scope="col">书名</th>
								<th scope="col">单价</th>
								<th scope="col">数量</th>
								<th scope="col">小计</th>
								<th scope="col">操作</th>
							</tr>
						</thead>
						<tbody>
							 <c:forEach var="s" items="${shopGoodsVos}" varStatus="index">
			                    <tr>
			                            <%--<th>${index.index}</th>--%>
			                        <th>${s.name}</th>
			                        <td>${s.price}</td>
			                        <td>
			                            <input type="text" class="text-center item_num" name="num" value="${s.num}"/>
			                        </td>
			                        <td>${s.total}</td>
			                        <td>
			                                <%--<a href="#" class="text-primary" onclick="shopingDel(${s.name},${s.price},${s.num},${s.total})">删除</a>--%>
			                            <a href="${pageContext.request.contextPath}/shopping.action?methodName=del&pageStr=${index.index}"
			                               class="text-primary">删除</a>
			                            <a href="#" class="text-primary" onclick="sshopUpdate(this);">更新</a>
			                        </td>
			                    </tr>
			                </c:forEach>
							<tr>
								<td colspan="5">
									 <button type="button" onclick="clearCar();" class="btn bg-orange2" style="width: 200px;">清空购物车</button>
				                     <button type="button" class="btn bg-orange2" style="width: 200px;" onclick="javascript:history.back();">继续购买</button>
				                     <button type="button" class="btn btn-danger car_pay" style="width: 200px;">去结算</button>
								</td>  
							</tr>
						</tbody>
					</table>
				</div>
			</div>
			<!-- 底部版权 -->
			<div class="row">
				<div class="col-sm-12 text-center">
					Copyright 2020 教育，版权所有
				</div>
			</div>
		</div>
</div>
	<script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.js"></script>
	<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.js"></script>
    <script src="${pageContext.request.contextPath}/static/js/common.js"></script>
<script type="text/javascript">
    <%--跟新购物车--%>

    function sshopUpdate(ele) {
        // console.log($(ele).parent().parent());
        var $parent = $(ele).parent().parent();
        var $price_td = $parent.children().eq(1);
        var $num_td = $parent.children().eq(2);
        var $total_td = $parent.children().eq(3);

        var price = $price_td.html();
        var num = $num_td.find(":input").val();
        var total = parseInt(num) * parseFloat(price);
        $total_td.html(parseFloat(total).toFixed(1));
    }

    <%--书籍搜索功能--%>

    function searchByType(cid) {
        location.href = '${pageContext.request.contextPath}/book.action?methodName=findByType&cid=' + cid;
    };

    //清除购物车
    function clearCar() {
		debugger;
        $.messager.confirm('确认', '您确认想要清空购物车吗？', function (r) {
            if (r) {
                $.ajax({
                    url: '${pageContext.request.contextPath}/shopping.action?methodName=clear',
                    success: function (data) {
                        location.href = '${pageContext.request.contextPath}/shopping.action?methodName=list';
                    }
                });
            }
        })
    }

    $(function () {
        // 给模态框添加关闭事件
        $('.close span,.modal-footer .btn-secondary').click(function () {
            $('.shop-modal').addClass('modal');
        })
        // 购物车结算
        $(".car_pay").click(function () {
            $('.shop-modal').removeClass('modal');
        })

        $(".order_Create").click(function () {
            var consignee = $("#consignee").val();
            var phone = $("#phone").val();
            var postalcode = $("#postalcode").val();
            var address = $("#address").val();
            var sendType = $("#sendType").val();
            var single_tr = "";
            $(".table tr:gt(0)").not(":last").each(function (index, node) {
                console.log(index);
                single_tr = single_tr + "," + $(this).find("th").eq(0).html() + "-" + $(this).find("td").eq(0).html() + "-"
                    + $(this).find("td").eq(1).find("input").val() + "-" + $(this).find("td").eq(2).html();
            })
            console.log(single_tr.substring(1));

            var param = "consignee=" + consignee + "&phone=" + phone + "&postalcode=" + postalcode + "&address=" + address + "&sendType=" + sendType + "&pageStr=" + single_tr;

            $.ajax({
                url: '${pageContext.request.contextPath}/shopping.action?methodName=createOrder',
                type: "POST",
                data: param,
                success: function (data) {
                    var consignee = $("#consignee").val("");
                    var phone = $("#phone").val("");
                    var postalcode = $("#postalcode").val("");
                    var address = $("#address").val("");
                    var sendType = $("#sendType").val("");
                    $('.shop-modal').addClass('modal');
                    $(".table tr:gt(0)").not(":last").remove();
                    $.ajax({
                        url: '${pageContext.request.contextPath}/shopping.action?methodName=clear',
                        success: function (data) {
                            <%--location.href = '${pageContext.request.contextPath}/shopping.action?methodName=list';--%>
                        }
                    });
                }
            });
        });

    })
</script>
		
</body>
</html>

css样式

fg.css
在添加这几个样式

.bg-orange{
	background-color: #FF0606 ;
}
.bg-orange2{
	background-color: #FF0606 ;
}
/* 购物车弹出框 */
.shop-modal{
	position: absolute;
	width: 600px;
	/* height: 800px; */
	left: 50%;
	top: 100px;
	margin-left: -200px;
	z-index: 2;
}
.shop-modal input{
	padding-left: 20px;
	width: 100%;
}

本文地址：https://blog.csdn.net/TZyybhs/article/details/107279430

您可能感兴趣的文章:

如对本文有疑问，点击进行留言回复！！

你们见过面试前要做大作业的公司吗？

今天碰到个奇葩公司，还是个牛逼的外企保险公司，面试职位是架构师。要求先做个超大的作业，根据作业结果才能进入下一轮... [阅读全文]
Gateway网关

一、简介 Spring Cloud Gateway 使用的Webflux中的reactor-netty响应式编... [阅读全文]
Zookeeper分布式安装部署

本篇博客将主要介绍如何进行Zookeeper的分布式安装部署1 集群规划在Carlota1、Carlota2、C... [阅读全文]
现在微服务这么火，你还不了解吗？阿里P8推荐的微服务学习指南

前言微服务体系的发展并不是一蹴而就的，经过了2014年前后的低潮期，微服务概念顶层的泡沫逐渐褪去，那些真正能够在... [阅读全文]
论文笔记：SlowFast Networks for Video Recognition

论文发表于ICCV2019,何凯明大神也在作者中，这里先放上论文链接：添加链接描述文章针对视频行为识别提出了一种... [阅读全文]
大数据专业认知实习

@[TOC]大数据专业认知实习一：自我介绍你们好！我是来自甘肃兰州文理学院的一名大数据专业的学生，你们可以叫我... [阅读全文]
ELK日志系统配置部署

简介近期公司安排部署一套ELK日志系统，分配给我6台服务器（8C 16G 500G），按照自己的知识分配了如下架... [阅读全文]
MySQL学习笔记1 - MySQL架构

MySQL架构可以分为物理架构与逻辑架构1、逻辑架构逻辑架构图式如下1.1、连接器（Connectors）MyS... [阅读全文]
SpringCloud 基础概念

微服务微服务架构是一种以一些微服务来替代开发单个大而全应用的方法，每一个小服务运行在自己的进程里,并以轻量级... [阅读全文]
OsmocomBB源码分析

整体高层给MM层MMxx-SAP(MMCC/MMSS/MMSMS)/* queue message (MMxx-... [阅读全文]