Vue与后端交互方式 vue-resource 和 Axios

vue-resource

参考文章

• 安装

npm  install vue-resource  --save

• main.js 入口文件中加入如下代码：

/*引入资源请求插件*/
import VueResource from 'vue-resource'
/*使用VueResource插件*/
Vue.use(VueResource)

• 在项目中调用 this.$http.get()

this.$http.get("static/data.json").then(res => {
   console.log(res);
   if (res.status === 200){
       this.list = res.data.data;
   }
}).catch(err => {
   console.error(err)
})

Axios

• 安装

npm  install axios --save

• 在 main.js 入口文件中加入如下代码：

/*引入Axios*/
import Axios from 'axios';
/*在Vue原型链上绑定，就可以全局使用$axios方法*/
Vue.prototype.$axios = Axios;

• 在项目使用this.$axios.get()

this.$axios.get("static/data.json").then(res => {
	console.log(res);
    if (res.status === 200){
		this.listOne = res.data.data;
   	}
}).catch(err => {
     console.error(err)
})

注意事项：

• 如果使用 vue-resource 和 Axios 请求的地址是本地文件， 文件的位置一定要放在static目录 下面，路径为static/data.json
• vue-resource 和 Axios 区别
  aixos是每在一个页面用一次就要在该页面调用一次。vue-resource是绑定了全局的了