正文
SSH框架实现仿淘宝购物demo
小程序：扫一扫查出行【扫一扫了解最新限行尾号】
复制小程序
还记得六月份实习的时候，曾经做过一个电商的项目，项目里面需要实现类似淘宝购物车的移动端的demo，随着项目的进行，再一次跟购物车碰面，但是今天呢，不是移动端的需求，如何使用SSH框架实现类似淘宝的购物车功能呢？包括如何添加到购物车，清空购物车等功能，那么购物车怎么玩儿呢？今天这篇博客，小编就简单的来总结一下如何使用SSH框架实现购物车，希望对有需要的小伙伴有帮助，博文中的不足之处，还请各位大神多多指教，小女子在此谢主隆恩。
第一步，购物车模块的实体的封装，两个实体一个购物车对象，也就是一个一个的宝贝，包括购物项的集合以及总计，另一个实体是购物车项对象，包括商品的信息、商品的数量，商品的小计等。那么问题来了，购物项的集合，我们是采用map、set还是list呢？如果使用set，买一个东西数据就变了，总是在变；所以肯定是一个list或者是map，如果我们只是简单的显示购物车里面的商品用list就可以了，但是还需要一个功能-移除，所以采用map，直接移除key就可以了，移除的时候比较方便。我们把她命名为Cart和CartItem，代码如下，cart的代码：
package cn.itcast.shop.cart.vo;
import java.io.Serializable;
import java.util.Collection;
import java.util.LinkedHashMap;
import java.util.Map;
/**
* 购物车对象
*
* @author 丁国华
*
*/
public class Cart implements Serializable{
// 购物车属性
// 购物项集合:Map的key就是商品pid,value:购物项
private Map<Integer, CartItem> map = new LinkedHashMap<Integer, CartItem>();
// Cart对象中有一个叫cartItems属性.
public Collection<CartItem> getCartItems(){
return map.values();
}
// 购物总计:
private double total;
public double getTotal() {
return total;
}
// 购物车的功能:
// 1.将购物项添加到购物车
public void addCart(CartItem cartItem) {
// 判断购物车中是否已经存在该购物项:
/*
* * 如果存在:
* * 数量增加
* * 总计 = 总计 + 购物项小计
* * 如果不存在:
* * 向map中添加购物项
* * 总计 = 总计 + 购物项小计
*/
// 获得商品id.
Integer pid = cartItem.getProduct().getPid();
// 判断购物车中是否已经存在该购物项:
if(map.containsKey(pid)){
// 存在
CartItem _cartItem = map.get(pid);// 获得购物车中原来的购物项
_cartItem.setCount(_cartItem.getCount()+cartItem.getCount());
}else{
// 不存在
map.put(pid, cartItem);
}
// 设置总计的值
total += cartItem.getSubtotal();
}
// 2.从购物车移除购物项
public void removeCart(Integer pid) {
// 将购物项移除购物车:
CartItem cartItem = map.remove(pid);
// 总计 = 总计 -移除的购物项小计:
total -= cartItem.getSubtotal();
}
// 3.清空购物车
public void clearCart() {
// 将所有购物项清空
map.clear();
// 将总计设置为0
total = 0;
}
}
CartItem的代码如下所示：
package cn.itcast.shop.cart.vo;
import cn.itcast.shop.product.vo.Product;
/**
* 购物项对象
* @author 丁国华
*
*/
public class CartItem {
private Product product; // 购物项中商品信息
private int count; // 购买某种商品数量
private double subtotal; // 购买某种商品小计
public Product getProduct() {
return product;
}
public void setProduct(Product product) {
this.product = product;
}
public int getCount() {
return count;
}
public void setCount(int count) {
this.count = count;
}
// 小计自动计算的.
public double getSubtotal() {
return count * product.getShop_price();
}
}
第二步，购物车模块跳转到购物车页面，点击加入购物车的按钮，完成页面的跳转，跳转到cart页面，配置到applicationContext.xml和struts.xml里面即可，配置比较简单，小编在这里就不一一介绍了，主要来看一下jsp里面的代码，代码如下所示：
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib uri="/struts-tags" prefix="s" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>网上商城</title>
<link href="${pageContext.request.contextPath}/css/common.css" rel="stylesheet" type="text/css"/>
<link href="${pageContext.request.contextPath}/css/product.css" rel="stylesheet" type="text/css"/>
<script>
function saveCart(){
document.getElementById("cartForm").submit();
}
</script>
</head>
<body>
<div class="container header">
<div class="span5">
<div class="logo">
<a>
<img src="${pageContext.request.contextPath}/image/r___________renleipic_01/logo.gif" alt="传智播客">
</a>
</div>
</div>
<div class="span9">
<div class="headerAd">
<img src="data:image\r___________renleipic_01/header.jpg" alt="正品保障" title="正品保障" height="50" width="320">
</div> </div>
<%@ include file="menu.jsp" %>
</div><div class="container productContent">
<div class="span6">
<div class="hotProductCategory">
<s:iterator var="c" value="#session.cList">
<dl>
<dt>
<a href="${ pageContext.request.contextPath }/product_findByCid.action?cid=<s:property value="#c.cid"/>&page=1"><s:property value="#c.cname"/></a>
</dt>
<s:iterator var="cs" value="#c.categorySeconds">
<dd>
<a href="${ pageContext.request.contextPath }/product_findByCsid.action?csid=<s:property value="#cs.csid"/>&page=1"><s:property value="#cs.csname"/></a>
</dd>
</s:iterator>
</dl>
</s:iterator>
</div>
</div>
<div class="span18 last">
<div class="productImage">
<a title="" style="outline-style: none; text-decoration: none;" id="zoom" href="http://image/r___________renleipic_01/bigPic1ea8f1c9-8b8e-4262-8ca9-690912434692.jpg" rel="gallery">
<div class="zoomPad"><img style="opacity: 1;" title="" class="medium" src="${ pageContext.request.contextPath }/<s:property value="model.image"/>"><div style="display: block; top: 0px; left: 162px; width: 0px; height: 0px; position: absolute; border-width: 1px;" class="zoomPup"></div><div style="position: absolute; z-index: 5001; left: 312px; top: 0px; display: block;" class="zoomWindow"><div style="width: 368px;" class="zoomWrapper"><div style="width: 100%; position: absolute; display: none;" class="zoomWrapperTitle"></div><div style="width: 0%; height: 0px;" class="zoomWrapperImage"><img src="%E5%B0%9A%E9%83%BD%E6%AF%94%E6%8B%89%E5%A5%B3%E8%A3%852013%E5%A4%8F%E8%A3%85%E6%96%B0%E6%AC%BE%E8%95%BE%E4%B8%9D%E8%BF%9E%E8%A1%A3%E8%A3%99%20%E9%9F%A9%E7%89%88%E4%BF%AE%E8%BA%AB%E9%9B%AA%E7%BA%BA%E6%89%93%E5%BA%95%E8%A3%99%E5%AD%90%20%E6%98%A5%E6%AC%BE%20-%20Powered%20By%20Mango%20Team_files/6d53c211-2325-41ed-8696-d8fbceb1c199-large.jpg" style="position: absolute; border: 0px none; display: block; left: -432px; top: 0px;"></div></div></div><div style="visibility: hidden; top: 129.5px; left: 106px; position: absolute;" class="zoomPreload">Loading zoom</div></div>
</a>
</div>
<div class="name"><s:property value="model.pname"/></div>
<div class="sn">
<div>编号：<s:property value="model.pid"/></div>
</div>
<div class="info">
<dl>
<dt>商城价:</dt>
<dd>
<strong>￥：<s:property value="model.shop_price"/>元</strong>
参 考 价：
<del>￥<s:property value="model.market_price"/>元</del>
</dd>
</dl>
<dl>
<dt>促销:</dt>
<dd>
<a target="_blank" title="限时抢购 (2014-07-30 ~ 2015-01-01)">限时抢购</a>
</dd>
</dl>
<dl>
<dt> </dt>
<dd>
<span> </span>
</dd>
</dl>
</div>
<form id="cartForm" action="${ pageContext.request.contextPath }/cart_addCart.action" method="post" >
<input type="hidden" name="pid" value="<s:property value="model.pid"/>"/>
<div class="action">
<dl class="quantity">
<dt>购买数量:</dt>
<dd>
<input id="count" name="count" value="1" maxlength="4" onpaste="return false;" type="text"/>
</dd>
<dd>
件
</dd>
</dl>
<div class="buy">
<input id="addCart" class="addCart" value="加入购物车" type="button" onclick="saveCart()"/>
</div>
</div>
</form>
<div id="bar" class="bar">
<ul>
<li id="introductionTab">
<a href="#introduction">商品介绍</a>
</li>
</ul>
</div>
<div id="introduction" name="introduction" class="introduction">
<div class="title">
<strong><s:property value="model.pdesc"/></strong>
</div>
<div>
<img src="${pageContext.request.contextPath }/<s:property value="model.image"/>">
</div>
</div>
</div>
</div>
<div class="container footer">
<div class="span24">
<div class="footerAd">
<img src="data:image\r___________renleipic_01/footer.jpg" alt="我们的优势" title="我们的优势" height="52" width="950">
</div>
</div>
<div class="span24">
<ul class="bottomNav">
<li>
<a href="#">关于我们</a>
|
</li>
<li>
<a href="#">联系我们</a>
|
</li>
<li>
<a href="#">诚聘英才</a>
|
</li>
<li>
<a href="#">法律声明</a>
|
</li>
<li>
<a>友情链接</a>
|
</li>
<li>
<a target="_blank">支付方式</a>
|
</li>
<li>
<a target="_blank">配送方式</a>
|
</li>
<li>
<a >SHOP++官网</a>
|
</li>
<li>
<a>SHOP++论坛</a>
</li>
</ul>
</div>
<div class="span24">
<div class="copyright">Copyright © 2005-2015 网上商城 版权所有</div>
</div>
</div>
</body>
</html>
在jsp页面里面添加一个购物车页面cart，代码如下所示：
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib uri="/struts-tags" prefix="s"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- saved from url=(0043)http://localhost:8080/mango/cart/list.jhtml -->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>购物车</title>
<link href="${pageContext.request.contextPath}/css/common.css" rel="stylesheet" type="text/css"/>
<link href="${pageContext.request.contextPath}/css/cart.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div class="container header">
<div class="span5">
<div class="logo">
<a href="http://localhost:8080/mango/">
<img src="${pageContext.request.contextPath}/image/r___________renleipic_01/logo.gif" alt="传智播客">
</a>
</div>
</div>
<div class="span9">
<div class="headerAd">
<img src="${pageContext.request.contextPath}/image/header.jpg" width="320" height="50" alt="正品保障" title="正品保障">
</div> </div>
<%@ include file="menu.jsp" %>
</div> <div class="container cart">
<s:if test="#session.cart.cartItems.size() != 0">
<div class="span24">
<div class="step step1">
购物车信息
</div>
<table>
<tbody>
<tr>
<th>图片</th>
<th>商品</th>
<th>价格</th>
<th>数量</th>
<th>小计</th>
<th>操作</th>
</tr>
<s:iterator var="cartItem" value="#session.cart.cartItems">
<tr>
<td width="60">
<img src="${pageContext.request.contextPath}/<s:property value="#cartItem.product.image"/>">
</td>
<td>
<a target="_blank"><s:property value="#cartItem.product.pname"/></a>
</td>
<td>
￥<s:property value="#cartItem.product.shop_price"/>
</td>
<td class="quantity" width="60">
<s:property value="#cartItem.count"/>
</td>
<td width="140">
<span class="subtotal">￥<s:property value="#cartItem.subtotal"/></span>
</td>
<td>
<a href="${ pageContext.request.contextPath }/cart_removeCart.action?pid=<s:property value="#cartItem.product.pid"/>" class="delete">删除</a>
</td>
</tr>
</s:iterator>
</tbody>
</table>
<dl id="giftItems" class="hidden" style="display: none;">
</dl>
<div class="total">
<em id="promotion"></em>
<em>
登录后确认是否享有优惠
</em>
赠送积分: <em id="effectivePoint"><s:property value="#session.cart.total"/></em>
商品金额: <strong id="effectivePrice">￥<s:property value="#session.cart.total"/>元</strong>
</div>
<div class="bottom">
<a href="${ pageContext.request.contextPath }/cart_clearCart.action" id="clear" class="clear">清空购物车</a>
<a href="./会员登录.htm" id="submit" class="submit">提交订单</a>
</div>
</div>
</s:if>
<s:else>
<div class="span24">
<div class="step step1">
<span><h2>亲!您还没有购物!请先去购物!</h2></span>
</div>
</div>
</s:else>
</div>
<div class="container footer">
<div class="span24">
<div class="footerAd">
<img src="${pageContext.request.contextPath}/image/footer.jpg" width="950" height="52" alt="我们的优势" title="我们的优势">
</div> </div>
<div class="span24">
<ul class="bottomNav">
<li>
<a >关于我们</a>
|
</li>
<li>
<a>联系我们</a>
|
</li>
<li>
<a>招贤纳士</a>
|
</li>
<li>
<a>法律声明</a>
|
</li>
<li>
<a>友情链接</a>
|
</li>
<li>
<a target="_blank">支付方式</a>
|
</li>
<li>
<a target="_blank">配送方式</a>
|
</li>
<li>
<a>服务声明</a>
|
</li>
<li>
<a>广告声明</a>
</li>
</ul>
</div>
<div class="span24">
<div class="copyright">Copyright © 2005-2015 网上商城 版权所有</div>
</div>
</div>
</body></html>
第三步，这个时候页面可以提交以及进行跳转了，现在我们需要做的就是将购物模块添加到购物车、清空购物车和移除购物车，代码如下所示：
package cn.itcast.shop.cart.action;
import org.apache.struts2.ServletActionContext;
import cn.itcast.shop.cart.vo.Cart;
import cn.itcast.shop.cart.vo.CartItem;
import cn.itcast.shop.product.service.ProductService;
import cn.itcast.shop.product.vo.Product;
import com.opensymphony.xwork2.ActionSupport;
/**
* 购物车Action
*
* @author 传智.郭嘉
*
*/
public class CartAction extends ActionSupport {
// 接收pid
private Integer pid;
// 接收数量count
private Integer count;
// 注入商品的Service
private ProductService productService;
public void setProductService(ProductService productService) {
this.productService = productService;
}
public void setPid(Integer pid) {
this.pid = pid;
}
public void setCount(Integer count) {
this.count = count;
}
// 将购物项添加到购物车:执行的方法
public String addCart() {
// 封装一个CartItem对象.
CartItem cartItem = new CartItem();
// 设置数量:
cartItem.setCount(count);
// 根据pid进行查询商品:
Product product = productService.findByPid(pid);
// 设置商品:
cartItem.setProduct(product);
// 将购物项添加到购物车.
// 购物车应该存在session中.
Cart cart = getCart();
cart.addCart(cartItem);
return "addCart";
}
// 清空购物车的执行的方法:
public String clearCart(){
// 获得购物车对象.
Cart cart = getCart();
// 调用购物车中清空方法.
cart.clearCart();
return "clearCart";
}
// 从购物车中移除购物项的方法:
public String removeCart(){
// 获得购物车对象
Cart cart = getCart();
// 调用购物车中移除的方法:
cart.removeCart(pid);
// 返回页面:
return "removeCart";
}
// 我的购物车:执行的方法
public String myCart(){
return "myCart";
}
/**
* 获得购物车的方法:从session中获得购物车.
* @return
*/
private Cart getCart() {
Cart cart = (Cart) ServletActionContext.getRequest().getSession()
.getAttribute("cart");
if (cart == null) {
cart = new Cart();
ServletActionContext.getRequest().getSession()
.setAttribute("cart", cart);
}
return cart;
}
}
接着，我们来看一下实现的效果，如下图所示：
小编寄语：
该博文小编简单介绍了如何使用ssh框架实现类似淘宝购物车的功能，总得来说，实现的思路分一下几个部分，首先将购物车模块的实体进行封装，其次将购物车模块跳转到购物车压面，之后实现添加、删除等功能，包括jsp页面的编写以及struts里面的都是及其重要的，在做这个项目的过程也遇到各种各样的问题，但是最后都一一解决了，开心ing，今天的博文就跟大家分享到这里，java之路，精彩下次再续......
