Vue.js学习笔记七-VUE-resource实现http请求与全局root请求路径配置

1. 写在前面

1. 在vue中不推荐使用jq操作DOM元素，所以我们发送ajax请求的时候，最好也是不要使用jq，而是用与vue高度契合的vue-resource来实现。

2. jsonp的实现原理

    2.1 由于浏览器的安全限制，不允许ajax访问协议不同、域名不同、端口号不同的数据接口，浏览器认为这种访问不安全

   2.2 可以通过动态的创建script标签的形式，把script标签的src属性，指向数据接口的地址，因为script标签不存在跨域的限制，这种数据获取方式，称作jsonp

注意：根据其原理，可以得知jsonp只支持get请求

3. jsonp实现过程

    3.1 先在客户端定义一个回调函数，预定义对数据的操作

   3.2 再把这个回调方法的名称，通过URL传参的形式，提交到服务器的数据接口

   3.3 服务器数据接口组织好要发送给客户端的数据，再拿到客户端传递过来的回调方法名称，拼接出一个调用这个方法的字符串，发送给客户端去解析执行

   3.4 客户端拿到服务器返回的字符串之后，当做script脚本去解析执行，这样就能够拿到jsonp的数据了

3. 除了使用v-resource还可以使用axios的第三方包实现数据的请求

2. get请求

       函数定义：get(url,[options]);

<input type="button" value="get提交" @click="get()"/>

var vm = new Vue({
				el:'#app',  
				data:{
					msg:'你好啊世界！世界！'
				},
				methods:{
					get:function(){
						// 当发起get请求之后，通过then来设置成功的回调函数
						this.$http.get('http://vue.studyit.io/api/getlunbo').then(function(result){
							// 通过result.body拿到服务器返回的成功的数据
							console.log(result.body);
						});
					}
				}
			});

3. post请求

函数定义：post(url,[body],[options])

postrequest:function(){
	// 手动发起的post请求，默认是没有表单格式，所以，有的服务器处理不了
	// 通过post方法的第三个参数，{emulateJSON:true}设置提交的内容类型为普通表单数据格式
	this.$http.post('http://vue.studyit.io/api/post',{},{emulateJSON:true}).then(result => {
		console.log(result.body);
	});
}

参数解析：

参数一：要请求的URL地址

参数二：要提交给服务器的数，要以对象形式提交个服务器例如：

参数三：是一个配置对象，要以哪种表单数据类型提交

{emulateJSON:true}，以普通表单格式，提交数据

 

4. jsonp请求

函数定义：jsonp(url,[options])

jsonprequest:function(){
	// 手动发起的post请求，默认是没有表单格式，所以，有的服务器处理不了
	// 通过post方法的第三个参数，{emulateJSON:true}设置提交的内容类型为普通表单数据格式
	this.$http.jsonp('http://vue.studyit.io/api/jsonp').then(result => {
			console.log(result.body);
	});
}

5. 配置全局root请求路径

当每个请求都要写全路径的时候，不但繁琐，而且也不利于后期维护，Vue支持配置root路径

语法格式：

1. 全局配置方式：

Vue.http.options.root='http://vue.studyt.io/';

注意：如果我们通过全局配置了请求的数据接口，那么，在每次单独发起http请求的时候，请求的URL路径应该是相对路径，即路径前面不能写“/”，否则不会做root拼接。

例如：this.$http.get('api/getlunbo')；

2. 私有的配置方式：

在VM中定义http，例如：

new Vue({
    http:{
        root:'http://vue.studyt.io/',
        headers:{
            Authorization:'Basic YXBpOnBhc3N3bJK'
        }
    }
				
});

6. 配置全局的emulateJSON选项

在发送post请求的时候，每次都需要传递参数，{emulateJSON=true}，比较繁琐，Vue支持全局的emulateJSON配置

1. 全局配置

语法格式：Vue.http.options.emulateJSON = true;