購物車實現原理
咱們設計購物車就是一個 Map<Product,Integer>集合,這個Map集合要存儲到session中。javascript
1、將商品添加到購物車css
1.先在頁面上添加一個連接html
2.在AddProductToCartServlet中java
1.先獲得商品的id數據庫
2.從數據庫中經過id將商品查詢出來。服務器
3.將商品添加到購物車session
a.從session中獲取購物車，沒有的話，從新new 出一個jsp
b.判斷商品在購物車中是否存在，若是不存在，數量爲1,若是存在，數量在原基礎上加1ide
c.將購物車從新裝入到session中。函數
問題:咱們的購物使用的是一個HashMap集合，key是惟一的，保證key惟一的方式是經過hashCode與equals方法
因此咱們在使用時，須要將Product類的hashCode與equals方法重寫。
咱們在重寫時，只比較id值就能夠。
重寫代碼：
public class Product implements Serializable {
// id VARCHAR(50) PRIMARY KEY,
// NAME VARCHAR(30),
// price DOUBLE,
// COUNT INT,
// category VARCHAR(20),
// description VARCHAR(200)
private String id;
private String name;
private double price;
private int count;
private String category;
private String description;
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 double getPrice() {
return price;
}
public void setPrice(double price) {
this.price = price;
}
public int getCount() {
return count;
}
public void setCount(int count) {
this.count = count;
}
public String getCategory() {
return category;
}
public void setCategory(String category) {
this.category = category;
}
public String getDescription() {
return description;
}
public void setDescription(String description) {
this.description = description;
}
@Override
public String toString() {
return "Product [id=" + id + ", name=" + name + ", price=" + price
+ ", count=" + count + ", category=" + category
+ ", description=" + description + "]";
}
@Override
public int hashCode() {
final int prime = 31;
int result = 1;
result = prime * result + ((id == null) ? 0 : id.hashCode());
return result;
}
@Override
public boolean equals(Object obj) {
if (this == obj)
return true;
if (obj == null)
return false;
if (getClass() != obj.getClass())
return false;
Product other = (Product) obj;
if (id == null) {
if (other.id != null)
return false;
} else if (!id.equals(other.id))
return false;
return true;
}
}
2、顯示購物車商品
咱們的購物車是存在於session中的。咱們只須要在cart.jsp頁面將session中的cartt這個Map集合獲得，並顯示出來就能夠。
- 對購物車中商品操做
在點擊+或-號時能夠修改購物車中商品的數量
當點擊+或-按鈕時，咱們會調用一個javascript中的函數。changeCount();經過這個函數咱們向服務器發送請求，在服務器端從session中獲取購物車中數據，並根據提交的數據將購物車中指定的商品數量修改在返回到購物車頁面展現。
Js代碼:
服務器端代碼
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">
<html>
<head>
<title>shop</title>
<link rel="stylesheet" href="css/main.css" type="text/css" />
<script type="text/javascript">
//當點擊+或-號時，會向服務器發送請求，並通知服務器修改哪一個商品及數量是多少
function changeCount(id, count, totalCount) {
//將字符串轉換成數字
count = parseInt(count);
totalCount = parseInt(totalCount);
//確認刪除功能
if (count <= 0) {
var flag = window.confirm("確認刪除嗎");
if (!flag) { //取消時，直接讓程序結束
document.getElementById(id).value = 1;
count = 1;
} else {
count = 0;
}
}
//控制購買數量不能大於庫存
if (count > totalCount) {
alert("最大購買數量爲" + totalCount);
document.getElementById(id).value = totalCount;
count = totalCount;
//return;
}
location.href = "${pageContext.request.contextPath}/changeCartCount?id="
+ id + "&count=" + count;
}
</script>
</head>
<body class="main">
<div id="divpagecontent">
<table width="100%" border="0" cellspacing="0">
<tr>
<td><div style="text-align:right; margin:5px 10px 5px 0px">
<a href="index.html">首頁</a> > 購物車
</div>
<table cellspacing="0" class="infocontent">
<tr>
<td><img src="ad/page_ad.jpg" width="666" height="89" />
<table width="100%" border="0" cellspacing="0">
<tr>
<td><img src="images/buy1.gif" width="635" height="38" />
</td>
</tr>
<tr>
<td>
<table cellspacing="1" class="carttable">
<tr>
<td width="25%">序號</td>
<td width="15%">商品名稱</td>
<td width="10%">價格</td>
<td width="20%"> 數量</td>
<td width="10%">庫存</td>
<td width="10%">小計</td>
<td width="10%">取消</td>
</tr>
</table> <c:forEach items="${cart}" var="entry">
<table width="100%" border="0" cellspacing="0">
<tr>
<td width="25%">${entry.key.id}</td>
<td width="15%">${entry.key.name}</td>
<td width="10%">${entry.key.price }</td>
<td width="20%"><input type="button" value='-'
style="width:20px"
onclick="changeCount('${entry.key.id}','${entry.value-1}','${entry.key.count}')">
<input name="text" type="text" value="${entry.value}"
id="${entry.key.id}" style="width:40px;text-align:center"
onblur="changeCount('${entry.key.id}',this.value,'${entry.key.count}')" />
<input type="button" value='+' style="width:20px"
onclick="changeCount('${entry.key.id}','${entry.value+1}','${entry.key.count}')">
</td>
<td width="10%">${entry.key.count }</td>
<td width="10%">${entry.key.price*entry.value}</td>
<td width="10%"><a href="javascript:void(0);"
style="color:#FF0000; font-weight:bold"
onclick="changeCount('${entry.key.id}','0','${entry.key.count}')">X</a>
</td>
</tr>
</table>
</c:forEach>
<table cellspacing="1" class="carttable">
<tr>
<td style="text-align:right; padding-right:40px;"><font
style="color:#FF6600; font-weight:bold">合計： 元</font>
</td>
</tr>
</table>
<div style="text-align:right; margin-top:10px">
<a
href="${pageContext.request.contextPath}/listProductByPage"><img
src="images/gwc_jx.gif" border="0" /> </a>
<a href="#"><img
src="images/gwc_buy.gif" border="0" /> </a>
</div></td>
</tr>
</table></td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<jsp:include page="foot.jsp" />
</body>
</html>
servlet
public class AddProductToCartServlet extends HttpServlet {
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
doPost(request, response);
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/html;charset=utf-8");
// 1.獲得id
String id = request.getParameter("id");
// 2.調用service中的根據id查詢商品的方法
ProductService service = new ProductService();
try {
Product p = service.findProductById(id);
// 3.將商品添加到購物車
// 3.1 從session中獲取購物車
Map<Product, Integer> cart = (Map<Product, Integer>) request
.getSession().getAttribute("cart");
int count = 1; // 默認數據是1
if (cart == null) { // 表明第一次購物，尚未購物車
cart = new HashMap<Product, Integer>();
} else {
// 有購物車，須要考慮在購物車中有這個商品
Integer c = cart.get(p);
if (c != null) { // 說明購物車中有這個商品了
count = c + 1;
}
}
cart.put(p, count); // 將商品添加到了購物車.
// 4.將購物車存儲到session中。
request.getSession().setAttribute("cart", cart);
response.getWriter()
.write("<a href='" + request.getContextPath()
+ "/listProductByPage'>繼續購物</a>,<a href='"
+ request.getContextPath() + "/cart.jsp'>查看購物車</a>");
} catch (SQLException e) {
e.printStackTrace();
}
}
}
service
public class ProductService {
ProductDao dao = new ProductDao();
// 添加商品
public void addProduct(Product p) throws ProductException {
try {
dao.addProduct(p);
} catch (SQLException e) {
e.printStackTrace();
throw new ProductException("添加商品失敗");
}
}
// 查詢全部商品
public List<Product> findAll() throws SQLException {
return dao.findAll();
}
// 根據id查詢商品
public Product findProductById(String id) throws SQLException {
return dao.findProductById(id);
}
// 修改商品
public void editProduct(Product p) throws SQLException {
dao.editProduct(p);
}
// 刪除選中
public void delSelectById(String[] ids) throws SQLException {
dao.delSelectById(ids);
}
public List<Product> findByCondition(String id, String category,
String name, String minPrice, String maxPrice) throws SQLException {
return dao.findByCondition(id, category, name, minPrice, maxPrice);
}
// 分頁顯示數據
// currentCount 每頁條數
// currentPage 當前頁
public PageBean findByPage(int currentCount, int currentPage)
throws SQLException {
// 1.求出總條數
int totalCount = dao.findAllCount();
// 2.求出總頁數
int totalPage = (int) Math.ceil(1.0 * totalCount / currentCount);
// 3.求出當前頁的數據
List<Product> ps = dao.findByPage(currentCount, currentPage);
PageBean bean = new PageBean();
bean.setTotalCount(totalCount);
bean.setTotalPage(totalPage);
bean.setCurrentCount(currentCount);
bean.setCurrentPage(currentPage);
bean.setPs(ps);
return bean;
}
}