首页 > 代码库 > 用JSP实现的商城购物车模块

用JSP实现的商城购物车模块

2024-07-11 16:32:16   218人阅读

 

这两天，在学习JSP，正好找个小模块来练练手：

    下面就是实现购物车模块的页面效果截图：

图1. 产品显示页面 通过此页面进行产品选择，添?到购物车

 

图2 .购物车页面

 

图3 . 商品数量设置

 

好了，先不贴图了，直接上代码；先看看项目的文档结构把（麻雀虽小，五脏俱全）：

 

整个项目包括三个类，两个JSP页面，以下分别把他们的代码贴上：

 

Cart.java

package shopping.cart;import java.util.ArrayList;import java.util.Iterator;import java.util.List;public class Cart {	List<CartItem> items = new ArrayList<CartItem>();	public List<CartItem> getItems() {		return items;	}	public void setItems(List<CartItem> items) {		this.items = items;	}		public void add(CartItem ci) {		for (Iterator<CartItem> iter = items.iterator(); iter.hasNext();) {			CartItem item = iter.next();			if(item.getProduct().getId() == ci.getProduct().getId()) {				item.setCount(item.getCount() + 1);				return;			}		}				items.add(ci);	}		public double getTotalPrice() {		double d = 0.0;		for(Iterator<CartItem> it = items.iterator(); it.hasNext(); ) {			CartItem current = it.next();			d += current.getProduct().getPrice() * current.getCount();		}		return d;	}		public void deleteItemById(String productId) {		for (Iterator<CartItem> iter = items.iterator(); iter.hasNext();) {			CartItem item = iter.next();			if(item.getProduct().getId().equals(productId)) {				iter.remove();				return;			}		}	}	}


 

CartItem.java

 

package shopping.cart;import shopping.cart.Product;public class CartItem {	private Product product;	private int count;	public int getCount() {		return count;	}	public void setCount(int count) {		this.count = count;	}	public Product getProduct() {		return product;	}	public void setProduct(Product product) {		this.product = product;	}}


 

 Product.java

