springboot+angular 前后端传值交互(含文件上传)
大约 2 分钟
准备条件
开发环境
Angular 12、springboot 2.2.12.RELEASE前端变量定义声明
preUrl: string = "http://127.0.0.1:8080/user";
user: any = { username: "伶念", age: 6, classname: "Class One" };
- 后台 entity 代码
@Data
public class User {
private String username;
private String classname;
private int age;
private MultipartFile[] files;
}
一 、Get 方式传值
- Path 传值
将参数放到路径的一种传值方式,形式类似 user/userInfo/6
前端代码:
getPath() {
const { username, age } = this.user;
this.http.get(`${this.preUrl}/${username}/${age}`).subscribe((res) => {
console.log(res);
});
}
后台 controller 使用@PathVariable
注解 代码:
@GetMapping("/{username}/{age}")
public Result getPath(@PathVariable int age, @PathVariable String username) {
log.info("接收到的信息:用户名:{},年龄:{}", username, age);
return Result.message("success");
}
- Params 传值
将参数拼接到地址后面,生成形如 user/userInfo?id=6
的地址
前端代码:
getQuery() {
this.http
.get(`${this.preUrl}/getQuery`, { params: this.user })
.subscribe((res) => {
console.log(res);
});
}
后台 controller 使用@RequestParam
注解 或者 不使用注解 代码:(不使用注解时,要保证字段名一致)
@GetMapping("/getQuery")
public Result getQuery(@RequestParam("age") int age, String username) {
log.info("接收到的信息:用户名:{},年龄:{}", username, age);
return Result.message("success");
}
二、Post 方式传值
- JSON 传值 最常用的一种 post 传值方式 前端代码:
jsonPostBody() {
this.http.post(`${this.preUrl}/postUserInfo`, this.user).subscribe((res) => {
console.log(res);
});
}
后台使用 @RequestBody
注解
@PostMapping("/postUserInfo")
public Result postUserInfo(@RequestBody User user) {
String username = user.getUsername();
int age = user.getAge();
log.info("接收到的信息:用户名:{},年龄:{}", username, age);
return Result.message("success");
}
- Form 传值 前端代码:
formPostBody() {
const form = new FormData();
for (let key of Object.keys(this.user)) {
form.append(key, this.user[key]);
}
this.http.post(`${this.preUrl}/postFormUserInfo`, form).subscribe((res) => {
console.log(res);
});
}
后台代码:
@PostMapping("/postFormUserInfo")
public Result postFormUserModel(User user) {
log.info("接收到的信息:用户名:{},年龄:{}", user.getUsername(), user.getAge());
for (MultipartFile file : user.getFiles()) {
System.out.println(file.getOriginalFilename());
}
return Result.message("success");
}
或者 使用@RequestParam
注解
@PostMapping("/postFormUserInfo")
public Result postFormUserInfo(@RequestParam("username") String username, int age) {
log.info("接收到的信息:用户名:{},年龄:{}", username, age);
return Result.message("success");
}
*另:
1.Get 的传值方式同样适用于 Post,但注意前端 Post 方法的 Body 为必填
2.Params 传值和 Forms 传值 在使用 Post 传值时 后台代码其实是可以用一样的
- 带文件上传的 Post 传值 前端代码:
postFormUserModel() {
const form = new FormData();
for (let key of Object.keys(this.user)) {
form.append(key, this.user[key]);
}
for (let file of this.files) {
form.append('files', file);
}
this.http.post(`${this.preUrl}/postFormUserModel`, form, {
// headers: {
// enctype: 'multipart/form-data',
// },
}).subscribe((res) => {
console.log(res);
});
}
后台代码
@PostMapping("/postFormUserModel")
public Result postFormUserModel(User user) {
log.info("接收到的信息:用户名:{},年龄:{}", user.getUsername(), user.getAge());
for (MultipartFile file : user.getFiles()) {
System.out.println(file.getOriginalFilename());
}
return Result.message("success");
}
// 或者
@PostMapping("/postFormUserModel")
public Result postFormUserModel(String username, int age, MultipartFile[] files) {
log.info("接收到的信息:用户名:{},年龄:{}", username, age);
for (MultipartFile file : files) {
System.out.println(file.getOriginalFilename());
}
return Result.message("success");
}