家居網購專案實現09
以下皆為部分程式碼,詳見 https://github.com/liyuelian/furniture_mall.git
21.功能20-修改購物車
21.1需求分析/圖解
- 進入購物車頁面,可以修改購買數量
- 更新該商品的金額
- 更新購物車商品數量和總金額
21.2思路分析
21.3程式碼實現
21.3.1entity層
Cart.java
增加方法updateCount()
/**
* 根據家居id和count,修改指定cartItem的數量和總價
*
* @param id 家居id
* @param count 指定id的家居的數量
*/
public void updateCount(int id, int count) {
//獲取指定的cartItem
CartItem item = items.get(id);
if (null != item) {//如果cartItem不為空
//更新數量
item.setCount(count);
//某家居總價 = 單價 * 數量(為了安全使用get方法獲取數量count)
item.setTotalPrice(item.getPrice().multiply(new BigDecimal(item.getCount())));
}
}
21.3.2web層
CartServlet.java
增加方法updateCount()
/**
* 更新購物車的某個家居數量
*
* @param req
* @param resp
* @throws ServletException
* @throws IOException
*/
protected void updateCount(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
int id = DataUtils.parseInt(req.getParameter("id"), 0);
int count = DataUtils.parseInt(req.getParameter("count"), 1);
//獲取session中的購物車
Cart cart = (Cart) req.getSession().getAttribute("cart");
if (null != cart) {
cart.updateCount(id, count);
}
//回到請求更新家居購物車的頁面
resp.sendRedirect(req.getHeader("Referer"));
}
21.3.3前端
cart.jsp
新增繫結事件,當點選修改對應的家居數量時,向伺服器傳送更新家居資訊的請求
<script type="text/javascript">
$(function () {
/*--------------------------
Cart Plus Minus Button
----------------------------*/
var CartPlusMinus = $(".cart-plus-minus");
CartPlusMinus.prepend('<div class="dec qtybutton">-</div>');
CartPlusMinus.append('<div class="inc qtybutton">+</div>');
$(".qtybutton").on("click", function () {
var $button = $(this);
var oldValue = $button.parent().find("input").val();
if ($button.text() === "+") {
var newVal = parseFloat(oldValue) + 1;
} else {
// Don't allow decrementing below zero
if (oldValue > 1) {
var newVal = parseFloat(oldValue) - 1;
} else {
newVal = 1;
}
}
$button.parent().find("input").val(newVal);
var furnId = $button.parent().find("input").attr("furnId");
//發出修改購物車的請求
location.href =
"cartServlet?action=updateCount&count=" + newVal + "&id=" + furnId;
});
})
</script>
21.4完成測試
修改家居數量:
22.功能21-刪除/清空購物車
22.1需求分析/圖解
- 進入購物車,可以刪除某商品
- 可以清空購物車
- 要求該出適當的確認資訊
22.2思路分析
見21.2思路分析圖
22.3程式碼實現
22.3.1entity層
Cart.java新增刪除購物車家居項的方法delItem()
/**
* 根據家居id刪除對應的cartItem
*
* @param id 家居id
*/
public void delItem(int id) {
items.remove(id);
}
增加清空方法clear()
/**
* 清空items
*/
public void clear() {
items.clear();
}
22.3.2web層
CartServlet.java新增方法delItem()
/**
* 根據id刪除購物車的某個家居資訊
*
* @param req
* @param resp
* @throws ServletException
* @throws IOException
*/
protected void delItem(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
int id = DataUtils.parseInt(req.getParameter("id"), 0);
//獲取session中的購物車
Cart cart = (Cart) req.getSession().getAttribute("cart");
if (null != cart) {
cart.delItem(id);
}
//回到請求刪除家居項的購物車頁面
resp.sendRedirect(req.getHeader("Referer"));
}
增加clear()方法
/**
* 清空購物車
*
* @param req
* @param resp
* @throws ServletException
* @throws IOException
*/
protected void clear(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
//獲取session的購物車
Cart cart = (Cart) req.getSession().getAttribute("cart");
if (null != cart) {
cart.clear();
}
//回到請求清空家居項的購物車頁面
resp.sendRedirect(req.getHeader("Referer"));
}
22.3.3前端
cart.jsp
//清空購物車繫結確認事件
$("a.clearCart").click(function () {
return window.confirm("你確認要清空購物車嗎?")
})
//給刪除購物車繫結事件
$("a.delItem").click(function () {
//獲取要刪除的家居名
var furnName = $(this).parent().parent().find("td:eq(1)").text();
//使用確認彈窗
//點選確認,返回true,點選取消,返回false
return window.confirm("你確認要刪除" + furnName + "嗎?")
})
22.4完成測試
刪除購物車項:
清空購物車:
23.功能22-生成訂單
23.1需求分析/圖解
- 進入購物車,點選購物車結賬
- 生成訂單和訂單項
- 如果會員沒有登入,則先進入登入頁面,完成登入後再結賬