神刀安全网

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="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="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框架实现仿淘宝购物demo 小编寄语: 该博文小编简单介绍了如何使用ssh框架实现类似淘宝购物车的功能,总得来说,实现的思路分一下几个部分,首先将购物车模块的实体进行封装,其次将购物车模块跳转到购物车压面,之后实现添加、删除等功能,包括jsp页面的编写以及struts里面的都是及其重要的,在做这个项目的过程也遇到各种各样的问题,但是最后都一一解决了,开心ing,今天的博文就跟大家分享到这里,java之路,精彩下次再续……   

转载本站任何文章请注明:转载至神刀安全网,谢谢神刀安全网 » SSH框架实现仿淘宝购物demo

分享到:更多 ()

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
分享按钮