购物车的实现（二）

淩亂°似流年 2022-12-15 03:48 204阅读 0赞

## 文件目录 ##

![在这里插入图片描述][20201015142036802.png_pic_center]

## 一：封装ajax请求 ##

## 二：商品追加到页面，和添加购物车的实现 ##

class Goods {
      constructor() {
        Goods.list();
      }
      // 获取商品信息的
      // static 静态方法
      // 静态方法只属于某个类
      static list () {
        //发送ajax请求
        axios.get('http://localhost/day1012-27/cart2/server/server.php?fn=lst')
          .then(res => { //res是后台返回的数据
            // console.log(res);
            //将数据转化为对象
            let { meta, data } = JSON.parse(res);
            console.log(meta, data);
            //判断服务器状态
            let html = '';
            if (meta.status == 200) {
              //数据是数组对象 取出需要拼接的数据
              //需要先循环
              data.forEach(ele => {
                let { id, goodsName, goodsImg, price } = ele;
                html += `<div class="box"><img src="${goodsImg}" alt=""><p>${goodsName}</p><span
                class="goods_item_price" data-price-id="100004222715" style="">¥${price}</span><a 
                href="javascript:" id="InitCartUrl" class="btn-special1 btn-lg" onclick="Goods.addCart(${id},1)">
                加入购物车</a></div>`;
              })
              //追加到页面中去
              let cont = document.querySelector('#cont')
              cont.innerHTML = html;
            }
          })
      }
      //添加购物车的方法
      static addCart (id, num) {
        console.log(id, num);
        /*
        购物车逻辑:
        1 判断cart这个key是否存在
        2 存在就判断商品是否存在
           2-1 商品存在增加数量
          2-2 商品不存在则新增
        3 不存在则新增cart
        */
        //取出local中的数据
        let cartGoods = localStorage.getItem('cart');
        // console.log(cartGoods);
        //2 判断商品是否存在
        if (cartGoods) {
          cartGoods = JSON.parse(cartGoods);
          //2 判断商品是否存在
          //循环遍历  for in   遍历对象  这里的attr相当于id
          for (let attr in cartGoods) {
            if (attr == id) {  //2-1商品存在增加数量
              num = num + cartGoods[id];  //cartGoods[id]  是当前点击的id  id是属性 取的是它的值 num没点一次传输一次  都是1
            }//2-2 商品不存在则新增
          }
          cartGoods[id] = num;  //相当于添加一个属性和属性值在 cartGoods对象中
          localStorage.setItem('cart', JSON.stringify(cartGoods))
        } else {
          //3 不存在就新增cart
          cartGoods = { [id]: num };
          console.log(cartGoods);
          //转化为字符串
          cartGoods = JSON.stringify(cartGoods);
          localStorage.setItem('cart', cartGoods);
        }
      }
    }
    new Goods();

[20201015142036802.png_pic_center]: /images/20221123/44df469004af4a91bb564abd20b39eaa.png