购物车的实现（三）

实现的方法和逻辑代码注释都有

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 += `
${goodsName}
¥${price}
            加入购物车
`;
          })
          //追加到页面中去
          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();

PHP部分

[
    'status'=>200,
    'msg'=>'成功'
  ],
  'data'=>$data
]);
}

?>

[
         "status"=>200,
        "msg"=>"数据获取成功"
       ],
       "data"=>$res
     ]);
   }
 }
?>