vue axios 发送get请求传递参数给后端失败_Java之Vue插件之Axios

5a6cda0414620ef03af1a13f9c08b85d.png

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

真正向后端请求时:

1d15ecd849f3511753f5a2460690fe01.png

这是跨域请求;

解决办法之一:

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/244973.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

索尼录音笔怎么导出录音内容_录音笔十大品牌名单出炉!录音笔十大品牌排名榜单揭晓!...

录音笔给我们高速发展的生活带来了很大的便利&#xff0c;市场上录音笔品牌繁多&#xff0c;很多数码视听品牌都推出了自己的录音笔产品&#xff0c;那么我们在选购的录音笔的时候如何选择好品牌的录音笔呢&#xff1f;下面一起来看看十款好用的品牌录音笔排行&#xff0c;希望…

快速列出所有字段_快速掌握目标课题的研究现状 | 应用实例

Graphical Abstract摘要本文旨在利用文献分析工具“Bibliometrix”及其交互界面“Biblioshiny”&#xff0c;基于文献数据库的检索结果&#xff0c;快速获取目标课题的关键信息。相较于传统人为反复阅读的方法&#xff0c;该方法可高效实现以下重要功能&#xff1a;拓展和获取更…

驱动程序和应用程序之间的体系结构不匹配_修复Win10上的黑屏问题全攻略,并不高深,一看就会...

在Windows 10上&#xff0c;你可能会遇到的最烦人的问题之一是黑屏&#xff0c;因为你不会在屏幕上看到错误代码或消息以获取有关从何处开始进行疑难解答的提示。黑屏的发生可能有多种原因。它可能与最近的显卡驱动程序更新有关&#xff0c;或者可能在包含兼容性问题的功能更新…

常用各种芯片手册大全_【汇总】超全面!国内芯片60个细分领域知名代表企业...

国内芯片60个细分领域知名代表企业↓↓↓↓↓↓文章来源&#xff1a;ittbank软文广告与加入群互动交流群的朋友&#xff0c;请加小编微信交流加入微信交流的朋友&#xff0c;请备注&#xff1a;公司名字(公司简称)名字行业方便小编按行业区分邀请进群&#xff0c;术有专攻请自觉…

文件被后台程序占用无法删除_win10重装后系统占用50G?只要做好这2步,运行比win7还快...

大家都清楚系统C盘是电脑的"生命"&#xff0c;一旦C盘出现"爆红"&#xff0c;那你离电脑死机也就不远了。如果你还无法体会到这种感觉&#xff0c;那你可以想象打开一个word文档都要看到鼠标在转圈&#xff0c;随即黑屏&#xff0c;啥都动不了的那种生无可…

plsql执行command命令控制台出现乱码_展现“管理员”的神级能力,有趣又实用的我的世界基础命令...

在上一篇文章《Minecraft基岩版(手机版、便携版、PE版)开服指南》中&#xff0c;我们介绍了《我的世界》基岩版的开服方法。然后这篇文章&#xff0c;就为那些了解更多细节的玩家&#xff0c;介绍一下常见的管理员命令。另外&#xff0c;由于《我的世界》有多个版本(JAVA版、基…

新一代人工智能发展规划_助力人工智能创新发展,新华三任合肥市新一代人工智能产业发展联盟理事单位...

近日&#xff0c;合肥市新一代人工智能产业发展联盟正式成立。合肥市委常委、常务副市长罗云峰出席成立大会并讲话&#xff0c;联盟相关指导单位领导、理事单位成员代表等参加会议。会上&#xff0c;紫光旗下新华三集团下属新华三信息安全技术有限公司副总裁王冬作为理事单位代…

sqlserver 查询中文查询不到 查询英文可以查到_估值数据和财报数据查询方法

为了让更多的读者朋友学会自己查阅估值数据和财报数据&#xff0c;根据自己查到的资料进行独立思考&#xff0c;帮助投资&#xff0c;二师父搜集整理了估值数据和财报数据的查询网站&#xff0c;并教给大家如何通过这些网站查阅到的数据来做投资决定。估值数据查询网站&#xf…

python刷阅读_用Python汇集并生成每日教育动态

本文记录了“每日教育动态”想法的产生以及实现过程&#xff0c;分为三部分&#xff1a;想法由来及实现效果、实现步骤和实现后的一点想法。一、想法由来及实现效果教育学是一门理论与实践相结合的学科&#xff0c;实践起来人人都会&#xff0c;每天打开手机刷个公众号都是完成…

linux切换root报错,Linux用户切换到root后运行图形程序报错(*GLib-GIO-CRITICAL **)

