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

 

这两天,在学习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 items = new ArrayList();

	public List getItems() {
		return items;
	}

	public void setItems(List items) {
		this.items = items;
	}
	
	public void add(CartItem ci) {
		for (Iterator 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 it = items.iterator(); it.hasNext(); ) {
			CartItem current = it.next();
			d += current.getProduct().getPrice() * current.getCount();
		}
		return d;
	}
	
	public void deleteItemById(String productId) {
		for (Iterator 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 + "/";
%>



	
		
		My JSP 'ShowProductsJSP.jsp' starting page

		
		
		
		
		
		
	

	
		<%
			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);
		%>
		

产品显示

<% Set productIdSet = products.keySet(); Iterator it = productIdSet.iterator(); int number = 1; while (it.hasNext()) { String id = (String) it.next(); Product product = (Product) products.get(id); %> <% } %>
序号 产品名称 产品描写叙述 产品单位价格(¥) 加入到购物车
<%=number++%> <%=product.getName()%> <%=product.getDescription()%> <%=product.getPrice()%> 我要购买


 

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 

<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<%
List items = c.getItems();
%>





购物车





<% for(Iterator it = items.iterator(); it.hasNext(); ) { CartItem ci = it.next(); %> <% } %>
产品ID 产品名称 购买数量 单位价格 总价 处理
<%=ci.getProduct().getId() %> <%=ci.getProduct().getName() %> " value="<%=ci.getCount() %>" οnkeypress="if (event.keyCode < 45 || event.keyCode > 57) event.returnValue = false;" οnchange="document.forms[0].submit()"> <%=ci.getProduct().getPrice() %> <%=ci.getProduct().getPrice()*ci.getCount() %> 删除
全部商品总价格为: <%=c.getTotalPrice() %>
下单


 

配置好相关文件,在tomcat中公布后,在浏览器中输入http://localhost:8088/shopCart/ShowProducts.jsp 就可以进入产品展示页面,其他操作都能够在页面上完毕!

注意:我使用的tomcatport(8088)被自己改过,假设没改过tomcatport的童鞋,默认port为8080。

 

 

你可能感兴趣的:(java,javascript)