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 "";
    }

实验效果：