作者 | hai_27
前言
上学期利用课余时间学习了Vue.js，Node.js，一直想做个完整的项目实践一下，但之前在学校并没有那么多的时间。现在恰好有时间，就想着做一个项目巩固之前学到的东西。
思来想去，最后决定模仿小米商城做一个电商项目，目前已经差不多做完了，此处就购物车模块的实现进行总结。
效果
话不多说，先看效果。
实现步骤
1、静态页面准备
页面使用了元件的UI的Icon 图标， ，el-checkbox，el-input-number，el-popover，el-button所有在main.js需要引入元件的UI。
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、创建Vuex
/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、动态生成购物车页面
思路：
- 通过vuex中的getters.getShoppingCart获取购物车的状态；
- 使用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的getters：
getShoppingCart(state) { // 获取购物车状态 return state.shoppingCart;}5、添加商品到购物车
思路：
- 用户在商品的详情页面，通过点击加入购物车按钮，调用点击事件addShoppingCart；
- 先向最初发起添加购物车的请求，根据返回信息操作vuex；
- 该商品第一次加入购物车：通过vuex的Actions（unshiftShoppingCart）把重新返回的购物车信息插入vuex；
- 该商品已经在购物车，通过vuex的Actions（addShoppingCartNum）把该商品数量+1；
- 商品数量达到限购数量，禁止点击加入购物车按钮。
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++; } } }}vuex的动作：
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：
<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); } }}vuex的动作：
deleteShoppingCart({ commit }, id) { commit('deleteShoppingCart', id);}7、修改购物车商品的数量
思路：
- 购物车每个商品都有一个计数器，可以点击加减按钮修改商品数量，或者直接在输入输入框输入商品数量进行修改。计数器使用了element-ui的
el-input-number实现。 - 通过计数器的变化事件获取到新的数量，购物车商品的索引（即副本的索引），商品id；
- 先向最初发起修改购物车商品数量的请求，根据返回信息操作vuex；
- 修改成功，通过vuex的Actions（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;}vuex的动作：
updateShoppingCart({ commit }, payload) { commit('updateShoppingCart', payload);}8、是否可以商品
思路：
- 购物车每个商品都有一个替换框，使用element-ui的
el-checkbox实现，结算时提交全部重置的商品。 - 通过change事件获取到拖动框的状态（是或否），购物车商品的索引（即细分的索引）；
- 通过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 });}说明：此处使用的vuex的变异vuex和动作，和修改商品数量的是同一个，两个场景，通过传递的参数不同进行区分。修改商品数量时传递参数是{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；
- 当点击全选框，通过计算属性的设置器调用vuex的操作（checkAll），更改每个商品的位置，从而修改全选框的状态。
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的getters：
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的getters：
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的getters：
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的getters：
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的getters：
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;}总结
至此之后，购物车的前端部分已经全部实现：从数据库同步购物车数据，根据购物车数据动态生成购物车页面，添加商品到购物车，删除购物车中的商品，修改购物车商品的数量，是否勾选购物车商品，是否全选购物车商品，计算购物车中商品的总数量，计算购物车中偏移的商品总数量，计算购物车中偏移的商品总价格，生成购物车中重置的商品详细信息。
补充说明一下
- 新人第一次发文，若有不对的地方，请多多指教^ _ ^
- 本文是基于完整项目，就购物车模块的实现进行总结。
- 完整项目代码仓库：https://github.com/hai-27/vue-store
- 项目预览链接：http ://106.15.179.105（没有兼容移动端，请使用PC访问）。
- 喜欢此文的小伙伴，不妨点个赞，如果能给完整项目代码仓库加个Star就更好了，谢谢^ _ ^
- 对这个项目会做更多的总结，研究的同学可以点个关注。
- 感谢你的阅读！
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
