個人博客地址: https://cyixlq.top/

前言

最近我實習(xí)的公司在做網(wǎng)上商城的一個項目，我負(fù)責(zé)購物車這一塊。這個項目是一個Web項目，沒有進行前后端分離，但是又得做手機端，感覺好像哪里不對。。。
web框架使用的是SpringMVC，模板框架是FreeMarker，想到以后要做移動端，果斷還是用json來進行數(shù)據(jù)交互，并沒有用freemarker。網(wǎng)頁靜態(tài)文件全部寫好了，放在了springmvc的Views中。按理來說還是進行前后端分離好點的，但是做網(wǎng)頁的沒接觸過Vue，那好吧。。。
于是我就想到在頁面直接引入Vue，可是又是在內(nèi)網(wǎng)環(huán)境開發(fā)，只好在自己個人筆記本上下載vue.js再拷貝到內(nèi)網(wǎng)電腦上進行頁面上的引入。

正文

靜態(tài)頁面效果圖

簡單說一下這個功能模塊的需求：

1. 勾選全選，所有商品全部選中。在取消全選框的時候所有商品取消選擇。
2. 點擊單個商品上的加號減號進行數(shù)量的增加和減少，右邊小計實時計算出這個商品的價格合計。
3. 點擊單個商品上的刪除按鈕將商品從購物車中刪除。
4. 底部已選實時顯示已經(jīng)勾選的商品，右邊合計金額實時顯示所有勾選的商品的小計之和。
   (是的，需求看起來不多，但是要結(jié)合后臺去做還是需要點功夫的，但是這篇文章我們不牽扯后臺，在前臺造數(shù)據(jù))

現(xiàn)在讓我們開始吧

一，創(chuàng)建一個Vue對象，設(shè)置好數(shù)據(jù)。

var cart; //全局Vue對象
//通過封裝一個方法來創(chuàng)建Vue對象
function createVue(list) {  //傳入通過后臺獲取的list
  cart = new Vue({
    el:'#cart',
    data(){
        return {
            list:list  //商品列表
        }
    }
  });
}

二，假設(shè)從后臺請求到數(shù)據(jù)，然后賦值到Vue對象中

window.onload = function () {
        //請求后臺代碼   。。。。
        //請求成功后將獲得的list賦值給cart的list
        let list = [
            {
                goodsTitle: "衛(wèi)龍辣條",                         //商品名
                specifications: "大包",                        //商品規(guī)格
                unitPrice: "5",                               //商品單價
                subimage1Filename :"20180317eeftyd.jpg",        //商品圖片名
                purchaseQuantity: 6                     //商品數(shù)量
            }, 
            {
                goodsTitle: "雕牌洗衣粉",
                specifications: "大包",
                unitPrice: "13",
                subimage1Filename: "20180317ggptfg.jpg",
                purchaseQuantity: 1
            }, 
            {
                goodsTitle: "旺仔牛奶",
                specifications: "20盒裝",
                unitPrice: "45",
                subimage1Filename: "20180317feftyp.jpg",
                purchaseQuantity: 1
            }];
            createVue(list);  //執(zhí)行創(chuàng)建Vue對象方法
    }
);

三，修改html部分代碼，將數(shù)據(jù)展示出來

<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>規(guī)格：{{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> 

這樣就能將單個商品部分全部循環(huán)打印出來，并且將對應(yīng)的信息打印在對應(yīng)位置。效果圖如下：

效果圖，圖中的圖片名和路徑是我編的，所以找不到

cart = new Vue({
    el: '#cart',
        data() {
            return {
                list: list,
                checkeds: new Array(list.length) //初始化成list的長度
        }
    });

然后在html中將商品對應(yīng)的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]的結(jié)果為truth，則進行累加
          sum += this.list[i].unitPrice * this.list[i].purchaseQuantity;
    }
    return sum;
}

HTML部分，我們在對應(yīng)位置用{{sum}}帶入就能進行顯示了。這樣就能實現(xiàn)計算勾選過的商品小計之和了。接下來實現(xiàn)全選功能，在methods屬性中添加一個方法checkAll，具體代碼如下：

checkAll (event) {  //這里的event就是全選checkbox對象
    if (event.checked) {  //如果全選的checkbox選中，將checkeds所有的值設(shè)置為true，對應(yīng)商品checkbox的選中狀態(tài)自動更新
        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);
        }
    }
}

經(jīng)過上面的一波操作，已經(jīng)可以實現(xiàn)全選和點選時候的價格之和計算。我們還要統(tǒng)計商品選中的數(shù)量，這個很簡單，同樣使用computed屬性，對checkeds中結(jié)果為truth的進行統(tǒng)計就好了，代碼如下：

checkNum: function () {
    let num = 0;
    for (let i in this.checkeds) {
        if (this.checkeds[i]) {
            num++;
        }
    }
    return num;
}

然后在html中的對應(yīng)位置用{{checkNum}}代入即可?，F(xiàn)在我們已經(jīng)實現(xiàn)了近一半需求，讓我們繼續(xù)完成他們吧！
五，實現(xiàn)購物車物品單個刪除功能，這個就很簡單啦，我們在methods中增加一個del方法，使用js數(shù)組的splice方法就可以實現(xiàn)。

del (index) {
    this.list.splice(index, 1);  //只需要從數(shù)組中移除對應(yīng)項，視圖會自動更新，不得不說，Vue太棒啦！
    this.checkeds.splice(index,1); //同時刪除對應(yīng)的選中狀態(tài)標(biāo)識
}

然后就是給刪除按鈕綁定點擊事件(index是循環(huán)列表時候的下標(biāo))：

<button v-on:click="del(index)">刪除</button>

這樣我們就輕松實現(xiàn)了刪除單個商品的需求，當(dāng)然防止用戶誤刪，在用戶點擊刪除按鈕時我們可以彈出一個確認(rèn)框提示用戶，這里我們就不去實現(xiàn)了。
六，實現(xiàn)購物車單個商品的數(shù)量增加，減少，并實時更新商品的小計。首先在methods中添加增加方法add和減少方法minius：

add (index) {
    this.list[index].purchaseQuantity++;  //這里按理來說應(yīng)該查詢后臺對應(yīng)商品庫存量來進行限制的，這里不涉及到后臺所以沒加
},
minius (index) {
    if (this.list[index].purchaseQuantity > 1) {  //這里添加一個限制，最少要有一個商品
        this.list[index].purchaseQuantity--;
    }
}

然后我們在對應(yīng)的加和減的按鈕上綁定事件來觸發(fā)這兩個方法（index為列表循環(huán)時候的下標(biāo)）：

<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>

從上面的代碼可以看到我們在小計一欄直接進行商品單價和數(shù)量相乘，這樣就可以實現(xiàn)實時更新了。

至此，我們的需求就算是完成了，最后給大家留兩個小問題思考一下

一，如何實現(xiàn)批量刪除？
二，在全選之后，我們?nèi)∠艘粋€商品的狀態(tài)，全選框的選中狀態(tài)仍然是選中的，此時應(yīng)該是不選中的，或者當(dāng)我們一個一個把商品的選中狀態(tài)全部勾選，全選框的狀態(tài)仍然是補選中的，此時應(yīng)該是選中狀態(tài)（如下兩圖所示），這個現(xiàn)象如何解決？

問題二的現(xiàn)象一

問題二的現(xiàn)象二

后文

本文的所有代碼已經(jīng)托管到GitHub，如果本文代碼有誤，請以GitHub上的為準(zhǔn)，GitHub地址：https://github.com/cyixlq/vue_shopping_cart