vue设置公有全局的后台服务器ip(接口调用)
一.需求在开发过程中,有时前端连接后台时,并不是一个后台,而是很多,即后台有分工。那如果在项目上线时,我需要修改调用接口时连接的后台服务器,该怎样修改,此时页面中存在很多个ip地址+接口地址思路1:————笨办法:挨个挨个的修改每一个接口连接的ip,直到完成为止————————缺陷:那如果以后还需要修改后台ip呢,仍然还是这样一对一修改????——太麻烦了思路2:————设置全局ip...
·
一.需求
在开发过程中,有时前端连接后台时,并不是一个后台,而是很多,即后台有分工。
那如果在项目上线时,我需要修改调用接口时连接的后台服务器,该怎样修改,此时页面中存在很多个ip地址+接口地址
思路1:
————笨办法:挨个挨个的修改每一个接口连接的ip,直到完成为止
————————缺陷:那如果以后还需要修改后台ip呢,仍然还是这样一对一修改????——太麻烦了
思路2:
————设置全局ip,进行调用,之后只需要修改设置全局ip的文件即可——简单,快捷,不容易错
二.实现过程
1.书写有关ip的js文件
——即,将ip作为全局对象/变量/属性/方法,然后进行暴露
创建一个api.js
const http='http://xxx.xxx.xxx/mis-web' //需要使用的ip1+接口共有部分
const http1='http://xxx.xxx.xxx/mis-web' //需要使用的ip2+接口共有部分
export default { //将const创建的变量进行暴露,注意,暴露的必须是一个对象
http,http1
}
2.将暴露的内容添加到vue的原型上,然后通过this进行调用
//配置全局api
import api from './Api/api.js' //先引入文件
Vue.prototype.API=api; //将引入的文件挂载到vue的原型中
3.进行使用
this.axios.post(this.API.http+'/sys/mpTempLogin',{
username:this.card
}).then((res)=>{.......}).catch((err)=>{........})
更多推荐
已为社区贡献5条内容
所有评论(0)