Vue+Springboot解决数据传输时参数格式不匹配问题

前端:使用的是ant design vue ,端口号为8000
后端:使用的是springboot框架开发,端口号为8080
需求:已经解决跨域问题,前端发送登录的信息给后台,后台接收不到

样例:

前端:

handleSubmit(e) {
            e.preventDefault()
            const {
                form: { validateFields },
                state,
                customActiveKey,
                Login
            } = this

            state.loginBtn = true

            const validateFieldsKey = customActiveKey === 'tab1' ? ['username', 'password'] : ['mobile', 'captcha']

            validateFields(validateFieldsKey, { force: true }, (err, values) => {
                if (!err) {
                    console.log('login form', values)
                    const loginParams = { ...values }
                    delete loginParams.username
                    loginParams[!state.loginType ? 'email' : 'username'] = values.username
                    loginParams.password = md5(values.password)
                    Login(loginParams)
                        .then(res => this.loginSuccess(res))
                        .catch(err => this.requestFailed(err))
                        .finally(() => {
                            state.loginBtn = false
                        })
                } else {
                    setTimeout(() => {
                        state.loginBtn = false
                    }, 600)
                }
            })

后台:

@RequestMapping("/auth/login")
    public String login(String username,String password){
        System.out.println();
        return "";
    }

请求的数据格式为json格式,后台参数类型不匹配
在这里插入图片描述

解决方案

第一种:
修改后端,参数类型:

@RequestMapping("/auth/login")
    public String login(@RequestBody Map<String,Object> map){
        System.out.println(map);
        //System.out.println(username + " : " + password);
        return "";
    }

在这里插入图片描述

第二种方式:
在前端vue框架中加入qs插件,qs 是一个增加了一些安全性的查询字符串解析和序列化字符串的库
首先安装qs插件,在前端的控制台中输入(npm install qs)
修改login.vue

引入
在这里插入图片描述
修改登录的方法
在这里插入图片描述
修改后端代码:

@RequestMapping("/auth/login")
    public String login(@RequestParam("username") String username,@RequestParam("password")String password){
        System.out.println(username + " : " + password);
        return "";
    }

实验效果:
在这里插入图片描述

版权声明:本文为weixin_44943485原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_44943485/article/details/105679505

智能推荐

数据传输之ZeroCopy

很多Web应用都会提供大量的静态内容,也就意味着需要从磁盘读取数据,然后将它们写入到响应socket。这看上去似乎需要很少的CPU活动,但是它有点低效:内核从磁盘读取数据,然后穿过内核—用户边界把它送往应用,接着应用再穿过内核—用户边界把它送回,并写入socket。事实上,在把数据从磁盘发往socket的过程中,应用扮演着一个低效的中间媒介。 每次数据穿过用户—...

libmodbus搭建数据传输

libmodbus搭建数据传输demo libmodbus生成dll与lib 下载 GitHub https://github.com/stephane/libmodbus 百度网盘 链接:https://pan.baidu.com/s/1Ne9E2zqpueam3fEMd39lSA 提取码:4tl2 编译异常 在GitHub上下载的源码只能在win32下编译,不能在x64下编译,不知道是哪里没有...

前台数据传输

网络选图 数据提交 同步提交 方式一: 方式二: 方式三: 方式四: 异步提交 方式一: 方式二: 异步和&同步比较 form是同步提交,而ajax是异步提交。 ajax只是会请求到数据不会进行页面的跳转,而form会页面的跳转。 数据请求 JSON的字符串解析成JSON数据 数据回显 特别提醒:数据的转换需要根据请求的接口转换,如果请求的接口中带@RequestBody注解,需要传输的是...

数据传输 | dtle 使用初探

作者:马莹乐 爱可生研发团队成员,负责 mysql 中间件和数据库管理平台的测试。擅长找茬(测试技术爱好者),欢迎大家试用 dtle~ 本文来源:原创投稿 *爱可生开源社区出品,原创内容未经授权不得随意使用,转载请联系小编并注明来源。 dtle 是一款爱可生 MySQL 开源数据传输中间件,此文简要介绍初步使用方法。 项目地址:https://github.com/actiontech/dtle ...

JDBC登录与数据传输

JDBC登录与数据传输 现在我们就先对登录代码来操作解释一波~(当然也不会讲的太具体 实在不行百度也是不错的选择) 那么在写代码之前先创建好代码中所需要的包(包名如下) 创建完包之后就跟着下面的步骤一步步执行就可以了 在pojo包中创建User类 并生成Get/Set/toString() 方法就可以了(代码很简单,这里就展示部分代码 ) 在mapper包中创建一个用于连接数据库的接口类(User...

猜你喜欢

linux上安装Qt4.8.6+QtCreator4.0.3

一、Qt简介 Qt是1991年奇趣科技开发的一个跨平台的C++图形用户界面应用程序框架。它提供给应用程序开发者建立艺术级的图形用户界面所需的所有功能。Qt很容易扩展,并且允许真正地组件编程。 准备工作 操作系统:centos6.5 位数:64位 二、安装 1、获取源码Qt4.8.6 2、获取源码QtCreator4.0.3 2、安装QtCreator4.0.3 进入QtCreator安装界面,指定...

react-native metro 分析

文章目录 前言 概念 Resolution Transformation Serialization 打包方式 Moudles Plain bundle Indexed RAM bundle File RAM bundle 流程 前置流程 resolve流程 Transformer流程 序列化流程 缓存 为什么要缓存 缓存的请求与缓存 Metro配置 结构 前言 metro是一种支持ReactNa...

嵌入式Linux——应用调试:用户态打印段错误信息

简介:     很多时候我们会遇到段错误:segmentation fault,而段错误有时是由内核引起的,有时是由应用程序引起的。在内核态时,发生段错误时会打印oops信息,但是在用户态时,发生段错误却只会打印segmentation fault而并不会打印其他的信息。所以本文主要介绍在用户态时,通过修改内核设置和添加启动参数来打印引发segmentati...

springboot1.4.1整合logback 遇到的问题

springboot1.4.1整合logback 遇到的问题 项目使用了springboot1.4.1整合logback,然而设置的过期时间15 并没有生效, 2GB达到2G自动删除也没有生效,仅仅实现了按大小分割。 经过查看pom 父工程内的源码发现是默认的logback版本是1.1.7,而过期时间配置是在logback 1.1.8以后才支持的。 不得不说这是springboot1.4.1 的b...

记一次C/S架构的渗透测试

概述 目标站点是http://www.example.com,官网提供了api使用文档,但是对其测试后没有发现漏洞,目录、端口扫描等都未发现可利用的点。后发现官网提供了客户端下载,遂对其进行一番测试。 信息收集 先抓了下客户端的包,使用Fiddler和BurpSuite都抓不到,怀疑走的不是HTTP协议,用WireShark查看其确实用的是HTTP协议,但是数据包不好重放,这里最后使用了WSExp...