web-jsp 购物车（2）

原创已于 2022-04-17 18:50:26 修改 · 190 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#web #java #eclipse

于 2022-04-15 22:16:39 首次发布

WEB 专栏收录该内容

26 篇文章

订阅专栏

本文介绍了基于jsp的购物车功能实现，包括car.jsp购物车展示，doDelCar.jsp删除选项，doUpdCar.jsp数量调整，docClear.jsp全选清空，以及doEdit.jsp的编辑功能。同时，更新了index.jsp界面，并提供了建表语句。

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

我又回来了哦，今天给大家带来的是昨天购物车的完善，希望大家能够喜欢

1.car.jsp(购物车）

<%@page import="com.zking.pojo.User"%>
<%@page import="java.util.List"%>
<%@page import="com.zking.vo.CarItem"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="zh">

<head>
<meta charset="UTF-8">
<title>华美商城购物车</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/bootstrap-3.3.7-dist/css/bootstrap.css">
<script
	src="${pageContext.request.contextPath}/bootstrap-3.3.7-dist/js/jquery-3.5.1.js"></script>
<script
	src="${pageContext.request.contextPath}/bootstrap-3.3.7-dist/js/bootstrap.js"></script>
<style>
td:nth-child(4)::before, small {
	content: "$";
}

* {
	outline: none !important;
}

td, th {
	text-align: center;
}

input {
	text-align: center;
}
</style>
</head>

<body>
	<%
	Object obj = session.getAttribute("user");
	if (obj == null) {
		response.sendRedirect("login.jsp");
		return;
	}
	%>
	<div class="jumbotron">
		<div class="container">
			<h1>欢迎光临华美购物车🛒</h1>
			<p>
				尊贵的<%=((User) obj).getAccount()%></p>
			<a href="doEite.jsp" class="btn btn-primary"> 退出登录 </a> <a
				href="index.jsp" class="btn btn-primary">返回商城</a>
		</div>
	</div>

	<table class="table">
		<tr>
			<th>商品序号</th>
			<th>商品名称</th>
			<th>商品个数</th>
			<th>商品总价</th>
			<th>操作</th>
		</tr>
		<%
		int sum = 0;
		List<CarItem> car = (List<CarItem>) session.getAttribute("car");

		for (CarItem caritem : car) {

			sum += caritem.getSum();
		%>
		<tr>
			<td style="line-height: 30.5px;"><%=caritem.getGoods().getId()%></td>
			<td style="line-height: 30.5px;"><%=caritem.getGoods().getName()%></td>
			<td>
				<div class="input-group" style="width: 120px; margin: auto;">
					<span class="input-group-btn"> <a
						href="doUpdCar.jsp?id=<%=caritem.getGoods().getId()%>&type=0"
						class="btn btn-default" type="number">-</a>
					</span> <input
						onblur="locathion.href='doUpdCar.jsp?id=<%=caritem.getGoods().getId()%>&count'+thin.value"
						value="<%=caritem.getCount()%>" type="text" class="form-control">
					<span class="input-group-btn"> <a
						href="doUpdCar.jsp?id=<%=caritem.getGoods().getId()%>&type=1"
						class="btn btn-default" type="button">+</a>
					</span>
				</div>
			</td>
			<td style="line-height: 30.5px;"><%=caritem.getSum()%></td>
			<td style="line-height: 30.5px;"><a
				href="doDelCar.jsp?id=<%=caritem.getGoods().getId()%>"
				class="btn btn-primary">删除</a></td>
		</tr>
		<%
		}
		%>
	</table>

	<h1 class="alert alert-info">
		当前购物车总价: <small>￥<%=sum%></small> <a href="docClear.jsp"
			class="btn btn-danger">点我结算</a>
	</h1>
</body>
</html>

2.doDelCar.jsp(删除购物车选项功能）

<%@page import="com.zking.vo.CarItem"%>
<%@page import="java.util.List"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%
//拿到car
List<CarItem> car = (List<CarItem>) session.getAttribute("car");
//拿到id
Integer id = Integer.parseInt(request.getParameter("id"));
//
/**
fore删除商品时可能会出现一个问题，list集合的下标改变，删除中间的可能报错，
而且一个点，和之前的js 的表格删除中四项删除俩项剩余俩项同理，所以推荐使用for循环
for(CarItem item: car){
	if(item.getGoods().getId()==id){
	pin Editor
		//移除对象
		car.remove(item);
		break;  
	}
}
**/
for (int i = 0; i < car.size(); i++) {
	if (car.get(i).getGoods().getId() == id) {
		//移除对象
		car.remove(car.get(i));
		break;
	}

}
session.setAttribute("car", car);

response.sendRedirect("car.jsp");
%>

3.doUpdCar.jsp(购物车数量加减）

<%@page import="com.zking.pojo.Goods"%>
<%@page import="com.zking.vo.CarItem"%>
<%@page import="java.util.List"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%
List<CarItem> car = (List<CarItem>) session.getAttribute("car");
//拿到id
Integer id = Integer.parseInt(request.getParameter("id"));
//拿到type类型
String type = request.getParameter("type");
//查出商品
CarItem i = null;
for (CarItem item : car) {
	if (id == item.getGoods().getId()) {
		i = item;
		break;
	}
}
if (type != null) {
	i.setCount(i.getCount() + (type.equals("0") ? -1 : 1));//数量加一
} else {
	i.setCount((int) Double.parseDouble(request.getParameter("count") == null ? "1" : request.getParameter("count")));//数量加一
}
i.setCount(i.getCount() > 0 ? i.getCount() : 1);//小于0的判断
i.setSum(i.getCount() * i.getGoods().getPrice());//总价

session.setAttribute("car", car);

response.sendRedirect("car.jsp");
%>

4.docClear.jsp(购物车全选清空）

<%@page import="java.util.List"%>
<%@page import="com.zking.vo.CarItem"%>
<%@page import="java.util.ArrayList"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>


<%
// session.setAttribute("car", new ArrayList<CarItem>());

List<CarItem> car = (List<CarItem>) session.getAttribute("car");
//专门清空购物车的
car.clear();

session.setAttribute("car", car);

response.sendRedirect("car.jsp");
%>

5.doEite.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%
session.invalidate();//让session对象失效
response.sendRedirect("login.jsp");
%>

以上功能的改变，带来的index界面也发生了改变，下面是最终版的index

6，index.jsp

<%@page import="com.zking.pojo.Goods"%>
<%@page import="org.apache.jasper.tagplugins.jstl.core.ForEach"%>
<%@page import="com.zking.biz.impl.GoodsBizImpl"%>
<%@page import="com.zking.biz.IGoodsBiz"%>
<%@page import="com.zking.pojo.User"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>华美商城</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/bootstrap-3.3.7-dist/css/bootstrap.css">
<script
	src="${pageContext.request.contextPath}/bootstrap-3.3.7-dist/js/jquery-3.5.1.js"></script>
<script
	src="${pageContext.request.contextPath}/bootstrap-3.3.7-dist/js/bootstrap.js"></script>
<style>
td:nth-child(3)::before {
	content: "$";
}
</style>
</head>

<body>
	<%
	Object obj = session.getAttribute("user");
	if (obj == null) {
		response.sendRedirect("login.jsp");
		return;
	}
	%>
	<div class="jumbotron">
		<div class="container">
			<h1>欢迎光临华美SuperMarket</h1>
			<p>
				尊贵的<%=((User) obj).getAccount()%></p>
			<p>	
			<a href="car.jsp" class="btn btn-primary">购物车</a>
				</p>
		</div>
	</div>
		<div class="container">
	<table class="table">
		<tr>
			<th>商品序号</th>
			<th>商品名称</th>
			<th>商品单价</th>
			<th>商品描述</th>
			<th>操作</th>
		</tr>
		<%
		IGoodsBiz goodsbiz = new GoodsBizImpl();
		for (Goods goods : goodsbiz.getAll()) {
		%>
		<tr>
			<td><%=goods.getId()%></td>
			<td><%=goods.getName()%></td>
			<td><%=goods.getPrice()%></td>
			<td><%=goods.getInfo()%></td>
			<td>
				<div class="btn-group btn-group-xs">
					<button class="btn btn-primary">
						<span class="glyphicon glyphicon-tags"></span>
					</button>
					<a href="doAddCar.jsp?id=<%=goods.getId()%>" class="btn btn-primary" >添加购物车</a>
				</div>
			</td>
		</tr>
		<%
		}
		%>
	</table>
	
	</div>
</body>
</html>

7,建表语句

--用户表
create table shop_user(
id number primary key,
account varchar2(30) not null,
password varchar2(30）not null
);

--商品表
create table shop_goods(
 id number primary key,
 name varchar2(30) not null,
 price  number default 0.0,
 info varchar2(255)default'暂无描述' 
);

以上就是这个简易的购物车项目的全部源码了，都到这里了，就留个赞在走吧！