Vue电商项目--购物车操作

news2025/1/11 19:59:26

购物车动态展示数据

但是这个数据的格式不完美

一层套一层

 重新对vuex进行存储处理

这里接口写错

 这一块,我们通过计算属性加工一下,重新渲染到页面上

 在这里我们考虑一个问题,那就是将计算出来的总值计算到页面上

这里还有一个问题,就是全选这个check框

 这里我们需要使用到这个every这个方法Array.prototype.every() - JavaScript | MDN (mozilla.org) 

只要有一个为假就返回false

 效果就是这样,但是存在bug,如果我们取消掉一个函数,总复选框是没有效果的,这个是因为数据并没有发送变化

处理产品数量

先来搞这个商品数量这一块

我们修改这个数量的时候需要发起请求

文档说明

而我们给服务器带数据,第一个肯定是产品的id,第二个为新值-旧值的差值 例如你原先12 然后为13 ,你带给服务器就是+1

 派发的三个属性

其中type,为了区分这三个元素

disNum形参:+变量值(1)-变量值(-1)input最终的个数(并不是变量值)

cart:哪个产品【身上有id】 

修改购物车产品的数量完成

向服务器发请求,修改数量

这里我们可以使用switch  case来操作

这里要注意的一点如果点击的是-号

判断产品的个数大于1,才可以传递给服务器-1

否则 产品的个数小于等于1 传递给服务器的是0

我们可以使用三元表达式 disNum=cart.skuName>1?-1:0来简化

 配发action

 

实现效果

然后添加最后一个情况change

 这个判断是用户输入进来的最终量,如果非法的(带有汉字|出现负数),带给服务器数字为零

否则,属于正常情况(小数,取整),带给服务器变化的量,用户输入进来的--产品的个数 

删除购物车产品的操作

看一下接口文档

/api/cart/deleteCart/{skuId}

我们要对这个进行操作 

然后去找仓库

 然后去找组件

 然后绑定点击事件,没有方法写方法

书写方法,成功向服务器发起请求删除数据,并重新渲染到页面上

 删除成功 

但是这样慢慢点是没有问题的,如果用户快速点

就会变成负数,因此这里我们需要用到节流,我们可以用throttle这个库

修改产品状态

这里我们用到的接口是这个/api/cart/checkCart/{skuID}/{isChecked}

然后先写api 

 写完接口写vuex

 然后派发action

绑定一个change事件,传入俩个参数,分别是你要修改谁,第二个是传入的状态 

带给服务器的参数isChecked,不是布尔值,应该是0|1

如果修改数据成功,再次获取服务器数据(购物车),如果失败就提示 

删除全部选中的商品

注意:没有一次删除很多商品的接口,但是有通过id可以删除产品的接口【一次删除一个】

绑定事件

 这个回调函数咋们没有办法收到一些有用数据 ,因此需要派发action

在这里我们需要使用Promise.all这个方法

数组中每一个都是Promise对象,如果有一个Promise失败,都失败。如果都成功,返回成功

  

然后报错了

 原来是这一块写错了,我这里需要写是Promise这个实例对象 

成功全部删除 

全部产品的勾选状态修改

先绑定一个事件

 派发action,逻辑跟上一个删除全部类似

 书写方法

 实现效果 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/676614.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

qt读写xml文件

