springboot+angular 前后端传值交互（含文件上传）_angular怎么实现前后端交互

开发环境：

Angular 12
springboot 2.2.12.RELEASE

前端变量定义声明

  preUrl: string = 'http://127.0.0.1:8080/user';
  user: any = { username: '伶念', age: 6, classname: 'Class One' };
1
2

后台entity代码：

@Data
public class User {

    private String username;

    private String classname;

    private int age;

    private MultipartFile[] files;

}
1
2
3
4
5
6
7
8
9
10
11
12

一 、Get方式传值

1.Path传值

将参数放到路径的一种传值方式，形式类似 user/userInfo/6
前端代码：

  getPath() {
    const { username, age } = this.user;
    this.http.get(`${this.preUrl}/${username}/${age}`).subscribe((res) => {
      console.log(res);
    });
  }
1
2
3
4
5
6

后台 controller 使用@PathVariable 注解 代码：

    @GetMapping("/{username}/{age}")
    public Result getPath(@PathVariable int age, @PathVariable String username) {
        log.info("接收到的信息：用户名：{},年龄：{}", username, age);
        return Result.message("success");
    }
1
2
3
4
5

2.Params传值

将参数拼接到地址后面，生成形如 user/userInfo?id=6 的地址
前端代码：

  getQuery() {
    this.http
      .get(`${this.preUrl}/getQuery`, { params: this.user })
      .subscribe((res) => {
        console.log(res);
      });
  }
1
2
3
4
5
6
7

后台 controller 使用@RequestParam 注解 或者 不使用注解 代码：
（不使用注解时，要保证字段名一致）

    @GetMapping("/getQuery")
    public Result getQuery(@RequestParam("age") int age, String username) {
        log.info("接收到的信息：用户名：{},年龄：{}", username, age);
        return Result.message("success");
    }
1
2
3
4
5

二、Post方式传值

1.JSON传值

最常用的一种post传值方式
前端代码：

  jsonPostBody() {
    this.http.post(`${this.preUrl}/postUserInfo`, this.user).subscribe((res) => {
        console.log(res);
      });
  }
1
2
3
4
5

后台使用 @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");
    }
1
2
3
4
5
6
7

2.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);
    });
  }
1
2
3
4
5
6
7
8
9

后台代码：

    @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");
    }
1
2
3
4
5
6
7
8

或者 使用@RequestParam 注解

    @PostMapping("/postFormUserInfo")
    public Result postFormUserInfo(@RequestParam("username") String username, int age) {
        log.info("接收到的信息：用户名：{},年龄：{}", username, age);
        return Result.message("success");
    }
1
2
3
4
5

*另：

1.Get的传值方式同样适用于Post，但注意前端Post方法的Body为必填
2.Params传值和Forms传值 在使用Post传值时 后台代码其实是可以用一样的

3.带文件上传的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);
      });
  }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

后台代码

    @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");
    }
1
2
3
4
5
6
7
8

或者

    @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");
    }
1
2
3
4
5
6
7
8

仓库地址：https://gitee.com/zechen21/demo-pass-value.git

参考文章地址：https://blog.csdn.net/u010775025/article/details/80198291