vue项目使用整理 - axios

1.1  axios 基本用法

　　 安装：npm install axios -S                   # 也可直接下载axios.min.js文件

　　1、axios借助Qs对提交数据进行序列化

　　　　　　axios参考博客：https://www.jianshu.com/p/68d81da4e1ad

　　　　                            https://www.cnblogs.com/yiyi17/p/9409249.html

　　　　　　axios官网：https://www.npmjs.com/package/axios 

 

 

 

#1、qs用途：  在 axios中，利用QS包装data数据
#2、安 装:    npm install qs -S
#3、常见用法：
'''
import Qs from 'qs';
Qs.stringify(data);
Qs.parse(data)
'''

　　2、axios上传文件

 

 

 1.2 封装axios发送请求 & 添加拦截器

　　  参考：https://blog.csdn.net/qq_40128367/article/details/82735310

　　1、初始化vue项目

# vue init webpack deaxios
# npm install axios -S
# cnpm install vuex -S
# cnpm install vant -S
# cnpm install nprogress -S

　　2、封装axios（创建 src/api 文件夹）

 

 

 

 

 

 

　　3、使用封装的axios发送请求

 

 

 　　4、如果需要上传图片或文件 src\api\ajax.js 中传入的 params参数不可使用Qs序列化

 

 

 

 1.3 vue配置前端跨域

　　 参考博客：https://www.cnblogs.com/qqing/p/8980199.html

　　1、初始化vue项目

vue init webpack my-project  # 初始化项目
cd my-project                # 进入项目路径
cnpm install                 # 安装依赖
cnpm install axios -S        # 安装axios

　　2、在 src/main.js 中如下声明使用

import axios from 'axios';
Vue.prototype.$axios=axios;

　　3、在 config/index.js 中的 的dev 添加以下代码，设置一下proxyTable

    //加入以下
    proxyTable:{
      '/api': {
        target : 'http://127.0.0.1:8000',   //设置你调用的接口域名和端口号.别忘了加http
        changeOrigin : true,                 //允许跨域
        pathRewrite : {
          '^/api':''
          // ''这里理解成用‘/api’代替target里面的地址，后面组件中我们掉接口时直接用api代替。
          // 比如我要调用'http://127.0.0.1:8000/index/'，直接写‘/api/index/’即可
        }
      }
    },

　　4、在 config/dev.env.js 中设置以下代码

module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',  //开发环境
  API_HOST:"/api/"
})

　　5、在 config/prod.env.js 中设置以下代码

module.exports = {
  NODE_ENV: '"production"',//生产环境
  API_HOST:'"127.0.0.1:8000"'
}

　　6、修改src\App.vue文件

<template>
  <div id="app">
    <button @click="testAxios()">测试axios</button>
  </div>
</template>

<script>
  import axios from 'axios';
  export default {
    data () {
      return {

      }
    },
    methods:{
      testAxios () {
        this.$axios.get('/api/index/')
          .then((response) => {
            console.log(response.data)
          })
      }
    }
  }
</script>

　　7、说明

　　　　　　1. vue前端结局跨域主要思想是代理功能，比如：
　　　　　　　　　　vue项目：http://localhost:8080/
　　　　　　　　　　后端项目：http://127.0.0.1:8000/

　　　　　　2. 在浏览器端访问 http://localhost:8080/api/index/ 路径时，vue会匹配到以 /api/ 开头的请求

　　　　　　3. 此时 vue会使用代理功能 自动转发到  http://127.0.0.1:8000/index/   此时就是同一个域，就不会触发跨域问题