一、安装vue-resource插件

安装命令：npm install vue-resource --save 


安装完之后在根目录下的package.json检查一下插件的版本

 

 

在rourer-index.js下引入文件

 

1.import Resource from 'vue-resource'

2.Vue.use(Resource)

引入vue-resource后，可以基于全局的Vue对象使用http，也可以基于某个Vue实例使用http

 

二、安装axios插件

安装axios命令:npm install --save axios

在后台服务文件（server.js）中引入

var axios = require('axios')

 

新建一个公共Js文件，用于存放httpserver

 

 

在新建的公共Js文件中写入:

import axios from  'axios'  // 引入axios插件

export  function  getHttp (url, callFun) {  //get请求方法

   axios.get(url).then(callFun)

   . catch ( function (err){

     console.log(err)

   })

}

 三、proxy代理

在config-index.js文件下找到proxyTable设置代理

例如我的vue项目链接是 localhost:8080 后台数据地址是 localhost:8081/api/seller（端口不一样）

proxyTable: {

    '/api' : {

     target:  'http://localhost:8081' ,

     changeOrigin:  true ,

     pathRewrite: {

      '^/api' :  '/api'  // pathRewrite方法重写url, 这样配置出来的url为http://localhost:8081/api/seller

      // '^/api': '/' // pathRewrite方法重写url, 这样配置出来的url为http://localhost:8081/seller

     }

    }

   }

 

四、数据调用

 

在想调用数据的vue页面中写入如下代码

 

js部分

<script>

import {getHttp} from  '../static/js/httpserver.js'

export  default  {

  data () {

   return  {

    seller: {}

   }

  },

  methods: {

   shangjia:  function  () {

    let url =  '/api/seller'

    getHttp(url,  function  (res) {

     res = res.data

     console.log(res)

    })

   }

  }

}

</script>

 

html部分

< template >

< div  id = "app" >

  < div  @ click = 'shangjia()' >< router-link  to = '/seller' >商家</ router-link ></ div >

< router-view ></ router-view >

</ div >

</ template >