axios发送post请求接受不到参数

在玩vue的时候发现axios的post请求餐参数有问题

1.发送失败的前端代码

 		this.loading = true
          let param = {username:this.loginForm.username,password:this.loginForm.password};
    	console.log(param)
          this.axios.post("http://localhost:8098/login/login",param ,).then(res=>{
            console.log(res.data)
          if (res.data.errorCode>0){
            this.$router.push({ path: this.redirect || '/' })
            this.loading = false
          } else {
            console.log("登陆失败")
            this.salt=res.data.data.data;
            this.$store.commit('set_salt',this.salt);
            this.onLogin();
          }


          })

前段打印结果
在这里插入图片描述

2.后台java代码

	@OLogAnnotation(method="登录方法")
    @PostMapping("/login")
    @ResponseBody
    public ApiResult login(String username, String password, String code, Boolean rememberMe, Model model) {
        Subject subject= SecurityUtils.getSubject();
        //2.提交用户信息
        UsernamePasswordToken token = new UsernamePasswordToken(username,password);
        subject.login(token);
        model.addAttribute("username",username);
        return ResultUtils.buildSucessObject(null);
    }


断点发现参数为null,

经过上面的打印结果,此次发送的形式为

 {"username":"张三","password":"123456"}

这里百度一下,推荐用qs

3.更改后的代码代码

 this.loading = true
          let param = {username:this.loginForm.username,password:this.loginForm.password};
          /*this.$store.dispatch('user/login', this.loginForm).then(() => {
            this.$router.push({ path: this.redirect || '/' })
            this.loading = false*/
          let postData = this.$qs.stringify(param)
          console.log(postData)
          this.axios.post("http://localhost:8098/login/login",postData,).then(res=>{
            console.log(res.data)
          if (res.data.errorCode>0){
            this.$router.push({ path: this.redirect || '/' })
            this.loading = false
          } else {
            console.log("登陆失败")
            this.salt=res.data.data.data;
            this.$store.commit('set_salt',this.salt);
            this.onLogin();
          }

4.qs配置

import qs from '../node_modules/qs'
Vue.prototype.$qs = qs;

5.结果

前端发送结果
在这里插入图片描述

后台接受结果

在这里插入图片描述

6.结束

问题解决。
本文为作者原创,转载请申明出处。
一个后台渣渣的vue之旅吧。

发布了42 篇原创文章 · 获赞 13 · 访问量 8314

猜你喜欢

转载自blog.csdn.net/weixin_43328357/article/details/100530987