MVC设计模式《简易商城购物车系统》揭秘

MVC设计模式《简易商城购物车系统》揭秘

《简易商城购物系统》

大家经常去网上够物，对网上所谓的购物车应该不会陌生吧，那么今天我们就用使用javaweb的MVC设计模式来实现一个网上购物系统的案例。

最终效果如下：

三层架构的简单介绍

一、开发步骤

首先要搞清楚你要做什么，然后：

1.搭建开发环境

jstl.jar

standard.jar

2.建立类包

3.建立数据库

使用内存数据库

总之，此购物车的实现，使用的是MVC设计模式，MVC设计模式的思路就是从jsp--javabean—servlet--jsp页面做显示

流程图：

图一：MVC设计模式的简介

图二：购物系统案例的实现思路：

图三：设计购物车页面

节日正式开始，精彩不容错过。。。。

1.写一个jsp购物页面

 <%  @ page language  =  "  java  "   import  =  "  java.util.*  "   pageEncoding  =  "  UTF-8  "  %> 
 <% 
     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  > 飘叶网上商城 </  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"  > 
     <!--  
    <link rel="stylesheet" type="text/css" href="styles.css">
      --> 
   </  head  > 
  
   <  body  > 
   <  hr  /> 
   <  h2   > 欢迎进入飘叶网上购物商城 </  h2  > 
   <  hr  > 
        <  a   href  ="${pageContext.request.contextPath}/ListBookServlet"  > 进入购物页面 </  a  >   <  br  > 
   </  body  > 
 </  html  > 

2.写一个javabean

 package   cn.itcast.cart.domain;

  public   class   Book
{
      private   String id;
      private  String name; //  书名 
     private  String author; //  作者 
     private   int   price;
    
      public   Book()
    {
          super  ();
          //   TODO Auto-generated constructor stub 
     }
      public  Book(String id, String name, String author,  int   price)
    {
          super  ();
          this .id =  id;
          this .name =  name;
          this .author =  author;
          this .price =  price;
    }
      public   String getId()
    {
          return   id;
    }
      public   void   setId(String id)
    {
          this .id =  id;
    }
      public   String getName()
    {
          return   name;
    }
      public   void   setName(String name)
    {
          this .name =  name;
    }
      public   String getAuthor()
    {
          return   author;
    }
      public   void   setAuthor(String author)
    {
          this .author =  author;
    }
      public   int   getPrice()
    {
          return   price;
    }
      public   void  setPrice( int   price)
    {
          this .price =  price;
    }
    
} 

3.建立DB，用Map集合来模拟数据库

 package   cn.itcast.cart.domain;

  import   java.util.Collection;
  import   java.util.LinkedHashMap;
  import   java.util.Map;

  public   class   DB
{
  //      使用map集合来模拟数据库 
     private   static  Map<String , Book> books= new  LinkedHashMap<String, Book> ();
      static  {
        books.put( "1",  new  Book("1", "《水浒传》", "施耐庵", 48 ));
        books.put( "2",  new  Book("2", "《西游记》", "吴承恩 ", 58 ));
        books.put( "3",  new  Book("3", "《三国演义》", "罗贯中", 78 ));
        books.put( "4",  new  Book("4", "《红楼梦》", "曹雪芹", 28 ));
        books.put( "5",  new  Book("5", "《平凡的世界》", "路遥", 18 ));
    }
  //      获得所有图书
      //   获得所有图书 
     public   static  Collection<Book>  getAll() {
          return   books.values();
    }
    
      //   根据id查找图书 
     public   static   Book find(String id) {
          return   books.get(id);
    }
} 

4.用javabean建立一个购物车对象

 package   cn.itcast.cart.domain;

  public   class   ShoppingcartItem
{
      //  购物车项，每一本书买了多少本，总共多少钱 
     private   Book book;
      private   int   quantity;
      private   int   price;
      public   Book getBook()
    {
          return   book;
    }
      public   void   setBook(Book book)
    {
          this .book =  book;
    }
      public   int   getQuantity()
    {
          return   quantity;
    }
      public   void  setQuantity( int   quantity)
    {
          this .quantity =  quantity;
          this .price= this .book.getPrice()* quantity;
    }
      public   int   getPrice()
    {
          return   price;
    }
      public   void  setPrice( int   price)
    {
          this .price =  price;
    }

} 

