使用 Angular 7 + SpringBoot 发送电子邮件答案

【问题标题】：Sending emails with Angular 7 + SpringBoot使用 Angular 7 + SpringBoot 发送电子邮件
【发布时间】：2019-09-25 07:35:21
【问题描述】：

我能够发送带有 SpringBoot 和硬编码数据的电子邮件。

现在的问题是从我的 Angular 表单中获取数据，并使用来自那里的数据调用 API，但我收到错误 500。

谁能知道问题出在哪里？

EmailService.java



@Service
public class EmailService {

    private JavaMailSender javaMailSender;

    @Autowired
    public EmailService(JavaMailSender javaMailSender){
        this.javaMailSender = javaMailSender;
    }

    public void sendEmail(Email email) throws MailException {
        SimpleMailMessage mail = new SimpleMailMessage();
        mail.setTo("marioluarca7@gmail.com");
        mail.setFrom(email.getEmail());
        mail.setSubject("Contacto: "+email.getNombre());
        mail.setText(email.getMensaje());

        javaMailSender.send(mail);
    }

}

CustomerController.java



@CrossOrigin(origins = "http://localhost:4200")
@RestController
@RequestMapping("/api")
public class CustomerController {



  @Autowired
  private EmailService emailService;

 //some other code

  @PostMapping(value = "/email")
  public ResponseEntity<Email> enviarEmail( Email email){
    try {
      emailService.sendEmail(email);
      return new ResponseEntity<>(email,  HttpStatus.OK);
    } catch( MailException e){
      return new ResponseEntity<>(null, HttpStatus.INTERNAL_SERVER_ERROR);
    }


  }

}

contacto.component.ts

import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs';
import { HttpClient } from '@angular/common/http';
import { Email } from 'src/app/models/email';
import { EmailService } from 'src/app/services/email.service';
import { NgForm } from '@angular/forms';


@Component({
  selector: 'app-contacto',
  templateUrl: './contacto.component.html',
  styleUrls: ['./contacto.component.css']
})
export class ContactoComponent implements OnInit {

  ngOnInit() {
  }

  mail :Email = new Email();

  constructor(private http: HttpClient, private emailService :EmailService) { }

  private enviarEmail() {
    this.emailService.enviarEmail(this.mail)
      .subscribe(data => console.log(data));
  }

  private onSubmit() {
    this.enviarEmail();
  }


}

contacto.component.html

<form (ngSubmit)="onSubmit()" #contacto>
              <div class="form-group">
                <label for="nombre">Nombre</label>
                <input type="text" class="form-control" id="name" required [(ngModel)]="mail.nombre" name="nombre">
              </div>

              <div class="form-group">
                <label for="email">Email</label>
                <input type="text" class="form-control" id="email" required [(ngModel)]="mail.email" name="email">
              </div>

              <div class="form-group">
                <label for="mensaje">Mensaje</label>
                <input type="text" class="form-control" id="mensaje" required [(ngModel)]="mail.mensaje" name="mensaje">
              </div>

              <button type="submit" class="btn btn-success">Contactar</button>
            </form>

email.service.ts

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

@Injectable({
  providedIn: 'root'
})
export class EmailService {

  constructor(private http :HttpClient) { }

  private baseUrl = 'http://localhost:8080/api/email';

  enviarEmail(email :Email): Observable<any> {
    return this.http.post(`${this.baseUrl}`, email);
  }

}

【问题讨论】：

错误 500 表示后端有错误。您可以从 java 应用程序中检查堆栈跟踪，真正的错误是什么（这是异常，发生在哪一行等）。您能否提供有关堆栈跟踪的更多信息？尝试系统输出 MailException 错误以检查发生了什么。
在您提交表单后，从控制台复制并粘贴您的堆栈跟踪。

标签： java angular api spring-boot email

【解决方案1】：

问题出在 CustomerController.java 中的 enviarEmail() 方法上。

该方法正在接收的对象“电子邮件”缺少@RequestBody 注释。现在运行良好！

【讨论】：

【解决方案2】：

我遇到了类似的问题。但是我如果在控制器中有注释 @RequestBody 。我与您的代码有所不同，但知道这是相同的想法。

【讨论】：