76-80购物车功能

1.修改产品的选中状态

在这里插入图片描述
1.利用axios定义接口信息 注意是否传参 url method,其中url涉及到baseUrl
2.这个页面属于购物车页面,所以在这里购物车的vuex获取数据 (如果成功/失败)
3.对应购物车组件派发数据,执行派发的契机:复选框状态发生变化,change事件来监测调用函数
4.传参:产品id 选中元素checked
5.try catch 判断数据是否返回成功

2.删除购物车产品的操作

在这里插入图片描述

1.定义删除接口,只要将参数传入,接口会自动帮你处理删除数据
2.vuex获取数据,不用得到真正的数据只需要请求成功 判断成功与否
3.组件:鼠标点击删除数据,传参;成功返回数据,失败返回

3.修改或者处理购物车产品数量

在这里插入图片描述
1.接口准备传参,传参成功,数据库更新
2.vuex捞数据 购物车产品的数量变化在detail详情设置
3.设置组件:(1)使用三个不同的字符串来标识不同的操作+ - 最终值
(2)(switch)三个操作三种情况传如后台的参数变化量disNum
(3)派发数据 发送请求(每次进行一个操作都要请求数据)

4.动态展示数据

在这里插入图片描述1.接口
2.vuex获取数据注意缩写和数据的初始化
3.页面一上来就请求数据 所以使用mounted定义请求数据,在methods中定义函数
4.数据的获取 如总价需要计算
5.全选状态,只有使用every遍历每一个数据中的isChecked,都为1才为选中状态

在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值