Javascript
【Vue项目】尚品汇（六）ShopCar组件开发 购物车模块
本文主要是介绍【Vue项目】尚品汇（六）ShopCar组件开发 购物车模块，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！
4 购物车
4.1 购物车商品数量控制
Detail\index.vue
<div class="cartWrap">
<div class="controls">
<input v-model="skuNum" @change="changeSkuNum" autocomplete="off" class="itxt">
<a href="javascript:" class="plus">+</a>
<a href="javascript:" class="mins">-</a>
</div>
<div class="add">
<a href="javascript:">加入购物车</a>
</div>
</div>
// 商品数量
changeSkuNum(event) {
let value = event.target.value * 1
if(isNaN(value) || value < 1 || value > 999) {
console.log('非法数据')
} else {
this.skuNum = parseInt(value)
}
},
通过* 1的方式判断是否输入为非数字，因为非数字乘1的话会变为undefined
4.2 购物车路由跳转
分析：添加购物车需要两个数据：sku_num和sku_id，服务器返回的数据只是成功或者失败不会返回其他信息。
- 编写api
// api/cart/addToCart/{ skuId }/{ skuNum }
export const reqAddOrUpdateShopCar = (skuId, skuNum) => {
return requests({
url:`/cart/addToCart/${skuId}/${skuNum}`,
method: 'post'
})
}
- vuex编写actions
const actions = {
async getDetailInfo(context, skuId) {
let result = await reqGetDetailInfo(skuId);
if(result.code === 200) {
context.commit('GETDETAILINFO', result.data);
}
},
async addOrUpdateShopCar({context}, {skuId, skuNum}) {
let result = await reqAddOrUpdateShopCar(skuId, skuNum)
if(result.code === 200) {
return 'ok';
} else {
return Promise.reject(new Error('fail'));
}
}
}
不需要再写mutations和state仓库了，因为没有返回数据
后面请求头写完uuid后会产生数据
- 编写路由信息
{
path: '/addShopCarSuccess',
component: AddCartSuccessrt,
name: 'addShopCarSuccess',
meta: {
showFooter: true
}
}
- 根据返回的结果进行响应路由跳转
// 购物车添加
async addShopCar() {
try{
await this.$store.dispatch('addOrUpdateShopCar', {
skuId : this.skuInfo.id,
skuNum : this.skuNum
});
this.$router.push({name: 'addShopCarSuccess'})// 路由跳转
} catch (error) {
alert(error.message)
}
}
4.3 路由传参结合回话存储传递数据
分析：H5新增的两种存储：本地存储(localstorage)和会话存储(sessionstorage)，这里应该使用sessionstorage，因为vue是单页面应用到网页关闭只有一个会话。可以使用路由query传递skuNum而用sessionstorage存储skuInfo和squSaleAttrList
- 将信息存入sessionstorage
Detail/index.vue
// 购物车添加
async addShopCar() {
try{
await this.$store.dispatch('addOrUpdateShopCar', {
skuId : this.skuInfo.id,
skuNum : this.skuNum
});
// 路由跳转
this.$router.push({name: 'addShopCarSuccess', query:{skuNum: this.skuNum}})
sessionStorage.setItem('skuInfo', JSON.stringify(this.skuInfo))
sessionStorage.setItem('spuSaleAttrList', JSON.stringify(this.spuSaleAttrList))
} catch (error) {
alert(error.message)
}
}
4.4 请求头加入uuid判断游客身份
分析：可以在本地存储localstorage设置一个uuid，然后每次请求都携带这个uuid，后端就能通过这个uuid在不登录的情况下判断用户返回相应的数据了。那么首先这个uuid应该存储在store仓库中，然后需要一个接口函数能够判断localstorage中有没有uuid，如果没有则创建有则直接返回仓库，最后也是最重要的一步，应该在请求拦截器中的config参数设置uuid，如此发出的请求就能携带uuid了。
- 编写uuid生成接口 \utils\uuid_token.js
import { v4 as uuidv4 } from 'uuid';
export const getUUID = () => {
let uuid_token = localStorage.getItem('UUID_TOKEN')
if(uuid_token) {
return uuid_token
}
uuid_token = uuidv4()
localStorage.setItem('UUID_TOKEN', uuid_token)
return uuid_token
}
- 在vuex仓库中生成uuid \store\detail\index.js
import {getUUID} from '@/utils/uuid_token'
const state = {
detailInfo: {},
uuid_token: getUUID()
}
随便找一个模块仓库放就可以
- 在请求拦截器中config添加携带仓库中的uuid
import store from '@/store'
// 请求拦截器，在请求发出之前能够检测到，做一些指定的业务
requests.interceptors.request.use((config)=>{
// console.log(store.state.detail.uuid_token)
nprogress.start();
// 参数为config的回调函数
// config为配置对象，包含一个中要的属性headers请求头
if(store.state.detail.uuid_token) {
config.headers.userTempId = store.state.detail.uuid_token
}
return config;
});
userTempId为前后端协商的字段不可修改
再次进入购物车页面，可以看到购物车接口可以返回之前加入购物车的数据了。
注意是购物车页面，添加购物车页面是不返回任何数据的
4.5 更新购物车商品数量
更新的接口和添加的结构是相同的，只是，num为负数表示减少为正数表示添加。
export const reqAddOrUpdateShopCar = (skuId, skuNum) => {
return requests({
url:`/cart/addToCart/${skuId}/${skuNum}`,
method: 'post'
})
}
其他没有特别的点，记得发完请求之后再重新获取下页面参数
<li class="cart-list-con5">
<a @click="skuNumHandler('minus', cartInfo, -1)" class="mins">-</a>
<input autocomplete="off" type="text" @change="skuNumHandler('change', cartInfo, $event.target.value * 1)" :value="cartInfo.skuNum" minnum="1" class="itxt">
<a @click="skuNumHandler('add', cartInfo, 1)" class="plus">+</a>
</li>
methods: {
getData() {
this.$store.dispatch('getCarList')
},
async skuNumHandler(type, cartInfo, disNum) {
switch(type) {
case 'add':
disNum = 1;
break;
case 'minus':
disNum = cartInfo.skuNum > 0 ? -1 : 0
break;
default:
disNum = isNaN(disNum) ? 0 : disNum - cartInfo.skuNum
break;
}
console.log(disNum)
await reqAddOrUpdateShopCar(cartInfo.skuId, disNum)
// console.log(result.data)
this.getData()
}
}
4.6 删除购物车商品
没啥特别的，直接上代码了
\api\index.js
// /api/cart/deleteCart/{skuId}
export const reqDeleteCarList = (skuId) => {
return requests({
url: `/cart/deleteCart/${skuId}`,
method: 'delete'
})
}
\store\shopCar\index.js
async deleteCarInfo(context, skuId) {
let result = await reqDeleteCarList(skuId)
if(result.code === 200) {
return 'ok'
} else {
return Promise.reject(new Error('failed'))
}
}
\pages\ShopCar\index.vue
async deleteCarInfo(skuId) {
try {
await this.$store.dispatch('deleteCarInfo', skuId)
this.getData()
}catch (err) {
alert(err.message)
}
}
4.7 购物车商品修改的节流
可以发现在快速修改商品数量的时候会变成负数，因此需要对函数做节流，具体参照之前的随笔：【Vue项目】商品汇前台（二）进度条插件+Vuex模块化仓库+函数的防抖与节流+路由传参 - Tod4 - 博客园
skuNumHandler: throttle(async function (type, cartInfo, disNum) {
switch (type) {
case 'add':
disNum = 1;
break;
case 'minus':
disNum = cartInfo.skuNum > 1 ? -1 : 0
break;
default:
disNum = (isNaN(disNum) || disNum < 1) ? 1 : parseInt(disNum) - cartInfo.skuNum
break;
}
await reqAddOrUpdateShopCar(cartInfo.skuId, disNum)
// console.log(result.data)
this.getData()
}, 500),
4.8 修改产品是否选中的状态
也没啥特别的
\api\idnex.js
// /api/cart/checkCart/{skuID}/{isChecked}
export const reqCheckCart = (skuID, isChecked) => {
return requests({
url: `/cart/checkCart/${skuID}/${isChecked}`,
method: 'get'
})
}
vuex \store\shopCar\index.js
async checkCart(context, {skuId, isChecked}) {
let result = await reqCheckCart(skuId, isChecked)
if(result.code === 200) {
return 'ok'
} else {
return Promise.reject(new Error('failed'))
}
}
\pages\shopCar\index.vue
async changeIsChecked(skuId) {
let isChecked = event.target.checked ? 1 : 0
try {
await this.$store.dispatch('checkCart', {
skuId: skuId,
isChecked: isChecked
})
this.getData()
}catch (err) {
alert(err.message)
}
}
4.9 ☆ 删除所选的商品
分析：接口中没有删除多个商品的，因此需要多次调用之前的按照商品ID单独删除商品的接口，可以在仓库中创建一个action使用上下文context多次调用之前的单独删除的actiondeleteCarInfo，而调用action会返回promise，因此需要对多个promise执行一次Promise.all()才能得到五次的结果。
Promise.all()中的一个promise执行失败，则全部的promise都会失败
- 编写仓库删除多个商品的action
\store\shopCar\index.js
deleteAllCheckedCar({dispatch, getters}) {
let promises = []
getters.cartInfoList.cartInfoList.forEach(item => {
if(item.isChecked === 1) {
let promise = dispatch('deleteCarInfo', item.skuId)
promises.push(promise)
}
})
return Promise.all(promises)
},
- 编写组件的派发action的方法
\pages\ShopCar\index.vue
async deleteAllCheckedCar() {
try {
await this.$store.dispatch('deleteAllCheckedCar')
this.getData()
}catch (err) {
alert(err.message)
}
},
4.10 修改多个商品的选中状态
与上面差不多，直接贴代码了
\pages\ShopCar\index.vue
changeAllCheckedCar({dispatch, getters}, isChecked) {
let promises = []
getters.cartInfoList.cartInfoList.forEach(item => {
let promise = dispatch('checkCart', {
skuId: item.skuId,
isChecked: isChecked
})
promises.push(promise)
})
return Promise.all(promises)
}
\store\shopCar\index.js
async changeAllCheckedCar() {
try{
let isChecked = event.target.checked ? 1 : 0
await this.$store.dispatch('changeAllCheckedCar', isChecked)
this.getData()
}catch (err) {
alert(err.message)
}
}
这篇关于【Vue项目】尚品汇（六）ShopCar组件开发 购物车模块的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
您可能喜欢
-
Vue3入门：新手必读的简单教程11-21
-
Vue3教程：新手入门与基础详解11-21
-
Vue3资料入门教程：从零开始学习Vue3框架11-21
-
Vue3入门教程：从零开始搭建你的第一个Vue3项目11-19
-
vue2 开发移动端h5 使用那个ui框架比较好？-icode9专业技术文章分享11-19
-
ReactJS结合TypeScript、Vite、Redux和TanStack (React Query) 实战教程11-19
-
Vue3资料入门教程：零基础快速上手指南11-19
-
Vue3资料：新手入门教程与实战指南11-19
-
Vue资料：新手入门vue.js教程与实践指南11-19
-
Vue资料：初学者入门指南11-19
-
tcpdf可以等待vue动态页面加载完成后再生成pdf吗？-icode9专业技术文章分享11-18
-
Vue3资料：新手入门必读教程11-16
-
Vue3资料：新手入门全面指南11-16
-
Vue资料：新手入门完全指南11-16
-
Vue项目实战：新手入门指南11-16
栏目导航
