Vue请求后端接口数据

1、安装

npm install vue-resource

2、引用，在main.js引用 vue-resource

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

3、config文件下的dev.env.js，prod.env.js，test.env.js调用域名

module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',
  API_ROOT:'"http://url.com"'
})

4、建立接口调用方法，src文件夹下建立api/index.js文件，然后调用接口

const API_ROOT=process.env.API_ROOT//vue自带域名方法
export const balance=API_ROOT+'/api/balance/index'

5、文件调用

import {balance} from '../api/index';

  getUserInfo(){//get方法

     this.$http.get(balance).then((res)=>{

        console.log(res);

          }).catch((err)=>{

              console.log(err)

          })

    }

 

  getUserInfo(){//get请求

     this.$http.get(balance,{

        params: {'aa': this.aa,

　　　　　　bb:this.bb}

      }, {emulateJSON: true})

　　　　.then((res)=>{

        console.log(res);

          }).catch((err)=>{

              console.log(err)

          })

    }

 

 

  getUserInfo(){//post请求

     this.$http.get(balance,{

　　　　　　'aa': this.aa,

　　　　　　'bb':this.bb

      }, {emulateJSON: true})

　　　　.then((res)=>{

        console.log(res);

          }).catch((err)=>{

              console.log(err)

          })

    }