專案概述
前面的時候我寫過一個商品瀏記錄的小例子,這一次我們使用實現購物車效果。前面的例子是:
http://blog.csdn.net/erlian1992/article/details/52047258。這一次在此基礎上來採用的是MVC三層模型實現
(JSP Servlet dao)來實現這個小專案。
三層架構:
JSP檢視層
Servlet控制層
dao模型層
DB資料庫層
編碼實現:
首先先來資料庫指令碼items.sql:
/* Navicat MySQL Data Transfer Source Server : MySQL50 Source Server Version : 50067 Source Host : localhost:3306 Source Database : shopping Target Server Type : MYSQL Target Server Version : 50067 File Encoding : 65001 Date: 2016-08-01 12:12:31 */ SET FOREIGN_KEY_CHECKS=0; -- ---------------------------- -- Table structure for items -- ---------------------------- DROP TABLE IF EXISTS `items`; CREATE TABLE `items` ( `id` int(11) NOT NULL auto_increment, `name` varchar(50) default NULL, `city` varchar(50) default NULL, `price` int(11) default NULL, `number` int(11) default NULL, `picture` varchar(500) default NULL, PRIMARY KEY (`id`) ) ENGINE=InnoDB AUTO_INCREMENT=11 DEFAULT CHARSET=utf8; -- ---------------------------- -- Records of items -- ---------------------------- INSERT INTO `items` VALUES ('1', '沃特籃球鞋', '佛山', '180', '500', '001.jpg'); INSERT INTO `items` VALUES ('2', '安踏運動鞋', '福州', '120', '800', '002.jpg'); INSERT INTO `items` VALUES ('3', '耐克運動鞋', '廣州', '500', '1000', '003.jpg'); INSERT INTO `items` VALUES ('4', '阿迪達斯T血衫', '上海', '388', '600', '004.jpg'); INSERT INTO `items` VALUES ('5', '李寧文化衫', '廣州', '180', '900', '005.jpg'); INSERT INTO `items` VALUES ('6', '小米3', '北京', '1999', '3000', '006.jpg'); INSERT INTO `items` VALUES ('7', '小米2S', '北京', '1299', '1000', '007.jpg'); INSERT INTO `items` VALUES ('8', 'thinkpad筆記本', '北京', '6999', '500', '008.jpg'); INSERT INTO `items` VALUES ('9', 'dell筆記本', '北京', '3999', '500', '009.jpg'); INSERT INTO `items` VALUES ('10', 'ipad5', '北京', '5999', '500', '010.jpg');
我們再來連線MySQL資料庫工具類DBHelper:
package com.util; import java.sql.Connection; import java.sql.DriverManager; /** * 連線MySQL資料庫工具類 * @author Administrator * @date 2016年08月01日 */ public class DBHelper { //資料庫驅動 private static final String driver = "com.mysql.jdbc.Driver"; //連線資料庫的URL地址 private static final String url="jdbc:mysql://localhost:3306/shopping?useUnicode=true&characterEncoding=UTF-8"; //資料庫的使用者名稱 private static final String username="root"; //資料庫的密碼 private static final String password="root"; //Connection連線物件conn private static Connection conn=null; //靜態程式碼塊負責載入驅動 static { try{ Class.forName(driver); }catch(Exception e){ e.printStackTrace(); } } //單例模式返回資料庫連線物件 public static Connection getConnection() throws Exception{ if(conn==null){ conn = DriverManager.getConnection(url, username, password); return conn; }else{ return conn; } } public static void main(String[] args) { //測試資料庫是否連線正常 try{ Connection conn = DBHelper.getConnection(); if(conn!=null){ System.out.println("資料庫連線正常!"); }else{ System.out.println("資料庫連線異常!"); } }catch(Exception e){ e.printStackTrace(); } } }
再來建立兩個實體類,一個是對應items資料表的Items.java
package com.entity; /** * 商品實體類 * @author Administrator * @date 2016年08月01日 */ public class Items { private int id; // 商品編號 private String name; // 商品名稱 private String city; // 產地 private int price; // 價格 private int number; // 庫存 private String picture; // 商品圖片 //保留此不帶引數的構造方法 public Items(){ } //不帶引數的構造方法 public Items(int id,String name,String city,int price,int number,String picture){ this.id = id; this.name = name; this.city = city; this.picture = picture; this.price = price; this.number = number; } public int getId() { return id; } public void setId(int id) { this.id = id; } public String getName() { return name; } public void setName(String name) { this.name = name; } public String getCity() { return city; } public void setCity(String city) { this.city = city; } public int getPrice() { return price; } public void setPrice(int price) { this.price = price; } public int getNumber() { return number; } public void setNumber(int number) { this.number = number; } public String getPicture() { return picture; } public void setPicture(String picture) { this.picture = picture; } @Override public int hashCode() { return this.getId() this.getName().hashCode(); } @Override public boolean equals(Object obj) { if(this==obj){ return true; } if(obj instanceof Items){ Items i = (Items)obj; if(this.getId()==i.getId()&&this.getName().equals(i.getName())){ return true; }else{ return false; } }else{ return false; } } @Override public String toString(){ return "商品編號:" this.getId() ",商品名稱:" this.getName(); } }
一個是Cart.java
package com.entity; import java.util.HashMap; import java.util.Iterator; import java.util.Map; import java.util.Set; /** * 購物車實體類(新增、刪除和計算價格) * @author Administrator * @date 2016年08月01日 */ public class Cart { //購買商品的集合 private HashMap<Items,Integer> goods; //購物車的總金額 private double totalPrice; //構造方法 public Cart(){ goods = new HashMap<Items,Integer>(); totalPrice = 0.0; } public HashMap<Items, Integer> getGoods() { return goods; } public void setGoods(HashMap<Items, Integer> goods) { this.goods = goods; } public double getTotalPrice() { return totalPrice; } public void setTotalPrice(double totalPrice) { this.totalPrice = totalPrice; } //新增商品進購物車的方法 public boolean addGoodsInCart(Items item ,int number){ if(goods.containsKey(item)){ goods.put(item, goods.get(item) number); }else{ goods.put(item, number); } calTotalPrice(); //重新計算購物車的總金額 return true; } //刪除商品的方法 public boolean removeGoodsFromCart(Items item){ goods.remove(item); calTotalPrice(); //重新計算購物車的總金額 return true; } //統計購物車的總金額 public double calTotalPrice(){ double sum = 0.0; Set<Items> keys = goods.keySet(); //獲得鍵的集合 Iterator<Items> it = keys.iterator(); //獲得迭代器物件 while(it.hasNext()){ Items i = it.next(); sum = i.getPrice()* goods.get(i); } this.setTotalPrice(sum); //設定購物車的總金額 return this.getTotalPrice(); } public static void main(String[] args) { //先建立兩個商品物件 Items i1 = new Items(1,"沃特籃球鞋","溫州",200,500,"001.jpg"); Items i2 = new Items(2,"李寧運動鞋","廣州",300,500,"002.jpg"); Items i3 = new Items(1,"沃特籃球鞋","溫州",200,500,"001.jpg"); Cart cart = new Cart(); cart.addGoodsInCart(i1, 1); cart.addGoodsInCart(i2, 2); //再次購買沃特籃球鞋,購買3雙 cart.addGoodsInCart(i3, 3); //遍歷購物車商品的集合 Set<Map.Entry<Items, Integer>> items= cart.getGoods().entrySet(); for(Map.Entry<Items, Integer> obj:items){ System.out.println(obj); } System.out.println("購物車的總金額:" cart.getTotalPrice()); } }
接下來是dao層ItemsDAO.java
package com.dao; import java.sql.Connection; import java.sql.PreparedStatement; import java.sql.ResultSet; import java.util.ArrayList; import com.util.DBHelper; import com.entity.Items; /** * 商品的業務邏輯類 * @author Administrator * @date 2016年08月01日 */ public class ItemsDAO { // 獲得所有的商品資訊 public ArrayList<Items> getAllItems() { Connection conn = null;//資料庫連線物件 PreparedStatement stmt = null;//SQL語句物件 ResultSet rs = null;//資料集物件 ArrayList<Items> list = new ArrayList<Items>(); // 商品集合 try { conn = DBHelper.getConnection(); String sql = "select * from items;"; // 查詢SQL語句 stmt = conn.prepareStatement(sql); rs = stmt.executeQuery();//獲取資料集 while (rs.next()) { Items item = new Items(); item.setId(rs.getInt("id")); item.setName(rs.getString("name")); item.setCity(rs.getString("city")); item.setNumber(rs.getInt("number")); item.setPrice(rs.getInt("price")); item.setPicture(rs.getString("picture")); list.add(item);// 把一個商品加入集合 } return list; // 返回集合。 } catch (Exception e) { e.printStackTrace(); return null; } finally { // 釋放資料集物件 if (rs != null) { try { rs.close(); rs = null; } catch (Exception e) { e.printStackTrace(); } } // 釋放SQL語句物件 if (stmt != null) { try { stmt.close(); stmt = null; } catch (Exception e) { e.printStackTrace(); } } } } // 根據商品編號ID獲得商品詳細資料 public Items getItemsById(int id) { Connection conn = null; PreparedStatement stmt = null; ResultSet rs = null; try { conn = DBHelper.getConnection(); String sql = "select * from items where id=?;"; // SQL查詢語句 stmt = conn.prepareStatement(sql); //把id的值賦給SQL查詢語句中第一個問號 stmt.setInt(1, id); rs = stmt.executeQuery(); if (rs.next()) { Items item = new Items(); item.setId(rs.getInt("id")); item.setName(rs.getString("name")); item.setCity(rs.getString("city")); item.setNumber(rs.getInt("number")); item.setPrice(rs.getInt("price")); item.setPicture(rs.getString("picture")); return item; } else { return null; } } catch (Exception e) { e.printStackTrace(); return null; } finally { // 釋放資料集物件 if (rs != null) { try { rs.close(); rs = null; } catch (Exception e) { e.printStackTrace(); } } // 釋放語句物件 if (stmt != null) { try { stmt.close(); stmt = null; } catch (Exception e) { e.printStackTrace(); } } } } //獲取最近瀏覽的前五條商品資訊 public ArrayList<Items> getViewList(String list){ System.out.println("list:" list); ArrayList<Items> itemlist = new ArrayList<Items>(); int iCount=5; //每次返回前五條記錄 if(list!=null&&list.length()>0){ String[] arr = list.split(","); System.out.println("arr.length=" arr.length); //如果商品記錄大於等於5條 if(arr.length>=5){ for(int i=arr.length-1;i>=arr.length-iCount;i--){ itemlist.add(getItemsById(Integer.parseInt(arr[i]))); } }else{ for(int i=arr.length-1;i>=0;i--){ itemlist.add(getItemsById(Integer.parseInt(arr[i]))); } } return itemlist; }else{ return null; } } }
最後是Servlet控制層中的CartServlet:
package com.servlet; import java.io.IOException; import javax.servlet.ServletConfig; import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import com.dao.ItemsDAO; import com.entity.Cart; import com.entity.Items; /** * Servlet implementation class CarServlet */ @WebServlet(name="CartServlet" ,urlPatterns={"/CartServlet"}) public class CartServlet extends HttpServlet { private static final long serialVersionUID = 1L; private String action;//表示購物車動作:add,show,delete private ItemsDAO idao = new ItemsDAO();//商品業務邏輯類物件 /** * @see HttpServlet#HttpServlet() */ public CartServlet() { super(); // TODO Auto-generated constructor stub } /** * @see Servlet#init(ServletConfig) */ public void init(ServletConfig config) throws ServletException { // TODO Auto-generated method stub } /** * @see Servlet#destroy() */ public void destroy() { // TODO Auto-generated method stub } /** * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response) */ protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { // TODO Auto-generated method stub doPost(request, response); } /** * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response) */ protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { // TODO Auto-generated method stub response.setContentType("text/html;charset=UTF-8"); //PrintWriter out = response.getWriter(); if(request.getParameter("action")!=null){ this.action = request.getParameter("action"); //新增商品進購物車 if(action.equals("add")) { if(addToCart(request,response)){ request.getRequestDispatcher("/success.jsp").forward(request, response); }else{ request.getRequestDispatcher("/failure.jsp").forward(request, response); } } //顯示購物車 if(action.equals("show")){ request.getRequestDispatcher("/cart.jsp").forward(request, response); } //如果是執行刪除購物車中的商品 if(action.equals("delete")) { if(deleteFromCart(request,response)){ request.getRequestDispatcher("/cart.jsp").forward(request, response); }else{ request.getRequestDispatcher("/cart.jsp").forward(request, response); } } } } //新增商品進購物車的方法 private boolean addToCart(HttpServletRequest request, HttpServletResponse response){ String id = request.getParameter("id"); String number = request.getParameter("num"); Items item = idao.getItemsById(Integer.parseInt(id)); //是否是第一次給購物車新增商品,需要給session中建立一個新的購物車物件 if(request.getSession().getAttribute("cart") == null){ Cart cart = new Cart(); request.getSession().setAttribute("cart",cart); } //不是第一次新增進購物車 Cart cart = (Cart)request.getSession().getAttribute("cart"); if(cart.addGoodsInCart(item, Integer.parseInt(number))){ return true; }else{ return false; } } //從購物車中刪除商品 private boolean deleteFromCart(HttpServletRequest request, HttpServletResponse response){ String id = request.getParameter("id"); Cart cart = (Cart)request.getSession().getAttribute("cart"); Items item = idao.getItemsById(Integer.parseInt(id)); if(cart.removeGoodsFromCart(item)){ return true; }else{ return false; } } }
再來檢視層:
商品列表頁面index.jsp
<%@page import="com.entity.Items"%> <%@page import="com.dao.ItemsDAO"%> <%@page import="java.util.ArrayList"%> <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!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> <style type="text/css"> hr{ border-color:FF7F00; } div{ float:left; margin: 10px; } div dd{ margin:0px; font-size:10pt; } div dd.dd_name{ color:blue; } div dd.dd_city{ color:#000; } </style> </head> <body> <h1>商品展示</h1> <hr> <center> <table width="750" height="60" cellpadding="0" cellspacing="0" border="0"> <tr> <td> <!-- 商品迴圈開始 --> <% //防止中文亂碼 request.setCharacterEncoding("UTF-8"); ItemsDAO itemsDao = new ItemsDAO(); ArrayList<Items> list = itemsDao.getAllItems(); if(list!=null&&list.size()>0){ for(int i=0;i<list.size();i ){ Items item = list.get(i); %> <div> <dl> <dt> <a href="details.jsp?id=<%=item.getId()%>"> <img src="images/<%=item.getPicture()%>" width="120" height="90" border="1"/> </a> </dt> <dd class="dd_name"><%=item.getName() %></dd> <dd class="dd_city">產地:<%=item.getCity() %> 價格:¥ <%=item.getPrice() %></dd> </dl> </div> <!-- 商品迴圈結束 --> <% } } %> </td> </tr> </table> </center> </body> </html>
商品詳情頁面details.jsp
<%@page import="java.util.ArrayList"%> <%@ page import="com.entity.Items"%> <%@ page import="com.dao.ItemsDAO"%> <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); %> <!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> <link href="css/main.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="js/lhgcore.js"></script> <script type="text/javascript" src="js/lhgdialog.js"></script> <script type="text/javascript"> function selflog_show(id){ var num = document.getElementById("number").value; J.dialog.get({id: 'haoyue_creat',title: '購物成功',width: 600,height:400, link: '<%=path%>/CartServlet?id=' id '&num=' num '&action=add', cover:true}); } //商品數量增加 function add() { var num = parseInt(document.getElementById("number").value); if (num < 100) { document.getElementById("number").value = num; } } //商品數量減少 function sub() { var num = parseInt(document.getElementById("number").value); if (num > 1) { document.getElementById("number").value = --num; } } </script> <style type="text/css"> hr { border-color: FF7F00; } div { float: left; margin-left: 30px; margin-right: 30px; margin-top: 5px; margin-bottom: 5px; } div dd { margin: 0px; font-size: 10pt; } div dd.dd_name { color: blue; } div dd.dd_city { color: #000; } div #cart { margin: 0px auto; text-align: right; } span { padding: 0 2px; border: 1px #c0c0c0 solid; cursor: pointer; } a { text-decoration: none; } </style> </head> <body> <h1>商品詳情</h1> <a href="index.jsp">首頁</a> >> <a href="index.jsp">商品列表</a> <hr> <center> <table width="750" height="60" cellpadding="0" cellspacing="0" border="0"> <tr> <!-- 商品詳情 --> <% ItemsDAO itemDao = new ItemsDAO(); Items item = itemDao.getItemsById(Integer.parseInt(request.getParameter("id"))); if(item != null){ %> <td width="70%" valign="top"> <table> <tr> <td rowspan="4"><img src="images/<%=item.getPicture()%>" width="200" height="160"/></td> </tr> <tr> <td><B><%=item.getName() %></B></td> </tr> <tr> <td>產地:<%=item.getCity()%></td> </tr> <tr> <td>價格:<%=item.getPrice() %>¥</td> </tr> <tr> <td>購買數量: <span id="sub" onclick="sub();">-</span><input type="text" id="number" name="number" value="1" size="2" /><span id="add" onclick="add();"> </span> </td> </tr> </table> <div id="cart"> <img src="images/buy_now.png" /> <a href="javascript:selflog_show(<%=item.getId()%>)"><img src="images/in_cart.png" /></a> <a href="CartServlet?action=show"><img src="images/view_cart.jpg" /></a> </div> </td> <% } %> <% String list =""; //從客戶端獲得Cookies集合 Cookie[] cookies = request.getCookies(); //遍歷這個Cookies集合 if(cookies != null&&cookies.length > 0){ for(Cookie c:cookies){ if(c.getName().equals("ListViewCookie")){ list = c.getValue(); } } } //追加商品編號 list = request.getParameter("id") ","; //如果瀏覽記錄超過1000條,清零. String[] arr = list.split(","); if(arr != null&&arr.length > 0){ if(arr.length>=1000){ list = ""; } } Cookie cookie = new Cookie("ListViewCookie",list); response.addCookie(cookie); %> <!-- 瀏覽過的商品 --> <td width="30%" bgcolor="#EEE" align="center"> <br> <b>您瀏覽過的商品</b><br> <!-- 迴圈開始 --> <% ArrayList<Items> itemlist = itemDao.getViewList(list); if(itemlist!=null&&itemlist.size()>0 ){ System.out.println("itemlist.size=" itemlist.size()); for(Items i:itemlist){ %> <div> <dl> <dt> <a href="details.jsp?id=<%=i.getId()%>"><img src="images/<%=i.getPicture() %>" width="120" height="90" border="1"/></a> </dt> <dd class="dd_name"><%=i.getName() %></dd> <dd class="dd_city">產地:<%=i.getCity() %> 價格:<%=i.getPrice() %> ¥ </dd> </dl> </div> <% } } %> <!-- 迴圈結束 --> </td> </tr> </table> </center> </body> </html>
購買成功頁面success.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!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> </head> <body> <center> <img src="images/add_cart_success.jpg"/> <hr> <% String id = request.getParameter("id"); String num = request.getParameter("num"); %> 您成功購買了<%=num %>件商品編號為<%=id %>的商品 <br> <br> <br> </center> </body> </html>
購買失敗頁面failure.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!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> </head> <body> <center> <img src="images/add_cart_failure.jpg"/> <hr> <br> <br> <br> </center> </body> </html>
購物車頁面cart.jsp
<%@page import="java.util.Iterator"%> <%@page import="java.util.Set"%> <%@page import="com.entity.Items"%> <%@page import="java.util.HashMap"%> <%@page import="com.entity.Cart"%> <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!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> <link type="text/css" rel="stylesheet" href="css/style1.css" /> <script type="text/javascript"> function delcfm() { if (!confirm("確認要刪除?")) { window.event.returnValue = false; } } </script> </head> <body> <h1>我的購物車</h1> <a href="index.jsp">首頁</a> >> <a href="index.jsp">商品列表</a> <hr> <div id="shopping"> <form action="#" method="post"> <table> <tr> <th>商品名稱</th> <th>商品單價</th> <th>商品價格</th> <th>購買數量</th> <th>操作</th> </tr> <% //首先判斷session中是否有購物車物件 if(request.getSession().getAttribute("cart")!=null){ %> <!-- 迴圈的開始 --> <% Cart cart = (Cart)request.getSession().getAttribute("cart"); HashMap<Items,Integer> goods = cart.getGoods(); Set<Items> items = goods.keySet(); Iterator<Items> it = items.iterator(); while(it.hasNext()){ Items i = it.next(); %> <tr name="products" id="product_id_1"> <td class="thumb"> <img src="images/<%=i.getPicture()%>" /> <a href=""><%=i.getName()%></a> </td> <td class="number"><%=i.getPrice() %></td> <td class="price" id="price_id_1"> <span><%=i.getPrice()*goods.get(i) %></span> <input type="hidden" value="" /> </td> <td class="number"><%=goods.get(i)%></td> <td class="delete"><a href="CartServlet?action=delete&id=<%=i.getId()%>" onclick="delcfm();">刪除</a></td> </tr> <% } %> <!--迴圈的結束--> </table> <div class="total"> <span id="total">總計:<%=cart.getTotalPrice() %>¥</span> </div> <% } %> <div class="button"> <input type="submit" value="" /> </div> </form> </div> </body> </html>
專案執行結果:
商品列表:
選擇一個商品進入商品詳情:
選擇好數量,加入到購物車中:
檢視購物車:
針對很多人要原始碼,我把原始碼上傳了到CSDN上,大家自己下載,工作了有時候回覆不及時。本來想要直接分
享的,可是最低需要設定一個積分,沒辦法,以後程式碼會放在GITHUB上。
地址:https://download.csdn.net/download/erlian1992/10393969
写评论
很抱歉,必須登入網站才能發佈留言。