axios模拟表单提交

axios默认是application/json方式提交,controller接收的时候必须以@RequestBody的方式接收,有时候不太方便。如果axios以application/x-www-form-urlencoded方式提交数据,controller接收的时候只要保证名字应对类型正确即可。

前端代码:

  <el-dialogv-model="dialogVisible" width="30%"><el-form :model="formData" label-position="top"><el-form-item label="用户名"><el-input v-model="formData.username" placeholder="用户名..."/></el-form-item><el-form-item label="密码"><el-input type="password" v-model="formData.password" placeholder="密码..."/></el-form-item></el-form><template v-slot:header><span>登录窗口</span></template><template #footer><span class="dialog-footer"><el-button type="primary" @click="formConfirm">登录</el-button></span></template></el-dialog>

这是利用Element-Plus模态框提供的三个SLOT(footer,header和default)嵌套了一个Element-Plus的表单。点击登录按钮时,将双向绑定的formData提交到controller。

点击登录按钮时出发的formConfirm方法:

const formConfirm=function (){this.dialogVisible=false;axios.post(url.login,formData,{headers: {'Content-Type': 'application/x-www-form-urlencoded'}}).then(resp=>{const data = resp.data;this.formData.username="";this.formData.password="";console.log(data);}).catch(err=>{console.log("login error: ",err);});
}

核心就是使用了三参数的post函数:

post(url,data,config)

config里面设定发起post请求时的额外设置,header是设置(config)的一部分,而header中需要显式的设置content-type为application/x-www-form-urlencoded,这样对于服务器来说这就是一个表单提交数据的请求。

后端controller:

 @PostMapping("/login")public Map<String,String> login(String username, String password){log.info("username--->{}",username);log.info("password--->{}",password);Map<String,String> resp =   new HashMap<>();resp.put("message","wrong name or password");resp.put("token",null);if("abc".equals(username) && "123456".equals(password)){String token = UUID.randomUUID().toString();stringRedisTemplate.opsForValue().set("token",token,3600, TimeUnit.SECONDS);resp.put("message","success");resp.put("token",token);return resp;}return resp;}

如果是表单提交的数据,那么handler接收的方式不用添加任何额外的注解,利用名称对应,类型正确的方式就可以接收表单数据了。

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

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

相关文章

PMP项目管理主要学习内容是什么?

