好程式設計師Java教程分享Vue外掛之Axios，環境安裝：

npm install --save axios vue-axios //安裝axios

Npm install //安裝依賴

在main.js中註冊

import axios from 'axios'

import VueAxios from 'vue-axios'

Vue.use(VueAxios, axios)

在對應元件的方法中，傳送axios請求；向後端獲取資料

【注意：請求的方法採用的是method屬性；

get請求時，傳遞引數用的是params ;

post請求傳遞引數是data，傳過去的時候是json格式，@RequestBody

如要轉換成key-value的形式，還須採用Qs 外掛】

例如：資料獲取方法

//生命週期：當vue初始化的時候
created() {
  var vm = this;
  this.axios({
    method:"get",
    url:"

params:{
       name:this.pname
    }
  }).then(function (result) {
     console.log(result.data)
    vm.products = result.data;
  })
}

例如：表單提交方法：

事先匯入QS模組
import Qs from 'qs'
 
submitForm(){

  this.axios({

    method:'POST',

    url:'

/* 採用qs傳值時，能轉換成 application/x-www-form-urlencoded格式 */

    transformRequest: [function (data) {

      return Qs.stringify(data)

    }],

/* QS不匯入時，預設向後端傳送 application/json格式 */

    data:{

       name:this.pname,

       price:this.pprice

    }

  }).then(function (res) {

console.log(res.data)

  })

}

真正向後端請求時：

這是跨域請求；

解決辦法之一：

在springMVC的配置檔案中，增加如下內容：

<mvc:cors>
     <mvc:mapping path="/**"
                  allowed-origins="*"
                  allowed-methods="POST, GET, OPTIONS, DELETE, PUT,PATCH"
                  allowed-headers="Content-Type, Access-Control-Allow-Headers, Authorization, X-Requested-With"
                  allow-credentials="true"/>
</mvc:cors>

好程式設計師Java教程分享Vue外掛之Axios