购物车—cart

 package   cn.itcast.cart.domain;

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

  //  购物车对象 
 public   class   Shoppingcart
{
      private  Map<String, ShoppingcartItem> items= new  HashMap<String, ShoppingcartItem> ();
      private   int  price; //  总价 
     public  Map<String, ShoppingcartItem>  getItems()
    {
          return   items;
    }
      public   void  setItems(Map<String, ShoppingcartItem>  items)
    {
          this .items =  items;
    }
      public   int   getPrice()
    {
          //  计算总价 
         int  price=0 ;
          for  (ShoppingcartItem item:items.values())
        {
            price += item.getPrice();
        }
          return   price;
    }
      public   void  setPrice( int   price)
    {
          this .price =  price;
    }
} 

5、获得图书商品列表的servlet—ListBookServlet.java

 package   cn.itcast.cart.web.servlet;

  import   java.io.IOException;
  import   java.util.Collection;

  import   javax.servlet.ServletException;
  import   javax.servlet.http.HttpServlet;
  import   javax.servlet.http.HttpServletRequest;
  import   javax.servlet.http.HttpServletResponse;

  import   cn.itcast.cart.domain.Book;
  import   cn.itcast.cart.domain.DB;

  public   class  ListBookServlet  extends   HttpServlet
{
      //  从DB中查询所有的图书 
     public   void   doGet(HttpServletRequest request, HttpServletResponse response)
              throws   ServletException, IOException
    {
          //  查询所有的商品 
        Collection<Book> books =  DB.getAll();
  //          转发给jsp显示 
        request.setAttribute("books" , books);
        request.getRequestDispatcher( "/WEB-INF/pages/listbook.jsp" ).forward(request, response);
    }

      public   void   doPost(HttpServletRequest request, HttpServletResponse response)
              throws   ServletException, IOException
    {
        doGet(request, response);
    }

} 

6.servlet处理完的数据转发到一个展示商品的页面—listbook.jsp

 <%  @ page language  =  "  java  "   import  =  "  java.util.*  "   pageEncoding  =  "  UTF-8  "  %> 
 <%  @taglib prefix  =  "  c  "   uri  =  "  http://java.sun.com/jsp/jstl/core  "   %> 
 <!  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=UTF-8"  > 
 <  title  > 显示所有的商品 </  title  > 
 <  script   type  ="text/javascript"  > 
     function   buy(id){
        window.location   =   "  ${pageContext.request.contextPath}/BuyServlet?id=  "  +  id;
    }
  </  script  > 

 </  head  > 
 <  body   style  ="text-align: center"  > 
     <  h1   > 商品列表 </  h1  > 
     <  table   border  ="1"    width  ="400px"  > 
         <  tr  > 
             <  td  > 图书名称 </  td  > 
             <  td  > 作者 </  td  > 
             <  td  > 价格 </  td  > 
             <  td  > 购买 </  td  > 
         </  tr  > 
         <  c:forEach   var  ="book"   items  ="${requestScope.books}"  > 
             <  tr  > 
             <  td  > ${book.name} </  td  > 
             <  td  > ${book.author} </  td  > 
             <  td  > ${book.price} </  td  > 
             <  td  > 
                 <  input   type  ="button"   value  ="购买"   onclick  ="buy(${book.id})"  /> 
             </  td  > 
         </  tr  > 
         </  c:forEach  > 
     </  table  > 
 </  body  > 
 </  html  > 

7.写一个购买处理的servlet

 package   cn.itcast.cart.web.servlet;

  import   java.io.IOException;
  import   java.util.Map;

  import   javax.servlet.ServletException;
  import   javax.servlet.http.HttpServlet;
  import   javax.servlet.http.HttpServletRequest;
  import   javax.servlet.http.HttpServletResponse;

  import   cn.itcast.cart.domain.Book;
  import   cn.itcast.cart.domain.DB;
  import   cn.itcast.cart.domain.Shoppingcart;
  import   cn.itcast.cart.domain.ShoppingcartItem;

  public   class  BuyServlet  extends   HttpServlet
{

      public   void   doGet(HttpServletRequest request, HttpServletResponse response)
              throws   ServletException, IOException
    {
          //  购买页面
          //  获得图书 
        String id=request.getParameter("id" );
        Book book = DB.find(id);
  //          获得购物车 
        Shoppingcart cart = (Shoppingcart) request.getSession().getAttribute("cart" );
          if (cart== null  ){
              //  首次购物 
            cart= new   Shoppingcart();
            request.getSession().setAttribute( "cart" , cart);
        }
  //          商品放入购物车 
         bookInCart(book,cart);
  //          跳转至购物车页面,是一个请求重定向的页面 
        response.sendRedirect(request.getContextPath()+"/ListCartServlet" );
    }
  //  购物 
     private   void   bookInCart(Book book, Shoppingcart cart)
    {  //  判断是否买过 
        Map<String, ShoppingcartItem> items =  cart.getItems();
        
        ShoppingcartItem item  =  items.get(book.getId());
        
          if (item== null  ){
              //  此书未买过，创建新条目 
            item= new   ShoppingcartItem();
            item.setBook(book);
            item.setQuantity( 1 );
              //  条目存入购物车 
             items.put(book.getId(), item);
        }  else  {
              //  买过数量加1 
            item.setQuantity(item.getQuantity()+1 );
        }
        
    }

