vue實戰記錄（三）- vue實現購物車功能之渲染商品列表

vue實戰，一步步實現vue購物車功能的過程記錄，課程與素材來自慕課網，自己搭建了express本地服務器來請求數據

作者：狐狸家的魚

本文鏈接：vue實戰-實現購物車功能（三）

GitHub：sueRimn

模仿網頁考拉的購物車樣式進行了一些修改，以上圖片就是渲染后的效果。

一、cart.js獲取數據

通過AJAX獲取本地的json數據，這里會出現跨域問題，還好提前搭建了本地服務器，可以成功獲取數據渲染界面。

當通過get獲取地址數據時，可以在調試界面看到我們需要的數據有哪些，從而獲取數據的id，

 

this有可能代表不同的對象,而我們希望_this代表最初的對象，所以聲明：

let _this = this;

而我們需要獲取商品列表，所以需要把獲取到的數據賦給data，然后渲染到界面。

_this.productList = res.data.result.list;
_this.totalMoney = res.data.totalMoney;

完整代碼：

const vm = new Vue({
    el:'#app',
    data: {
        totalMoney: 0,//總金額
        productList: [],//商品列表

    },
    filters: {

    },
    mounted: function() {//掛載 鈎子 實例插入文檔
        this.cartView();
    },
    methods: {
        cartView: function() {
            let _this = this;
            //獲取數據，返回結果
            this.$http.get("../data/cartData.json", {"id":123}).then(res => {
                _this.productList = res.data.result.list;
                _this.totalMoney = res.data.totalMoney;
            });
        }
    },
})

 

二、渲染界面

在渲染的地方都做了相應的注釋

 </div>
                <ul class="cart-item-list">
                  <!-- 列表渲染-對象渲染 -->
                  <li v-for="(item, index) in productList" :key="index">
                    <div class="cart-tab-1">
                      <div class="cart-item-check">
                        <a href="javascript:void 0" class="item-check-btn">
                          <svg class="icon icon-ok"><use xlink:href="#icon-ok"></use></svg>
                        </a>
                      </div>
                      <div class="cart-item-pic">
                        <!-- 商品圖片 -->
                        <img :src="item.productImage" alt="口紅">
                      </div>
                      <div class="cart-item-title">
                        <!-- 商品名字 -->
                        <div class="item-name">{{item.productName}}</div>
                      </div>
                      <div class="item-include">
                        <dl>
                          <dt>贈送:</dt>
                          <!-- 贈品 -->
                          <dd v-for="part in item.parts" v-text="part.partsName" :key="item.id"></dd>
                        </dl>
                      </div>
                    </div>
                    <div class="cart-tab-2">
                      <!-- 商品單價 -->
                      <div class="item-price">{{item.productPrice}}</div>
                    </div>
                    <div class="cart-tab-3">
                      <div class="item-quantity">
                        <div class="select-self select-self-open">
                          <div class="quantity">
                            <a href="javascript:void 0"></a>
                            <!-- 商品數量 -->
                            <input type="text" value="0" disabled v-model="item.productQuantity">
                            <a href="javascript:void 0" @click="add">+</a>
                          </div>
                        </div>
                        <div class="item-stock">有貨</div>
                      </div>
                    </div>
                    <div class="cart-tab-4">
                      <!-- 商品總金額=單價*數量 -->
                      <div class="item-price-total">{{item.productPrice*item.productQuantity}}</div>
                    </div>
                    <div class="cart-tab-5">
                      <div class="cart-item-operation">
                        <a href="javascript:void 0" class="item-edit-btn">
                          <svg class="icon icon-del"><use xlink:href="#icon-del" ></use></svg>
                        </a>
                        <p>移入我的收藏</p>
                      </div>
                    </div>
                  </li>
                </ul>
              </div>