Qt使用XML模块,在.pro文件中添加 QT xml Qt 提供了三种读写 XML 文档的方法: QXmlStreamReader/QXmlStreamWriter: 一种快速的基于流的方式访问良格式 XML 文档,特别适合于实现一次解析器(所谓“一次解析器”&…

前端vue入门(纯代码)13

【13.Vue的消息订阅与发布】 备注:全局事件总线用的更多些,消息订阅与发布只需了解即可。【注意点1】:由于“消息订阅与发布”可依赖的第三方库太多了,这里使用pubsub-js 问题:“全局事件总线”和“消息订阅与发布”都…

看完这篇 教你玩转渗透测试靶机vulnhub—Emplre: Breakout

Vulnhub靶机Emplre: Breakout渗透测试详解 Vulnhub靶机介绍:Vulnhub靶机下载:Vulnhub靶机安装:Vulnhub靶机漏洞详解:①:信息收集:②:登入后台:③:GetShell:④…

oracle操作xml格式数据

新建一张用来测试的表 -- Create table create table XMLTEST (id NUMBER,content VARCHAR2(4000) );往表中插入数据 insert into XMLTEST (id, content) values (1, <root><app><id>1</id><name>张三</name><age>18</age…

《网络安全0-100》经典访问控制策略

1经典访问控制策略 1.1自主访问控制 允许用户自己对客体将已有的权限赋予给其他主体&#xff0c;也可以撤销自己赋予给其他主体的权限。 矩阵结构分为三个主要的表&#xff1a; 访问控制矩阵 访问控制列表 权能表 矩阵的局限性&#xff1a; 大小为主体数量客体数量&…

【FPGA】Verilog:时序电路设计 | 自循环移位寄存器 | 环形计数 | 扭环计数 | 约翰逊计数器

前言&#xff1a;本章内容主要是演示Vivado下利用Verilog语言进行电路设计、仿真、综合和下载 示例&#xff1a;计数器 ​​ 功能特性&#xff1a; 采用 Xilinx Artix-7 XC7A35T芯片 配置方式&#xff1a;USB-JTAG/SPI Flash 高达100MHz 的内部时钟速度 存储器&#xff1a;2Mb…

Bresenham直线算法

文章目录 1.Bresenham直线算法1.1 算法流程1.2 Bresenham算法实现1.3matlab中应用1.4 算法优势1.5 对比以往方法的改进和优化1.6 算法改进和缺陷 2.国内外研究现状3.个人感想及算法改进 1.Bresenham直线算法 Bresenham直线算法是一种用于将两点之间的线段绘制在屏幕上的算法。…

什么是MLOps?为什么要使用MLOps进行机器学习实践

随着数字化和计算能力的发展&#xff0c;机器学习&#xff08;Machine Learning&#xff09;技术在提高企业生产力方面所涌现的潜力越来越被大家所重视&#xff0c;然而很多机器学习的模型及应用在实际的生产环境并未达到预期&#xff0c;大量的ML项目被证明是失败的。从机器学…

【Red Hat7.9安装Oracle11g】---调用图形化界面的几种方式

【Red Hat7.9安装Oracle11g】---调用图形化界面的几种方式 &#x1f53b; 一、续上一篇[【Red Hat 7.9---详细安装Oracle 11g---图形化界面方式】](https://blog.csdn.net/qq_41840843/article/details/131198718?spm1001.2014.3001.5501)⛳ 1.1 前言⛳ 1.2 方式一、使用Xmana…

MIT 6.S081 Lab Five

MIT 6.S081 Lab Five 引言xv6 lazy page allocationEliminate allocation from sbrk() (easy)代码解析 Lazy allocation (moderate)代码解析 Lazytests and Usertests (moderate)代码解析 可选的挑战练习 引言 本文为 MIT 6.S081 2020 操作系统 实验五解析。 MIT 6.S081课程前…

从C语言到C++_21(模板进阶+array)+相关笔试题

目录 1. 非类型模板参数 1.1 array 1.2 非类型模板参数的使用场景 1.3 注意事项 2. 模板的特化 2.1 函数模板的特化 2.2 类模板的特化 2.3 全特化和偏特化(半特化) 3. 模板关于分离编译 4. 模板优缺点 5. 模板相关笔试题 本章完。 1. 非类型模板参数 对于函数模板…

dhtmlx Event Calendar JavaScript new Crack

DHTMLX Event Calendar可帮助您开发类似 Google 的 JavaScript 事件日历&#xff0c;以高效地组织约会。用户可以通过拖放来管理事件&#xff0c;并以六种不同的模式显示它们。 JavaScript 事件日历功能 轻的 简单的 JavaScript API 六个默认视图&#xff1a;日、周、月、年、议…

Java并发编程学习16-线程池的使用(中)

线程池的使用&#xff08;中&#xff09; 引言1. 配置 ThreadPoolExecutor1.1 线程的创建与销毁1.2 管理队列任务1.3 饱和策略1.4 线程工厂1.5 定制 ThreadPoolExecutor 2. 扩展 ThreadPoolExecutor总结 引言 上篇分析了在使用任务执行框架时需要注意的各种情况&#xff0c;并…

死锁的成因以及解决方案(简析)

目录 一.为什么会产生死锁? 二.死锁产生的几个场景 一个线程一把锁的情况 关于可重入和不可重入锁的简单举例 两个线程两把锁的情况 多线程多把锁 如何解决死锁 一.为什么会产生死锁? 简单来说,就是进程加锁之后,没有被解锁而处于一直等待的状态 二.死锁产生的几个场景…

深入理解深度学习——BERT(Bidirectional Encoder Representations from Transformers):BERT的结构

分类目录&#xff1a;《深入理解深度学习》总目录 相关文章&#xff1a; BERT&#xff08;Bidirectional Encoder Representations from Transformers&#xff09;&#xff1a;基础知识 BERT&#xff08;Bidirectional Encoder Representations from Transformers&#xff09…

软件架构模式—分层架构

这是软件架构模式博客系列第 2 章&#xff0c;我们将讨论分层架构模式。 分层架构模式是一种n层模式&#xff0c;其中组件按照水平层次进行组织。这是设计大多数软件的传统方法&#xff0c;旨在实现自我独立。这意味着所有组件之间相互连接&#xff0c;但彼此之间不相互依赖。…

测试体系与测试方案设计

如果我们想要测试一个系统&#xff0c;我们得先需要了解被测系统架构 业务架构:业务模型分析技术架构:技术组件、通讯协议分析数据架构:数据模型、数据存储引擎分析 电子商城 Mall 开源项目技术架构 经典技术架构 网关产品 Nginx Apache HttpdWeb 应用开发 Vue.js React移动应…

福州大学学报退稿率【爬虫+数据处理】

目录 一、爬虫 二、数据处理 2.1 历年投稿总数&#xff1a; 2.2 各稿件状态比例&#xff1a; 2.3 历年退稿率 三、总结&#xff08;福州大学学报退稿率&#xff09; 一、爬虫 从福州大学学报微信公众号可以发现稿件状态的查询接口&#xff0c; 根据测试可知稿件号由年份与当…

Linux共享内存

博客内容&#xff1a;共享内存 文章目录 一、认识共享内存结构二、如何创建共享内存&#xff1f;1.创建共享内存2.关联进程&#xff0c;取消进程3.释放共享内存 三、代码示例总结 一、认识共享内存结构 共享内存 共享内存指 (shared memory)在多处理器的计算机系统中&#xff…

新手速成!如何使用ChatGPT成为你的导师

1. 写在前面 最近我发现咱们的团队现在是人手ChatGPT&#xff0c;不光是我们团队&#xff0c;我整个行业的人都在用它解决生活跟工作中遇到的问题。可以看到的是大家也都是对它赞赏度很高 本文我将为大家介绍如何更加高效的使用ChatGPT提高工作效率&#xff0c;面向ChatGPT编程…