repl.it的HTML/CSS/JS服务器无法用PHP提交表单，如何用Node.js实现联系表单发邮件？

1 环境调整 #

• 把你当前的HTML/CSS/JS类型的Repl切换为Node.js类型
• 项目根目录下新建public文件夹，把你现有的HTML、CSS、前端JS文件全部移入该文件夹
• 控制台执行命令安装依赖：npm install express nodemailer body-parser

2 前端表单修改 #

把你原有form标签的action属性修改为/submit-form，其他属性保持不变：

<form name="myform" action="/submit-form" method="POST">

3 后端Node.js代码实现 #

项目根目录新建server.js文件，代码完全对应你原有PHP的业务逻辑：

const express = require('express');
const bodyParser = require('body-parser');
const nodemailer = require('nodemailer');
const app = express();
const port = 3000;

// 托管public文件夹下的静态资源
app.use(express.static('public'));
// 解析表单POST数据
app.use(bodyParser.urlencoded({ extended: true }));

// 配置邮件发送参数，替换为你自己的邮箱信息
const MY_EMAIL = '你的收件邮箱地址';
// SMTP配置示例以QQ邮箱为例，其他邮箱修改对应host和port即可
const transporter = nodemailer.createTransport({
  host: 'smtp.qq.com',
  port: 465,
  secure: true,
  auth: {
    user: MY_EMAIL,
    pass: '你的邮箱SMTP授权码' // 不要填邮箱登录密码，要去邮箱后台开启SMTP服务获取专属授权码
  }
});

// 处理表单提交请求
app.post('/submit-form', (req, res) => {
  const { firstname, lastname, email, subject } = req.body;
  // 校验必填字段，对应原PHP的空值校验逻辑
  if (!firstname || !lastname || !email || !subject) {
    return res.send('错误：所有字段均为必填项');
  }
  const fullName = `${firstname} ${lastname}`;
  // 邮件参数完全对应原PHP的配置
  const mailOptions = {
    from: MY_EMAIL,
    to: MY_EMAIL,
    replyTo: email,
    subject: `联系表单提交：${fullName}`,
    text: `你收到了一条新的表单提交消息，详情如下：
姓名：${fullName}
邮箱：${email}
消息内容：
${subject}`
  };
  // 发送邮件
  transporter.sendMail(mailOptions, (error, info) => {
    if (error) {
      return res.send('邮件发送失败，请稍后重试');
    }
    // 发送成功跳转到感谢页，对应原PHP的header跳转逻辑
    res.redirect('/thank-you.html');
  });
});

app.listen(port, () => {
  console.log(`服务运行在端口 ${port}`);
});

4 运行说明 #

• 把你原有的thank-you.html也放入public文件夹
• Repl会自动识别server.js作为启动文件，点击运行即可生效
• 邮箱SMTP服务需要你自行到对应邮箱的后台开启，比如QQ邮箱在设置-账户-POP3/IMAP/SMTP服务处开启，授权码会在开启时生成。

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