Vue项目--尚品汇(购物车页面的一些操作(修改数量,勾选,删除等))
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.全选按钮,将所有未选中的商品勾选(同上,需要判断是否勾选,未勾选的向服务器发请求)
需要注意购物车为空的时候,默认取消勾选
相关文章
- 【css/vue】Vue组件中对body操作样式的一种解决方案
- 关于Vue项目npm操作中npm run serve或npm run dev报错以及二者区别
- vue.js+node.js前端实战开发(一)————cmd命令搭建项目
- vue.js-详解三大流行框架VUE_快速进阶前端大咖-Vue基础
- vue项目目录结构
- vue项目如何监听窗口变化,达到页面自适应?
- vue组件之间的通信
- 在Vue项目中加载krpano全景图
- vue项目哀悼日
- vue 3.0 项目搭建移动端 (二) Vue-router: router-link 与 router-view keep-alive
- Vue项目中使用svg图标
- 给 vue项目添加ESLint
- Vue--mui-- 顶部滑动条实例
- Vue---请求数据--resource
- Vue移动端报错[Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive.
- 小程序和Vue利用swiper实现icons分页显示--动态计算
- 【vue init】一.使用vue init搭建vue项目
- [js高手之路] vue系列教程 - 绑定class与行间样式style(6)
- Vue之自定义组件的v-model
- 如何使用@vue/cli 3.0在npm上创建,发布和使用你自己的Vue.js组件库
- 前端技术:vue(Vue项目中-axios设置默认请求地址和请求头)
- Web 前端 之 Vue vue cli 环境的搭建简单整理(简单的一些注意事项)
- SpringBoot+Vue前后端分离项目 打包部署CentOS7 适合初学者部署学习
- Django+Vue项目学习第二篇:vue项目创建
- Vue学习第18天——Vue中的过度与动画效果的使用与案例
- Vue 3 不再支持 IE 11!
- WTM(基于Vue)项目发布记录
- 解决VsCode启动Vue项目报错:‘vue-cli-service‘ 不是内部或外部命令,也不是可运行的程序 或批处理文件。
- [置顶] vue-cli的webpack模板项目配置文件分析