如何将SpringBoot邮件发送应用整合至Angular项目实现表单邮件发送功能

当然可以整合！其实不需要把两个项目合并成一个，前后端分离的模式反而更适合你的场景——Angular负责前端交互，SpringBoot提供后端邮件服务。作为新手，跟着下面的步骤一步步来就好：

首先，你需要把原来的邮件发送逻辑包装成一个POST接口，这样Angular才能通过HTTP请求调用它。

• 新建一个EmailController类，添加@RestController注解，定义接收邮件参数的POST接口：

@RestController
@CrossOrigin(origins = "http://localhost:4200") // 允许Angular本地地址跨域访问
@RequestMapping("/api/email")
public class EmailController {

    @Autowired
    private JavaMailSender mailSender; // 假设你已经配置好这个邮件发送器

    @PostMapping("/send")
    public ResponseEntity<String> sendEmail(@RequestBody EmailRequest emailRequest) {
        try {
            SimpleMailMessage message = new SimpleMailMessage();
            message.setTo(emailRequest.getTo());
            message.setSubject(emailRequest.getSubject());
            message.setText(emailRequest.getContent());
            mailSender.send(message);
            return ResponseEntity.ok("邮件发送成功！");
        } catch (Exception e) {
            return ResponseEntity.status(HttpStatus.INTERNAL_SERVER_ERROR).body("邮件发送失败：" + e.getMessage());
        }
    }

    // 定义接收前端参数的DTO类
    public static class EmailRequest {
        private String to;
        private String subject;
        private String content;

        // Getter和Setter方法
        public String getTo() { return to; }
        public void setTo(String to) { this.to = to; }
        public String getSubject() { return subject; }
        public void setSubject(String subject) { this.subject = subject; }
        public String getContent() { return content; }
        public void setContent(String content) { this.content = content; }
    }
}

• 确保你的SpringBoot配置文件（application.properties/application.yml）里的Gmail邮件配置正确：

spring.mail.host=smtp.gmail.com
spring.mail.port=587
spring.mail.username=你的Gmail邮箱
spring.mail.password=你的Gmail应用密码（注意：开启两步验证的话必须用应用密码，而非普通密码）
spring.mail.properties.mail.smtp.auth=true
spring.mail.properties.mail.smtp.starttls.enable=true

接下来，在Angular里创建一个服务来调用后端接口：

1. 先在app.module.ts中导入HttpClientModule（否则无法发送HTTP请求）：

import { HttpClientModule } from '@angular/common/http';

@NgModule({
  imports: [
    // ...其他导入项
    HttpClientModule
  ]
})
export class AppModule { }

2. 用Angular CLI生成邮件服务：

ng generate service email

3. 在email.service.ts中编写发送邮件的方法：

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class EmailService {
  private apiUrl = 'http://localhost:8080/api/email/send'; // 后端接口地址

  constructor(private http: HttpClient) { }

  sendEmail(emailData: { to: string; subject: string; content: string }): Observable<string> {
    return this.http.post<string>(this.apiUrl, emailData);
  }
}

现在，在你的表单组件里处理用户提交事件，调用邮件服务完成发送：

假设你用的是模板驱动表单，组件代码示例：

import { Component } from '@angular/core';
import { EmailService } from './email.service';

@Component({
  selector: 'app-contact-form',
  templateUrl: './contact-form.component.html',
  styleUrls: ['./contact-form.component.css']
})
export class ContactFormComponent {
  emailFormData = {
    to: '',
    subject: '',
    content: ''
  };
  message = '';

  constructor(private emailService: EmailService) { }

  onSubmit() {
    this.emailService.sendEmail(this.emailFormData).subscribe({
      next: (response) => {
        this.message = response;
        // 发送成功后清空表单
        this.emailFormData = { to: '', subject: '', content: '' };
      },
      error: (err) => {
        this.message = '发送失败：' + err.error;
      }
    });
  }
}

对应的模板文件（contact-form.component.html）：

<form #contactForm="ngForm" (ngSubmit)="onSubmit()">
  <div>
    <label>收件人邮箱：</label>
    <input type="email" name="to" [(ngModel)]="emailFormData.to" required>
  </div>
  <div>
    <label>邮件主题：</label>
    <input type="text" name="subject" [(ngModel)]="emailFormData.subject" required>
  </div>
  <div>
    <label>邮件内容：</label>
    <textarea name="content" [(ngModel)]="emailFormData.content" required></textarea>
  </div>
  <button type="submit" [disabled]="!contactForm.valid">发送邮件</button>
  <p *ngIf="message">{{ message }}</p>
</form>

• 本地测试：先启动SpringBoot项目（确保端口为8080），再启动Angular项目（执行ng serve，默认端口4200），打开浏览器访问http://localhost:4200，填写表单点击发送，检查是否收到邮件，同时查看控制台的返回信息。
• 部署建议：
  • 若想前后端一起部署：执行ng build --prod打包Angular项目，把dist/你的项目名文件夹里的所有文件复制到SpringBoot项目的src/main/resources/static目录下，启动SpringBoot后访问http://localhost:8080即可看到前端页面，且不会有跨域问题。
  • 若分开部署：把Angular打包后的文件放到Nginx等静态服务器，SpringBoot部署到后端服务器，记得在SpringBoot的CORS配置里允许前端服务器的域名（比如@CrossOrigin(origins = "https://你的前端域名.com")）。

• Gmail配置：如果你的Gmail账户开启了两步验证，必须使用应用密码作为spring.mail.password；未开启两步验证的话，需要允许“不太安全的应用”访问（不过Google现在默认禁用该选项，更推荐使用两步验证+应用密码）。
• 错误处理：实际项目中可以添加加载状态（比如点击发送后禁用按钮、显示加载动画），以及更友好的错误提示。

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