《简易商城购物系统》
大家经常去网上够物，对网上所谓的购物车应该不会陌生吧，那么今天我们就用使用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,忙碌到半夜，到此结束，下面看看我们的最终效果吧：
————————————————————————————————–
————————————————————————————————-
嘿嘿，没有美工处理的页面，还行，像那回事吧？
这上面的所有功能都可以实现的哦！
