购物车session（浏览器级）

最新推荐文章于 2022-04-12 21:20:10 发布

ᝰꫛꫀꪝ⁵²º⅓¼.ꪶꪜ276

最新推荐文章于 2022-04-12 21:20:10 发布

阅读量361

点赞数 3

CC 4.0 BY-SA版权

文章标签： eclipse java tomcat

本文链接：https://blog.youkuaiyun.com/weixin_61946177/article/details/124132024

这个博客展示了如何使用Java Web实现购物车功能。通过session对象存储用户选择的商品，数据存储在浏览器缓存中，关闭会话后数据消失。代码包括了商品列表展示、加入购物车、购物车界面显示、商品数量增减以及删除购物车商品的功能实现。

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

这个购物车项目是用session对象存储数据，保存在浏览器缓存中，关闭后数据将会消失

以下是购物车的思维导图

购物车效果图-主界面

购物车界面

index界面（主界面代码），以及绑定数据

<%@page import="entity.Goods"%>
<%@page import="java.util.ArrayList"%>
<%@page import="dao.GoodsDao"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
<script type="text/javascript">
	//修改数量后将bid传入dogwc页面中，控制总价格
	function gm(bid) {
		location.href = "dogwc.jsp?bid="+bid;
	}
</script>
</head>
<body>
<table class="table table-hover">
	<tr>
		<td>商品编号</td>
		<td>商品名称</td>
		<td>商品单价</td>
		<td>商品介绍</td>
		<td>商品图片</td>
		<td>操作</td>
	</tr>
	<%
		GoodsDao gd = new GoodsDao();
		ArrayList<Goods> glist = gd.getall();
		for(Goods g:glist){
	%>
	<tr>
		<td><%=g.getBid() %></td>
		<td><%=g.getBname() %></td>
		<td><%=g.getBprice() %></td>
		<td><%=g.getBinfo() %></td>
		<td>
			<img alt="" src="<%=g.getBface() %>">
		</td>
		<td>
			<button onclick="gm(<%=g.getBid() %>)" class="btn btn-success">加入购物车</button>
		</td>
	</tr>
	<%} %>
</table>

</body>
</html>

spcar界面（购物车界面）

<%@page import="entity.Goods"%>
<%@page import="entity.OrderItem"%>
<%@page import="java.util.ArrayList"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
<script type="text/javascript">
	function a(obj,bid) {
		var a = /^[1-9,0]{1,3}$/
		var gnumber = obj.value;
		if(gnumber==0){
			gnumber = 1;
		}
		if(a.exec(gnumber)){
			location.href="dogwc.jsp?bid="+bid+"&gn="+gnumber;
		}else{
			gnumber = 1;
			location.href="dogwc.jsp?bid="+bid+"&gn="+gnumber;
		}
	}
	function b(bid) {
		location.href="dogwc.jsp?bid="+bid;
	}
	function c(bid,obj) {
		obj--;
		if(obj==0){
			obj=1;
		}
		location.href="dogwc.jsp?bid="+bid+"&gn="+obj;
	}
</script>
</head>
<body>
	<h1 align="center">
	<a href="index.jsp">
		返回首页
	</a>
	</h1>
	<table class="table table-hover">
		<tr>
			<td>商品图片</td>
			<td>商品名称</td>
			<td>商品单价</td>
			<td>商品介绍</td>
			<td>商品数量</td>
			<td>商品总价</td>
			<td>操作</td>
		</tr>
	<%
	//获取到sessio中的订单集合
	ArrayList<OrderItem> olist = (ArrayList<OrderItem>) session.getAttribute("a");
	
	//把订单绑定到页面
	for(OrderItem oi:olist){
	%>
	<tr>
			<td>
				<img alt="" src="<%=oi.getG().getBface() %>">
			</td>
			<td><%=oi.getG().getBname() %></td>
			<td><%=oi.getG().getBprice() %></td>
			<td><%=oi.getG().getBinfo() %></td>
			<td>
			<button onclick="c(<%=oi.getG().getBid() %>,<%=oi.getGnumber() %>)">-</button>
			<input onblur="a(this,<%=oi.getG().getBid() %>)" type="text" value="<%=oi.getGnumber() %>" style="width: 40px; text-align: center;">
			<button onclick="b(<%=oi.getG().getBid() %>)">+</button>
			</td>
			<td><%=oi.getSumprice() %></td>
			<td>
				<a href="dodel.jsp?bid=<%=oi.getG().getBid() %>">
					删除
				</a>
			</td>
		</tr>
	<%} %>
	</table>
	<h1 align="right" style="margin-right: 30px">
		<button class="btn btn-success">总价：<%=session.getAttribute("sum") %></button>
	</h1>
</body>
</html>

点击加入购物车后，将商品数据传入购物车的功能代码（dogec.jsp）

<%@page import="entity.Goods"%>
<%@page import="java.util.ArrayList"%>
<%@page import="dao.GoodsDao"%>
<%@page import="entity.OrderItem"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
	//获取商品订单的数量
	String number = request.getParameter("gn");
	int count = 1;
	if(number!=null){
		count=Integer.valueOf(number);
	}
	//接收商品的编号
	String id = request.getParameter("bid");
	int bid = Integer.valueOf(id);
	//构造小订单对象
	OrderItem oi = new OrderItem();
	//给属性复制
	oi.setG(new GoodsDao().getbyid(bid));
	oi.setGnumber(1);
	oi.setSumprice();
	//获取session中的订单集合
	ArrayList<OrderItem> glist = (ArrayList<OrderItem>)session.getAttribute("a");
	if(glist==null){
		//把订单放到session中
		glist = new ArrayList<OrderItem>();
	}
	double sumprice = 0;
	boolean b = true;//表示默认 没有相同的订单
	//遍历订单集合，判断是否已存在相同商品订单
	for(int i = 0;i<glist.size();i++){
		if(bid==glist.get(i).getG().getBid()){
			if(number==null){
				//修改数量，原来的数量+1
				glist.get(i).setGnumber(glist.get(i).getGnumber()+1);
				//修改总价
				glist.get(i).setSumprice();
			}else{
				//修改数量，原来的数量+1
				glist.get(i).setGnumber(count);
				//修改总价
				glist.get(i).setSumprice();
			}
				//表示有相同的订单
				b = false;
		}
	}
	if(b){
		//把订单放到Arraylist集合中
		glist.add(oi);
		
	}
	for(int i = 0;i<glist.size();i++){
		sumprice+=glist.get(i).getSumprice();
	}
	//把集合放到session中
	session.setAttribute("a", glist);
	session.setAttribute("sum", sumprice);
	response.sendRedirect("spcar.jsp");


%>

删除购物车中数据的功能代码（dodel界面）

<%@page import="entity.OrderItem"%>
<%@page import="java.util.ArrayList"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
	String id = request.getParameter("bid");
	int bid = Integer.valueOf(id);
	ArrayList<OrderItem> glist = (ArrayList<OrderItem>)session.getAttribute("a");
	for(int i = 0;i<glist.size();i++){
		if(bid==glist.get(i).getG().getBid()){
			glist.remove(i);
		}
	}
	response.sendRedirect("spcar.jsp");
%>

这就是购物车项目的基本代码，还有实体类就没有展示出来了