PMP项目管理是指根据美国项目管理学会(Project Management Institute&#xff0c;简称PMI)制定的项目管理知识体系和方法论进行项目管理的一种认证。PMP主要关注项目的规划、执行和控制等方面的知识和技能。 下面是PMP项目管理《PMBOK指南》第六版的主要学习内容&#xff1a; …

Matlab图像处理-灰度分段线性变换

灰度分段线性变换 如数学涵义的分段一般&#xff0c;分段线性变换就是将图像不同的灰度范围进行不同的线性灰度处理。其表达式可表示如下&#xff1a; 灰度分段线性变换可根据需求突出增强目标区域&#xff0c;而不增强非目标区间&#xff0c;达到特定的显示效果。 示例程序 …

通讯录(C语言)

通讯录 一、基本思路及功能介绍二、功能实现1.基础菜单的实现2.添加联系人信息功能实现3.显示联系人信息功能实现4.删除联系人信息功能实现5.查找联系人信息功能实现6.修改联系人信息功能实现7.排序联系人信息功能实现8.加载和保存联系人信息功能实现 三、源文件展示1.test.c2.…

YOKOGAWA CP461-50处理器模块

数据处理能力&#xff1a; CP461-50 处理器模块具有强大的数据处理能力&#xff0c;用于执行各种控制和数据处理任务。 多通道支持&#xff1a; 该模块通常支持多通道输入和输出&#xff0c;允许与多个传感器和执行器进行通信。 通信接口&#xff1a; CP461-50 处理器模块通常…

每日一题(复制带随机指针的链表)

每日一题&#xff08;复制带随机指针的链表&#xff09; 138. 复制带随机指针的链表 - 力扣&#xff08;LeetCode&#xff09; 思路&#xff1a; 由于每个链表还包含了一个random节点指向了链表中的随机节点&#xff0c;所以并不能直接照搬复制原链表。首先想到的暴力思路是复…

Redis的介绍

Redis的架构介绍如下: 1. 概述 Redis是一个基于内存的高性能NoSQL键值数据库,支持网络访问和持久化特性。 2. 功能架构 Redis提供字符串、哈希、列表、集合、有序集合、位数组等多种数据结构,支持事务、Lua脚本、发布订阅、流水线等功能。 3. 技术架构 Redis使用单线程的…

oracle批量导出字段注释,并且相同字段注释为空的情况取有数据的第一行赋值

SELECT ‘comment on column ‘|| t.table_name||’.’||t.colUMN_NAME||’ is ’ || ‘’‘’ || (CASE WHEN T1.COMMENTS IS NULL THEN (SELECT T2.COMMENTS FROM User_Col_Comments T2 WHERE T1.colUMN_NAMET2.colUMN_NAME AND T2.COMMENTS IS NOT NULL and rownum1) ELSE N…

字节后端社招凉经

一面 1.聊项目。项目方案&#xff0c;技术 2.代码&#xff1a;K个一组翻转链表 3.GC如何排查及解决GC 4.说一下linux命令 grep用法&#xff0c;端口号查询 5.mybatis 注入 6.sql优化 二面 1.聊项目&#xff0c;项目方案&#xff0c;项目技术 2.代码&#xff1a;输入N,输出0-…

嵌入式学习笔记(1)ARM的编程模式和7种工作模式

ARM提供的指令集 ARM态-ARM指令集&#xff08;32-bit&#xff09; Thumb态-Thumb指令集&#xff08;16-bit&#xff09; Thumb2态-Thumb2指令集&#xff08;16 & 32 bit&#xff09; Thumb指令集是对ARM指令集的一个子集重新编码得到的&#xff0c;指令长度为16位。通常在…

Thymeleaf

这就是自动装配的原理 1) .SpringBoot启动会加载大量的自动配置类 2)、我们看我们需要的功能有没有在SpringBoot默认写好的自动配置类当中; 3)、我们再来看这个自动配置类中到底配置了哪些组件;(只要我们要用的组件存在在其中&#xff0c;我们就不需要再手动配置了) 4)、给容器…

【Linux】linux nfs共享存储服务

linux nfs共享存储服务 目录 一、nfs服务 二、nfs优点 三、配置文件 四、共享文件配置过程 五、实验 1.创建共享文件&#xff08;两台终端共享&#xff09; 一、nfs服务 概念&#xff1a;网络上共享文件系统的协议&#xff0c;运行多个服务器之间通过网络共享文件和目…

【C++】内联函数 ( 概念简介 )

文章目录 一、内联行数简介1、内联函数引入 一、内联行数简介 1、内联函数引入 在 C 中 , 定义常量 const int a 10可以替换 C 语言中的 宏定义 #define a 10使用 常量 可以 替代 宏定义 ; 宏定义分为两种 , 一种是 宏常数 , 另外一种是 宏代码片段 ; C 中使用 常量 替代 宏…

渣土车识别监测 渣土车未盖篷布识别抓拍算法

渣土车识别监测 渣土车未盖篷布识别抓拍算法通过yolov7深度学习训练模型框架&#xff0c;渣土车识别监测 渣土车未盖篷布识别抓拍算法在指定区域内实时监测渣土车的进出状况以及对渣土车未盖篷布违规的抓拍和预警。YOLOv7 的策略是使用组卷积来扩展计算块的通道和基数。研究者将…

webRtc 示例

1、使用socket.io进行会话 2、为了方便&#xff0c;参数写死在前端了&#xff0c;前端界面1代码如下&#xff08;由界面1发起视频&#xff09;&#xff1a; <!DOCTYPE html> <html><head><title>Socket.IO chat</title><meta charset"…

数字化新零售平台系统提供商,门店商品信息智慧管理-亿发进销存

传统的批发零售业务模式正面临着市场需求变化的冲击。用户日益注重个性化、便捷性和体验感&#xff0c;新兴的新零售模式迅速崛起&#xff0c;改变了传统的零售格局。如何在保持传统业务的基础上&#xff0c;变革发展&#xff0c;成为了业界亟需解决的问题。 在这一背景下&…

JixiPix Artista Impresso Pro for mac(油画滤镜效果软件)

JixiPix Artista Impresso pro Mac是一款专业的图像编辑软件&#xff0c;专为Mac用户设计。它提供了各种高质量的图像编辑工具&#xff0c;可以帮助您创建令人惊叹的图像。该软件具有直观的用户界面&#xff0c;使您可以轻松地浏览和使用各种工具。 它还支持多种文件格式&…

前端是leyui后端sqlserver和maraDB进行分页

项目场景&#xff1a; 前端是leyui后端sqlserver和maraDB进行分页,两种数据库在后端分页的不同写法 解决方案&#xff1a; 前端: 定义table,表格的格式在接口返回时进行创建,根据id进行绑定 <div class"layui-tab-item layui-show" style"padding-top: 10…

@XmlType,@XmlRootElement,@XmlAttribute的作用与区别

XmlType、XmlRootElement 和 XmlAttribute 都是 Java 标准库中 javax.xml.bind.annotation 包提供的注解&#xff0c;用于在使用 JAXB&#xff08;Java Architecture for XML Binding&#xff09;或其他 XML 绑定技术时&#xff0c;控制 Java 类与 XML 数据之间的映射关系。 它…

C++的基类和派生类构造函数

基类的成员函数可以被继承&#xff0c;可以通过派生类的对象访问&#xff0c;但这仅仅指的是普通的成员函数&#xff0c;类的构造函数不能被继承。构造函数不能被继承是有道理的&#xff0c;因为即使继承了&#xff0c;它的名字和派生类的名字也不一样&#xff0c;不能成为派生…

rate-based 拥塞控制吞吐测量

要点&#xff1a;一个方法无法精确刻画链路画像&#xff0c;就用多种方法组合刻画&#xff0c;设计一个 “自定义平均”。 当前 Linux kernel TCP 实现的 TCP delivery rate 测量机制(BBR 有使用到)如下图&#xff1a; 简略后可展示为下图&#xff1a; 详见 net/ipv4/tcp_…