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

相关文章
|
4月前
|
资源调度 JavaScript
|
9天前
|
人工智能 JavaScript 关系型数据库
【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战
【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战
55 14
【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战
|
4月前
|
缓存 JavaScript 搜索推荐
|
4月前
|
前端开发 JavaScript 安全
在vue前端开发中基于refreshToken和axios拦截器实现token的无感刷新
在vue前端开发中基于refreshToken和axios拦截器实现token的无感刷新
274 4
|
4月前
|
JavaScript 前端开发 API
vue3中常用插件的使用方法:按需引入自定义组件,自动导入依赖包,自动生成路由,自动生成模拟数据
vue3中常用插件的使用方法:按需引入自定义组件,自动导入依赖包,自动生成路由,自动生成模拟数据
1149 0
|
4月前
|
JavaScript
vue尚品汇商城项目-day07【vue插件-50.(了解)表单校验插件】
vue尚品汇商城项目-day07【vue插件-50.(了解)表单校验插件】
47 4
|
4月前
|
JavaScript
vue尚品汇商城项目-day07【vue插件-54.(了解)生成二维码插件】
vue尚品汇商城项目-day07【vue插件-54.(了解)生成二维码插件】
43 2
|
5月前
|
JavaScript
particles 粒子背景插件在vue3中的使用
本文介绍了如何在Vue 3项目中使用`particles.vue3`库来创建粒子背景特效。文章提供了粒子背景插件的概述、安装步骤、配置参数说明,并展示了粒子特效的实现效果。同时,提供了在main.js中进行全局配置、在Vue组件中使用粒子背景组件的示例代码,以及完整代码的下载链接。
|
5月前
|
缓存 移动开发 JavaScript
查漏补缺方为上策!!两万六字总结vue的基本使用和高级特性,周边插件vuex和vue-router任你挑选
该文章全面总结了Vue.js的基本使用方法与高级特性,并介绍了Vue周边的重要插件Vuex和Vue-Router的使用技巧。
查漏补缺方为上策!!两万六字总结vue的基本使用和高级特性,周边插件vuex和vue-router任你挑选

热门文章

最新文章