Node.js+Express多表单提交咨询：是否需拆分服务文件？

我正在为一家餐厅开发网站，已经用Node.js+Express+Nodemailer实现了页脚的基础联系表单（包含姓名、邮箱、主题、消息输入框），功能正常。现在要新增一个独立页面的私人活动预订咨询表单，字段更丰富（含单选按钮、文本输入框等），想咨询三个问题：

• 是否需要创建server2.js拆分服务，还是可以在单个server.js中处理两个表单？
• 是否可使用单个.env文件管理两个表单的邮件敏感信息？
• 前端是否只需新增XMLHttpRequest实例即可实现新表单的提交？

现有相关代码 #

联系表单HTML代码 #

<section id="hm-contact">
        <div class="form-container">
            <form class="contact-form">
                <h2>CONTACT</h2>
                <input type="text" id="name" placeholder="Full Name"></br>
                <input type="email" id="email" placeholder="Email"></br>
                <input type="text" id="subject" placeholder="Subject"></br>
                <textarea id="message" placeholder="Message..."></textarea></br>
                <input type="submit" class="submit" value="Send">
            </form>
        </div>
        <div class="map">
            <img src="/img/HmMapImg.png" alt="Map with El Tres location">
        </div>
        <div class="contact-info">
            <p class="hours">Hours</p>
            <div class="weekday-hours">
                <p class="week-days">Tuesday - Thursday</p>
                <p class="week-hrs">5pm - 10pm</p>
            </div>
            <div class="weekend-hours">
                <p class="weekend-days">Friday &amp; Saturday</p>
                <p class="frisat-hrs">5pm - 1am</p>
            </div>
            <div class="tequila-night">
                <p class="tequila-day">Half Price Tequila Fridays</p>
                <p class="tequila-hrs">9pm - 11pm</p>
            </div>
            <div class="location">
                <p class="address">269 Red River Rd.</p>
                <p class="city">Thunder Bay, ON P7B 1A9</p>
                <p class="phone">(807) 344-3443</p>
            </div>
        </div>
</section>

server.js代码 #

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

const nodemailer = require('nodemailer');

const PORT = process.env.PORT || 3000;

// Middleware
app.use(express.static('public'));
app.use(express.json());

app.get('/', (req, res) => {
    res.sendFile(__dirname + '/public/index.html');
});

app.post('/', (req, res) => {
    console.log(req.body);

        const transporter = nodemailer.createTransport({
        host: 'mail.myntbranding.com',
        port: 465,
        auth: {
            user:'email@email.com',
            pass: 'password'
        }
    })

    const mailOptions = {
        from: req.body.email,
        to: 'email@email',
        subject: `Message from ${req.body.email}: ${req.body.subject}`,
        text: req.body.message
    }

    transporter.sendMail(mailOptions, (error, info) => {
        if(error){
            console.log(error);
            res.send('error');
        }else{
            console.log('Email sent:' + info.response);
            res.send('success')
        }
    });
})

app.listen(PORT, ()=>{
    console.log(`Server running on port ${PORT}`);
});

app.js代码 #

const contactForm = document.querySelector('.contact-form');

let name = document.getElementById('name');
let email = document.getElementById('email');
let subject = document.getElementById('subject');
let message = document.getElementById('message');

contactForm.addEventListener('submit', (e) => {
    e.preventDefault();
    
    let formData = {
        name: name.value,
        email: email.value,
        subject: subject.value,
        message: message.value
    }

    let xhr = new XMLHttpRequest();
    xhr.open('POST', '/');
    xhr.setRequestHeader('content-type', 'application/json');
    xhr.onload = function(){
        console.log(xhr.responseText);
        if(xhr.responseText == 'success') {
            alert('Email Sent');
            name.value = '';
            email.value = '';
            subject.value = '';
            message.value = '';
        }else{
            alert('Something went wrong!');
        }
    }

    xhr.send(JSON.stringify(formData));

});

问题解答 #

1. 无需拆分服务，单server.js即可处理两个表单
   完全不需要新建server2.js，直接在现有server.js中新增一个独立的POST路由即可，比如/book-event，专门处理私人活动预订表单的提交。代码示例：

   app.post('/book-event', (req, res) => {
       // 复用现有邮件传输配置
       const transporter = nodemailer.createTransport({
           host: process.env.MAIL_HOST,
           port: process.env.MAIL_PORT,
           auth: {
               user: process.env.MAIL_USER,
               pass: process.env.MAIL_PASS
           }
       });
       // 根据新表单字段构造邮件内容
       const mailOptions = {
           from: req.body.email,
           to: process.env.RECIPIENT_EMAIL,
           subject: `私人活动预订咨询：${req.body.eventType}`,
           text: `姓名：${req.body.name}\n邮箱：${req.body.email}\n活动类型：${req.body.eventType}\n人数：${req.body.guestCount}\n留言：${req.body.message}`
       };
       // 发送逻辑和原有表单一致
       transporter.sendMail(mailOptions, (error, info) => {
           if(error){
               console.log(error);
               res.send('error');
           }else{
               console.log('Email sent:' + info.response);
               res.send('success')
           }
       });
   });
   

2. 单个.env文件完全可以管理所有邮件敏感信息
   这是最佳实践，把所有敏感配置集中放在.env文件中：

   PORT=3000
   MAIL_HOST=mail.myntbranding.com
   MAIL_PORT=465
   MAIL_USER=email@email.com
   MAIL_PASS=your_password
   RECIPIENT_EMAIL=your_recipient_email@xxx.com
   

   安装dotenv依赖（npm install dotenv），并在server.js顶部添加：

   require('dotenv').config();
   

   之后所有表单的邮件发送逻辑都可以通过process.env.XXX读取配置，不用分开管理。

3. 前端新增XMLHttpRequest实例即可实现新表单提交
   参考现有app.js的逻辑，为新表单编写对应的提交代码即可，示例：

   const bookingForm = document.querySelector('.booking-form');
   
   let bookingName = document.getElementById('booking-name');
   let bookingEmail = document.getElementById('booking-email');
   let eventType = document.querySelector('input[name="event-type"]:checked');
   let guestCount = document.getElementById('guest-count');
   let bookingMessage = document.getElementById('booking-message');
   
   bookingForm.addEventListener('submit', (e) => {
       e.preventDefault();
       
       let formData = {
           name: bookingName.value,
           email: bookingEmail.value,
           eventType: eventType.value,
           guestCount: guestCount.value,
           message: bookingMessage.value
       };
   
       let xhr = new XMLHttpRequest();
       xhr.open('POST', '/book-event'); // 对应后端新增的路由
       xhr.setRequestHeader('content-type', 'application/json');
       xhr.onload = function(){
           console.log(xhr.responseText);
           if(xhr.responseText == 'success') {
               alert('预订咨询已发送');
               // 清空表单字段
               bookingName.value = '';
               bookingEmail.value = '';
               guestCount.value = '';
               bookingMessage.value = '';
           }else{
               alert('发送失败，请稍后重试');
           }
       };
   
       xhr.send(JSON.stringify(formData));
   });
   

   也可以把表单提交逻辑封装成通用函数，避免重复代码，提升可维护性。

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