zl程序教程

您现在的位置是:首页 >  前端

当前栏目

Vue项目--尚品汇(购物车页面的一些操作(修改数量,勾选,删除等))

Vue项目 操作 -- 修改 删除 页面 一些
2023-09-11 14:16:32 时间

1.用户身份识别--uuid、本地存储

在src文件夹里新建utils文件夹,创建uuid_token.js用于存储用户的身份标识(游客)。第一次本地存储中没有身份码,使用uuidv4()函数生成,并存储于本地。以后直接在本地存储中获取。

2.在store文件夹中的ShopCart文件中的state,用getUUID()获取用户身份识别码,存储到uuid_token里。

3.修改请求拦截器,将用户身份传递给服务器(给请求头加一个字段)

 将获取到的数据动态展示到ShopCart组件中。

4.可以在购物车里修改某个产品的购买量

 当点击+或者-按钮@click,或者输入input的数量改变@change的时候触发handler事件

 根据点击target不同,给服务器的参数不同 

 数据库中的数据修改,但是网页内容没改变,需要重新发请求获取数据显示。

如果用户点击减少商品个数按钮-速度过快,会导致请求服务来不及,会出现购买数为负,所以要为handler事件添加节流控制 。将以上代码包在throttle函数中。注意async的位置,在里面

 5.在购物车中删除某个商品

也需要像服务器发请求,请求的方式是Delete,需要传产品id。 

store的action中添加: 

 接口配置:

 6.勾选/取消勾选某个产品

调接口,请求方式为get,参数为产品id和勾选状态,返回的data为null

复选框勾选状态改变事件的处理:

7.删除选中商品

可以通过context.dispatch调用同级的action函数。

遍历getter数据,为checked为真的数据调用一次删除操作。将删除操作返回的promise存储到promiseALL 数组中,便于用Promise.all([])函数判断所有删除操作是否全部成功。

actions:

 点击‘删除选中商品’按钮,触发以下操作:

注意删除完以后需要再次发请求获取最新数据存储到仓库中。

 8.全选按钮,将所有未选中的商品勾选(同上,需要判断是否勾选,未勾选的向服务器发请求)

需要注意购物车为空的时候,默认取消勾选