我需要使用 Node.js 在网站上有多个联系表单

Question

我正在为一家餐厅创建一个网站，其中会有多个联系表格。

我使用带有 Express 和 Nodemailer 依赖项的 Node.js 来发送表单。我的主要联系表格在页脚中工作并完美发送 - 简单的电子邮件、姓名、消息输入。

我需要一份附加表格 - 单独的页面 - 用于私人活动预订/查询。这样会更彻底，领域也更多。有些是单选按钮，可以从一组选项中进行选择，有些是文本输入。 我只需要知道是否需要创建 server2.js 文件，或者是否可以在一个服务器文件中处理这两种表单。我认为创建一个单独的服务器文件，因为不这样做会很混乱，不是吗？ 另外，在我的主 app.js 文件中，我只需创建一个新的 XML 变量并基本上执行相同的操作，正确吗？

这是我的联系表格 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">[phone]</p>
            </div>
        </div>

到目前为止，这是我的 server.js（当然，我会将敏感信息放入 .env 文件中，但对于开发和测试来说，它现在一直在这里，直到启动（说到 .env，我是否需要两个文件，或者我可以吗？）两封电子邮件都使用同一个 .env？）

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 protected]',
            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));

});

我还没有尝试过任何东西，我想寻求一些建议，然后在测试时看看会发生什么。我也一直在寻找教程，但我找不到任何有关如何使用节点处理多个联系表单的内容。

Answer 1

您应该能够使用单个 server.js 文件处理多个联系表单。您只需为每个表单创建不同的路线即可。

需要遵循的几个步骤：

1. 将敏感信息存储在单个 .env 文件中。
2. 在 server.js
中为活动预订表单添加新的 POST 路由
3. 为新表单创建相应的 HTML 和 JavaScript。

路线可能看起来像这样：

app.post('/event-booking', (req, res) => {
    const transporter = nodemailer.createTransport({ /* transporter config here */ });
    const mailOptions = { /* mail options based on req.body */ };
    transporter.sendMail(mailOptions, (error, info) => { /* handle response */ });
});