YuKi
论坛版主
论坛版主
  • 最后登录2020-07-08
  • 发帖数12
  • 社区居民
阅读:127回复:1

Vue中使用API代理接口

楼主#
更多 发布于:2020-06-27 22:37
首先就是要创建一个api.js的文件,然后再创建每个模块所需要接口的js文件。
比如我有一个登陆的页面需要代理一个登陆的接口
首先就是创建一个login.js的文件
在里面配置一下信息
用export default暴露一个对象
把接口信息用这个对象存储
export default{
    loginYanZheng:"/healthproject/admin/user/login"//后端角色登录
}
然后在api.js文件中引用这个文件再暴露出去
import login from "./login.js"
export default{
    login
}
然后再在main.js文件中应用api.js文件
//API全局代理
import api from './api/api.js'
然后设置axios的默认请求地址
Axios.defaults.baseURL="http://XX.XXX.XX.XXX";
然后再把Vue实例的$api原型指向api.js这个文件
Vue.prototype.$api = api;
那么如果你想使用这个代理的接口怎么做呢
this.$axios.post(this.$api.hospital.xiuGai,this.xiugaiObj,
                   {
                       transformRequest:[
                           function(data){
                               let params = "";
                               var arr = [];
                               for(var key in data){
                                   arr.push(key+"="+data[key]);
                               }
                               params = arr.join("&");
                               return params;
                           }
                       ] }).then((res) =>{
                   console.log(res);
                   this.xiugaiyiyuanxingxi = false
                   this.getAllYiYuan()
               })
其中this.$api就是之前添加的api代理,hospital是api.js中暴露的对应的模块的js文件名,xiuGai是代理接口的键名
我来组成头部
贫民
贫民
  • 最后登录2020-07-02
  • 发帖数1
沙发#
发布于:2020-07-01 10:57
这样配置怕是有点麻烦,而且每次打包还要手动更改,直接根目录创建.env等文件,添加接口域名,axios这里还需要做进一步处理,直接使用返回值就可以了
游客


返回顶部

公众号

公众号