小小千想和您聊一聊

当前位置: 首页> 技术分享> Vue插件之 Axios

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>

上一篇:Java编程中的Jmeter性能测试

下一篇:Zookeeper基本原理与运用场景

QQ技术交流群

千锋Java开发官方①群
811099962

加入群聊

用户登录

手机号:

密码:

图形验证码:

点击切换

用户注册

手机号:

登录密码:

图形验证码:

点击切换

短信验证码:

获取验证码

忘记密码

1安全验证

2重置密码

手机号:

图形验证码:

短信验证码:

获取验证码

忘记密码

1安全验证

2重置密码

新密码:

确认新密码:

获取课程

添加小千老师微信,获取课程信息

如何获取课程?

一、需拥有此本教材

如没有,可点击下方入口购买当当购买入口京东购买入口

二、添加小千老师,发送拥有凭证,解锁课程资源

1.购买该教材的订单信息
2.拥有的实体书信息等

更换手机号

新手机号:

图形验证码:

短信验证码:

获取验证码