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

概述一、加入购物车的两种策略 1、加入购物车接口 　　在 src/restful/api.js 中写入添加购物车接口： // 加入购物车的接口export const shopCart = (params) => { return Axios.post(‘user/shop_cart/create/‘, params).then(res=>res.data)};   2、添加Axios的 一、加入购物车的两种策略 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使用说明。模板如下所示：

// 添加请求拦截器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 中添加请求拦截器：

// 导入axiosimport 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页面中加入购物车事件：

 

 

 

二、购物车页面实现

 

 

 

三、购物车页面数据展示

 

 

 

四、购物车页面数据响应

总结

以上是内存溢出为你收集整理的前端Vue项目——购物车页面全部内容，希望文章能够帮你解决前端Vue项目——购物车页面所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。