购物车的实现（三）

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

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();

PHP部分

<?php
// 执行连接
function con(){
//1 连接
// @ 警告抑制符
$link = @mysqli_connect('127.0.0.1','root','root','test');
// 判断连接状态,连接失败返回false
//var_dump($link)
if(!$link){
  die('连接失败...');
}
return $link;
}
// 非查询操作
function query($sql){
  // 调用连接的函数
  $link = con();
  $res = mysqli_query( $link,$sql);
  return $res;
}
// 查询操作
function select($sql){
  $link = con();
  $res = mysqli_query($link,$sql);
  //print_r($res);
  // 使用while将数据进行遍历
  $arr = [];
  while($str = mysqli_fetch_assoc($res)){
    $arr[] = $str;
  }
  return $arr;
}
?>

<?php
include('./mysql.php');
$fn = $_GET['fn'];
$fn();

function lst()
{
  $id = $_POST['goodsId'];
  $id = substr($id,0,strlen($id)-1);
  // 一次性获取多条数据
  $sql = "select * from product where id in ($id)";
 // echo $sql;
 $data = select($sql);
 echo json_encode([
  'meta'=>[
    'status'=>200,
    'msg'=>'成功'
  ],
  'data'=>$data
]);
}

?>

<?php
include('./mysql.php');
// 获取访问的方法名称
$fn = $_GET['fn']; 
// add();
$fn();  // add()

 // 查询数据
 function lst(){
   $sql = 'select * from product';
   $res = select($sql);
   if($res){
     echo json_encode([
       "meta"=>[
         "status"=>200,
        "msg"=>"数据获取成功"
       ],
       "data"=>$res
     ]);
   }
 }
?>