[Express+Vue 搭建電商網站] 21 使用 Element UI 加入載入過動畫

使用 Express + Vue 搭建一個電商網站 - 套用 Element UI 加入載入動畫

2020/11/27

Ray

等待的時候很無聊，所以我們加點動畫
基本的動畫是用來告訴使用者動作執行結果，做到這樣使用者才知道自己剛剛做的事情有沒有完成

ManufactureForm 組件

在這個組件中，會在使用者新建或是修改製造商資訊後，當後端完成處理前出現 Loading 的動態效果

<template>
  <div class="manufacturerInfo">
    <el-form
      class="form"
      ref="form"
      label-width="180px"
      v-loading="loading"
      element-loading-text="Loading..."
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(0, 0, 0, 0.8)"
    >
      <el-form-item label="Name">
        <el-input v-model="manufacturerData.name"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button
          v-if="isEditing"
          type="primary"
          native-type="submit"
          @click="onSubmit"
        >Update Manufacturer</el-button>
        <el-button v-else @click="onSubmit">Add Manufacturer</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  props: ["model", "isEditing"],
  data() {
    return {
      manufacturerData: { name: "" }
    };
  },
  created() {
    this.manufacturerData = this.model;
  },
  watch: {
    model(val) {
      this.manufacturerData = val;
    }
  },
  computed: {
    loading() {
      return this.$store.state.showLoader;
    }
  },
  methods: {
    onSubmit() {
      this.$emit("save-manufacturer", this.manufacturerData);
    }
  }
};
</script>

使用 element-ui 组件庫提供的指令 v-loading 來判斷 loading 是否為真來決定是否要顯示載入動畫
而 loading 這個 computed 屬性使用 store.state.showLoader 的資料

同時也把當初在 ProductForm 中解決過「無法修改標單內容」的問題用同樣方法解決了

ProductForm 組件

當然啦，製造商表單的效果在 ProductForm 中應該也要有
接著就打開 ProductForm 組件進行編輯

<template>
  <div class="productInfo">
    <el-form
      class="form"
      ref="form"
      label-width="180px"
      v-loading="loading"
      element-loading-text="Loading..."
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(0, 0, 0, 0.8)"
    >
      <el-form-item label="Name">
        <el-input v-model="modelData.name"></el-input>
      </el-form-item>
      <el-form-item label="Price">
        <el-input v-model="modelData.price"></el-input>
      </el-form-item>
      <el-form-item label="Manufacturer ">
        <el-select v-model="modelData.manufacturer.name" clearable placeholder="請選擇製造商">
          <el-option
            v-for="manufacturer in manufacturers"
            :key="manufacturer._id"
            :label="manufacturer.name"
            :value="manufacturer.name"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="Image ">
        <el-input v-model="modelData.image"></el-input>
      </el-form-item>
      <el-form-item label="Description ">
        <el-input type="textarea" v-model="modelData.description"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button
          v-if="isEditing"
          type="primary"
          native-type="submit"
          @click="onSubmit"
        >Update Product</el-button>
        <el-button v-else @click="onSubmit">Add Product</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      modelData: { manufacturer: { name: "" } }
    };
  },
  props: ["model", "manufacturers", "isEditing"],
  created() {
    const product = this.model;
    this.modelData = { ...product, manufacturer: { ...product.manufacturer } };
  },
  watch: {
    model(val) {
      this.modelData = val;
    }
  },
  computed: {
    loading() {
      return this.$store.state.showLoader;
    }
  },
  methods: {
    onSubmit() {
      // 表單中只有 modelData.manufacturer.name，但後端需要整個製造商物件，所以要找出對應的製造商物件寫入到 modelData 中
      const manufacturer = this.manufacturers.find(
        item => item.name === this.modelData.manufacturer.name
      );
      this.modelData.manufacturer = manufacturer;
      this.$emit("save-product", this.modelData);
    }
  }
};
</script>

<style>
.productInfo {
  padding-top: 10px;
}
.form {
  margin: 0 auto;
  width: 500px;
}
.el-input__inner {
  height: 60px;
}
</style>

在這個組件中我們也加入了 loading() 這個 computed 屬性

實現提示功能

在組件中加入功能後，我們要實際把提示功能完成
首先打開 src/store/actions.js 加入提示訊息的功能

