路由分析
home/index.vuw
// 正常加载数据
load : function(){
Api.loaddata(this.params).then((d)=>{
this.tanfer(d.data);
}).catch((e)=>{
console.log(e)
})
},
home/api.js
// 加载数据 get请求
loaddata : function(params){
let dir = params.loaddir
let url = this.getLoadUrl(dir)
return this.vue.$store.getEquipmentId().then(equipmentId=> {
return new Promise((resolve, reject) => {
this.vue.$request.get(url,params,{}).then((d)=>{
resolve(d);
}).catch((e)=>{
reject(e);
})
})
}).catch(e=>{
return new Promise((resolve, reject) => {
reject(e);
})
})
.....
// 区别请求那个URL
getLoadUrl : function(dir){
let url = this.vue.$config.urls.get('load')
if(dir==0)
url = this.vue.$config.urls.get('loadnew')
else if(dir==2)
url = this.vue.$config.urls.get('loadmore')
return url;
}
common/conf.js
urls:{
load:{url:'api/v1/article/load/',sv:'article'},
loadmore:{url:'api/v1/article/loadmore/',sv:'article'},
loadnew:{url:'api/v1/article/loadnew/',sv:'article'},
// 解决多访问地址的问题
getBase : function(url){
let sv = url.sv
// 默认指向85服务器,并指向网关+服务名;否则走本地,不加服务名
if(config.local[sv]){
return "/"+sv;
}else{
return config.prefix.server_85+'/'+config.services[sv];
}
},
get:function(name){
let tmp = config.urls[name];
if(tmp)
return config.urls.getBase(tmp)+"/"+tmp.url;
else
return name;
}
}
config.js 跨域路由
proxyTable: {
'/server_85': {
target: 'http://heima-app-java.research.itcast.cn', //源地址
changeOrigin: true
},'/article': {
target: 'http://192.168.1.5:9003/', //源地址
changeOrigin: true, //改变源
pathRewrite: {
'^/article': ''
}
},'/behavior': {
target: 'http://192.168.1.5:9004/', //源地址
changeOrigin: true, //改变源
pathRewrite: {
'^/behavior': ''
}
},'/user': {
target: 'http://192.168.1.5:9005/', //源地址
changeOrigin: true, //改变源
pathRewrite: {
'^/user': ''
}
},'/login': {
target: 'http://192.168.1.5:9001/', //源地址
changeOrigin: true, //改变源
pathRewrite: {
'^/login': ''
}
}
配置 proxyTable 来进行跨域
proxyTable 跨域的基本原理是:
在开发模式下,webpack 会为我们提供一个http代理服务器.
我们请求接口的时候,实际上是请求的webpack提供的这个http代理服务器.
在由这个代理服务器请求真是的数据服务器.
最后数据经由webpack代理服务器,最后转交给我们的vue程序.