• vue---------商城pc端 购物车模块

    目录

    uuid

    some 与 every

    switch语句 

    HTTP的8种请求方式

    Promise.all的用法及其细节

    uuid

    uuid生成随机id

    npm install uuid  下载

    生成随机且唯一的游客身份

    1. import { v4 as uuidv4 } from 'uuid';//创建一个uuid
    2. //生成一个随机的字符串作为用户身份 且每次不会变
    3. export const getUUID=()=>{
    4.   //先从本地存储获取uuid
    5.   let uuid_token=localStorage.getItem('UUIDTOKEN')
    6.   // 如果没有生成游客临时身份
    7.   if(!uuid_token){
    8.     uuid_token=uuidv4()
    9.     localStorage.setItem('UUIDTOKEN',uuid_token)
    10.   }
    11.   return uuid_token
    12. }

     vue中调用保存uuid

    1. // Detail 组件的小仓库
    2. //封装游客模块uuid--生成一个随机字符串
    3. import{getUUID} from '../../utils/uuid_token'
    4. import axios from '@/api'
    5. const state = {
    6.   goodInfo: {},
    7.   //游客临时身份
    8.   uuid_token:getUUID()
    9. }
    10. const mutations = {
    11.   getGoodInfo(state, payload) {
    12.     state.goodInfo = payload
    13.   }
    14. }
    15. const actions = {
    16.   //获取产品信息
    17.   async AsyncgetGoodInfo({
    18.     commit
    19.   }, skuId) {
    20.     let {
    21.       code,
    22.       data
    23.     } = await axios.reqDetailInfo(skuId)
    24.     if (code != 200) return
    25.     commit('getGoodInfo', data)
    26.   },
    27.   async AsyncAddOrUpdataShopCart({
    28.     commit
    29.   }, {
    30.     skuId,
    31.     skuNum
    32.   }) {
    33.     let result = await axios.reqAddOrUpdataShopCart(skuId, skuNum)
    34.     //代表服务器加入购物车成功
    35.     if (result.code == 200) {
    36.       return 'ok'
    37.     } else {
    38.       return Promise.reject(new Error('false'))
    39.     }
    40.  
    41.   }
    42. }
    43.  
    44. const getters = {
    45.   categoryView(state) {
    46.     return state.goodInfo.categoryView || {}
    47.   },
    48.   skuInfo(state) {
    49.     return state.goodInfo.skuInfo || {}
    50.   },
    51.   spuSaleAttrList(state) {
    52.     return state.goodInfo.spuSaleAttrList || []
    53.   }
    54. }
    55. export default {
    56.   state,
    57.   mutations,
    58.   actions,
    59.   getters
    60. }

    设置请求头携带uuid

    1. // 对axios二次封装
    2. import axios from 'axios'
    3.  
    4. //引入进度条 start进度条开始 done：进度条结束
    5. import nprogress from 'nprogress'
    6. import 'nprogress/nprogress.css'
    7.  
    8.  
    9. // 利用axios对象方法的created,创建一个axios实例
    10. const requests = axios.create({
    11.     //配置对象
    12.     // 基础路径，发送请求的时候路径中会出现api
    13.     baseURL: '/api',
    14.     //请求超时时间 5s
    15.     timeout: '5000',
    16. })
    17. //请求拦截器
    18. requests.interceptors.request.use((config) => {
    19.     // config配置对象 header请求头
    20.     //进度条开始
    21.     nprogress.start()
    22.     return config
    23. })
    24. //响应拦截器
    25. requests.interceptors.response.use((res) => {
    26.     //成功的回调函数
    27.     //进度条结束
    28.     nprogress.done()
    29.     return res.data
    30. }, (error) => {
    31.     //响应失败的回调函数
    32.     return Promise.reject(new Error('false'))
    33. })
    34. export default requests

    some 与 every

    1.every()方法，针对数组中的每一个元素进行比对，只要有一个元素比对结果为false则返回false，反之要所有的元素比对结果为true才为true

    1. var a = [1,2,3,4,5,6];
    2. var b = a.every(function(x){
    3.     return x < 8;
    4. });
    5. var c = a.every(function(x){
    6.     return x < 5;
    7. })
    8. console.log(b); //这里返回true
    9. console.log(c); //这里返回false


    2.some()方法，同样是针对数组中的每一个元素，但是这个方法是，只要有一个元素比对结果为true，返回结果就为true，反之要所有的元素比对结果为false才为false

    1. var a = [1,2,3,4,5,6]
    2. var b = a.some(function(x){
    3.         return x > 10;
    4.     })
    5. var c = a.some(function(x){
    6.         return x > 5;
    7.     })
    8. console.log(b) //这里返回false
    9. console.log(c) //这里返回true

    switch语句 

    witch 语句用于基于不同的条件来执行不同的动作。

    JavaScript Switch 语句  请使用 switch 语句来选择要执行的多个代码块之一。

    工作原理：首先设置表达式 n（通常是一个变量）。随后表达式的值会与结构中的每个 case 的值做比较。如果存在匹配，则与该 case 关联的代码块会被执行。请使用 break 来阻止代码自动地向下一个 case 运行。

    default 关键词
    请使用 default 关键词来规定匹配不存在时做的事情：

    1. switch (day)
    2. {
    3. case 6:
    4.   x="Today it's Saturday";
    5.   break;
    6. case 0:
    7.   x="Today it's Sunday";
    8.   break;
    9. default:
    10.   x="Looking forward to the Weekend";
    11.  
    12. }

    项目应用

    1.    async handle(type, num, cart) {
    2.         //标记 数量（变化量，和输入的值， 商品数组）
    3.         switch (type) {
    4.           // 加号
    5.           case 'add':
    6.             num = 1
    7.             break
    8.             // 减号
    9.           case 'minus':
    10.             //判断用户的个数大于1给服务器传-1小于等会于1给服务器0
    11.             num = cart.skuNum > 1 ? -1 : 0;
    12.             break
    13.           case 'change':
    14.             // 如果用户输入非法值给服务器0
    15.             if (isNaN(num) || num < 1) {
    16.               num = 0
    17.             } else {
    18.               // 正确情况小数取整 带给服务器的变化量 用户输入进来的值-产品起始个数
    19.               num = parseInt((num) - cart.skuNum)
    20.             }
    21.             break
    22.         }
    23.         try {
    24.           await this.$store.dispatch('AsyncAddOrUpdataShopCart', {
    25.             skuId: cart.skuId,
    26.             skuNum: num
    27.           })
    28.           this.getData()
    29.         } catch (err) {}
    30.       }

    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 接收失败成功
    1.  async deleteCartList({commit},skuId){
    2.     let{code}=await axios.deleteCartList(skuId)
    3.     if(code==200){
    4.       return 'ok'
    5.     }else{
    6.       return Promise.reject(new Error('false'))
    7.     }
    8.   },
    9.  
    10.  deleteAllChecked({dispatch,getters}){
    11.     //context小仓库上下文 commit【提交 mutations】 getters【计算属性】 dispatch【派发actions】 state【当前仓库的数据】
    12.     //获取购物车的全部数据
    13. let promiseAll=[]
    14. let list=getters.cardlist.cartInfoList
    15. list.forEach(item=>{
    16.   console.log(item);
    17.   //返回一个promis，每一次添加到新数组中
    18.    let result =item.isChecked==1?dispatch('deleteCartList',item.skuId):''
    19.    promiseAll.push(result)
    20. })
    21. //全部的promise成功就是成功，有一个失败就失败
    22. return Promise.all(promiseAll)
    23.   }
    24. }
    25. -------------------------------页面--------------------------
    26.   async deleteAll() {
    27.  
    28.         try {
    29.           await this.$store.dispatch('deleteAllChecked')
    30.           this.getData()
    31.         } catch (err) {
    32.           console.log(err.message);
    33.         }
    34.       }
    35.  
    36.     },


     

  • 相关阅读:
    java计算机毕业设计疫情期间中小学生作业线上管理系统设计与实现源码
    java计算机毕业设计ssm+vue工商学院办公用品管理信息系统
    【wiki知识库】04.SpringBoot后端实现电子书的增删改查以及前端界面的展示
    工作之余，学习Go，快速入门，第一节：变量
    一种用于医学图像分割的多源模型适应方法
    简单的声音数据降维度
    十四、城市建成区时空扩张分析——景观格局指数
    Redis为什么这么快？高频面试题详解
    CMake Tutorial 巡礼(5)_添加系统自察
    数据结构与算法 | 哈希表（Hash Table）
  • 原文地址：https://blog.csdn.net/qq_63358859/article/details/125490127