doubleyong
管理员
管理员
  • 最后登录2019-08-26
  • 发帖数636
  • 最爱沙发
  • 喜欢达人
  • 原创写手
  • 社区居民
  • 忠实会员
阅读:3109回复:2

[vue]vue 代理设置及用API目录来管理后台接口

楼主#
更多 发布于:2018-04-18 17:12
Vue项目中,如何使用代理设置来实现跨域

在config中的,index.js里的proxyTable中添加代理设置,代码如下:
代理设置
 proxyTable: {
   '/api':{
     target:"http://47.93.166.112/BrainPcWeb",//设置你调用的接口域名和端口号 别忘了加http
     changeOrigin:true,
     pathRewrite:{
       '^/api':''//这里理解成用‘/api'代替target里面的地址,后面组件中我们掉接口时直接用api代替 
            //比如我要调用'http://40.00.100.133:3002/user/login',直接写‘/api/user/login'即可
     }
   }
 }
通过上面的代码,可以实现代理跨域


Vue项目中,如何管理我们的接口地址呢?
1. src 中专门建立一个api 文件夹进行接口地址管理
  

图片:api.png



2. api.js 为所有接口文件的主入口,代码如下:

import index  from './index.js'
import role  from './role.js'
import shop  from './shop.js'
import user  from './user.js'
export default{
  index,
  role,
  shop,
  user
}
其它文件都一样,就是将不同的接口放到不同的文件中,可以根据功能来划分文件,也可以根据页面来划分,如index.js 代码如下:
export default{
  // 产品相关操作
  productList:'/api/product/productList', // 产品列表
  productDetails:'/api/product/productDetails', // 产品详情
  productCount:'/api/product/productCount', // 产品种数
  // 社区相关操作
  articleList:'/api/article/articleList', // 文章列表
  articleListDetails:'/api/article/productDetails', // 文章详情
  articleListCount:'/api/article/productCount', // 文章总数
  articleMark:'/api/article/articleMark', // 文章点赞
  articleCollect:'/api/article/articleCollect'  //文章收藏
}
3. 在main.js 中引用api.js ,并添加到vue实例属性中
import Vue from 'vue'
import App from './App'
import router from './router'
import Vuex from 'vuex'
import ElementUI from 'element-ui'
import axios from 'axios'
import store from './store/index.js'
import api from './api/api.js'  //引入api文件
axios.defaults.baseURL="http://localhost:8888";
//全局注册
Vue.use(Vuex);
Vue.use(ElementUI);
//添加属性
Vue.prototype.$axios = axios;
Vue.prototype.$api = api; //将api添加到vue实例对象上
Vue.config.productionTip = false
4. 接口调用时,直接使用$this.$api.对应的键名,获取相应的接口地址
this.$axios.get(this.$api.produList,{ params:{}})
欢迎一起讨论
原创文章,转载请申明出处:
http://bugshouji.com/shareweb/t449
知识需要管理,知识需要分享
doubleyong
管理员
管理员
  • 最后登录2019-08-26
  • 发帖数636
  • 最爱沙发
  • 喜欢达人
  • 原创写手
  • 社区居民
  • 忠实会员
沙发#
发布于:2019-07-24 10:37
alisa_飞儿:能否发布下axios的所有配置。回到原帖
就在main.js 中,引入axios后,Vue.prototype.$axios = axios; 通过这句话,把axios注入到实例对象上,其它就没有配置了
知识需要管理,知识需要分享
alisa_飞儿
贫民
贫民
  • 最后登录2019-07-24
  • 发帖数1
板凳#
发布于:2019-07-24 10:31
能否发布下axios的所有配置。
游客


返回顶部