vue-resource configure the global request root domain name and enable emulateJSON globally

1. Globally set the root domain name of the vue-resource request

Scenario : If the path of the data interface is directly written, then if you change the domain name, all the interface addresses in it must be modified one by one.
If there are more interfaces requested, it will be very troublesome.

Fortunately, vue-resource supports setting the global request root domain name in one step

Configuration :

Vue.http.options.root="接口根域名";

E.g:

Vue.http.options.root="http://localhost:8080/";

(The trailing slash [/] may not be added)

If the originally requested interface address is http://localhost:8080/user/addUser
then requesting the path directly when configuring the interface after configuration, you can automatically splice without bringing the root domain name vue-resource

E.g:

this.$http.post("user/addUser",{
                       name:this.name
                   }).then(result=>{
                       ...
                   });

It is worth noting that the requested path cannot be preceded by a slash [ /]

Not such as /user/addUserthese format or does not enable the root path splicing

✔ Correct writing:user/addUser

---

Second, enable emulateJSON globally

About the role of emulateJSON:

After enabling, the request will be sent application/x-www-form-urlencodedas Content-Type just like a normal HTML form

Common practice:

this.$http.post("user/addUser",{
                       name:this.name
                   },{emulateJSON:true}).then(result=>{
                       ---
                   });

Add a request for each parameter to be passed. emulateJSON:trueThis will be more cumbersome,
but you do n’t need to enable it one by one after the global activation.

Enabling the emulateJSON: true option globally is actually very similar to configuring the root domain name:

Vue.http.options.emulateJSON=true;

If it is not enabled, the background must convert the result to JavaBean to receive the data
. For Java, the background must be @RequestBodyannotated

But after emulateJSON is enabled, the background can receive data directly

---

The location of the configuration is also particular:

Since Vue is loaded in order, the configuration location must be in front of the creation of the Vue instance

<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>

---