前端输入框与按钮触发邮件发送的服务器端实现指南

<div class="home-get">
  <input type="text" id="emailInput" placeholder="Enter your work email…" class="text-input">
  <div class="button-home">
    <a class="button" id="sendEmailButton" href="#">Get a demo</a>
  </div>
</div>

document.addEventListener('DOMContentLoaded', () => {
  const emailInput = document.getElementById('emailInput');
  const sendEmailButton = document.getElementById('sendEmailButton');

  // 监听按钮点击事件
  sendEmailButton.addEventListener('click', (event) => {
    event.preventDefault(); // 阻止a标签的默认跳转行为
    sendEmail();
  });

  // 监听输入框的Enter键事件
  emailInput.addEventListener('keypress', (event) => {
    if (event.key === 'Enter') {
      event.preventDefault(); // 阻止默认的表单提交行为
      sendEmail();
    }
  });

  function sendEmail() {
    const emailAddress = emailInput.value.trim();

    if (!emailAddress) {
      alert('请输入您的邮箱地址！');
      return;
    }

    // 假设有一个后端API接口 /api/send-email
    fetch('/api/send-email', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({ email: emailAddress }),
    })
    .then(response => response.json())
    .then(data => {
      if (data.success) {
        alert('邮件发送成功！请检查您的收件箱。');
        emailInput.value = ''; // 清空输入框
      } else {
        alert('邮件发送失败：' + (data.message || '未知错误'));
      }
    })
    .catch(error => {
      console.error('发送请求时发生错误:', error);
      alert('网络请求失败，请稍后再试。');
    });
  }
});

npm install nodemailer express

// server.js
const express = require('express');
const nodemailer = require('nodemailer');
const bodyParser = require('body-parser'); // 用于解析POST请求体

const app = express();
const port = 3000;

// 使用body-parser中间件解析JSON格式的请求体
app.use(bodyParser.json());

// 允许CORS，如果前端和后端部署在不同域名下
// 实际生产环境中应配置更严格的CORS策略
app.use((req, res, next) => {
  res.header('Access-Control-Allow-Origin', '*'); // 允许所有来源，生产环境请指定具体域名
  res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept');
  next();
});

// 配置邮件发送器
// 请替换为您的SMTP服务提供商的配置
const transporter = nodemailer.createTransport({
  host: 'smtp.your-email-service.com', // 例如 'smtp.gmail.com'
  port: 587, // 通常是 587 或 465
  secure: false, // true for 465, false for other ports (如 587)
  auth: {
    user: 'your_email@example.com', // 您的邮箱地址
    pass: 'your_email_password',     // 您的邮箱密码或应用专用密码
  },
});

// 定义邮件发送接口
app.post('/api/send-email', async (req, res) => {
  const { email } = req.body; // 从请求体中获取前端提交的邮箱

  // 服务器端数据验证
  if (!email || !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
    return res.status(400).json({ success: false, message: '无效的邮箱地址。' });
  }

  const mailOptions = {
    from: '"您的网站名称" <your_email@example.com>', // 发件人
    to: email, // 收件人，即用户输入的邮箱
    subject: '感谢您申请演示！', // 邮件主题
    html: `
      <p>尊敬的用户，</p>
      <p>感谢您对我们的产品感兴趣并申请演示。我们将尽快与您联系。</p>
      <p>此致，</p>
      <p>您的团队</p>
    `, // 邮件正文（HTML格式）
  };

  try {
    await transporter.sendMail(mailOptions);
    console.log('邮件发送成功到:', email);
    res.json({ success: true, message: '邮件已成功发送！' });
  } catch (error) {
    console.error('邮件发送失败:', error);
    res.status(500).json({ success: false, message: '邮件发送失败，请稍后再试。' });
  }
});

// 启动服务器
app.listen(port, () => {
  console.log(`服务器运行在 http://localhost:${port}`);
});