購物車的實現（三）

實現的方法和邏輯程式碼註釋都有

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
     ]);
   }
 }
?>