Реализация корзины покупок Xiaomi Mall на основе Vuex

Vue.js

предисловие

В прошлом семестре я изучал Vue.js и Node.js в свободное время, я всегда хотел сделать полный проект и попрактиковаться в нем, но раньше у меня не было столько времени в школе. Теперь, когда у меня есть время, я хочу сделать проект, чтобы закрепить то, что я узнал раньше.

Подумав об этом, я, наконец, решил подражатьСяоми МоллРабота над проектом электронной коммерции практически завершена, в этой статье подведены итоги реализации модуля корзины.

иллюстрировать

Полный репозиторий кода проекта:GitHub.com/yet-27/v ue-….

Проект развернут на моем сервере, ссылка на предварительный просмотр: http://106.15.179.105 (Нет совместимого мобильного терминала, для доступа используйте ПК).

В этой статье кратко описана внешняя часть, внутренняя часть реализована с помощью Node.js(Koa)+Mysql, перейдите к подробному коду.GitHub.com/also-27/ — это Тор….

Пишу новичку, если что-то не так, подскажите ^_^

Эффект

Нечего сказать, давайте сначала посмотрим на эффект

Этапы реализации

1. Подготовка статической страницы

страница используетelement-uiизIcon 图标,el-checkbox,el-input-number,el-popover,el-button, всем нужно ввести element-ui в main.js.

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

Код страницы выглядит следующим образом:

проиллюстрировать:Для удобства окончательный код размещен непосредственно здесь.

<template>
  <div class="shoppingCart">
    <!-- 购物车头部 -->
    <div class="cart-header">
      <div class="cart-header-content">
        <p>
          <i class="el-icon-shopping-cart-full" style="color:#ff6700; font-weight: 600;">
          </i>
          我的购物车
        </p>
        <span>温馨提示：产品是否购买成功，以最终下单为准哦，请尽快结算</span>
      </div>
    </div>
    <!-- 购物车头部END -->

    <!-- 购物车主要内容区 -->
    <div class="content" v-if="getShoppingCart.length>0">
      <ul>
        <!-- 购物车表头 -->
        <li class="header">
          <div class="pro-check">
            <el-checkbox v-model="isAllCheck">全选</el-checkbox>
          </div>
          <div class="pro-img"></div>
          <div class="pro-name">商品名称</div>
          <div class="pro-price">单价</div>
          <div class="pro-num">数量</div>
          <div class="pro-total">小计</div>
          <div class="pro-action">操作</div>
        </li>
        <!-- 购物车表头END -->

        <!-- 购物车列表 -->
        <li class="product-list" v-for="(item,index) in getShoppingCart" :key="item.id">
          <div class="pro-check">
            <el-checkbox :value="item.check" @change="checkChange($event,index)">
            </el-checkbox>
          </div>
          <div class="pro-img">
            <router-link :to="{ 
            path: '/goods/details', 
            query: {productID:item.productID} 
            }">
              <img :src="$target + item.productImg" />
            </router-link>
          </div>
          <div class="pro-name">
            <router-link
              :to="{ path: '/goods/details', query: {productID:item.productID} }"
            >{{item.productName}}</router-link>
          </div>
          <div class="pro-price">{{item.price}}元</div>
          <div class="pro-num">
            <el-input-number
              size="small"
              :value="item.num"
              @change="handleChange($event,index,item.productID)"
              :min="1"
              :max="item.maxNum"
            ></el-input-number>
          </div>
          <div class="pro-total pro-total-in">{{item.price*item.num}}元</div>
          <div class="pro-action">
            <el-popover placement="right">
              <p>确定删除吗？</p>
              <div style="text-align: right; margin: 10px 0 0">
                <el-button
                  type="primary"
                  size="mini"
                  @click="deleteItem($event,item.id,item.productID)"
                >确定</el-button>
              </div>
              <i class="el-icon-error" slot="reference" style="font-size: 18px;"></i>
            </el-popover>
          </div>
        </li>
        <!-- 购物车列表END -->
      </ul>
      <div style="height:20px;background-color: #f5f5f5"></div>
      <!-- 购物车底部导航条 -->
      <div class="cart-bar">
        <div class="cart-bar-left">
          <span>
            <router-link to="/goods">继续购物</router-link>
          </span>
          <span class="sep">|</span>
          <span class="cart-total">
            共
            <span class="cart-total-num">{{getNum}}</span> 件商品，已选择
            <span class="cart-total-num">{{getCheckNum}}</span> 件
          </span>
        </div>
        <div class="cart-bar-right">
          <span>
            <span class="total-price-title">合计：</span>
            <span class="total-price">{{getTotalPrice}}元</span>
          </span>
          <router-link :to="getCheckNum > 0 ? '/confirmOrder' : ''">
            <div :class="getCheckNum > 0 ? 'btn-primary' : 'btn-primary-disabled'">
            去结算
            </div>
          </router-link>
        </div>
      </div>
      <!-- 购物车底部导航条END -->
    </div>
    <!-- 购物车主要内容区END -->

    <!-- 购物车为空的时候显示的内容 -->
    <div v-else class="cart-empty">
      <div class="empty">
        <h2>您的购物车还是空的！</h2>
        <p>快去购物吧！</p>
      </div>
    </div>
    <!-- 购物车为空的时候显示的内容END -->
  </div>
