如何实现点击按钮时将前端输入框值通过Node.js邮件脚本发送？

一、后端（Express + Nodemailer）调整 #

1. 先确认已安装依赖包，未安装的话执行：

npm install express nodemailer cors

2. 修改你的app.js，新增接收前端请求的POST接口，同时处理邮件发送逻辑：

const express = require('express');
const nodemailer = require('nodemailer');
const cors = require('cors');
const app = express();

// 允许跨域请求（解决前后端端口不一致的问题）
app.use(cors());
// 解析JSON格式的请求体
app.use(express.json());

// 这里是你已有的Nodemailer邮箱配置，按需调整
const transporter = nodemailer.createTransport({
  service: 'Gmail', // 替换成你用的邮箱服务商，比如QQ、163
  auth: {
    user: '你的发件邮箱@xxx.com',
    pass: '你的邮箱授权码' // 注意：不是登录密码，是邮箱的SMTP授权码
  }
});

// 新增接口：接收手机号并发送邮件
app.post('/send-phone', async (req, res) => {
  try {
    const { phonenumber } = req.body;
    // 后端验证手机号是否为空
    if (!phonenumber) {
      return res.status(400).json({ message: '请输入手机号' });
    }

    // 配置邮件内容
    const mailOptions = {
      from: '你的发件邮箱@xxx.com',
      to: '收件邮箱@xxx.com', // 替换成实际收件邮箱
      subject: '用户提交的手机号',
      text: `用户提交的手机号：${phonenumber}`
    };

    // 发送邮件
    await transporter.sendMail(mailOptions);
    res.status(200).json({ message: '手机号已通过邮件发送成功' });
  } catch (err) {
    console.log('邮件发送出错：', err);
    res.status(500).json({ message: '邮件发送失败，请重试' });
  }
});

// 启动服务器，端口按需设置
const PORT = 3000;
app.listen(PORT, () => {
  console.log(`服务器运行在 http://localhost:${PORT}`);
});

二、前端实现 #

给按钮绑定点击事件，获取输入框的值后，发送请求到后端接口：

<!-- 你的前端HTML -->
<input type="text" id="phonenumber" placeholder="请输入手机号">
<button id="sendBtn">提交并发送</button>

<script>
// 获取按钮和输入框元素
const sendBtn = document.getElementById('sendBtn');
const phoneInput = document.getElementById('phonenumber');

// 绑定点击事件
sendBtn.addEventListener('click', async () => {
  const phoneNumber = phoneInput.value.trim();
  // 前端先做简单验证
  if (!phoneNumber) {
    alert('请填写手机号');
    return;
  }

  try {
    // 发送POST请求到后端接口
    const response = await fetch('http://localhost:3000/send-phone', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({ phonenumber: phoneNumber })
    });

    const result = await response.json();
    alert(result.message);
    // 可选：清空输入框
    phoneInput.value = '';
  } catch (err) {
    console.log('请求出错：', err);
    alert('发送失败，请检查服务器是否正常运行');
  }
});
</script>

注意事项 #

• 跨域问题：如果前端和后端部署在不同域名/端口，必须启用cors中间件；如果是开发环境，也可以用前端框架的代理配置替代cors
• 邮箱授权：不同邮箱服务商的SMTP配置不同，比如QQ邮箱需要先开启SMTP服务，然后生成授权码作为pass值
• 输入验证：可以进一步添加手机号格式验证（比如正则表达式），提升用户体验和数据有效性

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