欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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

程序员文章站 2022-06-06 20:16:22
...

这个小节里,我们要通过和后端数据交互实现一个登录的功能。
这里我们要用到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