幸运快三

前端Vue项目——购物车页面

一、加入购物车的两种战略

1、加入购物车接口

幸运快三  在 src/restful/api.js 中写入添加购物车接口:

// 加入购物车的接口
export const shopCart = (params) => {
  return Axios.post(‘user/shop_cart/create/‘, params).then(res=>res.data)
};

 

2、添加Axios的请求阻挡器

  Axios 的阻挡器:在请求或照顾被 then 或 catch 处置赏罚赏罚前阻挡它们,诠释文档:。模板以下所示:

// 添加请求阻挡器
axios.interceptors.request.use(function (config) {
    // 在发送请求之前做些甚么
    return config;
  }, function (error) {
    // 对请求弱点做些甚么
    return Promise.reject(error);
  });

// 添加照顾阻挡器
axios.interceptors.response.use(function (response) {
    // 对比应数据做点甚么
    return response;
  }, function (error) {
    // 对比应弱点做点甚么
    return Promise.reject(error);
  });

 

  在项目 src/restful/api.js 中添加请求阻挡器:

// 导入axios
import Axios from ‘axios‘
Axios.defaults.baseURL = ‘https://www.luffycity.com/api/v1/‘;   // 设置公共url

// 添加请求阻挡器
axios.interceptors.request.use(function (config) {
  // 在发送请求之前做些甚么
  if (localStorage.getItem(‘access_token‘)){
    // 装备的默许值/defaults
    config.defaults.headers.common[‘Authorization‘] = localStorage.getItem(‘access_token‘);
  }
  return config;
}, function (error) {
  // 对请求弱点做些甚么
  return Promise.reject(error);
});

 

 

 

  改写CouseDetail页面中加入购物车事宜:

 

 

 

2、购物车页面完成

 

 

 

幸运快三三、购物车页面数据展示

 

 

 

四、购物车页面数据照顾

相关文章
相关标签/搜索