图书商城_day4遇到的难点
文章目录
- 将商品添加到购物车
将商品添加到购物车
我希望最后实现的界面是如下的界面:
其中购买数量中的两个按钮(变化值为1，点击’-‘，是减1，如果点击’+'，那么是加1），可以修改中间文本框的购买数量，然后同时将小计进行修改。与此同时，如果我们直接来修改中间的文本框的数量，那么也会更新小计。所以关键是怎么处理这个呢？
- 首先，我们定义了一个Cart类，表示我们的购买商品，其中在这个类中，存在着购买的商品Book,以及购买的数量count。对应的代码为:
package entity;
public class Cart {
private Book book; //购物图书
private int count;//购买的数量
public Cart() {
}
public Cart(Book book, int count){
this.book = book;
this.count = count;
}
public Book getBook() {
return book;
}
public void setBook(Book book) {
this.book = book;
}
public int getCount() {
return count;
}
public void setCount(int count) {
this.count = count;
}
@Override
public String toString() {
return "Cart{" +
"book=" + book +
", count=" + count +
'}';
}
//获取总计，即book.price * count
public double getTotal(){
if(this.book == null){
throw new RuntimeException("没有购买图书");
}
return this.book.getPrice() * this.count;
}
}
- 其次，我们定义一个CartList类，表示我们的购物车，其中在这个类中，定义了一个哈希表，表示我们的Cart,但是由于HashMap是无序的，即添加的顺序和在哈希表中的顺序是不一致的，因此为了维持两者的一致，那么我们需要使用的是LinkedHashMap.然后再这个类中，我们需要定义添加购物商品的数量，减少购物商品数量等方法。
package dao;
import entity.Cart;
import java.util.Collection;
import java.util.HashMap;
import java.util.LinkedHashMap;
import java.util.List;
/*
购物车:
用于对购买的商品进行增删改查操作
其中当用户登录之后，就会分配有一个购物车，所以我们再用户登录之后，
就给这个session添加一个购物车，也即CatrItems,然后调用相应的
方法进行相关的操作
*/
public class CartList {
/*
因为HashMap是根据哈希码来进行插入的，所以这时候添加商品的顺序和再map中的顺序
是不一样的，因此为了保证两者一致，那么需要使用的是LinkedHashMap
*/
private HashMap<Integer,Cart> cartItems = new LinkedHashMap<>();//键表示购买的图书id，Cart表示购买的图书以及购买数量
public HashMap<Integer,Cart> getCartItems(){
return cartItems;
}
//添加购物车(这个商品已经存在了)
public void addItem(int id,int count){
Cart old_cart = cartItems.get(id);
old_cart.setCount(old_cart.getCount() + count);
}
//添加购物车(如果没有存在id这个cart的话，那么直接将当前的cart添加)
public void addItem(int id,Cart cart){
cartItems.put(id,cart);
}
//将购物车中的某一个商品数量减一
public void subItem(int id,int num){
//判断是否存在这个商品
if(cartItems.containsKey(id)){
//如果购买了这个商品,比较购买数量和减少数量
Cart old_cart = cartItems.get(id);
int count = old_cart.getCount();
if(count > num){
count -= num;
old_cart.setCount(count);
cartItems.put(id,old_cart);
}else{
throw new RuntimeException("购买的商品数量小于等于减少数量，无法减少商品");
}
}else{
throw new RuntimeException("没有购买这个商品，无法减少该商品购买数量");
}
}
//清空购物车
public void clearItems(){
cartItems.clear();
}
//获取购物车的总计
public double getTotla(){
double total = 0;//购物车中所有商品的总计
for(Cart cartItem : cartItems.values()){
total += cartItem.getTotal();//单个商品的小计
}
return total;
}
public int getSize(){
//获取购物车的元素个数
return cartItems.size();
}
//设置某件商品的属性(利用修改文本框中的数量的时候，需要利用这个方法来更新商品)
public void setItem(int id,int count){
//获取这件商品的id
if(cartItems.containsKey(id)){
Cart old_cart = cartItems.get(id);
old_cart.setCount(count);
}else{
throw new RuntimeException("购物车中不存在这个商品，无法修改商品数量");
}
}
}
- 我们定义一个CartServlet，用于和前台的交互，对应的代码
package web.servlets;
import dao.CartList;
import entity.Book;
import entity.Cart;
import service.BookService;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.sql.SQLException;
import java.util.HashMap;
public class CartServlet extends BaseServlet {
private BookService service = new BookService();
//添加商品的数量(点击'+'来增加的)
public String addItem(HttpServletRequest request, HttpServletResponse response){
//获取当前用户登录的cartList对象,否则，如果是新建的话，那么就会导致当前用户的购物车一直为空
CartList cartList = (CartList)(request.getSession().getAttribute("cartList"));
//获取添加的商品对应的id
String value = request.getParameter("id");
if(value == null){
throw new RuntimeException("添加商品到购物车时没有传递参数id");
}
int id = Integer.parseInt(value);
//添加的数量
value = request.getParameter("count");
int count = 1;//如果没有传递参数count，那么默认是1
if(value != null){
//传递了count，那么就需要进行更新count
count = Integer.parseInt(request.getParameter("count"));
}
HashMap<Integer, Cart> cartItems = cartList.getCartItems();
if(cartItems.containsKey(id)){
cartList.addItem(id,count);
}else{
//获取这个id对应的图书
try {
Book book = service.queryById(id);
cartList.addItem(id,new Cart(book,count));
} catch (IOException e) {
e.printStackTrace();
} catch (SQLException e) {
e.printStackTrace();
}
}
//添加完毕之后，来到cart.jsp中
return "d:/jsps/cart.jsp";
}
//减少商品的数量(点击 '-'来减少的)
public String subItem(HttpServletRequest request, HttpServletResponse response){
//获取当前用户登录的cartList对象,否则，如果是新建的话，那么就会导致当前用户的购物车一直为空
CartList cartList = (CartList)(request.getSession().getAttribute("cartList"));
//获取减少的商品对应的id
String value = request.getParameter("id");
if(value == null){
throw new RuntimeException("减少商品时没有传递参数id");
}
int id = Integer.parseInt(value);
//减少的数量
value = request.getParameter("count");
int count = 1;//如果没有传递参数count，那么默认是1
if(value != null){
count = Integer.parseInt(request.getParameter("count"));
}
cartList.subItem(id,count);
return "d:/jsps/cart.jsp";
}
//直接来修改文本框的值
public String changeItem(HttpServletRequest request,HttpServletResponse response){
//获取当前用户登录的cartList对象,否则，如果是新建的话，那么就会导致当前用户的购物车一直为空
CartList cartList = (CartList)(request.getSession().getAttribute("cartList"));
//获取修改的商品id
String value = request.getParameter("id");
if(value == null){
throw new RuntimeException("减少商品时没有传递参数id");
}
int id = Integer.parseInt(value);
//修改的数量
value = request.getParameter("count");
int count = 1;//如果没有传递参数count，那么默认是1
if(value != null){
count = Integer.parseInt(request.getParameter("count"));
}
System.out.println("changeItem ------------" + id + ", " + count);
cartList.setItem(id,count);
return "d:/jsps/cart.jsp";
}
}
- 前台数据中主要的代码为如下:
html代码
<div id="right">
<c:if test="${not empty sessionScope.cartList and sessionScope.cartList.size > 0}">
<table>
<thead>
<td>商品照片td>
<td>商品名称td>
<td>商品分类td>
<td>商品单价td>
<td>购买数量td>
<td>小计td>
thead>
<c:forEach items="${sessionScope.cartList.cartItems.values()}" var="cart" varStatus="vs">
<tr>
<td><img src="' /images/${cart.book.name}.png'>">td>
<td>${cart.book.name}td>
<td>${cart.book.catagory_name}td>
<td>￥ ${cart.book.price} 元td>
<td>
<input type="button" id="sub_${vs.index}" onclick="subItem(${cart.book.id},${cart.book.price},${vs.index})" value="-">
<input type="text" id="count_${vs.index}" onchange="changeText(${cart.book.id},${cart.book.price},${vs.index})" value="${cart.count}" style="width: 50px;">
<input type="button" id="add_${vs.index}" onclick="addItem(${cart.book.id},${cart.book.price},${vs.index})" value="+">
td>
<td>￥ <span id="subtotal_${vs.index}">${cart.total}span> 元td>
tr>
c:forEach>
table>
c:if>
div>
js代码: