vue基础之axios模块化+反向代理

 

1>如何将axios代码从main.js文件中独立出来(模块化开发类似node.js)?

　　.创建axios.js文件

　　.在main.js中引入axios.js代码(其他js代码的模块化以此类推)

　　

import Axios from './axios/axios'//引入axios分离文件

 

2>奉上封装的axios.js模块代码

import Vue from "vue";
import axios from 'axios'   
import Qs from 'qs'  
Vue.prototype.$http = axios.create({
  transformRequest: [function (data) {//调用时自动变成表单数据
      data = Qs.stringify(data);
      return data;
  }],
  headers:{'Content-Type':'application/x-www-form-urlencoded'}//默认请求头为表单数据
})

注:因为后台接收的是表单数据而不是json数据,因此将设置将传入的数据统一转化成表单数据;并将axios写入原型方便调用

 

3>在vue组件中发送请求直接  thsi.$http...

.post请求:

this.$http.post("后台接口地址",data).then((res)=>{//data是传给后台的对象
   //..
})
.catch((err)=>{
           
})

 

3>补充:vue反向代理实现前端跨域

.在项目根目录下新建vue.config.js文件写入以下代码

module.exports = {
    devServer: {
        proxy: {
            '/api': {
                target: '后端接口根路径',//例如http://www.baidu.com
                ws: true,
                changeOrigin: true,
                pathRewrite: {
                '^/api': '/'  //调用时用api替代根路径
                }
            }
        }
    }
}

 

.调用例子

this.$http.post("api/login",data).then((res)=>{//模拟访问登录接口,提交登录数据
   //..
})
.catch((err)=>{
           
})