使用Vue做一個購物車
這個項目是一個Web項目，沒有進行前後端分離，但是又得做手機端，感覺好像哪裏不對。。。
web框架使用的是SpringMVC，模板框架是FreeMarker，想到以後要做移動端，果斷還是用json來進行數據交互，並沒有用freemarker。網頁靜態文件全部寫好了，放在了springmvc的Views中。按理來說還是進行前後端分離好點的，但是做網頁的沒接觸過Vue，那好吧。。。
於是我就想到在頁面直接引入Vue，可是又是在內網環境開發，只好在自己個人筆記本上下載vue.js再拷貝到內網電腦上進行頁面上的引入。
真正文
首先讓我們看一下靜態頁面的效果圖：
靜態頁面效果圖
簡單說一下這個功能模塊的需求：
-
勾選全選，所有商品全部選中。在取消全選框的時候所有商品取消選擇。
-
點擊單個商品上的加號減號進行數量的增加和減少，右邊小計實時計算出這個商品的價格合計。
-
點擊單個商品上的刪除按鈕將商品從購物車中刪除。
-
底部已選實時顯示已經勾選的商品，右邊合計金額實時顯示所有勾選的商品的小計之和。
(是的，需求看起來不多，但是要結合後臺去做還是需要點功夫的，但是這篇文章我們不牽扯後臺，在前臺造數據)
現在讓我們開始吧
一，創建一個Vue對象，設置好數據。
var cart; //全局Vue對象//通過封裝一個方法來創建Vue對象function createVue(list) { //傳入通過後臺獲取的list
cart = new Vue({
el:‘#cart‘,
data(){ return { list:list //商品列表
}
}
});
}二，假設從後臺請求到數據，然後賦值到Vue對象中
window. = function () { //請求後臺代碼 。。。。
//請求成功後將獲得的list賦值給cart的list
let list = [
{ goodsTitle: "衛龍辣條", //商品名
specifications: "大包", //商品規格
unitPrice: "5", //商品單價
subimage1Filename :"20180317eeftyd.jpg", //商品圖片名
purchaseQuantity: 6 //商品數量
},
{ goodsTitle: "雕牌洗衣粉", specifications: "大包", unitPrice: "13", subimage1Filename: "20180317ggptfg.jpg", purchaseQuantity: 1
},
{ goodsTitle: "旺仔牛奶", specifications: "20盒裝", unitPrice: "45", subimage1Filename: "20180317feftyp.jpg", purchaseQuantity: 1
}];
createVue(list); //執行創建Vue對象方法
}
);三，修改html部分代碼，將數據展示出來
<tr v-for="(item,index) in list">
<td>
<input type="checkbox" :id="‘check‘+index" name="checkboxs" />
<label :for="‘check‘+index"></label>
</td>
<td>
<img :src="‘路徑前綴/‘+item.subimage1Filename" />
</td>
<td style="text-align:left;">
<p>{{item.goodsTitle}}</p>
<p>規格：{{item.specifications}}</p>
</td>
<td>￥{{item.unitPrice}}</td>
<td class="adddel">
<em v-on:click="minius(index)">-</em>
<input type="number" v-model.number="item.purchaseQuantity" />
<em v-on:click="add(index)">+</em>
</td>
<td>￥{{item.unitPrice * item.purchaseQuantity}}</td>
<td><button v-on:click="checkDel(index)">刪除</button></td></tr>
這樣就能將單個商品部分全部循環打印出來，並且將對應的信息打印在對應位置。效果圖如下：
效果圖，圖中的圖片名和路徑是我編的，所以找不到
四，實現全選和勾選時候總價的計算，這部分算是有點挑戰了。我的思路是在Vue對象中新增加一個數據用來標識商品的選中狀態，所以創建Vue方法中的代碼改成如下所示：
cart = new Vue({
el: ‘#cart‘,
data() { return { list: list,
checkeds: new Array(list.length) //初始化成list的長度
}
});
然後在html中將商品對應的checkbox與checkeds綁定起來,修改後的代碼如下：
<input type="checkbox" :id="‘check‘+index" name="checkboxs" v-model="checkeds[index]" />
利用computed屬性計算價格總和：
sum () {
let sum = 0; for (let i in this.list) { if (this.checkeds[i]) //如果checkeds[i]的結果為truth，則進行累加
sum += this.list[i].unitPrice * this.list[i].purchaseQuantity;
} return sum;
}
HTML部分，我們在對應位置用{{sum}}帶入就能進行顯示了。這樣就能實現計算勾選過的商品小計之和了。接下來實現全選功能，在methods屬性中添加一個方法checkAll，具體代碼如下：
checkAll (event) { //這裏的event就是全選checkbox對象
if (event.checked) { //如果全選的checkbox選中，將checkeds所有的值設置為true，對應商品checkbox的選中狀態自動更新
for (let i = 0; i < this.checkeds.length; i++) {
Vue.set(this.checkeds, i, true);
} else { //否則就進行與上面相反的操作
for (let i = 0; i < this.checkeds.length; i++) {
Vue.set(this.checkeds, i, false);
}
}
}
經過上面的一波操作，已經可以實現全選和點選時候的價格之和計算。我們還要統計商品選中的數量，這個很簡單，同樣使用computed屬性，對checkeds中結果為truth的進行統計就好了，代碼如下：
checkNum: function () { let num = 0; for (let i in this.checkeds) { if (this.checkeds[i]) {
num++;
}
} return num;
}
然後在html中的對應位置用{{checkNum}}代入即可。現在我們已經實現了近一半需求，讓我們繼續完成他們吧！
五，實現購物車物品單個刪除功能，這個就很簡單啦，我們在methods中增加一個del方法，使用js數組的splice方法就可以實現。
del (index) { this.list.splice(index, 1); //只需要從數組中移除對應項，視圖會自動更新，不得不說，Vue太棒啦！
this.checkeds.splice(index,1); //同時刪除對應的選中狀態標識}
然後就是給刪除按鈕綁定點擊事件(index是循環列表時候的下標)：
<button v-on:click="del(index)">刪除</button>
這樣我們就輕松實現了刪除單個商品的需求，當然防止用戶誤刪，在用戶點擊刪除按鈕時我們可以彈出一個確認框提示用戶，這裏我們就不去實現了。
六，實現購物車單個商品的數量增加，減少，並實時更新商品的小計。首先在methods中添加增加方法add和減少方法minius：
add (index) { this.list[index].purchaseQuantity++; //這裏按理來說應該查詢後臺對應商品庫存量來進行限制的，這裏不涉及到後臺所以沒加},
minius (index) { if (this.list[index].purchaseQuantity > 1) { //這裏添加一個限制，最少要有一個商品
this.list[index].purchaseQuantity--;
}
}
然後我們在對應的加和減的按鈕上綁定事件來觸發這兩個方法（index為列表循環時候的下標）：
<td class="adddel">
<em v-on:click="minius(index)">-</em>
<input type="number" v-model.number="item.purchaseQuantity" />
<em v-on:click="add(index)">+</em></td><td>￥{{item.unitPrice * item.purchaseQuantity}}</td>
從上面的代碼可以看到我們在小計一欄直接進行商品單價和數量相乘，這樣就可以實現實時更新了。
至此，我們的需求就算是完成了，最後給大家留兩個小問題思考一下
一，如何實現批量刪除？
二，在全選之後，我們取消了一個商品的狀態，全選框的選中狀態仍然是選中的，此時應該是不選中的，或者當我們一個一個把商品的選中狀態全部勾選，全選框的狀態仍然是補選中的，此時應該是選中狀態（如下兩圖所示），這個現象如何解決？
問題二的現象一
問題二的現象二
後文
本文的所有代碼已經托管到GitHub，如果本文代碼有誤，請以GitHub上的為準，GitHub地址：https://github.com/cyixlq/vue_shopping_cart
作者：ABOUTYOU
鏈接：https://www.imooc.com/article/34548
來源：慕課網
使用Vue做一個購物車