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)

          })

    }