Day16:16 - 购物车服务(4) - 前端 - 购物车数量增减、删除

হ্যালো，我是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！