前端技术：vue+axios+mockJS实现购物车效果

购物车是一个商城程序的典型功能模块，之前使用jquery制作过，也使用angular开发过，今天将使用Vue实现购物车效果，使用的主要技术有vue+axios+mockJS等。

购物车的主要功能如下：

1. 勾选全选，所有商品全部选中。在取消全选框的时候所有商品取消选择。

2. 点击单个商品上的加号减号进行数量的增加和减少，右边小计实时计算出这个商品的价格合计。

3. 点击单个商品上的删除按钮将商品从购物车中删除。

4. 底部已选实时显示已经勾选的商品，右边合计金额实时显示所有勾选的商品的小计之和。

购物车的实现效果如图所示：

image

一、 HTML页面布局和css样式

image

二、创建一个Vue对象，设置购物车数据属性

image

三、假设从后台请求到数据，然后赋值到Vue对象中

后台数据由mockjs模拟，使用axios发起请求获取数据

3.1 安装axios

npm install axios

3.2 请求url地址

var baseurl="http://axiostest.itsource.cn";

3.3 发起请求获取数据

image

3.4 mockjs拦截请求，模拟数据

image

四、计算购物车的总价

image

五、购物车中增加和减少数量

image

六、添加商品，删除商品，清空购物车

image