好程序员Java教程分享Vue插件之Axios

好程序员Java教程分享Vue插件之Axios，环境安装：

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

10年积累的网站建设、成都网站设计经验，可以快速应对客户对网站的新想法和需求。提供各种问题对应的解决方案。让选择我们的客户得到更好、更有力的网络服务。我虽然不认识你，你也不认识我。但先网站设计后付款的网站建设流程，更有和龙免费网站建设让你可以放心的选择与我们合作。

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)
  })
}

真正向后端请求时：

好程序员Java教程分享Vue插件之Axios

这是跨域请求；

解决办法之一：

在springMVC的配置文件中，增加如下内容：

                       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"/>

关于Element-ui模块

本文名称：好程序员Java教程分享Vue插件之Axios
标题网址：http://ybzwz.com/article/geshsi.html

好程序员Java教程分享Vue插件之Axios