হ্যালো，我是Charlie！
在Day15當中我們完成了後端的購物車數量增減跟刪除，而今天我們將完成前端的購物車數量增減跟刪除。

================================◉‿◉=================================

首先是購物車數量的部分，先在header.vue當中的cart區塊，新增@change方法：

<b-form-spinbutton id="product_id_spin" v-model="item.amount" min="1" max="100" @change="fixAmount(item.id)"></b-form-spinbutton>

接著先在apis\cart.js當中新增fixAmount方法：

export function fixCartData(data,token){
   return axios.put(`http://${host()}:${port()}/usercart`,data,{
     headers:{
       "AUTHORIZATION":token
     }
   })
}

然後在header.vue當中引入，並新增fixAmount：

import { getCartData,fixCartData } from '@/apis/cart.js'

fixAmount(cid){
  var username = window.localStorage.getItem('username')
  var token = window.localStorage.getItem('token')
  var record = {}
  this.carts.forEach((item) => {
    if(item.id == cid){
      record = item
    }
  })
  var data = {
    "username":username,
    "pid":record.product.id,
    "amount":record.amount
  }
  fixCartData(data,token).then((response) => {
    if(response.data.code == STATUS_OK){
      this.$bvToast.toast("修改數量成功",{
        title: '購物車訊息',
        autoHideDelay: 5000,
        appendToast: true
      })
    }else{
      this.$bvToast.toast(response.data.data,{
        title:"購物車訊息",
        autoHideDelay:5000,
        appendToast: true
      })
    }
  })
 },

這裡有個新成員是bvToast，這個是bootstrap-vue當中的toast訊息，會在右方顯示，其中傳入的文字是toast裡面的訊息，title是toast的標題，autoHideDelay是隱藏的時間，appendToast則是是否新增另外一個toast在下方。

效果如下：

接著是刪除方法，一樣在b-button當中新增@click方法：

<b-button variant="danger" @click="deleteCart(item.id)">
	刪除
</b-button>

接著在apis\cart.js當中新增api接口：

export function deleteCartData(cid,token){
   return axios.delete(`http://${host()}:${port()}/usercart/${cid}`,data,{
     headers:{
       "AUTHORIZATION":token
     }
   })
}

接著在header.vue當中新增deleteCart方法，這裡是傳入cid的部分：

deleteCart(cid){
	var token = window.localStorage.getItem("token")
	deleteCartData(cid,token).then((response) => {
	  if(response.data.code == STATUS_OK){
	    this.carts.forEach((item,index) => {
	      if(item.id == cid){
	        this.carts.splice(index,1)
	      }
	    })
	    this.$bvToast.toast("刪除成功",{
	      title:"購物車訊息",
	      autoHideDelay:5000,
	      appendToast:true
	    })
	  }else{
	    this.$bvToast.toast(response.data.data,{
	      title:"購物車訊息",
	      autoHideDelay:5000,
	      appendToast:true
	    })
	  }
	})
},

如果測試成功的話，下次再點開購物車的時候就會發現商品已經刪除。

================================◉‿◉=================================

Day16結束了！在今天我們完成了前端的購物車商品增減跟刪除，而明天我們將完成後端的結帳、商品顯示API，See ya next Day！