</template>

2. Создайте Векс

/store/index.js

import Vue from 'vue'
import Vuex from 'vuex'

import shoppingCart from './modules/shoppingCart'

Vue.use(Vuex)

export default new Vuex.Store({
  strict: true,
  modules: {
    shoppingCart
  }
})

/store/modules/shoppingCart.js

export default {
  state: {
    shoppingCart: []
    // shoppingCart结构
    /* 
    shoppingCart = {
      id: "", // 购物车id
      productID: "", // 商品id
      productName: "", // 商品名称
      productImg: "", // 商品图片
      price: "", // 商品价格
      num: "", // 商品数量
      maxNum: "", // 商品限购数量
      check: false // 是否勾选
    }
    */
  }
}

3. Синхронизируйте статус корзины покупок

Идеи:

  • Отслеживайте статус входа пользователя в корневой компонент App.vue;
  • Если пользователь уже вошел в систему, получите данные корзины покупок пользователя из базы данных и обновите полученные данные до vuex;
  • Если пользователь не вошел в систему, установите статус корзины в vuex пустым.

код показывает, как показано ниже:

import { mapActions } from "vuex";
import { mapGetters } from "vuex";

computed: {
  ...mapGetters(["getUser", "getNum"])
},
methods: {
  ...mapActions(["setShoppingCart"]),
}
watch: {
  // 获取vuex的登录状态
  getUser: function(val) {
    if (val === "") {
      // 用户没有登录
      this.setShoppingCart([]);
    } else {
      // 用户已经登录,获取该用户的购物车信息
      this.$axios
        .post("/api/user/shoppingCart/getShoppingCart", {
          user_id: val.user_id
        })
        .then(res => {
          if (res.data.code === "001") {
            // 001 为成功, 更新vuex购物车状态
            this.setShoppingCart(res.data.shoppingCartData);
          } else {
            // 提示失败信息
            this.notifyError(res.data.msg);
          }
        })
        .catch(err => {
          return Promise.reject(err);
        });
    }
  }
}

Мутации vuex:

setShoppingCart (state, data) {
	// 设置购物车状态
	state.shoppingCart = data;
},

действия vuex

setShoppingCart({ commit }, data) {
  commit('setShoppingCart', data);
}

4. Динамически генерировать страницу корзины покупок

Идеи:

  • Получить статус корзины через getters.getShoppingCart в vuex;
  • Используйте v-if, чтобы определить, есть ли товар в корзине;
  • Если он существует, используйте v-for для создания списка корзины;
  • Если он не существует, отображать содержимое, отображаемое, когда корзина пуста;

HTML-код корзины покупок:

<div class="shoppingCart">
  <div class="content" v-if="getShoppingCart.length>0">
    <ul>
      <li class="header">
        <!-- 购物车表头部分,省略详细代码 -->
      </li>
      <li class="product-list" v-for="(item,index) in getShoppingCart" :key="item.id">
        <!-- 购物车列表部分，省略详细代码 -->
      </li>
    </ul>
  </div>
  <!-- 购物车为空的时候显示的内容 -->
  <div v-else class="cart-empty">
    <div class="empty">
      <h2>您的购物车还是空的！</h2>
      <p>快去购物吧！</p>
    </div>
    
  </div>
</div>

геттеры vuex:

getShoppingCart(state) {
  // 获取购物车状态
  return state.shoppingCart;
}

5. Добавьте товар в корзину

Идеи:

  • На странице сведений о продукте пользователь вызывает событие click addShoppingCart, нажимая кнопку добавления в корзину;
  • Сначала инициируйте запрос на добавление корзины покупок в серверную часть и управляйте vuex в соответствии с возвращенной информацией;
  • Товар добавляется в корзину в первый раз, и информация о корзине, возвращаемая серверной частью, вставляется в vuex с помощью действий (unshiftShoppingCart) vuex;
  • Товар уже находится в корзине, а количество товара равно +1 через Actions (addShoppingCartNum) vuex;
  • Когда количество товаров достигает предела покупки, запрещается нажимать кнопку «Добавить в корзину».

