终极完美《简易商城购物车系统》揭秘--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="width: 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,忙碌到半夜，到此结束，下面看看我们的最终效果吧：

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

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

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

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

posted @ 2012-10-06 23:56 Andye 阅读(21286) 评论(19) 编辑收藏举报

刷新页面返回顶部