温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

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

发布时间:2020-08-15 22:11:16 来源:ITPUB博客 阅读:130 作者:好程序员IT 栏目:编程语言

好程序员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:"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的 配置文件中,增加如下内容:

<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模块

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI