黑马程序员技术交流社区

标题: 【上海校区】基于Vuex实现小米商城购物车 [打印本页]

作者: 没名字i 时间: 2020-3-11 10:59
标题: 【上海校区】基于Vuex实现小米商城购物车
本帖最后由没名字i 于 2020-3-11 11:03 编辑

实现步骤
1. 静态页面准备

页面使用了 element-ui 的Icon 图标、el-checkbox、el-input-number、el-popover、el-button，所有在main.js需要引入element-ui。

[AppleScript] 纯文本查看 复制代码

import ElementUI from 'element-ui';

import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

页面代码如下：
说明：为了方便，此处直接放最终的代码。

[AppleScript] 纯文本查看 复制代码

<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. 创建Vuex
/store/index.js

[AppleScript] 纯文本查看 复制代码

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中购物车的状态设置为空。

代码如下：

[AppleScript] 纯文本查看 复制代码

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的mutations：

setShoppingCart (state, data) {

        // 设置购物车状态

        state.shoppingCart = data;

},

vuex的actions

setShoppingCart({ commit }, data) {

  commit('setShoppingCart', data);

}

4. 动态生成购物车页面
思路：

通过vuex中的getters.getShoppingCart获取购物车的状态；
使用v-if判断购物车是否存在商品；
如果存在，使用v-for生成购物车列表；
如果不存在，显示购物车为空的时候显示的内容；

购物车html伪代码：

[AppleScript] 纯文本查看 复制代码

<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的getters：

getShoppingCart(state) {

  // 获取购物车状态

  return state.shoppingCart;

}

5.添加商品到购物车
思路：

用户在商品的详情页，通过点击加入购物车按钮，调用点击事件addShoppingCart；
先向后端发起添加购物车的请求，根据返回信息操作vuex；
该商品第一次加入购物车：通过vuex的 Actions (unshiftShoppingCart)把后端返回的购物车信息插入vuex；
该商品已经在购物车，通过vuex的 Actions (addShoppingCartNum)把该商品数量+1；
商品数量达到限购数量，禁止点击加入购物车按钮。

html：

[AppleScript] 纯文本查看 复制代码

<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的mutations：

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;

    if (temp.productID == productID) {

      if (temp.num < temp.maxNum) {

        temp.num++;

      }

    }

  }

}

复制代码vuex的actions：

unshiftShoppingCart({ commit }, data) {

  commit('unshiftShoppingCart', data);

},

addShoppingCartNum({ commit }, productID) {

  commit('addShoppingCartNum', productID);

}

6. 删除购物车中的商品
思路：

购物车每个商品都有一个删除按钮，用户点击删除按钮，先弹出确认对话框；
当用户选择确认删除，调用点击事件deleteItem($event,item.id,item.productID)；
通过点击事件获取到购物车id和商品id；
先向后端发起删除购物车的请求，根据返回信息操作vuex；
删除成功，通过通过vuex的 Actions (deleteShoppingCart)，把该商品从购物车删除；
如果删除失败，提示相关信息。

html：

[AppleScript] 纯文本查看 复制代码
<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>

逻辑代码如下：

[AppleScript] 纯文本查看 复制代码
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的mutations：

[AppleScript] 纯文本查看 复制代码
deleteShoppingCart(state, id) {
  // 根据购物车id删除购物车商品
  for (let i = 0; i < state.shoppingCart.length; i++) {
const temp = state.shoppingCart;
if (temp.id == id) {
   state.shoppingCart.splice(i, 1);
}
  }
}

vuex的actions：

[AppleScript] 纯文本查看 复制代码
deleteShoppingCart({ commit }, id) {
  commit('deleteShoppingCart', id);
}

7. 修改购物车商品的数量
思路：

购物车每个商品都有一个计数器，可以点击加减按钮修改商品数量，或者直接在input输入框输入商品数量进行修改。计数器使用了 element-ui 的el-input-number实现。
通过计数器的 change 事件获取到新的数量、购物车商品的索引(即数组的索引)、商品id；
先向后端发起修改购物车商品数量的请求，根据返回信息操作vuex；
修改成功，通过vuex的 Actions (updateShoppingCart)，修改购物车商品的数量；
修改失败，提示失败信息。其中：数量小于1、数量是否达到限购数量（这两种情况，前端有设置校验，一般不会出现）。

html：

[AppleScript] 纯文本查看 复制代码
<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>

逻辑代码如下：

[AppleScript] 纯文本查看 复制代码
// 修改商品数量的时候调用该函数
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的mutations：

[AppleScript] 纯文本查看 复制代码
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;
}

vuex的actions：

[AppleScript] 纯文本查看 复制代码
updateShoppingCart({ commit }, payload) {
  commit('updateShoppingCart', payload);
}

8. 是否勾选商品
思路：

