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

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

news 来源：原创 2025/5/25 11:09:05

商品添加购物车

- 商品数量
- 添加购物车
- 浏览器本地存储
- - 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）分为localStorage和sessionStorage

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

localStorage

存储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

获取value----localStorage.getItem(key)

const value = localStorage.getItem('msg');//hello1
const p = JSON.parse(localStorage.getItem('person'));

移除key-value----localStorage.removeItem(key)
清空本地存储数据----localStorage.clear()

sessionStorage

存储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

获取value----sessionStorage.getItem(key)

const value = sessionStorage.getItem('msg');//hello1
const p = JSON.parse(sessionStorage.getItem('person'));

移除key-value----sessionStorage.removeItem(key)
清空本地存储数据----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'))然后展示数据