vue商城购物车功能开发(含动图)

红太狼 2022-01-29 12:53 273阅读 0赞

购物车不管实在众多的电商网站还是手机APP中都很常见，它的实现逻辑也是相对复杂的。购物车作为组件开发，在其他应用或者页面也可以拿来直接使用。包含如下功能：

*  购物车模板
 *  商品数量加减
 *  商品总价结算
 *  商品删除
 *  商品全选反选

实现效果如下：  
![在这里插入图片描述][20190522205503397.gif]

## 1.购物车页面模板实现 ##

1.  引入bootstrap  
    购物车的页面不再使用html一点点的写，这里使用bootstrap，比较节省时间。所以要引入bootstrap，可以在BootCDN复制链接，如下：  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3cxNDE4ODk5NTMy_size_16_color_FFFFFF_t_70]  
    ![在这里插入图片描述][20190522133015930.png]
2.  使用bootstrap的面板组件构建页面  
    选择带标题的面板和带表格的面板及有脚注的面板结合，因为购物车页面需要有标题的表格，也需要有总价结算这样一个脚注栏。  
    使用bootstrap一个优点就是只需要填写对应的class即可。如面板类`.panel` ，面板标题类`.panel-heading`.panel-title和主体`.panel-body`。具体使用可以参考bootstrap官网。
    
    写的购物车模板如下图：  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3cxNDE4ODk5NTMy_size_16_color_FFFFFF_t_70 1]  
    代码如下：
    
        <div class="container" id="app">
        	<div class="row">
        		
        		<div class="panel panel-default">
        			<div class="panel-heading">
        				<h3 class="panel-title">我的购物车</h3>
        			</div>
        			<div class="panel-body">
        				
        				<table class="table table-hover">
        					<thead>
        						<tr>
        							<th><input type="checkbox"></th>
        							<th>商品名称</th>
        							<th>商品单价</th>
        							<th>购买数量</th>
        							<th>小计</th>
        							<th>商品操作</th>
        						</tr>
        					</thead>
        					<tbody>
        						<tr>
        							<td>
        								<input type="checkbox">
        							</td>
        							<td>1</td>
        							<td>1</td>
        							<td>1</td>
        							<td>1</td>
        							<td>
        								<div class="btn-group btn-group-sm">
        									<button class="btn btn-danger" type="button">删除</button>
        								</div>
        							</td>
        						</tr>
        
        					</tbody>
        				</table>
        			</div>
        			
        			<div class="panel-footer" style="text-align: right;">
        				共计<span>100元</span>
        			</div>
        		</div>
        	</div>
        </div>

## 2.购物车页面模板实现 ##

1.  模拟购物车数据  
    前端先自己模拟数据，如下：
    
        data: { 
        	//模拟购物车数据
        	goods: [
        		{ id:1,name:'极米 （XGIMI ）Play特别版 投影机 投影仪 家用 便携（单手可握 侧投 HDR10解码哈曼卡顿音响内置电池）',price:2499,num:1},
        		{ id:2,name:'荣耀MagicBook 2019 14英寸轻薄窄边框笔记本电脑（AMD锐龙7 3700U 8G 512G FHD IPS 指纹解锁）冰河银',price:4985,num:1},
        		{ id:3,name:'盼盼 手撕面包 饼干蛋糕整箱大礼包箱装 奶香味2000g',price:52.5,num:2},
        		{ id:4,name:'洗面奶洗面奶洗面奶洗面奶洗面奶洗面奶洗面奶洗面奶',price:56,num:3},
        		{ id:5,name:'联想 K5 Note 4GB+64GB 6英寸全面屏双摄手机 全网通 移动4G+ 双卡双待 极地黑',price:999,num:1},
        		{ id:6,name:'小米MIX2 全面屏游戏手机 6GB+64GB 黑色 全网通4G手机 双卡双待 5.99"大屏',price:1299,num:1},
        		{ id:7,name:'Apple MacBook Pro 15.4英寸笔记本电脑 银色（2017款Multi-Touch Bar/Core',price:15888,num:1},
        		{ id:8,name:'OPPO R15 全面屏双摄拍照手机 4G+128G 幻色粉 全网通 移动联通电信',price:2799,num:1},
        	]
        }
2.  数据循环渲染到页面中  
    在每一行处，即`<tr>`标签处使用v-for指令循环读取数据。然后使用item取商品信息。如下：  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3cxNDE4ODk5NTMy_size_16_color_FFFFFF_t_70 2]  
    渲染后的结果为：  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3cxNDE4ODk5NTMy_size_16_color_FFFFFF_t_70 3]

## 3.购物车数量加减删除及总价实现 ##

