图书商城_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">
        <!--如果购物车不为空,并且购物车中的购买商品的元素个数不为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
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值