Vue插件之Axios

简介: Vue插件之Axios,环境安装:npm install --save axios vue-axios //安装axiosNpm install //安装依赖在main.

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)

})
}

真正向后端请求时:
_10

这是跨域请求;
解决办法之一:
在springMVC的 配置文件中,增加如下内容:

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

关于Element-ui模块

相关文章
|
19天前
|
JSON 前端开发 JavaScript
3分钟让你学会axios在vue项目中的基本用法(建议收藏)
3分钟让你学会axios在vue项目中的基本用法(建议收藏)
47 0
|
2月前
|
XML JavaScript 前端开发
axios如何在vue中使用
axios如何在vue中使用
29 1
|
2月前
|
JavaScript
vue 实现表格循环滚动 vue-seamless-scroll插件的安装与使用
vue 实现表格循环滚动 vue-seamless-scroll插件的安装与使用
|
3天前
|
资源调度 JavaScript 开发者
插件使用:扩展Vue功能与第三方插件
【4月更文挑战第23天】Vue凭借其轻量级和灵活性在Web开发中备受青睐,而插件则进一步增强了其功能。本文探讨了如何在Vue项目中选择、安装、配置和管理插件,以适应不同需求。要点包括:选择可靠且兼容的插件,使用npm或yarn安装,根据文档配置,以及注意性能影响。明智使用插件能提升开发效率,但需避免过度依赖,确保与项目目标和技术栈匹配。不断学习新插件,可保持技术领先并优化项目实践。
|
19天前
|
JavaScript API
Vue中axios拦截器怎么使用
Vue中axios拦截器怎么使用
|
1月前
|
JavaScript API
Vue3通信方式之defineProps、defineEmits、useAttrs、插件mitt和v-model
Vue3通信方式之defineProps、defineEmits、useAttrs、插件mitt和v-model
28 0
|
1月前
|
Web App开发 前端开发 JavaScript
Spring Boot整合 mybatisplus(后端) Vue+echarts+Element UI+axios(前端)---前后端项目实例demo
Spring Boot整合 mybatisplus(后端) Vue+echarts+Element UI+axios(前端)---前后端项目实例demo
27 1
|
1月前
|
前端开发 JavaScript Java
springboot+mybatis plus+vue+elementui+axios 表格分页查询demo
springboot+mybatis plus+vue+elementui+axios 表格分页查询demo
33 0
|
1月前
|
资源调度 JavaScript 前端开发
|
1月前
|
JavaScript 前端开发 开发者
vue的组件和插件
Vue中的组件是用于构建用户界面的可复用单元,而插件是为Vue添加全局功能的扩展。两者在Vue框架中扮演着不同的角色,共同促进了Vue应用的开发和维护。
vue的组件和插件