HTML:

<el-button class="shop-cart" :disabled="dis" @click="addShoppingCart">
  加入购物车
</el-button>

Логический код выглядит следующим образом:

methods: {
  ...mapActions(["unshiftShoppingCart", "addShoppingCartNum"]),
  // 加入购物车
  addShoppingCart() {
    // 判断是否登录,没有登录则显示登录组件
    if (!this.$store.getters.getUser) {
      this.$store.dispatch("setShowLogin", true);
      return;
    }
    // 向后端发起请求，把商品信息插入数据库的购物车表
    this.$axios
      .post("/api/user/shoppingCart/addShoppingCart", {
        user_id: this.$store.getters.getUser.user_id,
        product_id: this.productID
      })
      .then(res => {
        switch (res.data.code) {
          case "001":
            // 新加入购物车成功
            this.unshiftShoppingCart(res.data.shoppingCartData[0]);
            this.notifySucceed(res.data.msg);
            break;
          case "002":
            // 该商品已经在购物车，数量+1
            this.addShoppingCartNum(this.productID);
            this.notifySucceed(res.data.msg);
            break;
          case "003":
            // 商品数量达到限购数量
            this.dis = true;
            this.notifyError(res.data.msg);
            break;
          case "401":
            // 没有登录
            this.$store.dispatch("setShowLogin", true);
            this.notifyError(res.data.msg);
            break;
          default:
            this.notifyError(res.data.msg);
        }
      })
      .catch(err => {
        return Promise.reject(err);
      });
  }
}

Мутации vuex:

unshiftShoppingCart(state, data) {
  // 添加商品到购物车
  // 用于在商品详情页点击添加购物车,后台添加成功后，更新vuex状态
  state.shoppingCart.unshift(data);
},
addShoppingCartNum(state, productID) {
  // 增加购物车商品数量
  // 用于在商品详情页点击添加购物车,后台返回002，“该商品已在购物车，数量 +1”，更新vuex的商品数量
  for (let i = 0; i < state.shoppingCart.length; i++) {
    const temp = state.shoppingCart[i];
    if (temp.productID == productID) {
      if (temp.num < temp.maxNum) {
        temp.num++;
      }
    }
  }
}

действия векса:

unshiftShoppingCart({ commit }, data) {
  commit('unshiftShoppingCart', data);
},
addShoppingCartNum({ commit }, productID) {
  commit('addShoppingCartNum', productID);
}

6. Удалить товары из корзины

Идеи:

  • Каждый элемент в корзине имеет кнопку удаления.Когда пользователь нажимает кнопку удаления, сначала появляется диалоговое окно подтверждения;
  • Когда пользователь решит подтвердить удаление, вызовите событие клика deleteItem($event, item.id, item.productID);
  • Получите идентификатор корзины покупок и идентификатор продукта через событие клика;
  • Сначала инициируйте запрос на удаление корзины покупок в бэкэнд и управляйте vuex в соответствии с возвращенной информацией;
  • Если удаление прошло успешно, удалите товар из корзины через Действия vuex (deleteShoppingCart);
  • Если удаление не удалось, будет отображена соответствующая информация.

HTML:

<div class="pro-action">
  <el-popover placement="right">
    <p>确定删除吗？</p>
    <div style="text-align: right; margin: 10px 0 0">
      <el-button type="primary" size="mini" 
      @click="deleteItem($event,item.id,item.productID)">确定</el-button>
    </div>
    <i class="el-icon-error" slot="reference" style="font-size: 18px;"></i>
  </el-popover>
</div>

Логический код выглядит следующим образом:

methods: {
  // 向后端发起删除购物车的数据库信息请求
  deleteItem(e, id, productID) {
    this.$axios
      .post("/api/user/shoppingCart/deleteShoppingCart", {
        user_id: this.$store.getters.getUser.user_id,
        product_id: productID
      })
      .then(res => {
        switch (res.data.code) {
          case "001":
            // 删除成功
            // 更新vuex状态
            this.deleteShoppingCart(id);
            // 提示删除成功信息
            this.notifySucceed(res.data.msg);
            break;
          default:
            // 提示删除失败信息
            this.notifyError(res.data.msg);
        }
      })
      .catch(err => {
        return Promise.reject(err);
      });
  }
}

Мутации vuex:

