• 极客专栏正式上线!欢迎访问 https://www.jikewenku.com/topic.html
  • 极客专栏正式上线!欢迎访问 https://www.jikewenku.com/topic.html

Javaweb网上商城项目实战(20)添加商品到购物车

项目实战 Geekerstar 11个月前 (05-26) 643次浏览 已收录 0个评论 扫描二维码
文章目录[隐藏]

原理分析

具体实现

准备工作

有些准备工作在之前已经实现了,这里强调一下,如果没改的自己改一下,已经完成了的也检查一下。

1、在product_list.jsp中修改链接

 <a href="${pageContext.request.contextPath}/ProductServlet?method=findProductByPid&pid=${p.pid}">

2、product_info.jsp中自己设置form表单,设置form method,action,设置隐藏域向服务端传递商品pid

<body>


	<%@ include file="/jsp/header.jsp"%>


	<div class="container">
		<div class="row">
			<div
				style="border: 1px solid #e4e4e4; width: 930px; margin-bottom: 10px; margin: 0 auto; padding: 10px; margin-bottom: 10px;">
				<a href="${pageContext.request.contextPath}/">首页  ></a>

			</div>

			<div style="margin: 0 auto; width: 950px;">

				<form id="myForm" method="post"
					action="${pageContext.request.contextPath}/CartServlet?method=addCartItemToCart">
					<div class="col-md-6">
						<img style="opacity: 1; width: 400px; height: 350px;" title=""
							class="medium"
							src="${pageContext.request.contextPath}/${product.pimage}">
					</div>

					<div class="col-md-6">
						<!-- 
					    	${product}  :底层依次调用4个域对象上的*.getAttribute("keyName");
					    	寻找到request可以获取到一个对象 product
					    	${product.pname} :通过获取到的product对象调用对象上的getPname()方法.
					     -->
						<div>
							<strong>${product.pname}</strong>
						</div>
						<div
							style="border-bottom: 1px dotted #dddddd; width: 350px; margin: 10px 0 10px 0;">
							<div>编号:${product.pid}</div>
						</div>

						<div style="margin: 10px 0 10px 0;">
							商城价: <strong style="color: #ef0101;">¥:${product.shop_price}元/份</strong>
							市场价:
							<del>¥${product.market_price}元/份</del>
						</div>

						<div style="margin: 10px 0 10px 0;">
							促销: <a target="_blank" title="限时抢购 (2014-07-30 ~ 2015-01-01)"
								style="background-color: #f07373;">限时抢购</a>
						</div>

						<div
							style="padding: 10px; border: 1px solid #e7dbb1; width: 330px; margin: 15px 0 10px 0;; background-color: #fffee6;">
							<div style="margin: 5px 0 10px 0;">白色</div>

							<div
								style="border-bottom: 1px solid #faeac7; margin-top: 20px; padding-left: 10px;">
								购买数量:

								<!-- 向服务端发送 购买数量-->
								<input id="quantity" name="quantity" value="1" maxlength="4"
									size="10" type="text">
							</div>
							<!-- 向服务端发送 商品pid-->
							<input type="hidden" name="pid" value="${product.pid}" />


							<div style="margin: 20px 0 10px 0;; text-align: center;">
								<%--加入到购物车 --%>
								<!-- 取消链接的默认行为 -->
								<a href="javascript:void(0)"> <input id="btnId"
									style="background: url('${pageContext.request.contextPath}/img/product.gif') no-repeat scroll 0 -600px rgba(0, 0, 0, 0);height:36px;width:127px;"
									value="加入购物车" type="button">
								</a>  收藏商品
							</div>
						</div>
					</div>
				</form>
			</div>
			<div class="clear"></div>
			<div style="width: 950px; margin: 0 auto;">
				<div
					style="background-color: #d3d3d3; width: 930px; padding: 10px 10px; margin: 10px 0 10px 0;">
					<strong>商品介绍</strong>
					<h3>${product.pdesc}</h3>
				</div>
			</div>
		</div>
	</div>

	<%@include file="/jsp/footer.jsp"%>

</body>
<script>
	$(function() {
		$("#btnId").click(function() {
			var formObj = document.getElementById("myForm");
			//formObj.action="/store_v5/CartServlet";
			//formObj.method="get";
			formObj.submit();
		});
	});
</script>
PS:如果一个表单中有多个按钮,点击不同的按钮提交到不同路径,可以这样实现
var form= document.getElementById(“formId”);
form.submit();

创建CartServlet

完成添加购物车的addCartItemToCart方法

