一、全局设置vue-resource请求的根域名
场景:若是数据接口的路径直接写死 那么若换了个域名 则里面的接口地址全部都要挨个修改
若请求的接口比较多 那么会是很麻烦的一件事
所幸的是 vue-resource支持设置全局请求根域名 一步到位
配置:
Vue.http.options.root="接口根域名";
例如:
Vue.http.options.root="http://localhost:8080/";
( 后面的斜杠[ / ]可不加 )
若原来请求的接口地址是http://localhost:8080/user/addUser
那么 配置完后 在请求接口的时候直接请求路径即可 无需带上根域名 vue-resource会自动进行拼接
例如:
this.$http.post("user/addUser",{
name:this.name
}).then(result=>{
...
});
值得注意的是:请求的路径前面不能带上斜杠[ /
]
不能是诸如/user/addUser
此类格式 否则不启用根路径拼接
✔正确写法:user/addUser
二、全局启用emulateJSON
关于emulateJSON的作用:
启用之后 请求会以application/x-www-form-urlencoded
作为Content-Type进行发送 就像普通的HTML表单一样
通常做法:
this.$http.post("user/addUser",{
name:this.name
},{emulateJSON:true}).then(result=>{
---
});
每个要传参的请求都要加上个emulateJSON:true
这样会比较繁琐
但在全局启用之后 就无须挨个进行启用了
全局启用emulateJSON:true选项 其实写法和配置根域名很类似:
Vue.http.options.emulateJSON=true;
若不启用 则后台必须将结果转换为JavaBean方可接收到数据
拿Java来说 后台必须加上@RequestBody
注解
但启用emulateJSON之后 后台即可直接接收到数据了
配置的位置也是有讲究的:
由于Vue是按顺序加载的 因此配置的位置必须在创建Vue实例的前面
<script>
// 全局设置vue-resource请求的根域名
Vue.http.options.root="http://localhost:8080";
// 全局启用emulateJSON:true选项
Vue.http.options.emulateJSON=true;
// 创建Vue实例
var vm=new Vue({
el:'#app',
data:{},
methods:{},
});
</script>