      public   void   doPost(HttpServletRequest request, HttpServletResponse response)
              throws   ServletException, IOException
    {
        doGet(request, response);
    }

} 

8.写一个获得购物车数据处理的servlet—ListCartServlet.java

 package   cn.itcast.cart.web.servlet;

  import   java.io.IOException;

  import   javax.servlet.ServletException;
  import   javax.servlet.http.HttpServlet;
  import   javax.servlet.http.HttpServletRequest;
  import   javax.servlet.http.HttpServletResponse;

  public   class  ListCartServlet  extends   HttpServlet
{
    
      //  查看购物车，请求重定向的页面 
     public   void   doGet(HttpServletRequest request, HttpServletResponse response)
              throws   ServletException, IOException
    {
        request.getRequestDispatcher( "/WEB-INF/pages/listcart.jsp" ).forward(request, response);
        
        
        
    }

      public   void   doPost(HttpServletRequest request, HttpServletResponse response)
              throws   ServletException, IOException
    {
        doGet(request, response);
    }

} 

9.购买的东西放入购物车，继而转向购物车展示页面—listcart.jsp

 <%  @ page language  =  "  java  "   contentType  =  "  text/html; charset=UTF-8  "  
    pageEncoding  =  "  UTF-8  "  %> 
     <%  --      只要使用foreach就要导入下面的这句代码  --  %> 
 <%  @taglib prefix  =  "  c  "   uri  =  "  http://java.sun.com/jsp/jstl/core  "  %> 
 <!  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=UTF-8"  > 
 <  title  > 购物车页面 </  title  > 
 <  script   type  ="text/javascript"  > 
     function   change(id,inputObj){
          var   quantity  =  inputObj.value;

          if  (quantity  ==  null   ||   quantity  ==  ""  ) {
            alert(  "  数量不能为空  "  );
            inputObj.value   =   defaultValue;
              return  ;
        }
        
          if  (quantity.match(  /  ^[1-9][0-9]*$  /  )  ==  null  ) {
            alert(  "  数量必须为正整数  "  );
            inputObj.value   =   defaultValue;
              return  ;
        }
        
          if  (parseInt(quantity)  >  999  ) {
            alert(  "  您购买的数量已达到团购标准，请致电800-820-8820  "  );
            inputObj.value   =   defaultValue;
              return  ;
        }
        
        
        window.location  =  "  ${pageContext.request.contextPath}/UpdateServlet?id=  "  +  id  +  "  &quantity=  "  +  quantity;
    }
  </  script  > 

 </  head  > 
 <  body   style  ="text-align: center"  > 
 <  h1  > 我的购物车 </  h1  ><  br  > 
 <  hr  > 
 <  table   border  ="1"   width  ="800px"  > 
     <  tr  > 
         <  td  > 商品名称 </  td  > 
         <  td  > 单价 </  td  > 
         <  td  > 数量 </  td  > 
         <  td  > 小计 </  td  > 
         <  td  > 操作 </  td  > 
     </  tr  > 
 <%  --  map迭代完后都是entry  --  %> 
     <  c:forEach   var  ="entry"   items  ="${cart.items}"  > 
     <  tr  > 
         <  td  > ${entry.value.book.name} </  td  > 
         <  td  > ${entry.value.book.price} </  td  > 
         <  td  > 
             <  input   type  ="text"   value  ="${entry.value.quantity}"    onblur  ="change(${entry.key},this) "   style  =" 40px;"  /> 
         </  td  > 
         <  td  > ${entry.value.price} </  td  > 
         <  td  > 
             <  a   href  ="${pageContext.request.contextPath}/DaleServlet?id=${entry.key }"  > 删除 </  a  > 
         </  td  > 
     </  tr  >     
     </  c:forEach  > 
     <  tr  > 
         <  td  > 
             <  a   href  ="${pageContext.request.contextPath}/clearServlet"  > 清空购物车 </  a  > 
         </  td  > 
         <  td  > 
             <  a   href  ="${pageContext.request.contextPath}/ListBookServlet"  > 继续购物 </  a  > 
         </  td  > 
         <  td  > 
             <  a   href  ="#"  > 下订单 </  a  > 
         </  td  > 
         <  td   colspan  ="2"  > 购物车总价：￥${cart.price}元 </  td  > 
     </  tr  > 
 </  table  > 
 </  body  > 
 </  html  > 