import axios from 'axios';
import { Message } from 'element-ui';
import {
    ADD_PRODUCT,
    ADD_PRODUCT_SUCCESS,
    PRODUCT_BY_ID,
    PRODUCT_BY_ID_SUCCESS,
    UPDATE_PRODUCT,
    UPDATE_PRODUCT_SUCCESS,
    REMOVE_PRODUCT,
    REMOVE_PRODUCT_SUCCESS,
    ALL_PRODUCTS,
    ALL_PRODUCTS_SUCCESS,
    ALL_MANUFACTURERS,
    ALL_MANUFACTURERS_SUCCESS,
    MANUFACTURER_BY_ID,
    MANUFACTURER_BY_ID_SUCCESS,
    ADD_MANUFACTURER,
    ADD_MANUFACTURER_SUCCESS,
    UPDATE_MANUFACTURER,
    UPDATE_MANUFACTURER_SUCCESS,
    REMOVE_MANUFACTURER,
    REMOVE_MANUFACTURER_SUCCESS,
} from './mutation-types';

const API_BASE = 'http://localhost:3000/api/v1';

export const productActions = {
    allProducts({ commit }) {
        commit(ALL_PRODUCTS)

        axios.get(`${API_BASE}/products`).then(response => {
            commit(ALL_PRODUCTS_SUCCESS, {
                products: response.data,
            });
        })
    },
    productById({ commit }, payload) {
        commit(PRODUCT_BY_ID);

        const { productId } = payload;
        axios.get(`${API_BASE}/products/${productId}`).then(response => {
            commit(PRODUCT_BY_ID_SUCCESS, {
                product: response.data,
            });
        })
    },
    removeProduct({ commit }, payload) {
        commit(REMOVE_PRODUCT);

        const { productId } = payload;
        axios.delete(`${API_BASE}/products/${productId}`)
            .then(() => {
                // 回傳 productId，用來刪除對應商品
                commit(REMOVE_PRODUCT_SUCCESS, {
                    productId,
                });
                Message({
                    message: '產品刪除完成',
                    type: 'success'
                })
            })
            .catch(() => {
                Message.error('產品刪除失敗');
            })
    },
    updateProduct({ commit }, payload) {
        commit(UPDATE_PRODUCT);

        const { product } = payload;
        axios.put(`${API_BASE}/products/${product._id}`, product)
            .then(response => {
                commit(UPDATE_PRODUCT_SUCCESS, {
                    product: response.data,
                });
                Message({
                    message: '商品更新成功',
                    type: 'success'
                })
            })
            .catch(() => {
                Message.error('商品更新失敗');
            })
    },
    addProduct({ commit }, payload) {
        commit(ADD_PRODUCT);
        const { product } = payload;
        axios.post(`${API_BASE}/products`, product)
            .then(response => {
                commit(ADD_PRODUCT_SUCCESS, {
                    product: response.data,
                })
                Message({
                    message: '已新建商品',
                    type: 'success'
                })
            })
            .catch(() => {
                Message.error('商品建立失敗');
            })
    }
};

export const manufacturerActions = {
    allManufacturers({ commit }) {
        commit(ALL_MANUFACTURERS);

        axios.get(`${API_BASE}/manufacturers`).then(response => {
            commit(ALL_MANUFACTURERS_SUCCESS, {
                manufacturers: response.data,
            });
        })
    },
    manufacturerById({ commit }, payload) {
        commit(MANUFACTURER_BY_ID);

        const { manufacturerId } = payload;
        axios.get(`${API_BASE}/manufacturers/${manufacturerId}`).then(response => {
            commit(MANUFACTURER_BY_ID_SUCCESS, {
                manufacturer: response.data,
            });
        })
    },
    removeManufacturer({ commit }, payload) {
        commit(REMOVE_MANUFACTURER);

        const { manufacturerId } = payload;
        axios.delete(`${API_BASE}/manufacturers/${manufacturerId}`)
            .then(() => {
                // 回傳 manufacturerId，用來刪除對應的製造商
                commit(REMOVE_MANUFACTURER_SUCCESS, {
                    manufacturerId,
                });
                Message({
                    message: '製造商刪除完成',
                    type: 'success'
                })
            })
            .catch(() => {
                Message.error('製造商刪除完成失敗');
            })
    },
    updateManufacturer({ commit }, payload) {
        commit(UPDATE_MANUFACTURER);

        const { manufacturer } = payload;
        axios.put(`${API_BASE}/manufacturers/${manufacturer._id}`, manufacturer)
            .then(response => {
                commit(UPDATE_MANUFACTURER_SUCCESS, {
                    manufacturer: response.data,
                });
                Message({
                    message: '製造商更新完成',
                    type: 'success'
                })
            })
            .catch(() => {
                Message.error('製造商更新失敗');
            })
    },
    addManufacturer({ commit }, payload) {
        commit(ADD_MANUFACTURER);
        const { manufacturer } = payload;
        axios.post(`${API_BASE}/manufacturers`, manufacturer)
            .then(response => {
                commit(ADD_MANUFACTURER_SUCCESS, {
                    manufacturer: response.data,
                });
                Message({
                    message: '製造商建立完成',
                    type: 'success'
                })
            })
            .catch(() => {
                Message.error('製造商建立失敗');
            })
    }
}

