文章目录
将商品添加到购物车
我希望最后实现的界面是如下的界面:
其中购买数量中的两个按钮(变化值为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">
<!--如果购物车不为空，并且购物车中的购买商品的元素个数不为0-->
<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">
<!--cartItems是一个哈希表，所以通过values来获取所有的商品-->
<tr>
<td><img src="<c:url value='/images/${cart.book.name}.png'></c:url>"></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代码:
<script type="text/javascript" src="<c:url value="/ajax.js"></c:url>"></script>
<script type="text/javascript">
window.onload = function(){
//加载分类的值
request({
method: "POST",
resource: "/CatagoryServlet",
params: "method=queryCatagories",
returnType: "json",
callback: function (data) {
var left = document.getElementById("left");
left.innerHTML = "";//清空所有的数据，然后添加超链接标签
// var ul = document.createElement("ul");
// ul.style.listStyle = "none";
var li = document.createElement("li");
var a = document.createElement("a");
var text = document.createTextNode("全部分类");
a.appendChild(text);
a.href = "/BookServlet?method=queryAll";
li.appendChild(a);
// ul.appendChild(li);
left.appendChild(li);
for(var i = 0; i < data.length; ++i){
var li = document.createElement("li");
var a = document.createElement("a");
var text = document.createTextNode(data[i].name);
a.appendChild(text);
a.href = "/BookServlet?method=queryByCatagoryId&id="+data[i].id;
li.appendChild(a);
left.appendChild(li);
}
}
})
}
function getSubTotal(index,money) {
var span = document.getElementById("subtotal_" + index);
span.innerHTML = money;
}
function addItem(id,price,index) {
var count_text = document.getElementById("count_" + index);
var num = parseInt(count_text.value) + 1;
count_text.value = num;
request({
method: "POST",
resource: "/CartServlet",
params: "method=addItem&id=" + id + "&count=1"
})
getSubTotal(index,price * num);
}
function subItem(id,price,index){
var count_text = document.getElementById("count_" + index);
var num = parseInt(count_text.value);
if(num > 1){ //如果等于1，不可以再减了
num = num - 1;
count_text.value = num;
request({
method: "POST",
resource: "/CartServlet",
params: "method=subItem&id=" + id + "&count=1"
})
getSubTotal(index,price * num);
}
}
function changeText(id,price,index){
//改变文本框中的值
var count_text = document.getElementById("count_" + index);
/*
注意是将count_index这个文本框的value转成int类型，
否则，如果是parseInt(count)，就会导致num是一个NAN
*/
var num = parseInt(count_text.value);
request({
method: "POST",
resource: "/CartServlet",
params: "method=changeItem&id=" + id + "&count=" + num
})
//因为我们需要根据index来获取到对应的span标签
getSubTotal(index,price * num);
}
</script>
前端代码中关键的地方：
- 首先，因为我们需要每一个表格中都存在‘-’，‘+’这两个按钮，所以我们不可以将button的id为add之类的，所以为了保证维持每一个button的id是唯一的，我们需要利用<c:forEach>标签中的varStatus，这样就可以利用这个属性中的index，来获取遍历元素当前的下标，这样只要在id的后面添加这个index后缀，就可以保证每一个button的id是唯一的。
- 在上面之后，我们的js代码中，如何保证点击的是哪一个button呢？这时候我们就需要给点击事件中传递vs.index，这样就可以保证了我们点击的是哪一个按钮，这样就可以触发对应按钮的点击事件。
- 点击完毕之后，就需要利用ajax来局部更新html，然后再调用getSubTotalb方法，来更新对应的小计
- 但是需要注意的是，我们需要保证我们定义的方法addItem，subItem,changeItem方法不是定义再window.onload的方法里面，否则就会发生报错，提示诸如：
ReferenceError: addItem is not defined at HTMLInputElement.onclick的错误。 - 点击中间文本框的时候，我们需要触发事件，那么我们就需要给这个文本框添加change事件，从而实现实时监听，当我们修改完毕之后，点击除了文本框的任意位置，就会触发事件了，我们可以通过alert来进行验证这个触发事件。
- CartServlet中利用cartList来实现对商品的操作的时候，注意的是，cartList是通过session来取得的，而不是我们直接再CartServlet中直接新建得到的。如果是我们再CartServlet中新建CartList的话，那么就会导致我们并不是在当前的session的购物车中进行操作的，那么重定向之后，再来点击购物车的时候，就会发现购物车的商品一直是0，所以不会显示数据。因此我们需要保证每次操作都是在session中的cartList操作的，那么就需要每次都需要从session中获取cartList。
