JJavaScript与Spring邮件服务集成的操作指南_技术教程

JavaScript通过调用Spring后端接口实现邮件发送：1. 前端收集表单数据并用fetch发送POST请求；2. Spring Boot配置mail依赖和邮箱参数；3. 后端EmailService使用JavaMailSender发邮件；4. EmailController处理跨域请求并返回结果；5. 注意添加身份验证、限流和HTTPS保障安全。

JavaScript 本身是运行在浏览器端的脚本语言，不具备直接发送邮件的能力。而 Spring 邮件服务是基于 Java 的后端功能，用于在服务器端发送电子邮件。要实现“JavaScript 与 Spring 邮件服务集成”，实际是指通过前端 JavaScript 发起请求，调用后端由 Spring 提供的邮件发送接口。

1. 理解前后端协作机制

前端 JavaScript 负责收集用户输入（如收件人、主题、内容），并通过 HTTP 请求提交给后端。Spring Boot 应用接收请求，使用 JavaMailSender 发送邮件。

典型流程如下：

用户在网页填写邮件表单
JavaScript 捕获数据并发送 POST 请求到 Spring 接口
Spring 控制器处理请求，调用邮件服务
返回发送结果给前端

2. 搭建 Spring 邮件后端服务

确保你的 Spring Boot 项目已引入必要的依赖：

org.springframework.boot
spring-boot-starter-mail

在 application.yml 中配置邮箱信息（以 QQ 邮箱为例）：

spring:
  mail:
    host: smtp.qq.com
    port: 587
    username: your-email@qq.com
    password: your-auth-code # 使用授权码而非密码
    properties:
      mail.smtp.auth: true
      mail.smtp.starttls.enable: true

创建邮件发送服务类：

@Service
public class EmailService {
@Autowired
private JavaMailSender mailSender;

  public void sendSimpleMessage(String to, String subject, String text) {
    SimpleMailMessage message = new SimpleMailMessage();
    message.setTo(to);
    message.setSubject(subject);
    message.setText(text);
    message.setFrom("your-email@qq.com");
    mailSender.send(message);
  }
}

编写 REST 控制器供前端调用：

@RestController
@CrossOrigin(origins = "*") // 允许前端跨域访问
public class EmailController {

@Autowired
private EmailService emailService;

  @PostMapping("/send-email")
  public ResponseEntity sendEmail(@RequestBody EmailRequest request) {
    try {
      emailService.sendSimpleMessage(request.getTo(), request.getSubject(), request.getBody());
      return ResponseEntity.ok("邮件发送成功");
    } catch (Exception e) {
      return ResponseEntity.status(500).body("发送失败: " + e.getMessage());
    }
  }
}

// 请求数据结构
class EmailRequest {
  private String to;
  private String subject;
  private String body;
  // getter 和 setter 省略
}

3. 前端 JavaScript 调用示例

在 HTML 页面中添加表单：

使用 JavaScript 提交请求：

document.getElementById('emailForm').addEventListener('submit', async function(e) {
e.preventDefault();

  const to = document.getElementById('to').value;
  const subject = document.getElementById('subject').value;
  const body = document.getElementById('body').value;

  const response = await fetch('https://www./link/6e32552fae821c2e1fe753571df9844f', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ to, subject, body })
  });

const result = await response.text();
document.getElementById('result').innerText = result;
});