《简易商城购物系统》

来源：互联网发布：mysql 时间戳默认值编辑：程序博客网时间：2024/04/29 06:31

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

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

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

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

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

0 0