*  3.1 商品数量的增加  
    商品数量增加是给加号+绑定点击事件，每点击+一次即商品的数量num加1，通过v-model绑定商品的数量num，点击加号+一次，框中数字就会加1。这就实现了数据的双向绑定。如下：  
    ![在这里插入图片描述][20190522173520615.png]  
    实现方法：  
    ![在这里插入图片描述][20190522173545710.png]
 *  3.2 商品数量的减少  
    商品的减少与商品的增加实现类似，即是对减号-绑定点击事件，事件的方式是商品数量num的自减，input框中数字已通过v-model双向绑定。  
    不同点是当数量小于1件时，删除商品信息。因此要做一个判断。当商品全部删除完以后，商品购物车列表不需要再呈现出来，因此也要进行一次判断。如下：  
    ![在这里插入图片描述][20190522174020205.png]  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3cxNDE4ODk5NTMy_size_16_color_FFFFFF_t_70 4]
 *  3.3 商品的删除  
    商品的删除最为简单，只需要给删除按钮绑定点击事件，如下：  
    ![在这里插入图片描述][20190522174244761.png]  
    实现方法：  
    ![在这里插入图片描述][20190522174308578.png]  
    【splice方法】：  
    splice() 方法向/从数组中添加/删除项目，然后返回被删除的项目。该方法会改变原始数组。  
    splice() 方法可删除从 index 处开始的零个或多个元素，并且用参数列表中声明的一个或多个值来替换那些被删除的元素。
 *  3.4 商品的总价计算  
    总价就是商品数量与商品价格的乘积，总价的计算使用vue的计算属性，如下：  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3cxNDE4ODk5NTMy_size_16_color_FFFFFF_t_70 5]  
    调用总价计算函数：  
    ![在这里插入图片描述][20190522174933610.png]

经过上面几步实现功能如下：  
![在这里插入图片描述][20190522175311674.gif]

## 4.购物车全选反选实现 ##

判断全选的方法是新建一个数组，点击选中一个商品时，这个商品的id就会push进新建的数组，当所有商品的id都在数组中时，说明全选了，反之，数组是空时说明没有商品被选中。  
综上分析需要对全选框绑定selectAll全选事件，对每个商品前的选择框绑定单选事件select。如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3cxNDE4ODk5NTMy_size_16_color_FFFFFF_t_70 6]  
方法如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3cxNDE4ODk5NTMy_size_16_color_FFFFFF_t_70 7]

购物车内商品选中状态影响总价，因为只需要计算选中商品的价格。所以需要修改总价函数，如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3cxNDE4ODk5NTMy_size_16_color_FFFFFF_t_70 8]

## 4.完善，添加商品图片 ##

可以根据需求添加上商品的图片，只需要在模拟的数据中加上图片选项，如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3cxNDE4ODk5NTMy_size_16_color_FFFFFF_t_70 9]  
绑定商品名称时绑定上商品图片，如下：  
![在这里插入图片描述][20190522203754545.png]  
得到结果为：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3cxNDE4ODk5NTMy_size_16_color_FFFFFF_t_70 10]  
至此，购物车算是基本功能完成了，可以再根据需求及美化页面做一些复杂的处理。

本项目源码：[vue商城项目源码][vue]

## 每天进步一点点、充实一点点、加油！！！ ##

[20190522205503397.gif]: /images/20220129/ebfe1ae99e2945f1a41abda672aa9d39.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3cxNDE4ODk5NTMy_size_16_color_FFFFFF_t_70]: /images/20220129/565878c3d4b44b9daad8e76274053066.png
[20190522133015930.png]: /images/20220129/96b16b751b564c5ca033edf715d47bb1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3cxNDE4ODk5NTMy_size_16_color_FFFFFF_t_70 1]: /images/20220129/437a03d139544c6691795879ed3d18b6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3cxNDE4ODk5NTMy_size_16_color_FFFFFF_t_70 2]: /images/20220129/6562ba32267e43e980111f33b3c512ab.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3cxNDE4ODk5NTMy_size_16_color_FFFFFF_t_70 3]: /images/20220129/c0b2dd1be6574040b30110895d0f9b13.png
[20190522173520615.png]: /images/20220129/0dcb1d2352e948138195d5f5f3eb8a78.png
[20190522173545710.png]: /images/20220129/6ae0beddfa6b4ba58b26ada0cf988758.png
[20190522174020205.png]: /images/20220129/2d3d5e12126042029ed399e3120f5d6a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3cxNDE4ODk5NTMy_size_16_color_FFFFFF_t_70 4]: /images/20220129/bf993e0887ae49feb4e3338555a947e5.png
[20190522174244761.png]: /images/20220129/fd279916d6fa4651babf44b259c8c772.png
[20190522174308578.png]: /images/20220129/2e3dbfdbe54f4ae794c67779fc6a1d3c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3cxNDE4ODk5NTMy_size_16_color_FFFFFF_t_70 5]: /images/20220129/86c0cc445d0c497ba7c3840024da8ed0.png
[20190522174933610.png]: /images/20220129/095f3d2c56f54acead041dac0b55828f.png
[20190522175311674.gif]: /images/20220129/245efc546b7741d0be74abbc024ab07a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3cxNDE4ODk5NTMy_size_16_color_FFFFFF_t_70 6]: /images/20220129/c294672753ab4293b561d1d992d1843f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3cxNDE4ODk5NTMy_size_16_color_FFFFFF_t_70 7]: /images/20220129/9140ca934ea345c1a051585accc1aa35.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3cxNDE4ODk5NTMy_size_16_color_FFFFFF_t_70 8]: /images/20220129/44e2158ecdaa4855bd015e03ecf48982.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3cxNDE4ODk5NTMy_size_16_color_FFFFFF_t_70 9]: /images/20220129/013c25ff706a492aabb7509b3edd7f69.png
[20190522203754545.png]: /images/20220129/07fc0589e01e42568bdb3d47b9ceb274.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3cxNDE4ODk5NTMy_size_16_color_FFFFFF_t_70 10]: /images/20220129/8676140bc823402c9c2c1a6e1e1cf768.png
[vue]: https://github.com/wnn0809/frontProjects