deleteShoppingCart(state, id) {
  // 根据购物车id删除购物车商品
  for (let i = 0; i < state.shoppingCart.length; i++) {
    const temp = state.shoppingCart[i];
    if (temp.id == id) {
      state.shoppingCart.splice(i, 1);
    }
  }
}

действия векса:

deleteShoppingCart({ commit }, id) {
  commit('deleteShoppingCart', id);
}

7. Изменить количество товаров в корзине

Идеи:

  • У каждого товара в корзине есть счетчик.Вы можете нажать кнопки «плюс» и «минус», чтобы изменить количество товаров, или напрямую ввести количество товаров в поле ввода для изменения. счетчик используетсяelement-uiизel-input-numberвыполнить.
  • Получить новое количество, индекс элемента корзины (т. е. индекс массива) и идентификатор элемента через событие изменения счетчика;
  • Сначала инициируйте запрос к серверной части, чтобы изменить количество товаров в корзине, и используйте vuex в соответствии с полученной информацией;
  • Если модификация прошла успешно, измените количество товаров в корзине с помощью действий vuex (updateShoppingCart);
  • Если модификация не удалась, отображается сообщение об ошибке. Среди них: количество меньше 1, и не достигает ли количество лимита покупки (в этих двух случаях на фронтенде есть установленная проверка, которая вообще не появляется).

HTML:

<div class="pro-num">
  <el-input-number 
  size="small" 
  :value="item.num" 
  @change="handleChange($event,index,item.productID)" 
  :min="1"
  :max="item.maxNum"
  >
</el-input-number>

Логический код выглядит следующим образом:

// 修改商品数量的时候调用该函数
handleChange(currentValue, key, productID) {
  // 当修改数量时，默认勾选
  this.updateShoppingCart({ key: key, prop: "check", val: true });
  // 向后端发起修改购物车商品数量的请求
  this.$axios
    .post("/api/user/shoppingCart/updateShoppingCart", {
      user_id: this.$store.getters.getUser.user_id,
      product_id: productID,
      num: currentValue
    })
    .then(res => {
      switch (res.data.code) {
        case "001":
          // 001代表修改成功
          // 更新vuex状态
          this.updateShoppingCart({
            key: key,
            prop: "num",
            val: currentValue
          });
          // 提示修改成功信息
          this.notifySucceed(res.data.msg);
          break;
        default:
          // 提示修改失败信息
          this.notifyError(res.data.msg);
      }
    })
    .catch(err => {
      return Promise.reject(err);
    });
}

Мутации vuex:

updateShoppingCart(state, payload) {
  // 更新购物车
  // 可更新商品数量和是否勾选
  // 用于购物车点击勾选及加减商品数量
  if (payload.prop == "num") {
    // 判断效果的商品数量是否大于限购数量或小于1
    if (state.shoppingCart[payload.key].maxNum < payload.val) {
      return;
    }
    if (payload.val < 1) {
      return;
    }
  }
  // 根据商品在购物车的数组的索引和属性更改
  state.shoppingCart[payload.key][payload.prop] = payload.val;
}

действия векса:

updateShoppingCart({ commit }, payload) {
  commit('updateShoppingCart', payload);
}

8. Отмечать ли товар галочкой

Идеи:

  • У каждого товара в корзине есть галочка, используйтеelement-uiизel-checkboxРеализовано, представить все проверенные продукты на кассе.
  • Получить статус флажка (истина или ложь) и индекс элемента корзины (то есть индекс массива) через событие изменения;
  • Изменить статус проверки элементов корзины покупок с помощью действий vuex (updateShoppingCart);

html:

<div class="pro-check">
  <el-checkbox :value="item.check" @change="checkChange($event,index)"></el-checkbox>
</div>

Логический код выглядит следующим образом:

checkChange(val, key) {
  // 更新vuex中购物车商品是否勾选的状态
  this.updateShoppingCart({ key: key, prop: "check", val: val });
}

проиллюстрировать:Mutationsvuex и действия vuex, используемые здесь, иИзменить количество продуктаЭто одно и то же, два сценария, отличающиеся разными передаваемыми параметрами.Изменить количество продуктаПри передаче параметров {key: key, prop: "num", val: val},Проверять ли продуктПереданные параметры: {key: key, prop: "check", val: val}, обратите вниманиеpropИзменение.

9. Нужно ли выбирать все продукты

