位置: IT常识 - 正文

Vue使用axios发送get请求并携带参数(vue发送数据)

编辑:rootadmin
Vue使用axios发送get请求并携带参数 前言

推荐整理分享Vue使用axios发送get请求并携带参数(vue发送数据),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:vue发送数据,vue中的axios如何实现,vue发送axios请求,vue发送请求的几种方式,vue发送数据,vue发送axios请求,vue发送数据,vue发送axios请求,内容如对您有帮助,希望把文章链接给更多的朋友!

其实关于Vue使用axios发送get请求并携带参数,我之前写过一篇,但是昨天又发现了另外一种方式,所以就单独写一篇进行总结。

之前写的那篇使用get请求并携带参数都是使用的字符串拼接的方式

感兴趣可以参考: Vue使用axios进行get请求拼接参数的两种方式

关于如何使用安装下载axios,我之前也写过,感兴趣的话可以看看。

前台传参

这里我有一个业务场景,登录的时候需要把输入的账号和密码传递给后端:

这里前后端没做加密逻辑,只是为了举例子解释说明!正常是要加密的,不能是要明文密码登录!

前端传递的时候,可以借助axios的params属性:

Vue使用axios发送get请求并携带参数(vue发送数据)

注意:axios的回调函数,一定要使用箭头函数,不然this的指向不是vue示例

相关代码如下:

login(){ axios.get('http://localhost:9090/user/login', { // 传递的参数 params: { // 账号 account:this.formLogin.account, // 密码 password:this.formLogin.password, // 测试参数 testParam:'hello world' } // 回调函数,一定要使用箭头函数,不然this的指向不是vue示例 }).then(res =>{ // 如果状态为400,说明登录失败 if(res.data.status===400){ // 登录失败提示 this.$message({showClose: true, message: '登录失败,请检查账号和密码!',type: 'error', duration:2000,center:true}); }else{ // 登录成功提示 this.$message({showClose: true, message: '登录成功!',type: 'success', duration:2000,center:true}); // 跳转到首页路由 this.$router.push("/main/home"); } }).catch(error =>{ console.log(error) }) },

可以通过控制台查看完整的get请求:

http://localhost:9090/user/login?account=wyh19991101&password=123456&testParam=hello+world

也可以通过控制台查看传递的参数:

后台接参

前台代码以及写完了,再看下后台是否可以正常接收吧

可以发现,也是没有任何问题的。

这样就完成了一个简单的使用axios发送get请求并携带参数的方式了。并且涉及到前后端交互。

本文链接地址:https://www.jiuchutong.com/zhishi/289798.html 转载请保留说明!

上一篇:处于美轮美奂的光影中的圣米歇尔山 (© Mathieu Rivrin/Getty Images)(美轮美奂的对象是什么)

下一篇:Uni-app + Vue3 + TS +Vite 创建项目

  • 租集体土地建厂合法吗
  • 房屋维修基金帐户怎么查
  • 原始凭证太多如何删除
  • 不动产租赁服务的税率是多少
  • 一般纳税人开专票几个点
  • 外贸企业当月没交税
  • 国际多式联运必须具备的基本条件是什么
  • 临时工工资为什么那么低?
  • 汇总记账凭证会计核算形式
  • 销售企业资金风险点有哪些呢
  • 股息红利税补缴什么意思
  • 个体工商户需要缴纳哪些税
  • 公交车收购
  • 房地产对居民生活的影响
  • 年终奖有计算公式吗
  • 业务协作费是什么
  • 客户为了凑整多打的款计入什么科目?
  • 工会费用是什么意思
  • 支付的劳务派遣服务费现金流量
  • 购销合同印花税优惠政策
  • 代开专票作废需要什么资料?
  • 开票的时候确认收入吗
  • 财政部的监管职责范围不包括
  • 公司为员工负担个税怎么做账
  • 公司的车卖了
  • 1697509029
  • 什么情况财务费用是负数
  • 电子普通发票怎么开
  • 增值税月末如何计算
  • 基本户收到个人款项的分录
  • windows10 20h2 2004
  • 怎样将u盘制作成电脑系统启动盘?
  • 劳务报酬计入综合所得吗
  • win11 组策略
  • os x yosemite dp6下载 os x 10.10 dp6官方下载地址
  • 如何修复面部毛孔粗大
  • 差旅费是否可以所得税前扣除
  • 冲减其他应收款摘要怎么写
  • 培训费收入交什么税
  • 一般股份支付的确认计量及帐务处理怎么做
  • 上飞机可以带2个充电宝吗
  • 存货核算的会计分录怎么写
  • 财务费用属不属于当期损益
  • 应收票据计提利息
  • flask框架入门
  • 帝国cms做商城
  • 进项税额转出在申报的时候怎么填
  • 现金销售商品的会计分录
  • 财务报表季报应付职工薪酬是指三个月工资累计还是
  • 弃置费用预计负债的摊余成本
  • 商业汇票利息账务处理如何做?
  • 进项加计扣除主项怎么算
  • 研发支出是什么性质的科目
  • 工会经费为0是不用申报的?
  • 当月只有进项票没有销项票怎么办
  • 长期股权投资如何入账
  • 小规模附加税优惠政策最新2023
  • 建账怎么建
  • 如何把数据导入mysql中
  • mysql嵌套查询联表查询
  • centos下载命令
  • Ubuntu软件源更新
  • 如何禁止mac adobe acrobat联网
  • win7 手动输入用户名
  • win 7系统无法删除系统文件
  • neo是什么意思中文翻译
  • win10电脑补丁 kb5000802
  • linux如何修改网关地址
  • javascriptwhile
  • js与css有什么区别
  • anaconda使用指南
  • java框架怎么用
  • jquery三种遍历方法
  • python3解析json
  • unity3d快速入门
  • javascript的
  • unity 3d游戏开发
  • js编写一个标准的单例模式类
  • 东莞网上办税服务厅
  • 税务清单模板
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设