Vue2.0開發購物車實例

雖然Vue最強大的是組件化開發，但是其實多頁面開發也蠻適合的。看了慕課網的使用Vue2.0開發購物車的教程之后，自己也實現了一遍。

使用npm init命令來自動生成package.json文件。
會依次讓你輸入:

• name: 你的項目名稱(默認會使用你的文件夾名稱，不更改的話直接回車跳過)
• version: 版本號（默認1.0.0,不更改直接回車跳過)
• description: 項目描述（可為空，不寫直接回車跳過)
• entry point: 入口文件（默認為index.js)
• test command: 測試命令行（回車跳過)
• git repository: git倉庫地址（回車跳過)
• keywords: 關鍵字
• author: 作者
• license: 所用協議
  接下來會讓你預覽package.json文件，輸入yes即可生成package.json文件

因為該項目會用到vue,axios(在Vue2.0中取代vue-resource)和http-server(用來將文件夾轉為服務器，避免跨域問題),
因此再使用以下命令，在package.json中把上面三個庫引入進來

npm install vue --save-dev
npm install axios --save-dev
npm install http-server --save-dev

這樣在項目文件夾下就會出現"node_modules"文件夾，我們需要的三個庫也會下載下來了
同時，package.json文件中會多出以下這段內容：

  "devDependencies": {
    "axios": "^0.15.3",
    "http-server": "^0.9.0",
    "vue": "^2.1.10"
  }

這樣，下次就可以直接使用npm install來安裝所需的依賴的

接下來,再在package.json中修改"scripts"，增加以下內容:

"scripts": {
  "start":"http-server -a localhost -p 8080"
}

這樣就可以通過npm start的方式來啟動項目了，在瀏覽器輸入localhost:8080即可訪問

附上http-server的參數說明:
-p 端口號 (默認 8080)
-a IP 地址 (默認 0.0.0.0)
-d 顯示目錄列表 (默認 'True')
-i 顯示 autoIndex (默認 'True')
-e or --ext 如果沒有提供默認的文件擴展名(默認 'html')
-s or --silent 禁止日志信息輸出
--cors 啟用 CORS via the Access-Control-Allow-Origin header
-o 在開始服務后打開瀏覽器
-c 為 cache-control max-age header 設置Cache time(秒) , e.g. -c10 for 10 seconds (defaults to '3600'). 禁用 caching, 則使用 -c-1.
-U 或 --utc 使用UTC time 格式化log消息
-P or --proxy Proxies all requests which can't be resolved locally to the given url. e.g.: -P http://someurl.com
-S or --ssl 啟用 https
-C or --cert ssl cert 文件路徑 (default: cert.pem)
-K or --key Path to ssl key file (default: key.pem).
-r or --robots Provide a /robots.txt (whose content defaults to 'User-agent: *\nDisallow: /')
-h or --help 打印以上列表并退出

在Vue的生命周期鉤子函數中，mounted就相當于jQuery的.ready方法,但是使用mounted并不能保證鉤子函數中的this.$el在document中，為此還需要引入Vue.nextTick/vm.$nextTick，見官方文檔
所以購物車的初始化方法如下：

mounted:function(){
    var _this = this;
    this.$nextTick(function(){
        axios.get('http://localhost:8080/data/cartData.json')
        .then(
        // 使用箭頭函數的話，this的作用域并不會變，還是指向vmCart
        //  (retObj)=>{
        //  if(retObj.status == 200){
        //      this.totalMoney = retObj.data.result.totalMoney;
        //      this.list = retObj.data.result.list;
        //  }
        // }
        // 不使用箭頭函數的場合
        // 如果要使用vmCart實例，
        // 就必須在mounted鉤子函數里再調用一次$nextTick方法才能保證el被render在dom中
        function(retObj){
            if(retObj.status == 200){
                vmCart.list = retObj.data.result.list;
            }
        }
        )
        .catch(function(errorObj){
            console.log("get data error...");
        })
    });
},

購物車的json數據如下：

{
  "productId":"600100002115",
  "productName":"黃鶴樓香煙",
  "productPrice":19,
  "productQuentity":1,
  "productImage":"img/goods-1.jpg",
  "parts":[
    {
      "partsId":"10001",
      "partsName":"打火機",
      "img":"img/part-1.jpg"
    }
  ]
}

可以看到，從服務器返回的數據，都是業務邏輯數據(雖然此處是mock的)，并不會包含一些頁面上的狀態信息，那么如何通過為購物車中的商品增加一些屬性來記錄諸如是否選中的狀態呢？
就需要用到Vue.set方法了，詳見官網

methods:{
    selectGood:function(goodObj,index){
        if(goodObj.isChecked == void 0){
            this.$set(goodObj,"isChecked",true)
        } else {
            goodObj.isChecked = !goodObj.isChecked;
        }
        this.isCheckAll();
    }
}

如上述代碼所示，如果產品被選中，同時該產品沒有"isChecked"屬性，則為其添加該屬性，并設為"true"
至于選中的所有產品的價格，可以使用computed屬性來計算:

computed:{
    totalPrice:function(){
        var total = 0;
        this.list.forEach(function(good){
            if(good.isChecked){
                total += good.productPrice * good.productQuentity;
            }
        });
        return total;
    },
},

最后，可以使用filters來為頁面上的金額添加單位：

filters:{
    Currency:function(val){
        return val + " 元";
    },
}

地址頁面的大部分功能和購物車類似
只有一個默認地址的設置，可以采用watch的方法來監控當前默認地址的變化，發現變化之后，把老的默認地址取消即可，
這樣就不需要遍歷所有的地址，將非當前選中的地址都設為“非默認地址”了

watch:{
    currentDefaultAddress:function(newVal,oldVal){
        oldVal.isDefault = false;
    },
}

還有一個小技巧是"more"更多地址的設置,目前是通過計算屬性來過濾數組的方式:

computed:{
    filteAddress:function(){
        return this.addressList.slice(0,this.limitNum);
    },
}

默認是指返回指定數量地址，在按了“more”之后，再將limitNum設置為數組的長度，這樣就可以顯示所有的地址了：

<div class="shipping-addr-more">
    <a class="addr-more-btn up-down-btn" href="javascript:;" @click="limitNum=(limitNum == addressList.length?3:addressList.length)">
        more
        <i class="i-up-down">
            <i class="i-up-down-l"></i>
            <i class="i-up-down-r"></i>
        </i>
    </a>
</div>

github

url