如何将Angular表单数据发送到Spring Boot微服务的REST控制器

一、Angular前端调整 #

1. 修改表单模板 #

给表单添加ngForm引用和提交事件绑定，同步修正密码框的输入类型：

<!-- 新增#loginForm="ngForm" 绑定表单实例，新增(ngSubmit)绑定提交方法，action留空用angular处理请求 -->
<form #loginForm="ngForm" (ngSubmit)="onSubmit(loginForm.value)" method="POST">
  <input required ngModel name="loginUsername" #loginUsername="ngModel" type="text" placeholder="Username">
  <div class="notValid" role="alert" *ngIf="loginUsername.invalid && (loginUsername.dirty || loginUsername.touched)">
    Username not inserted
  </div>
  <!-- 密码框修改type为password隐藏输入内容 -->
  <input required ngModel name="loginPassword" #loginPassword="ngModel" type="password" placeholder="Password">
  <div class="notValid" role="alert" *ngIf="loginPassword.invalid && (loginPassword.dirty || loginPassword.touched)">
    Password not inserted
  </div>
  <!-- 提交按钮新增禁用逻辑，表单无效时不可点击 -->
  <button type="submit" [disabled]="loginForm.invalid">Login</button>
</form>

2. 补充模块和组件逻辑 #

• 首先在项目根模块（通常是app.module.ts）中导入依赖：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms'; // 模板驱动表单必须依赖
import { HttpClientModule } from '@angular/common/http'; // 发送http请求必须依赖

import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, FormsModule, HttpClientModule],
  bootstrap: [AppComponent]
})
export class AppModule { }

• 在表单对应的组件类中添加提交处理逻辑：

import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  // 注入http客户端
  constructor(private http: HttpClient) {}

  onSubmit(formValue: any) {
    // 向后端登录接口发送POST请求，formValue已经包含loginUsername和loginPassword两个字段
    this.http.post('http://localhost:9090/login', formValue)
      .subscribe(res => {
        console.log('登录响应：', res);
        // 后续可加登录成功的跳转逻辑
      }, err => {
        console.error('登录失败：', err);
      });
  }
}

二、Spring Boot后端调整 #

1. 依赖说明 #

当前项目使用Spring Cloud Gateway，默认是基于WebFlux的响应式框架，和Spring MVC不兼容，优先选择WebFlux方式实现接口无需额外加依赖；如果需要使用Spring MVC实现接口，需要先排除Gateway的WebFlux依赖，再引入spring-boot-starter-web依赖。

2. 新增登录接口 #

在ApiGatewayApplication类中添加POST类型的登录接口，接收前端传参：

import org.springframework.http.ResponseEntity;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import java.util.Map;

// 类上的原有注解保持不变
@EnableDiscoveryClient
@SpringBootApplication
@RestController
@RequestMapping
@CrossOrigin(origins = "http://localhost:4200")
public class ApiGatewayApplication {

    public static void main(String[] args) {
        SpringApplication.run(ApiGatewayApplication.class, args);
    }

    // 新增登录接口
    @PostMapping("/login")
    public ResponseEntity<Map<String, Object>> login(@RequestBody Map<String, String> loginParams) {
        String username = loginParams.get("loginUsername");
        String password = loginParams.get("loginPassword");
        // 此处可添加账号密码校验、查询数据库等业务逻辑
        System.out.println("收到登录请求，用户名：" + username + "，密码：" + password);
        
        // 构造返回值
        return ResponseEntity.ok(Map.of(
            "code", 200,
            "msg", "请求成功",
            "username", username
        ));
    }
}

三、验证流程 #

1. 启动Spring Boot后端服务，确认运行在localhost:9090
2. 启动Angular前端服务，确认运行在localhost:4200
3. 前端输入用户名、密码后点击提交，查看后端控制台是否打印对应参数，前端控制台是否返回成功响应即可。

内容的提问来源于stack exchange，提问作者Luca