vue的数据交互

需要下载axios

npm install axios

再在main.js文件中引用

import Vue from 'vue'
import App from './App'
import router from './router'
import axios from 'axios'

Vue.config.productionTip = false

Vue.prototype.$axios = axios

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

还需要在config下的index.js中配置一下环境

 //开发环境的一个基本配置

  dev: {

    // Paths
    assetsSubDirectory: 'static',//编译输出的二级目录
    assetsPublicPath: '/',//编译发布的根目录
    //需要使用proxyTable代理的接口(可跨域)
    proxyTable: {
      '/**': {
        target: 'http://yapi.demo.qunar.com/mock/45030',//设置调用的接口域名和端口
        changeOrigin: true,//是否跨域
        pathRewrite: {
          '^/mytest': ''//用/mytest代替'http://yapi.demo.qunar.com/mock/45030'
        }
      }
    },

接着就可以在需要用到的vue组件中写请求了

this.$axios.post('/mytest/test/myserver/user/login', this.loginForm).then((response) => {
                if (response.data) {
                    console.log(response.data)
                } else {
                    console.log('nothing')
                }
            })

版权声明:本文为weixin_44898437原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。