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:"http://localhost:8090/product/list",複製代碼 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:'http://localhost:8090/product/add', /* 採用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>複製代碼

關於Element-ui模塊