Идеи:

  • Корзина установлена ​​с полем для выбора, связанным v-моделью.isAllCheck.
  • isAllCheckЗначение getters.getIsAllCheck в vuex через геттер вычисляемого свойства;
  • Getters.getIsAllCheck в vuex просматривает массив корзины покупок, чтобы определить статус проверки каждого продукта.Пока один продукт не проверен, getIsAllCheck имеет значение false, в противном случае это правда;
  • Когда флажок установлен, действия (checkAll) vuex вызываются через установщик вычисляемого свойства, чтобы изменить статус проверки каждого элемента, тем самым изменяя статус флажка.

HTML:

<div class="pro-check">
  <el-checkbox v-model="isAllCheck">全选</el-checkbox>
</div>

Логический код выглядит следующим образом:

computed: { 
  isAllCheck: {
    get() {
      return this.$store.getters.getIsAllCheck;
    },
    set(val) {
      this.checkAll(val);
    }
  }
}

геттеры vuex:

getIsAllCheck(state) {
  // 判断是否全选
  let isAllCheck = true;
  for (let i = 0; i < state.shoppingCart.length; i++) {
    const temp = state.shoppingCart[i];
    // 只要有一个商品没有勾选立即return false;
    if (!temp.check) {
      isAllCheck = false;
      return isAllCheck;
    }
  }
  return isAllCheck;
}

Мутации vuex:

checkAll(state, data) {
  // 点击全选按钮，更改每个商品的勾选状态
  for (let i = 0; i < state.shoppingCart.length; i++) {
    state.shoppingCart[i].check = data;
  }
}

действия vuex

checkAll({ commit }, data) {
  commit('checkAll', data);
}

10. Подсчитайте общее количество товаров в корзине

Используется в верхней панели навигации страницы корзины и корневого компонента.

геттеры vuex:

getNum(state) {
  // 购物车商品总数量
  let totalNum = 0;
  for (let i = 0; i < state.shoppingCart.length; i++) {
    const temp = state.shoppingCart[i];
    totalNum += temp.num;
  }
  return totalNum;
}

11. Подсчитайте общее количество проверенных товаров в корзине.

Используется на странице корзины и странице оформления заказа.

геттеры vuex:

getCheckNum(state) {
  // 获取购物车勾选的商品总数量
  let totalNum = 0;
  for (let i = 0; i < state.shoppingCart.length; i++) {
    const temp = state.shoppingCart[i];
    if (temp.check) {
      totalNum += temp.num;
    }
  }
  return totalNum;
}

12. Рассчитайте общую стоимость проверенных товаров в корзине.

Используется на странице корзины и странице оформления заказа.

геттеры vuex:

getTotalPrice(state) {
  // 购物车勾选的商品总价格
  let totalPrice = 0;
  for (let i = 0; i < state.shoppingCart.length; i++) {
    const temp = state.shoppingCart[i];
    if (temp.check) {
      totalPrice += temp.price * temp.num;
    }
  }
  return totalPrice;
}

13. Сгенерируйте информацию о продуктах, проверенных в корзине.

Используйте его на странице оформления заказа.

геттеры vuex:

getCheckGoods(state) {
  // 获取勾选的商品信息
  // 用于确认订单页面
  let checkGoods = [];
  for (let i = 0; i < state.shoppingCart.length; i++) {
    const temp = state.shoppingCart[i];
    if (temp.check) {
      checkGoods.push(temp);
    }
  }
  return checkGoods;
}

Суммировать

На данный момент интерфейсная часть корзины реализована полностью: синхронизация данных корзины из базы данных, динамическая генерация страницы корзины в соответствии с данными корзины, добавление товаров в корзину, удаление товаров в корзина, изменение количества товаров в корзине, ставить галочку Выбрать продукты в корзине, выбирать ли все продукты в корзине, подсчитывать общее количество товаров в корзине, подсчитывать общее количество проверенных товаров в корзине покупок, рассчитайте общую стоимость проверенных продуктов в корзине и сгенерируйте проверенные продукты в корзине.

постскриптум

Все кончено, новичок пишет впервые, если что-то не так, дайте еще совет ^_^

В этой статье кратко описана реализация модуля корзины покупок на основе всего проекта.

Полный репозиторий кода проекта:GitHub.com/yet-27/v ue-….

Ссылка на предварительный просмотр проекта: http://106.15.179.105 (Нет совместимого мобильного терминала, для доступа используйте ПК).

Если вам понравилась эта статья, вы можете поставить лайк.Было бы лучше, если бы вы добавили звезду в полный репозиторий кода проекта, спасибо ^_^

Будут сделаны дополнительные резюме этого проекта, и заинтересованные студенты могут обратить внимание.

Спасибо за прочтение!

автор hai-27

8 марта 2020 г.

Категории