VUE+Element+vue-resource数据源请求

vue-resource的跨域请求

结果：前后端分离，前端用vue和vue-resource请求http接口地址获取数据

首先要安装vue-resource：

npm install vue-resource

然后在入口文件main.js中引入vue-source：

import VueResource from 'vue-resource'
Vue.use(VueResource)

准备工作到这里就做完了。

用来准备测试的接口：

http://ip.tianqiapi.com/?ip=

可以查询IP的一些简单信息，支持多个IP查询，IP之间用半角逗号间隔。该接口返回IP的JSON格式的信息。
vue文件中HTML部分的代码如下，使用了ElementUI的输入框和表格：

js部分代码

this.$http.get即为发起get请求的语法，其他的还有：

get请求：

this.$http.get(URL,{
	    params:{
	    key:value,
    }
    }).then(function(success){
   		 //TODO: 成功后的操作
    },function(error){
   		 //TODO：失败后的操作
    })

post请求：

this.$http.post(URL,{
	params:{
	key:value,
}
}).then(function(success){
	//TODO: 成功后的操作
},function(error){
	//TODO：失败后的操作
})

jsonp请求：

this.$http.jsonp(URL,{
    params:{
    key:value,
}
}).then(function(success){
	//TODO: 成功后的操作
},function(error){
	//TODO：失败后的操作
})

js中data（）{return{ }}中，是对变量的初始化

data(){
   return {
     data1 : [],  //定义一个叫data1的变量，[]表示其类型为Array
     input1:''  //定义一个叫input1的变量，''表示其类型为String
   }
 }