package shopping.cart;import java.io.Serializable;public class Product implements Serializable {	private String id;// 产品标识	private String name;// 产品名称	private String description;// 产品描写叙述	private double price;// 产品价格	public Product() {	}	public Product(String id, String name, String description, double price) {		this.id = id;		this.name = name;		this.description = description;		this.price = price;	}	public void setId(String id) {		this.id = id;	}	public void setName(String name) {		this.name = name;	}	public void setDescription(String description) {		this.description = description;	}	public void setPrice(double price) {		this.price = price;	}	public String getId() {		return id;	}	public String getName() {		return name;	}	public String getDescription() {		return description;	}	public double getPrice() {		return price;	}}


 

以下是俩JSP页面源代码：

ShowProducts.jsp

<%@ page language="java" import="java.util.*" pageEncoding="GB18030"%><%@ page import="shopping.cart.*"%><%	String path = request.getContextPath();	String basePath = request.getScheme() + "://"			+ request.getServerName() + ":" + request.getServerPort()			+ path + "/";%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html>	<head>				<title>My JSP ‘ShowProductsJSP.jsp‘ starting page</title>		<meta http-equiv="pragma" content="no-cache">		<meta http-equiv="cache-control" content="no-cache">		<meta http-equiv="expires" content="0">		<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">		<meta http-equiv="description" content="This is my page">			</head>	<body bgcolor="#ffffff">		<%			Map products = new HashMap();			products.put("1", new Product("1", "mp3播放器",					"效果非常不错的mp3播放器，存储空间达1GB", 100.00));			products.put("2", new Product("2", "数码相机", "象素500万，10倍光学变焦",					500.00));			products.put("3", new Product("3", "数码摄像机",					"120万象素，支持夜景拍摄，20倍光学变焦", 200.00));			products.put("4", new Product("4", "迷你mp4",					"市面所能见到的最好的mp4播放器，国产", 300.00));			products.put("5", new Product("5", "多功能手机",					"集mp3播放、100万象素数码相机，手机功能于一体", 400.00));			products.put("6", new Product("6", "多功能手机111",					"集mp3播放23、100万象素数码相机111，手机功能于一体111",600.00));			products.put("7", new Product("7", "11111111111",					"集mp3播放23、100万象素数码相机111，手机功能于一体111",700.00));			products.put("8", new Product("8", "2222222222",					"集mp3播放23、100万象素数码相机111，手机功能于一体111",800.00));			products.put("9", new Product("9", "33333333333333",					"集mp3播放23、100万象素数码相机111，手机功能于一体111",900.00));			session.setAttribute("products", products);		%>		<H1>			产品显示		</H1>		<form name="productForm"			action="http://localhost:8088/JSPlearning/ShopCartJSP.jsp"			method="POST">			<input type="hidden" name="action" value=http://www.mamicode.com/"purchase">>

 
Buy.jsp
<%@ page language="java" import="java.util.*" pageEncoding="GB18030"%><%@ page import="shopping.cart.*" %><%Cart c = (Cart)session.getAttribute("cart");if(c == null) {	c = new Cart();	session.setAttribute("cart", c);}double totalPrice = c.getTotalPrice();request.setCharacterEncoding("GBK");String action = request.getParameter("action");Map products = (HashMap)session.getAttribute("products");if(action != null && action.trim().equals("add")) {	String id = request.getParameter("id");	Product p = (Product)products.get(id);	CartItem ci = new CartItem();	ci.setProduct(p);	ci.setCount(1);	c.add(ci);}if(action != null && action.trim().equals("delete")) {	String id = request.getParameter("id");	c.deleteItemById(id);}if(action != null && action.trim().equals("update")) {	for(int i=0; i<c.getItems().size(); i++) {		CartItem ci = c.getItems().get(i);		int count = Integer.parseInt(request.getParameter("p" + ci.getProduct().getId()));		ci.setCount(count);	}} %> <%String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";%><%List<CartItem> items = c.getItems();%><!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=GB18030"><title>购物车</title></head><body><!-- c的值是：<%=(c == null) %> items的值是：<%=(items == null) %> --><form action="Buy.jsp" method="get"><input type="hidden" name="action" value="update"/><table align="center" border="1">	<tr>		<td>产品ID</td>		<td>产品名称</td>		<td>购买数量</td>		<td>单位价格</td>		<td>总价</td>		<td>处理</td>	</tr>	<%	for(Iterator<CartItem> it = items.iterator(); it.hasNext(); ) {		CartItem ci = it.next();		%>		<tr>			<td><%=ci.getProduct().getId() %></td>			<td><%=ci.getProduct().getName() %></td>			<td>				<input type="text" size=3 name="<%="p" + ci.getProduct().getId() %>" value="<%=ci.getCount() %>" 					onkeypress="if (event.keyCode < 45 || event.keyCode > 57) event.returnValue = false;"					onchange="document.forms[0].submit()">							</td>			<td><%=ci.getProduct().getPrice() %></td>			<td><%=ci.getProduct().getPrice()*ci.getCount() %></td>			<td>								<a href="Buy.jsp?action=delete&id=<%=ci.getProduct().getId() %>">删除</a>							</td>		</tr>		<%	}	%>			<tr>		<td colspan=3 align="right">			全部商品总价格为：		</td>		<td colspan=3><%=c.getTotalPrice() %></td>	</tr>			<tr>	<!--	<td colspan=3>			 <a href="javascript:document.forms[0].submit()">改动</a> 		</td>  -->		<td colspan=6 align="right">			<a href="">下单</a>				</td>	</tr></table></form></body></html>

 
配置好相关文件，在tomcat中公布后，在浏览器中输入http://localhost:8088/shopCart/ShowProducts.jsp 就可以进入产品展示页面，其他操作都能够在页面上完毕！
注意：我使用的tomcatport（8088）被自己改过，假设没改过tomcatport的童鞋，默认port为8080。
 
 


联系
我们