// 添加购物项到购物车
public String addCartItemToCart(HttpServletRequest req, HttpServletResponse resp) throws Exception {
	// 从session获取购物车
	Cart cart = (Cart) req.getSession().getAttribute("cart");
	if (null == cart) {
		// 如果获取不到,创建购物车对象,放在session中
		cart = new Cart();
		req.getSession().setAttribute("cart", cart);
	}
	// 如果获取到,使用即可
	// 获取到商品id,数量
	String pid = req.getParameter("pid");
	int num = Integer.parseInt(req.getParameter("quantity"));
	// 通过商品id查询都商品对象
	ProductService ProductService = new ProductServiceImp();
	Product product = ProductService.findProductByPid(pid);
	// 获取到待购买的购物项
	CartItem cartItem = new CartItem();
	cartItem.setNum(num);
	cartItem.setProduct(product);

	// 调用购物车上的方法
	cart.addCartItemToCar(cartItem);

	// 重定向到/jsp/cart.jsp
	resp.sendRedirect("/store_v1/jsp/cart.jsp");
	// return "/jsp/cart.jsp";
	return null;
}

修改web.xml

<servlet>
  <description></description>
  <display-name>CartServlet</display-name>
  <servlet-name>CartServlet</servlet-name>
  <servlet-class>com.geekerstar.store.web.servlet.CartServlet</servlet-class>
</servlet>
<servlet-mapping>
  <servlet-name>CartServlet</servlet-name>
  <url-pattern>/CartServlet</url-pattern>
</servlet-mapping>

获取购物车上商品信息

在cart.java中增加

//返回MAP中所有的值
public Collection getCartItems(){
	return map.values();
}

在cart.jsp中做如下修改

<c:if test="${not empty cart.cartItems }">
	<div class="row">
		<div style="margin: 0 auto; margin-top: 10px; width: 950px;">
			<strong style="font-size: 16px; margin: 5px 0;">订单详情</strong>
			<table class="table table-bordered">
				<tbody>
					<tr class="warning">
						<th>图片</th>
						<th>商品</th>
						<th>价格</th>
						<th>数量</th>
						<th>小计</th>
						<th>操作</th>
					</tr>
					<c:forEach items="${cart.cartItems}" var="item">
						<tr class="active">
							<td width="60" width="40%"><input type="hidden" name="id"
								value="22"> <img
								src="${pageContext.request.contextPath}/${item.product.pimage}"
								width="70" height="60"></td>
							<td width="30%"><a target="_blank">${item.product.pname}</a>
							</td>
							<td width="20%">¥${item.product.shop_price}</td>
							<td width="10%"><input type="text" name="quantity"
								value="${item.num}" maxlength="4" size="10"></td>
							<td width="15%"><span class="subtotal">¥${item.subTotal}</span>
							</td>
							<td><a href="javascript:;" id="${item.product.pid}"
								class="delete">删除</a></td>
						</tr>
					</c:forEach>
				</tbody>
			</table>
		</div>
	</div>

	<div style="margin-right: 130px;">
		<div style="text-align: right;">
			<em style="color: #ff6600;"> 登录后确认是否享有优惠   </em> 赠送积分: <em
				style="color: #ff6600;">${cart.total}</em>  商品金额: <strong
				style="color: #ff6600;">¥${cart.total}元</strong>
		</div>
		<div
			style="text-align: right; margin-top: 10px; margin-bottom: 10px;">
			<a
				href="${pageContext.request.contextPath}/CartServlet?method=clearCart"
				id="clear" class="clear">清空购物车</a> <a
				href="${pageContext.request.contextPath}/jsp/order_info.jsp">
				<%--提交表单 --%> <input type="submit" width="100" value="提交订单"
				name="submit" border="0"
				style="background: url('${pageContext.request.contextPath}/img/register.gif') no-repeat scroll 0 0 rgba(0, 0, 0, 0);
						height:35px;width:100px;color:white;">
			</a>
		</div>
	</div>

</c:if>

效果演示

首先登陆我们的账户,此时购物车为空

然后我们添加几个商品到购物车,如下图所示,添加成功

至此完成了购物车的添加功能

源码下载

下载地址

导航目录

查看导航
丨极客文库, 版权所有丨如未注明 , 均为原创丨
本网站采用知识共享署名-非商业性使用-相同方式共享 3.0 中国大陆许可协议进行授权
转载请注明原文链接:Javaweb网上商城项目实战(20)添加商品到购物车
喜欢 (0)
[247507792@qq.com]
分享 (0)
Geekerstar
关于作者:
本站技术支持

您必须 登录 才能发表评论!

  • 精品技术教程
  • 编程资源分享
  • 问答交流社区
  • 极客文库知识库

客服QQ


QQ:2248886839


工作时间:09:00-23:00