当前位置: 首页 > news >正文

12前端项目----添加购物车1.0

商品添加购物车

    • 商品数量
    • 添加购物车
    • 浏览器本地存储
      • localStorage
      • sessionStorage
      • 添加成功页面

商品数量

输入为数字,最少为1
<div class="cartWrap"><div class="controls"><input autocomplete="off" class="itxt" v-model.number="skuNum" @input='validateNum'><a href="javascript:" class="plus" @click="skuNum++">+</a><a href="javascript:" class="mins" @click="skuNum>1?sku--:sku=1">-</a></div><div class="add"><a @click="addToCart">加入购物车</a></div>
</div>
data(){return {skuNum:1}
},
  • v-model.number
    初始非数字字符问题:只能保证先输入数字后面的非数字字符能够去除,如果用户首先输入非数字字符(如字母、符号),v-model.number 不会自动过滤,会导致 skuNum 变为 NaN
    小数问题:v-model.number 会保留小数部分,而商品数量通常需要整数
//判断数量输入合法
methods:{validateNum(){//首先确保是数字if(isNaN(this.num)){this.num=1;}//限制最大值和最小值if (this.num < 1) {this.num = 1;} else if (this.num > 99) {this.num = 99;}//去除小数-取整this.num = Math.floor(this.num);}
}

添加购物车

是将产品添加到服务器里,在购物车页面展示的是服务器的数据

接口:用于将产品添加到购物车中,以及可以修改购物车产品数量

//api接口		需要传递商品数量以及商品id
export const reqAddOrUpdateCart = (skuId,skuNum)=>requests({url:`/cart/addToCart/${skuId}/${skuNum}`,method:'post'})

然后就是在仓库封装函数

//detail仓库
const actions = {……,async addToCart({commit},skuId.skuNum){let result = await reqAddOrUpdateCart(skuId,skuNum);console.log(result);}
}

回到Detail组件绑定addToCart派发actions,vuex发送请求

methods:{async addToCart(){try{await this.$store.dispatch('addToCart',this.$route.params.skuId,this.skuNum);//成功则进行路由跳转到购物车this.$router.push(……)}catch(error){alert(error.message);}}
}

注意:加入购物车不需要仓库存储数据,只是将数据带给服务器,写入服务器,并不需要服务器返回数据。

async函数执行返回的是一个promise对象

浏览器本地存储

浏览器本地存储(webStorage)分为localStoragesessionStorage

  • sessionStorage浏览器一关则数据就清空了,表示会话结束
    但loaclStorage还存在,用户调用clear()的API或者主动清空缓存才会没
  • getItem(),如果value找不到,则会返回null
    (JSON.parse(null)结果仍为null)

localStorage

  1. 存储key-value----localStorage.setItem(key,value)
 //key和value都是字符串const p = {name:'Stella',age:21};
localStorage.setItem('msg','hello1');
//localStorage.setItem('person',p);//value为[object Object]--变成字符串形式
localStorage.setItem('person',JSON.stringify(p));//{"name":"Stella","age":21}	
//没有则是null
  1. 获取value----localStorage.getItem(key)
const value = localStorage.getItem('msg');//hello1
const p = JSON.parse(localStorage.getItem('person'));
  1. 移除key-value----localStorage.removeItem(key)
  2. 清空本地存储数据----localStorage.clear()

sessionStorage

  1. 存储key-value----sessionStorage.setItem(key,value)
const p = {name:'Stella',age:21};
sessionStorage.setItem('msg','hello1');
//sessionStorage.setItem('person',p);//value为[object Object]--变成字符串形式
sessionStorage.setItem('person',JSON.stringify(p));//{"name":"Stella","age":21}	
//没有则是null
  1. 获取value----sessionStorage.getItem(key)
const value = sessionStorage.getItem('msg');//hello1
const p = JSON.parse(sessionStorage.getItem('person'));
  1. 移除key-value----sessionStorage.removeItem(key)
  2. 清空本地存储数据----sessionStorage.clear()

localStorage和sessionStorage的API起始一样,只是存储方式不同,本地存储时持久化的,需要手动;会话存储并非持久的,会话结束数据就消失
浏览器本地存储功能localStorage和sessionStorage,是HTML5新增

添加成功页面

项目中点击添加购物车会展示添加成功页面,每添加一次就会展示一次该商品的信息添加成功。在这个过程中每个商品添加成功的过程只展现一次,然后是点击到购物车付款。

  • 从商品页到添加购物车成功页,如何将商品信息传递过去?
  • 通过路由传参?商品信息是个对象,对象里面有大量数据,那样路由地址很不清晰
  • 通过将商品信息存储在会话存储中,当添加成功页面展示时调取会话中的数据。会话结束了数据就会消失。

注意key,value都是字符串,需要将对象转换成字符串JSON.stringify(),获取又将字符串转为对象JSON.parse()

点击添加购物车按钮事件中将商品信息存储在会话中sessionStorage.setItem('skuInfo',JSON.stringify(this.skuInfo))
在成功添加页面computed计算出属性,获取数据JSON.parse(sessionStorage.getItem('skuItem'))然后展示数据

相关文章:

  • 基于 SpringBoot 与 Redis 的缓存预热案例
  • git提交规范记录,常见的提交类型及模板、示例
  • Awesome-Embodied-AI:具身AI机器人领域最全资源汇总(含人形机器人,多足机器人,灵巧手等精选资源)
  • Java程序员转人工智能入门学习路线图(2025版)
  • 【速写】conda安装(linux)
  • android ams调试指令介绍
  • 深度学习实验中,需要设置验证集吗?
  • 【计算机视觉】CV实战项目-高分辨率遥感图像语义分割:High-Resolution-Remote-Sensing-Semantic-Segmentation
  • Zookeeper断开连接时分布式锁释放问题的解决方案
  • 线上查询车辆出险记录:快速掌握事故情况!
  • spring-rabbit的CachingConnectionFactory默认参数导致消费者Channel数量暴增问题解决
  • Linux学习——FTP(功能实现)
  • 【KWDB 创作者计划】_KWDB引领数据库技术革新的璀璨之星
  • 《Vue3学习手记6》
  • 【vLLM 学习】CPU 离线处理
  • Alibaba Druid 完整配置与 Keepalive 优化指南
  • 《全球反空间能力》报告翻译——部分1
  • Mysql中隐式内连接和显式内连接的区别
  • 自然语言to SQL的评估
  • 二叉树遍历(C语言版)
  • 流浪猫给车主造成困扰,长春一小区拟投药应对?律师:此举欠妥
  • 庆祝中华全国总工会成立100周年暨全国劳动模范和先进工作者表彰大会隆重举行,习近平发表重要讲话
  • 民生访谈|宝妈宝爸、毕业生、骑手……上海如何为不同人群提供就业保障
  • 国家税务总局:“二套转首套”可以享受贷款利息个税专项扣除
  • 暴涨96%!一季度“中国游中国购”持续升温,还有更多利好
  • “天链”继续上新!长三乙火箭成功发射天链二号05星