Shop项目--7. 加入购物车。cart.jsp

最新推荐文章于 2023-05-31 20:52:24 发布

ej_dont_give_up

最新推荐文章于 2023-05-31 20:52:24 发布

阅读量1.5k

点赞数

本文链接：https://blog.csdn.net/weixin_39472341/article/details/78811495

版权

本文详细介绍了如何在电商项目中实现从product_info.jsp页面将商品加入购物车并跳转至cart.jsp页面显示购物车内容的过程。涉及对象包括product、cartItem和cart，以及它们之间的关系和属性。通过点击事件获取商品数量和PID，计算小计和总价，使用session存储购物车数据，并在cart.jsp页面展示。

摘要由CSDN通过智能技术生成

分析：

目的：在product_info.jsp页面，输入购买数量，点击加入购物车，转到cart.jsp，显示购买的商品，数量，小计，总价格。

1.在cart.jsp页面，可以分为3个对象 product对象 cartItem对象 cart对象。

2.创建cartItem对象 cart对象。只要对象齐全了，剩下的就知识业务代码的实现。

3.cartItem对象与cart对象包含的属性

cartItem对象内包含 product对象还有购买数量 int buyNum 还有商品小计 double subtotal

cart对象包含 cartItem对象集合，因为要便于稍后的删除操作，所以使用map集合，把product的pid作为map集合的 key。

cart对象包含 Map<String,CartItem> cartItems = new HashMap<String,CartItem>;，商品总计double total

4.在product_info.jsp页面，进行加入购物车功能实现。功能需要携带购买的数量buyNum与购买商品的pid。数据传递的方法要加入点击事件，以用于提取buyNum值

5.进入该功能，根据pid获取商品，buyNum获取购买数量，计算小计subtotal，通过3者封装成成cartItem对象。封装carItem的时候要先判断其是否已存在，如果已存在则修改buyNum与subtotal即可，计算小计，应该新定义一个这次新的小计newSubtotal，便于subtotal=subtotal+newSubtotal。

6.通过session域获取Cart对象如果没有则创建。把pid为key cartItem为value 放到map集合 cartItems。

7.计算总计total时候。要注意获取原来的total加上新的小计newSubtotal。

8.把cartItems和total封装成购物车对象cart，放回到session域。

9.重定向到cart.jsp，此处不能转发，因为转发地址不变，等同于该功能再实现一次，会导致总价格出错。

10.在cart.jsp页面获取cart ，因为cart存在session，所以可以直接获取。注意：因为是map集合，pid为key，cartItem为value。遍历cart，得出的是entry。

准备：

cartItem对象

package com.itheima.domain;

public class CartItem {

	private Product product;
	private int buyNum;
	private double subtotal;
	public Product getProduct() {
		return product;
	}
	public void setProduct(Product product) {
		this.product = product;
	}
	public int getBuyNum() {
		return buyNum;
	}
	public void setBuyNum(int buyNum) {
		this.buyNum = buyNum;
	}
	public double getSubtotal() {
		return subtotal;
	}
	public void setSubtotal(double subtotal) {
		this.subtotal = subtotal;
	}
	
	
}

cart对象

package com.itheima.domain;

import java.util.HashMap;
import java.util.Map;

public class Cart {

	//购物车中存储的n个购物项
	private Map<String,CartItem> cartItems = new HashMap<String,CartItem>();
	
	//购物车商品总计
	private double total;

	public Map<String, CartItem> getCartItems() {
		return cartItems;
	}

	public void setCartItems(Map<String, CartItem> cartItems) {
		this.cartItems = cartItems;
	}

	public double getTotal() {
		return total;
	}

	public void setTotal(double total) {
		this.total = total;
	}
	
}

步骤：

从product_info.jsp开始

1.在加入购物车所属a标签内加入单击事件 <a href="javascript:void(0);" οnclick="addProductToCart()"> 编写该函数携带pid 还有购买数量buyNum

进行web层编写 productServlet

2.获取商品pid

3.获取购买数量buyNum

4.通过pid获取product

5.计算这次加入购物车的小计newSubtal

6.获取购物车，判断session中是否有购物车，如果没有则创建

7.根据pid，判断购物车中，是否已经有该购物项，如果有则修改buyNum，修改小计subtal=subtal+newSubtal。如果没有则subtal=newSubtal

8，封装购物车项，

9，把购物车项cartItem作为value，pid作为key 存到cart对象中的map集合cartItems内

10，计算总计，并存到cart对象内，此步骤不能省，因为操作的cart不是session域的cart，必须存回去。

11，重定向到购物车页面cart.jsp。

cart.jsp

12.遍历cart对象，得到的是entry，根据entry.value 获得购物车项cartItem，显示购物车项的商品与小计

13.显示购物车的总计

product_info

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>会员登录</title>
<link rel="stylesheet" href="css/bootstrap.min.css" type="text/css" />
<script src="js/jquery-1.11.3.min.js" type="text/javascript"></script>
<script src="js/bootstrap.min.js" type="text/javascript"></script>
<!-- 引入自定义css文件 style.css -->
<link rel="stylesheet" href="css/style.css" type="text/css" />

<style>
body {
	margin-top: 20px;
	margin: 0 auto;
}

.carousel-inner .item img {
	width: 100%;
	height: 300px;
}
</style>
</head>

<script type="text/javascript">
	function addProductToCart(){
		// 获得购买商品的数量
		var buyNum = $("#buyNum").val();
		location.href="${pageContext.request.contextPath }/product?method=addProductToCart&pid=${product.pid}&buyNum="+buyNum;
	}
</script>

<body>
	<!-- 引入header.jsp -->
	<jsp:include page="/header.jsp"></jsp:include>

	<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="./index.htm">首页  ></a> <a href="