1-1Vue购物车（商城核心页面的知识点记录） axios 使用

最新推荐文章于 2024-12-03 21:37:50 发布

原创最新推荐文章于 2024-12-03 21:37:50 发布

· 236 阅读

0 ·

版权

Vue 基本语法和原理，项目设计专栏收录该内容

8 篇文章

订阅专栏

本文介绍如何在Vue项目中使用axios结合vue-axios插件来获取static/mock下的模拟数据，通过配置代理实现开发环境的数据请求，并在项目上线时切换至真实API。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一。使用axios 和vue-axios 来获取static/mock/ 数据。我们要知道只有static 文件夹可以被外部访问到。

所以我们先把假数据放在static/mock下面然后在methods里面定义获取的方法，然后在mounted(){}中使用。

因为整个Vue实例已经初始化完成了。

 methods:{
      // 拉取数据 会把axios 挂载到vue实例化对象中上面去
      cartInit(){
        // 这是发送一个GET 请求  返回的是promise 可以及使用then进行调用
        // 箭头函数可以调用外层作用域。不存在作用域问题
        // 只有static 文件夹 可以被外部访问到
        // 在.gitignore文件中 加入static/mock  他就不会提交到git仓库和本地仓库里面的。
        // 上线时，自动替换api  vue 有代理的功能
        // 开发环境的转发 
      this.axios.get('/api/cart.json').then(this.getHomeInfoSucc)
    },
    getHomeInfoSucc(response){
      // console.log(response);
      let res = response.data;
      this.cartList=res.data
    }
  },
  mounted(){
    this.cartInit(); //初始化购物车列表
  },

然后我们在config文件下，webpack依赖下面config/index.js 配置代理

proxyTable: {
      // 代理 请求api的时候 还是转换到当地的端口中
      '/api':{
        target:'http://localhost:8080',
        pathRewrite:{
          // 请求的地址 是api形式的。
          // 那么就将api 切换成'/static/mock'
          // 请求的地址 变换下。
          '^/api':'/static/mock'
        }
      }
    },

这样在项目上线的时候，我们切换真实的API 就可以了。