实习知识整理8:如何实现将商品加入购物车

情景分析:当我们进入商品详情页面时,一般会有两个按钮,一个是加入购物车,另一个是直接购买的按钮,我们先来看看加入购物车是如何实现的

1. 数据库表分析

需要3个表:商品表item、用户表user、购物车表cart

需要将商品信息item表和用户表绑定,生成购物车信息,同时添加到购物车信息表中

购物车表:(需要向后端传递这些字段信息)

2.  前端页面代码

            
购买数量


实习知识整理8:如何实现将商品加入购物车_第1张图片

1.为按钮添加点击事件,此时需要获取当前页面item的相关信息,以及所购买的数量,同时调用ajax将信息传递到后端 ,前后端的信息都是以json格式

     

 实习知识整理8:如何实现将商品加入购物车_第2张图片

3. 后端接收到数据并进行相应的处理

CartMapper.java

    // 添加商品到购物车
    int addCart(Cart cart);

CartMapper.xml

    
        INSERT INTO cart (USER_ID,ITEM_ID,BUY_COUNT,ITEM_SALE_PRICE,ITEM_NAME)
        VALUES(#{userId},#{itemId},#{buyCount},#{itemSalePrice},#{itemName})
    

CartService.java

    // 添加商品到购物车
    ResultDTO addCart(Cart cart);   // 这边以ResultDTO作为返回的类型

CartServiceImpl.java

     public ResultDTO addCart(Cart cart) {
            ResultDTO addCartResult = new ResultDTO<>();
            int result = cartMapper.addCart(cart);
            
            if (result > 0){
                addCartResult.setMsg("addSuccess");
                addCartResult.setCode(2000);
                // 如果该业务逻辑需要传递数据,可以再处理
            } else {
                addCartResult.setMsg("fail");
                addCartResult.setCode(5000);
            }

        return addCartResult;
    }

CastController.java

    @PostMapping("/addCart")
    @ResponseBody
    ResultDTO addCart(@RequestBody Cart cart) throws Exception{
        return cartService.addCart(cart);
    }

 

 前端再根据返回值提示相应的信息

实习知识整理8:如何实现将商品加入购物车_第3张图片

 

 通过以上的操作已经可以实现向购物车中添加商品的操作了,但是又一个瑕疵的地方:

        比如用上述的方法,如果某一个人再同一家商店购买的商品,购买了两次,购物车中将会出现两条信息。这是不太好的。其实我们可以看看taobao就明白了

 

4. 完善 

解决上述出现的问题

1. 当点击加入购物车按钮后,前台会将userId和itemId等一系列信息传到后台,后台接收到信息后,可以根据 userId和itemId 进行查询 ,通过查询的结果来判断,如果存在则更新,不存在则新增

(1)所以我们需要补两个方法:

CartMapper.java

    // 更新购物车信息
    int updateCart(Cart cart);

    // 根据购物车中用户编号和商品编号查询购物记录是否存在
    Cart selectCartByUserIdAndItemId(Cart cart);

 

CartMapper.xml

    
        UPDATE cart SET BUY_COUNT=#{buyCount} WHERE CART_ID=#{cartId}
    

    

CartService.java

    // 更新购物车信息
    boolean updateCart(Cart cart);

    // 根据购物车中用户编号和商品编号查询购物记录是否存在,
    // 存在则更新操作; 不存在则添加操作
    Cart selectCartByUserIdAndItemId(Cart cart);

 

 CartServiceImpl.java

    @Override
    public boolean updateCart(Cart cart) {
        Cart oldCart = selectCartByUserIdAndItemId(cart); // 将原有的购物车信息查询到
        System.out.println("oldCart:" + oldCart);
        int newBuyCount = cart.getBuyCount() + oldCart.getBuyCount(); // 将原纪录的数量加上新的购物数量
        cart.setBuyCount(newBuyCount); // 重新构造购买数量
        cart.setCartId(oldCart.getCartId()); // 将查询到的购物车的记录编号放入
        int updateResult = cartMapper.updateCart(cart);
        if (updateResult > 0) {
            return true;
        } else {
            return false;
        }
    }

    @Override
    public Cart selectCartByUserIdAndItemId(Cart cart) {
        return cartMapper.selectCartByUserIdAndItemId(cart);
    }

 实习知识整理8:如何实现将商品加入购物车_第4张图片

 

修改addCart()方法

    @Override
    public ResultDTO addCart(Cart cart) {
        ResultDTO addCartResult = new ResultDTO<>();
        Cart oldCartRecord = selectCartByUserIdAndItemId(cart); // 查询该购物记录是否存在
        // 如果同一个用户购买商品同一家的同一类商品,则更新操作
        if (oldCartRecord == null){
            System.out.println("购物车无该商品");
            int result = cartMapper.addCart(cart);
            if (result > 0){
                addCartResult.setMsg("addSuccess");
                addCartResult.setCode(2000);
                // 如果该业务逻辑需要传递数据,可以再处理
            } else {
                addCartResult.setMsg("fail");
                addCartResult.setCode(5000);
            }
        } else {
            boolean updateResult = updateCart(cart);
            if (updateResult) {
                addCartResult.setMsg("updateSuccess");
            } else {
                addCartResult.setMsg("updateFail");
            }
        }

        return addCartResult;
    }

 

前端再进行相应处理

实习知识整理8:如何实现将商品加入购物车_第5张图片

 

你可能感兴趣的:(实习课项目知识整理,jquery,javascript)