下面就是实现购物车里面的一些操作功能

10.更新购物车，就是修改完数量后，自动更新购物车—UpdateServlet.java

 package   cn.itcast.cart.web.servlet;

  import   java.io.IOException;
  import   java.util.Map;

  import   javax.servlet.ServletException;
  import   javax.servlet.http.HttpServlet;
  import   javax.servlet.http.HttpServletRequest;
  import   javax.servlet.http.HttpServletResponse;

  import   cn.itcast.cart.domain.Shoppingcart;
  import   cn.itcast.cart.domain.ShoppingcartItem;

  public   class  UpdateServlet  extends   HttpServlet
{
      //  更新购物车 
     public   void   doGet(HttpServletRequest request, HttpServletResponse response)
              throws   ServletException, IOException
    {
          //  获得id和quantity 
        String id=request.getParameter("id" );
          int  quantity=Integer.parseInt(request.getParameter("quantity" ));
          //  获得购物车 
        Shoppingcart cart = (Shoppingcart) request.getSession().getAttribute("cart" );
          //   修改数量 
         /*  
        Map<String, ShoppingcartItem> items = cart.getItems();
        
        ShoppingcartItem item = items.get(id);
        
        item.setQuantity(quantity);  */  
        
        cart.getItems().get(id).setQuantity(quantity);
        
          //   跳转至购物车页面 
        response.sendRedirect(request.getContextPath() + "/ListCartServlet" );
    }

        
    

      public   void   doPost(HttpServletRequest request, HttpServletResponse response)
              throws   ServletException, IOException
    {
        doGet(request, response);
    }

} 

11.删除购物车中的单行数据—DaleServlet.java

 package   cn.itcast.cart.web.servlet;

  import   java.io.IOException;

  import   javax.servlet.ServletException;
  import   javax.servlet.http.HttpServlet;
  import   javax.servlet.http.HttpServletRequest;
  import   javax.servlet.http.HttpServletResponse;

  import   cn.itcast.cart.domain.Shoppingcart;

  public   class  DaleServlet  extends   HttpServlet
{

      public   void   doGet(HttpServletRequest request, HttpServletResponse response)
              throws   ServletException, IOException
    {
          //   获得id 
        String id = request.getParameter("id" );
        
          //   获得购物车 
        Shoppingcart cart = (Shoppingcart) request.getSession().getAttribute("cart" );
        
          //  删除条目 
         cart.getItems().remove(id);

          //   跳转至购物车页面 
        response.sendRedirect(request.getContextPath()+"/ListCartServlet" );
    }

      public   void   doPost(HttpServletRequest request, HttpServletResponse response)
              throws   ServletException, IOException
    {
        doGet(request, response);
    }

} 

12.清空购物车—clearServlet.java

 package   cn.itcast.cart.web.servlet;

  import   java.io.IOException;

  import   javax.servlet.ServletException;
  import   javax.servlet.http.HttpServlet;
  import   javax.servlet.http.HttpServletRequest;
  import   javax.servlet.http.HttpServletResponse;

  import   cn.itcast.cart.domain.Shoppingcart;

  public   class  clearServlet  extends   HttpServlet
{

      public   void   doGet(HttpServletRequest request, HttpServletResponse response)
              throws   ServletException, IOException
    {
          //   获得购物车 
        Shoppingcart cart = (Shoppingcart) request.getSession().getAttribute("cart" );
        
          //   清空购物车 
         cart.getItems().clear();
        
          //   跳转至购买页面 
        response.sendRedirect(request.getContextPath()+"/ListBookServlet" );
    }




      public   void   doPost(HttpServletRequest request, HttpServletResponse response)
              throws   ServletException, IOException
    {
        doGet(request, response);
    }

} 

ok,忙碌到半夜，到此结束，下面看看我们的最终效果吧：

--------------------------------------------------------------------------------------------------

-------------------------------------------------------------------------------------------------

嘿嘿，没有美工处理的页面，还行，像那回事吧？

这上面的所有功能都可以实现的哦！

作者： Leo_wl

　　　　

出处： http://www.cnblogs.com/Leo_wl/

　　　　

本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。

版权信息

查看更多关于MVC设计模式《简易商城购物车系统》揭秘的详细内容...

声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://haodehen.cn/did47917