用su切换到root用户后&#xff0c;运行某些带图形的程序&#xff0c;会报如下错误&#xff1a;(ImageProc_qt:3158): GLib-GIO-CRITICAL **: g_dbus_connection_register_object: assertion G_IS_DBUS_CONNECTION (connection) failed(ImageProc_qt:3158): GLib-GIO-CRITICAL *…

python程序打包多个py文件_不使用setup.py,打包 Python 项目

我编写了许多开源项目&#xff0c;并允许其他人通过PyPI访问这些项目。为此&#xff0c;我需要从这些项目构建一个源代码分发版(sdist)和一个可选的wheel包&#xff0c;并将二者上传到PyPI。最后&#xff0c;这个sdist和wheel包必须要能通过pip进行安装&#xff0c;以便其他人使…

软件工程软件开发成本度量规范_软件开发成本度量方法

软件成本度量一直都是软件行业的一个痛点问题。软件度量一度乱象丛生。拍脑袋的定价方式曾大行其道。软件成本度量的乱象直接导致了软件价格的诸多问题。比如预算费用存在浪费或不足的现象&#xff0c;招标存在投标额过低过高等非正常状况。这些情况都是因为度量标准的缺失&…

数据挖掘算法_算法篇(01) 数据挖掘算法初探

前言无论是传统行业&#xff0c;还是互联网行业。掌握数据&#xff0c;就是掌握规律。当你了解了市场数据&#xff0c;对它进行分析&#xff0c;就可以得到市场规律。当你掌握了产品自身的数据&#xff0c;对它进行分析&#xff0c;就可以了解产品的用户来源、用户画像等等。所…

java中怎么判断一段代码时线程安全还是非线程安全_24张图带你彻底理解Java中的21种锁...

(给ImportNew加星标&#xff0c;提高Java技能)转自&#xff1a;悟空聊架本篇主要内容如下&#xff1a;本篇文章已收纳到我的 Java 在线文档、 Github。我的 SpringCloud 实战项目持续更新中。帮你总结好的锁&#xff1a;序号锁名称应用1乐观锁CAS2悲观锁synchronized、vector、…

python大概学多久_自学Python要学多久可以学会?

如果是自学&#xff0c;从零基础开端学习python的话&#xff0c;按照每个人理解能力的不同&#xff0c;大致上需求半年到一年半左右的时刻&#xff0c;当然&#xff0c;如果有其它编程言语的经历&#xff0c;入门还是比较快的&#xff0c;大概需求2~3个月可以用Python言语编写一…

u盘 linux centos 5.3,鸟哥linux私房菜学习笔记,U盘安装centos5.3不能正常进入图形界面的问题...

前面说过自己成功引导了centos系统&#xff0c;现在进入启动界面&#xff0c;首次进入会进行相关设置&#xff0c;按照步骤一步一步完成&#xff0c;取消完光盘安装&#xff0c;点击下一步&#xff0c;就进入下面这个界面&#xff0c;没有登录框。。。没错&#xff01;怎么蓝屏…

将excel转为python的字典_python读取excel表并把数据转存为字典

excel表如下&#xff1a;我们需要通过使用python的xlrd方法先读取excel&#xff0c;再遍历赋值给字典。代码如下&#xff1a; importxlrdclassRead_Ex():defread_excel(self):#打开excel表&#xff0c;填写路径 book xlrd.open_workbook("../Data/test.xlsx")#找到s…

micropython是啥 知乎_嵌入式开发必备调试工具:Micro-Lab

在工作中&#xff0c;以什么样的方式向领导汇报工作最直接高效呢&#xff1f;当然是图形界面&#xff01;图形界面更好表达一个程序设计的逻辑思维&#xff0c;一目了然&#xff0c;本次介绍的Micro-Lab出自风媒电子-赵工之手。 1.什么是Micro-Lab? Micro-Lab可以称得上是迄今…

python面向对象三大基本特性_python面向对象之三大特性

继承 先看个简单的例子了解一下继承。class Animal: #父类 def __init__(self, name, age, department): self.namename self.ageage self.departmentdepartmentdefrunning(self):print(‘%s可以奔跑&#xff01;‘%self.name)class Cat(Animal): #括号里放要继承的父类 def __…

python怎么调用列表_Python中列表的使用

python中的列表与java中的数组非常类似&#xff0c;但使用方法比java中数组简单很多&#xff0c;python中的数据类型不需要显示声明&#xff0c;但在使用时必须赋值&#xff0c;列表元素下标从0开始 初始化列表&#xff08;初始化一个包含五个元素的列表和一个空列表&#xff0…