springboot接收不到vue发送axios请求中的数据

今天被这玩意折磨了一个下午六个半小时，相当坐牢。

非常感谢我的好学长帮我解决了。！

先贴最终成功的版本

后端的UserController

package com.seashellhouse.controller;
 
import com.seashellhouse.controller.utils.R;
import com.seashellhouse.pojo.User;
import com.seashellhouse.service.IUserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;
 
import java.util.Map;
 
@CrossOrigin
@RestController
@RequestMapping("/users")
public class UserController {
    @Autowired
    private IUserService userService;
 
    @RequestMapping("/login")
    public R login(@RequestBody Map map) {
        String username = map.get("id");
        String password = map.get("password");
        System.out.println("传过来的账号是："+username);
        System.out.println("传过来的密码是："+password);
 
        User user = userService.getById(username);
        if (user == null || !password.equals(user.getPassword())) {
            return new R(false);
        } else {
            return new R(true, user);
        }
    }
 
}

前端的login点击事件方法

login() {
      alert("账号为：" + this.username + ",密码为：" + this.password);
      apiFun
        .login({
            id: this.username,
            password: this.password,
        })
        .then((res) => {
          console.log(res.flag);
          console.log(res.data);
          if (res.flag == false) {
            alert("账号或密码不正确-n-");
          } else {
            console.log(res.data);
          }
        });
    },

post方法的封装

post(url = '', params = {}) {
 
    return new Promise((resolve, reject) => {
      _axios({
        url,
        data: params,
        headers: { 'Content-Type': 'application/json;charset=UTF-8' },
        method: 'POST'
      }).then(res => {
        resolve(res.data)
        return res.data
      }).catch(error => {
        reject(error)
      })
    })
  },

登录页面:

成功发送axios请求并接收到后端传回的数据 

 

---

 注意点：

封装好请求方法后，传输参数时，直接写键值对，无需手动转为json数据，且不要用params（{ }）包裹起来。

后端接收数据，不要用以下方法。

 可以使用接收map和实体对象的方法

---

1.使用实体对象方法。

若前端传递过来的数据刚好和我们的bean实体对象属性一致，则可以使用对象的形式接收。

后端实体类

@Component
public class Score {
    private int id;
    private String name;
    private List scoreList;
}

后端Controller
 
@PostMapping("/student/score")
public void getScore(@RequestBody Score score){
    System.out.println(score);
}

● 前端数据和bean对象属性要一致
● 必须使用@RequestBody注解，从请求体中拿数据

在我的项目中体现的就比如这样 

---

2，使用Map接收
若前端传递过来的数据很复杂，没有对应的POJO与其对应，就可以用Map进行接收。

后台Controller
 
@PostMapping("/lhj/getdata")
public void getData(@RequestBody Mapmap){
    System.out.println(map.get("xxx"));
}

对于Map，值的类型建议设置为Object，这样可以使Map能接收各种类型的数据，如字符串、数字、数组和对象等。

在我的项目中体现的就比如这样 

---

 两种方法比较

---

调bug中途还遇到这个报错

表面上看是跨域问题，但是我换一个get方法却可以正常响应，不会报跨域问题，查询资料发现，有时候会因为bad request导致程序以为是跨域的问题，引起跨域问题的报错。实际上不是跨域问题。 

---

 这个地方写@RequestMapping("/xxx")或@PostMapping都可以。

通常@requestmapping还得加个类型

---

 

 前端页面的两个login方法，一个请求类型是options，一个请求是我们写的post类型。

这里的options是指

 既然预检请求过了说明没有跨域问题。

而第二个post类型的login方法才是我们写的方法，报错说明没有找到对应接收数据的接口。

我这里因为一开始使用params包裹起来了导致后端那边不能对应params字段，无法接收到数据。

也可以理解为是前后端数据不一致，当时查博客的时候看见了这个问题的博客，但是没想到是params的问题。所以应该就是前后端数据格式对不上导致的404报错，也就是找不到接口。

当时的前端写的，是传出去了参数的，但注意这里的参数最外层是params。

 后端的接口通过postman测试也是可以正常使用的

 但由于前端用params包裹起来了，后端接收的确是params内部的username和password，所以前后端对应不上，导致前端的post请求找不到对应的接口，找不到对应的接口所以报了404错误。

当时查博客的时候看到了这一段

 但是没注意到是params没对应上。还去确认了两边的username和password单词有没有写错

 分析这里

我们在 这一步已经设置好了路径，在vue页面中书写axios请求只需要再传入键值对参数即可。无需再把用params把键值对数据包裹。传入的键值对

被赋值给params再传给data。

再次包裹的话，数据就变成了。

---

 

 虽然这两种前端传参写法都可以，但前提是后端的写法要与之一致，如果用params包裹，后端对应字段必须为params。

通常情况下，只要F12可以看到参数正常携带，一般才是后端的问题。

因为这里的情况是无关那种是对是错，而是前后端的对应问题，所以其实说哪边有问题都可以。或者说，两边都没有问题，只是没有使用同一种格式，这才是问题所在。

---

另外，最基础的写法（未封装post,get,post,delete方法），是完全没问题的，可以正常发送请求和接受。

---

 点这里是热加载，改变了后端数据点这就不用重新从头编译了。