购物车每个商品都有一个勾选框，使用element-ui 的el-checkbox实现，结算时提交全部勾选的商品。
通过 change 事件获取到勾选框的状态（true或false）、购物车商品的索引(即数组的索引)；
通过vuex的 Actions (updateShoppingCart)，修改购物车商品的勾选状态；

html:

[AppleScript] 纯文本查看 复制代码
<div class="pro-check">
  <el-checkbox :value="item.check" @change="checkChange($event,index)"></el-checkbox>
</div>

逻辑代码如下：

[AppleScript] 纯文本查看 复制代码
checkChange(val, key) {
  // 更新vuex中购物车商品是否勾选的状态
  this.updateShoppingCart({ key: key, prop: "check", val: val });
}

说明：此处使用的vuex的mutationsvuex和actions，和修改商品数量的是同一个，两个场景，通过传递的参数不同进行区分。修改商品数量时传递参数是{ key: key, prop: "num", val: val }，是否勾选商品传递的参数是{ key: key, prop: "check", val: val }，请注意prop的变化。
9. 是否全选商品
思路：

购物车设置了一个全选框，通过v-model绑定isAllCheck。
isAllCheck**值是通过计算属性的 getter获取vuex中的getters.getIsAllCheck;
vuex中的getters.getIsAllCheck通过遍历购物车数组，判断每一个商品勾选状态，只要有一个商品没有勾选，getIsAllCheck均为false，否则为true；
当点击全选框，通过计算属性的 setter 调用vuex的Actions (checkAll)，更改每个商品的勾选状态，从而修改全选框的状态。

html：

[AppleScript] 纯文本查看 复制代码
<div class="pro-check">
  <el-checkbox v-model="isAllCheck">全选</el-checkbox>
</div>

逻辑代码如下：

[AppleScript] 纯文本查看 复制代码
computed: {
  isAllCheck: {
get() {
   return this.$store.getters.getIsAllCheck;
},
set(val) {
   this.checkAll(val);
}
  }
}

[AppleScript] 纯文本查看 复制代码
vuex的getters：
getIsAllCheck(state) {
  // 判断是否全选
  let isAllCheck = true;
  for (let i = 0; i < state.shoppingCart.length; i++) {
const temp = state.shoppingCart;
// 只要有一个商品没有勾选立即return false;
if (!temp.check) {
   isAllCheck = false;
   return isAllCheck;
}
  }
  return isAllCheck;
}

[AppleScript] 纯文本查看 复制代码
vuex的mutations：
checkAll(state, data) {
  // 点击全选按钮，更改每个商品的勾选状态
  for (let i = 0; i < state.shoppingCart.length; i++) {
state.shoppingCart.check = data;
  }
}
复制代码vuex的actions
checkAll({ commit }, data) {
  commit('checkAll', data);
}

10. 计算购物车中商品的总数量
在购物车页面和根组件的顶部导航栏使用。

[AppleScript] 纯文本查看 复制代码
vuex的getters：
getNum(state) {
  // 购物车商品总数量
  let totalNum = 0;
  for (let i = 0; i < state.shoppingCart.length; i++) {
const temp = state.shoppingCart;
totalNum += temp.num;
  }
  return totalNum;
}

11. 计算购物车中勾选的商品总数量
在购物车页面和结算页面使用。

[AppleScript] 纯文本查看 复制代码
vuex的getters：
getCheckNum(state) {
  // 获取购物车勾选的商品总数量
  let totalNum = 0;
  for (let i = 0; i < state.shoppingCart.length; i++) {
const temp = state.shoppingCart;
if (temp.check) {
   totalNum += temp.num;
}
  }
  return totalNum;
}

12. 计算购物车中勾选的商品总价格
在购物车页面和结算页面使用。

[AppleScript] 纯文本查看 复制代码
vuex的getters：
getTotalPrice(state) {
  // 购物车勾选的商品总价格
  let totalPrice = 0;
  for (let i = 0; i < state.shoppingCart.length; i++) {
const temp = state.shoppingCart;
if (temp.check) {
   totalPrice += temp.price * temp.num;
}
  }
  return totalPrice;
}

13.生成购物车中勾选的商品详细信息
在结算页面使用。

[AppleScript] 纯文本查看 复制代码
vuex的getters：
getCheckGoods(state) {
  // 获取勾选的商品信息
  // 用于确认订单页面
  let checkGoods = [];
  for (let i = 0; i < state.shoppingCart.length; i++) {
const temp = state.shoppingCart;
if (temp.check) {
   checkGoods.push(temp);
}
  }
  return checkGoods;
}

总结
至此，购物车的前端部分已经全部实现：从数据库同步购物车数据，根据购物车数据动态生成购物车页面，添加商品到购物车，删除购物车中的商品，修改购物车商品的数量，是否勾选购物车商品，是否全选购物车商品，计算购物车中商品的总数量，计算购物车中勾选的商品总数量，计算购物车中勾选的商品总价格，生成购物车中勾选的商品详细信息。

链接：https://juejin.im/post/5e660ef9518825490276748a

欢迎光临黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2