首先導入了 element-ui 组件庫提供的 Message 提示訊息組件
接著在各個操作中加入提示訊息的物件，成功或失敗都會回傳對應的訊息

接著開啟 src/store/mutations.js 做部分內容修改，為的是修改購物車的提示訊息

export const cartMutations = {
    [ADD_TO_CART](state, payload) {
        const { product } = payload;
        state.cart.push(product);
        Message({
            message: '成功加入購物車',
            type: 'success'
        })
    },
    [REMOVE_FROM_CART](state, payload) {
        const { productId } = payload
        state.cart = state.cart.filter(product => product._id !== productId)
        Message({
            message: '已從購物車移除商品',
            type: 'success'
        })
    },
}

同樣導入了 element-ui 组件庫提供的 Message 提示訊息組件
當使用者加入或移除購物車商品時就會收到提示了！

結果看起來像這樣，十分酷炫有型

重構到這邊，測試起來似乎又有點什麼問題
那就是在表單按下更新後，看到了更新成功的訊息，但畫面上的資料似乎沒有同步成最新的
當資料出現問題，應該依據 Vue 的單向資料流原則來修正
使用者更新資料後，應該從後端同步更新資料到狀態池中進行渲染
因此我們要修改的就是 src/store/actions.js 的內容

可以大膽的猜測，是因為後端請求結束後 action 提交到 mutations.js 中的不是修改後的最新資料
所以才沒有改變狀態池中的物件
修改 src/store/actions.js 檔案中更新數據的部分
兩個方法在不同的常數中，但為了節省版面就只展示其中關鍵的方法

updateProduct({ commit }, payload) {
    commit(UPDATE_PRODUCT);

    const { product } = payload;
    axios.put(`${API_BASE}/products/${product._id}`, product)
        .then(() => {
            commit(UPDATE_PRODUCT_SUCCESS, {
                product: product,
            });
            Message({
                message: '商品更新成功',
                type: 'success'
            })
        })
        .catch(() => {
            Message.error('商品更新失敗');
        })
},

updateManufacturer({ commit }, payload) {
    commit(UPDATE_MANUFACTURER);

    const { manufacturer } = payload;
    axios.put(`${API_BASE}/manufacturers/${manufacturer._id}`, manufacturer)
        .then(() => {
            commit(UPDATE_MANUFACTURER_SUCCESS, {
                manufacturer: manufacturer,
            });
            Message({
                message: '製造商更新完成',
                type: 'success'
            })
        })
        .catch(() => {
            Message.error('製造商更新失敗');
        })
},

可以看到我們不理會 axios 返回的結果
直接使用原本作為 payload 去執行 API 的資料回傳到 mutations 來修改狀態

所以接著就要修改 mutations.js，將新的資料同步到狀態池中
也是針對更新的部分做局部修改，將最新的資料同步到狀態池中

[UPDATE_PRODUCT_SUCCESS](state, payload) {
    state.showLoader = false;

    const { product: newProduct } = payload;
    state.products = state.products.map(product => {
        if (product._id === newProduct._id) {
            return newProduct;
        }
        return product;
    });

    state.product = newProduct;
},

[UPDATE_MANUFACTURER_SUCCESS](state, payload) {
    state.showLoader = false;

    const { manufacturer: newManufacturer } = payload;
    state.manufacturers = state.manufacturers.map(manufacturer => {
        if (manufacturer._id === newManufacturer._id) {
            return newManufacturer;
        }
        return manufacturer;
    });

    state.manufacturer = newManufacturer;
},

於是我們就修好了表單的修改功能並直接顯示最新資料！

這就是在實際開發中使用 element-ui 組件庫套用在前端樣板中的流程，並且一步一步的進行了重構
到了這邊整個專案基本上已經可以正常運行了，使用者的體驗也得到的明顯的改善！

專案範例程式碼 GitHub 網址：ray247k/mini-E-commerce

Byte Ebi 🍤

[Express+Vue 搭建電商網站] 21 使用 Element UI 加入載入過動畫

ManufactureForm 組件

ProductForm 組件

實現提示功能

最新文章

[大話 AWS 雲端架構筆記] AWS 常見架構總覽

[大話 AWS 雲端架構筆記] 混合雲

[大話 AWS 雲端架構筆記] 資安架構總覽

[大話 AWS 雲端架構筆記] Lambda

[大話 AWS 雲端架構筆記] API Gateway

Category

Tag