vue---------商城pc端 购物车模块
目录
[TOC]
uuid
uuid生成随机id
npm install uuid 下载
生成随机且唯一的游客身份
import { v4 as uuidv4 } from 'uuid';//创建一个uuid
//生成一个随机的字符串作为用户身份 且每次不会变
export const getUUID=()=>{
//先从本地存储获取uuid
let uuid_token=localStorage.getItem('UUIDTOKEN')
// 如果没有生成游客临时身份
if(!uuid_token){
uuid_token=uuidv4()
localStorage.setItem('UUIDTOKEN',uuid_token)
}
return uuid_token
}
vue中调用保存uuid
// Detail 组件的小仓库
//封装游客模块uuid--生成一个随机字符串
import{getUUID} from '../../utils/uuid_token'
import axios from '@/api'
const state = {
goodInfo: {},
//游客临时身份
uuid_token:getUUID()
}
const mutations = {
getGoodInfo(state, payload) {
state.goodInfo = payload
}
}
const actions = {
//获取产品信息
async AsyncgetGoodInfo({
commit
}, skuId) {
let {
code,
data
} = await axios.reqDetailInfo(skuId)
if (code != 200) return
commit('getGoodInfo', data)
},
async AsyncAddOrUpdataShopCart({
commit
}, {
skuId,
skuNum
}) {
let result = await axios.reqAddOrUpdataShopCart(skuId, skuNum)
//代表服务器加入购物车成功
if (result.code == 200) {
return 'ok'
} else {
return Promise.reject(new Error('false'))
}
}
}
const getters = {
categoryView(state) {
return state.goodInfo.categoryView || {}
},
skuInfo(state) {
return state.goodInfo.skuInfo || {}
},
spuSaleAttrList(state) {
return state.goodInfo.spuSaleAttrList || []
}
}
export default {
state,
mutations,
actions,
getters
}
设置请求头携带uuid
// 对axios二次封装
import axios from 'axios'
//引入进度条 start进度条开始 done：进度条结束
import nprogress from 'nprogress'
import 'nprogress/nprogress.css'
// 利用axios对象方法的created,创建一个axios实例
const requests = axios.create({
//配置对象
// 基础路径，发送请求的时候路径中会出现api
baseURL: '/api',
//请求超时时间 5s
timeout: '5000',
})
//请求拦截器
requests.interceptors.request.use((config) => {
// config配置对象 header请求头
//进度条开始
nprogress.start()
return config
})
//响应拦截器
requests.interceptors.response.use((res) => {
//成功的回调函数
//进度条结束
nprogress.done()
return res.data
}, (error) => {
//响应失败的回调函数
return Promise.reject(new Error('false'))
})
export default requests
some 与 every
1.every()方法，针对数组中的每一个元素进行比对，只要有一个元素比对结果为false则返回false，反之要所有的元素比对结果为true才为true
var a = [1,2,3,4,5,6];
var b = a.every(function(x){
return x < 8;
});
var c = a.every(function(x){
return x < 5;
})
console.log(b); //这里返回true
console.log(c); //这里返回false
2.some()方法，同样是针对数组中的每一个元素，但是这个方法是，只要有一个元素比对结果为true，返回结果就为true，反之要所有的元素比对结果为false才为false
var a = [1,2,3,4,5,6]
var b = a.some(function(x){
return x > 10;
})
var c = a.some(function(x){
return x > 5;
})
console.log(b) //这里返回false
console.log(c) //这里返回true
switch语句
witch 语句用于基于不同的条件来执行不同的动作。
JavaScriptSwitch 语句 请使用 switch 语句来选择要执行的多个代码块之一。
工作原理：首先设置表达式 n（通常是一个变量）。随后表达式的值会与结构中的每个 case 的值做比较。如果存在匹配，则与该 case 关联的代码块会被执行。请使用 break 来阻止代码自动地向下一个 case 运行。
default 关键词
请使用 default 关键词来规定匹配不存在时做的事情：
switch (day)
{
case 6:
x="Today it's Saturday";
break;
case 0:
x="Today it's Sunday";
break;
default:
x="Looking forward to the Weekend";
}
项目应用
async handle(type, num, cart) {
//标记 数量（变化量，和输入的值， 商品数组）
switch (type) {
// 加号
case 'add':
num = 1
break
// 减号
case 'minus':
//判断用户的个数大于1给服务器传-1小于等会于1给服务器0
num = cart.skuNum > 1 ? -1 : 0;
break
case 'change':
// 如果用户输入非法值给服务器0
if (isNaN(num) || num < 1) {
num = 0
} else {
// 正确情况小数取整 带给服务器的变化量 用户输入进来的值-产品起始个数
num = parseInt((num) - cart.skuNum)
}
break
}
try {
await this.$store.dispatch('AsyncAddOrUpdataShopCart', {
skuId: cart.skuId,
skuNum: num
})
this.getData()
} catch (err) {}
}
HTTP的8种请求方式
HTTP是超文本传输协议，其定义了客户端和服务器端之间文本传输的规范。HTTP默认使用80端口，这个端口指的是服务器端的端口，而客户端的端口是动态分配的。HTTP请求的方法：
HTTP/1.1协议中共定义了八种方法（有时也叫“动作”），来表明Request-URL指定的资源不同的操作方式
HTTP1.0定义了三种请求方法： GET, POST 和 HEAD方法。
HTTP1.1新增了五种请求方法：OPTIONS, PUT, DELETE, TRACE 和 CONNECT 方法
1、OPTIONS
返回服务器针对特定资源所支持的HTTP请求方法，也可以利用向web服务器发送‘*’的请求来测试服务器的功能性
2、HEAD
向服务器索与GET请求相一致的响应，只不过响应体将不会被返回。这一方法可以再不必传输整个响应内容的情况下，就可以获取包含在响应小消息头中的元信息。
3、GET
向特定的资源发出请求。注意：GET方法不应当被用于产生“副作用”的操作中，例如在Web Application中，其中一个原因是GET可能会被网络蜘蛛等随意访问。Loadrunner中对应get请求函数：web_link和web_url
4、POST
向指定资源提交数据进行处理请求（例如提交表单或者上传文件）。数据被包含在请求体中。POST请求可能会导致新的资源的建立和/或已有资源的修改。 Loadrunner中对应POST请求函数：web_submit_data,web_submit_form
5、PUT
向指定资源位置上传其最新内容
6、DELETE
请求服务器删除Request-URL所标识的资源
7、TRACE
回显服务器收到的请求，主要用于测试或诊断
8、CONNECT
HTTP/1.1协议中预留给能够将连接改为管道方式的代理服务器。
Promise.all的用法及其细节
Promise的all方法提供了并行执行异步操作的能力，并且在所有异步操作执行完后才执行回调。可以将多个 Promise 实例，包装成一个新的 Promise 实例。
const p = Promise.all([p1, p2, p3]);
上面代码中，Promise.all方法接受一个数组作为参数，p1、p2、p3都是 Promise 实例，如果不是，就会先调用下面讲到的Promise.resolve方法，将参数转为 Promise 实例，再进一步处理。（Promise.all方法的参数可以不是数组，但必须具有 Iterator 接口，且返回的每个成员都是 Promise 实例。）
p的状态由p1、p2、p3决定，分成两种情况。
只有p1、p2、p3的状态都变成fulfilled，p的状态才会变成fulfilled，此时p1、p2、p3的返回值组成一个数组，传递给p的回调函数。
只要p1、p2、p3之中有一个被rejected，p的状态就变成rejected，此时第一个被reject的实例的返回值，会传递给p的回调函数。
项目实战
- 通过删除单个商品接口删除全部商品
- context小仓库上下文 commit【提交 mutations】 getters【计算属性】 dispatch【派发actions】 state【当前仓库的数据】
- 每次派发单个商品接口 会返回一个promis 使用promis.all监听状态 全部成功才为成功
- 页面async await 等待全部成功 使用try chtch 接收失败成功
async deleteCartList({commit},skuId){
let{code}=await axios.deleteCartList(skuId)
if(code==200){
return 'ok'
}else{
return Promise.reject(new Error('false'))
}
},
deleteAllChecked({dispatch,getters}){
//context小仓库上下文 commit【提交 mutations】 getters【计算属性】 dispatch【派发actions】 state【当前仓库的数据】
//获取购物车的全部数据
let promiseAll=[]
let list=getters.cardlist.cartInfoList
list.forEach(item=>{
console.log(item);
//返回一个promis，每一次添加到新数组中
let result =item.isChecked==1?dispatch('deleteCartList',item.skuId):''
promiseAll.push(result)
})
//全部的promise成功就是成功，有一个失败就失败
return Promise.all(promiseAll)
}
}
-------------------------------页面--------------------------
async deleteAll() {
try {
await this.$store.dispatch('deleteAllChecked')
this.getData()
} catch (err) {
console.log(err.message);
}
}
},
