Vue实战4-与后端数据交互

这个小节里，我们要通过和后端数据交互实现一个登录的功能。
这里我们要用到vue-resource，vue-resouce就相当于jQuery的$.ajax，是用来访问后端数据的。

安装

npm install vue-resource

简单调用

在main.js中引用vue-resource

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

在Login.vue中改写login方法

login:function(){
    this.$http.get('http://*****/authenticate/credentials'
    ,{
        params:{
            UserName : this.username,
            Password : this.password
        }
    })
    .then(
        response => {
            this.message = '';
            router.push({path:'/main'});
        }
        ,response =>{
        this.message = '用户名或密码错误';
        }
    );
}

可以看到我们使用了this.$http.get方法，我们传了两个参数url和params，分别是API的地址和参数。then方法的参数是两个函数，第一个是访问成功的回调函数，第二个是访问失败的回调函数。
具体可参考官方文档

全局root url

url每次都带上长长的根路径http://*****，确实很烦人，我们在全局中配置一下。
在main.js中

Vue.use(VueResource);
Vue.http.options.root = 'http://****';

然后在login方法中

this.$http.get('authenticate/credentials')

这里面有一个tricky的地方，正确的是authenticate/credentials，而不是/authenticate/credentials，多了个/会变成网站个根目录，也就是'http://localhost:8080'。

开发和生产环境

我们的开发环境API和生产环境API往往是分开的。我们下面用webpack给开发环境和生产环境配置不同的接口地址。

首先我们找到下面的文件：

/config/dev.env.js
/config/prod.env.js

这两个文件就是针对开发环境和生产环境设置不同参数的文件。
我们先打开dev.env.js，修改一下开发环境的配置。在module.exports加入一行

API_ROOT: '"http://***"'

类似的我们再修改一下prod.env.js。

在main.js中调用设置好的参数。

Vue.http.options.root = process.env.API_ROOT