其时被这玩意折磨了一个下午六个半小时，适当坐牢。
非常感谢我的好学长帮我处理了。！【2022-11-06】
先贴最终成功的版本
后端的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<String,String> 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> 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 Map<String,Object>map){
System.out.println(map.get("xxx"));
}
关于Map<String,Object>，值的类型建议设置为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单词有没有写错
分析这儿
咱们在
被赋值给params再传给data。
再次包裹的话，数据就变成了
虽然这两种前端传参写法都能够，但条件是后端的写法要与之共同，假如用params包裹，后端对应字段有必要为params。
通常状况下，只需F12能够看到参数正常携带，一般才是后端的问题。
由于这儿的状况是无关那种是对是错，而是前后端的对应问题，所以其实说哪边有问题都能够。或者说，两头都没有问题，只是没有运用同一种格局，这才是问题所在。
别的，最根底的写法（未封装post,get,post,delete办法），是彻底没问题的，能够正常发送恳求和承受。
别的，最根底的写法（未封装post,get,post,delete办法），是彻底没问题的，能够正常发送恳求和承受。
我最近才从csdn转社区，正在参与博客搬迁活动，本篇文章原本写于2022-11-06，最近正在筛选相对好一点的文章搬来，有些早的时分写的东西或许显得有些幼嫩了，如有过错，等待纠正。
