【Vue2项目(尚品汇前台)】(五）Shopcar购物车模块搭建

一、加入购物车

当我们点击加入购物车按钮之后，要返回一个商品个数和购物的商品信息，那我们就需要调用添加到购物车接口

分析一下会发现，我们只是为了返回一个成功或者失败的结果，那用promise不是更好吗，所以我们进行改进

二、导入加入购物车成功页面组件 + 配置路由

三、购物成功页面拿数据

1、路由传递参数

当我们点击加入购物车之后，加入成功页面要拿到商品的信息和购买的个数，然后要体现在url地址栏中，如果按照之前那么写的话，地址栏会非常的丑，信息不明显，所以要改进，这里用到了会话存储的方法

本地存储：持久化
会话存储：并非持久
本地存储|会话存储：一半存储的是字符串
产品信息的数据【比较复杂：skuInfo】，通过会话存储（不持久化，会话结束数据会消失）

购物车添加成功这个页面并非需要一直持久存在，所以选择会话存储

因为传递的是一个对象，所以要用转换为字符串

在AddCartSuccess.js文件中进行接收

AddCartSuccess.js

computed:{
   
      skuInfo(){
   
        return JSON.parse(sessionStorage.getItem('SKUINFO'));
      }
    }

2、渲染数据

<div class="right-info">
      <p class="title">{
  {skuInfo.skuName}}</p>
      <p class="attr">{
  { skuInfo.skuDesc }} 数量：{
  {$route.query.skuNum}}}</p>
</div>

四、添加购物车成功页面两个按钮的动态绑定

给查看商品详情按钮设定声明式导航，回退到商品页面并带上商品id参数，所以使用动态式的:to

五、获取购物车信息接口

获取接口成功，但是我们看到没有数据，这是为什么呢？
用户有非常多，每一个人都应该有自己的购物车，但是系统不能分辨哪一个商品是谁加入购物车的，才会出现没有数据的现象。

解决方案：uuid

六、uuid游客身份获取购物车数据

UUID全称：Universally Unique Identifier，即通用唯一识别码。

uuid_token.js
import {
   v4 as uuidv4} from '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;
}

切记一定要有返回值，要不然是undefined！！

创建一个uuid_token.js文件，在这个文件里面封装一个生成随机，且能存储的的游客身份

在detail仓库里使用这个函数方法

在request.js中设置请求头

//在当前模块引入store
import store from '@/store'

//请求拦截器：在发请求之前，请求拦截器可以检测到，可以在请求发出去之前做一些事情
requests.interceptors.request.use((config) => {
   
    //config：配置对象，对象里面有一个属性很重要，headers请求头
    //进度条开始动
    if (store.state.detail.uuid_token) {
   
        //请求头添加一个字段（userTempId）：这个字段已经是和后台商量好了
        config.headers.userTempId = store.state.detail.uuid_token
    }
    nprogress.start();
    return config;
});

七、动态绑定数据