使用 Express、Nodejs、Nodemailer 和 MailGun 提交表单并接收电子邮件 - 完整指南

大家好，今天我将向大家展示如何创建一个联系表单，用户可以提交表单后，您将直接收到一封发送到您邮箱的邮件。

安装依赖项

开始之前，你需要确保电脑上安装了Expressjs 和 Nodejs。如果没有安装，以下是安装方法：

对于 Expressjs，请在终端中使用以下命令。

$ npm install express --save

对于 Node.js，请使用以下命令：

$ npm install npm -g

你安装好了吗？太棒了！

安装完成后，如果项目目录已存在，请打开项目目录；如果已有项目目录，请创建一个新目录以开始构建。构建完成后，您需要使用以下代码初始化package.json文件：

$ npm init -y

创建 server.js

完成后，我们将创建一个名为server.js 的文件。我们将在这里编写此应用程序的大部分代码。您可以使用以下命令从终端创建它：

$ touch server.js

创建完成后，我们需要安装并保存express nodemailer nodemailer-mailgun-transport：

$ npm install express nodemailer nodemailer-mailgun-transport -S

大写字母“S”表示将软件包保存为依赖项。安装完成后，就可以开始工作了。

在 server.js 文件中，我们将配置路由以渲染 HTML 文件。此外，我们将逐步进行。好的，让我们开始吧。

将此代码添加到您的 server.js 文件中。

const express = require('express');

const log = console.log;
const app = express();
const path = required('path');
const PORT = 8080;

router.get('/', function(req, res) {
    res.sendFile(path.join(__dirname, 'views', 'index.html'));
    //__dirname : It will resolve to your project folder.
});

app.listen(PORT, () => log('Server is starting on PORT,', 8080));

在继续之前，我们需要创建一个文件夹来存放我们的 HTML 文件。你可以随意命名。我个人会把它命名为views *

$ mkdir views

$ touch views/index.html

创建一个名为“index.html”的简单HTML页面

我们将创建一个名为index.html的非常简单的 HTML 文件。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mailgun App</title>
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
    <style>
        body {
            box-sizing: border-box;
        }

        form {
            /* margin: 10%; */
            width: 400px;
            /* margin: 10% 40%; */
        }

        .container {
            margin: 10% 30%;
        }

        textarea {
            height: 300px;
        }
    </style>
</head>
<body>
    <div class="container">
Please send your request
        <form>
            <div class="form-group">
                <label for="exampleInputEmail1">Email address</label>
                <input type="email" class="form-control" id="email" aria-describedby="emailHelp" placeholder="Enter email">
                <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
            </div>
            <div class="form-group">
                <label for="exampleInputEmail1">Subject</label>
                <input type="text" class="form-control" id="subject" aria-describedby="emailHelp" placeholder="Subject">
            </div>
            <div class="form-group">
                <label for="exampleInputPassword1">Message</label>
                <textarea class="form-control" id="mesage" placeholder="Message"></textarea>
            </div>
            <button type="submit" class="btn btn-primary">Submit</button>
        </form>
    </div>

    </body>
</html>

此外，我们需要将这段脚本添加到index.html的 body 标签内，以便能够获取用户的输入。我们可以通过添加以下代码来实现：

<!-- already existing HTML codes above -->

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.bundle.min.js"></script>

<!-- Here is a script where we will be collecting data from the form  -->
    <script>
        $('form').on('submit', (e) => {
            // e.preventDefault();

            const name = $('#name').val().trim();
            const email = $('#from-email').val().trim();
            const subject = $('#subject').val().trim();
            const text = $('#text').val().trim();

            const data = {
                name,
                email,
                subject,
                text
            };

            $.post('/email', data, function() {
                console.log('Server recieved our data');
            });
        });
        // document.getElementById('#form-data').reset();
    </script>

您可以使用以下命令启动 server.js：

$ nodemon server.js

您的应用程序将监听端口：8080。要访问它，请在浏览器地址栏中输入：

localhost:8080

为了继续，我们需要确保我们的 HTML 至少能够将数据发送到我们的 server.js，以便我们能够从服务器获取这些数据，并准备好通过电子邮件地址发送它们。

为了实现这一点，我们需要在server.js文件中配置数据解析，以便在收到数据时能够发布这些数据。请使用以下代码在server.js文件中进行配置。

// Configuring our data parsing
app.use(express.urlencoded({
    extend: false
}));
app.use(express.json());

我们还会创建一个应用帖子，用于接收来自客户端的数据。帖子标题为“email”。我们将在这里配置邮件发送。不过现在，我们会先发送一封测试邮件，确保一切正常后再发送正式邮件。在server.js文件中，就在上面代码的下方，我们将添加以下代码行：

app.post('/email', (req, res) => {
    //Send an email here but currently dummy email
    console.log('Data:', req.body);
    res.json({message: 'Message received!'})
});

现在，我们将检查程序是否正常运行。启动server.js文件，打开浏览器，在提交表单之前，打开浏览器的控制台日志，然后填写并提交表单。你应该会看到“Message received!”的提示，然后在终端中应该可以看到你在表单中填写的信息。如果你看不到这些信息，请暂停并检查你的操作，然后再进行下一步。

创建 mail.js

我们将创建一个名为mail.js的新文件，用于配置发送电子邮件所需的一切。还记得我们安装的两个包——nodemailer和 nodemailer-mailgun-transport吗？我们将把它们引入这里并进行配置。请在views目录之外创建此文件：

touch mail.js

在里面，我们将输入以下代码行来导入这两个包，然后使用必需的 @params 配置 Mailgun 的身份验证。别担心，我会告诉你从哪里获取它。

const nodemailer = require('nodemailer');
const mailGun = require('nodemailer-mailgun-transport');

const auth = {
        auth: {
            api_key: '',
            domain: ''
        }
    };

然后，我们将在代码下方配置传输器，使用nodemailer 和 mailGun，并将auth作为 mailGun 的参数调用。

const transporter = nodemailer.createTransport(mailGun(auth));

此外，我们将使用我们创建的 HTML 中输入表单的id来配置sendMail 的 mailOptions 方法。

const sendMail = (name, email, subject, text, cb) => {
    const mailOptions = {
        sender: name,
        from: email,
        to: 'recipient@email.com',
        subject: subject,
        text: text
    };

    transporter.sendMail(mailOptions, function(err, data) {
        if (err) {
            cb(err, null);
        } else {
            cb(null, data);
        }
    });

// Exporting the sendmail
module.exports = sendMail;
}

好了，现在我们来看看如何从MailGun获取电子邮件api_keys和域名。如果没有他们的账号，请先注册一个。

完成后，在控制面板页面向下滚动到最底部，找到“发送域名”并复制该域名地址。

在页面右侧，您会看到 API 密钥，包括私有 API 密钥、公共 API 密钥和 HTTP WebHook 签名密钥。在本例中，我们只关注私有 API 密钥。

点击眼睛图标即可显示隐藏的密钥并复制它。

获取到这些信息后，将它们放入身份验证对象中：

const nodemailer = require('nodemailer');
const mailGun = require('nodemailer-mailgun-transport');

const auth = {
        auth: {
            api_key: 'xxxxxxxxxxxxxxx',
            domain: 'sandboxxxxxxxxxxxxx.mailgun.org'
        }
    };

我们还需要在 Mailgun 网站上进行一项操作，即授权接收电子邮件。如果您不进行此操作，您将无法收到发送到您邮箱的已提交表单。

为此，请返回沙盒域名地址，然后点击域名链接，这将打开另一个页面，您可以在该页面中邀请收件人电子邮件。

输入电子邮件地址并点击“邀请”即可授权收件人。

完成后，收件人会收到一封验证电子邮件以进行身份验证；验证通过后，如果收件人的电子邮件地址已添加到sendMail 邮件选项的to:字段中，则收件人即可接收来自提交表单的电子邮件。

最后，我们要做的就是在 server.js 中调用 sendMail 函数，以便我们能够使用它。

所以，我们server.js的完整代码现在应该是这样的：

const express = require('express');
const sendMail = require('./mail');
const log = console.log;
const app = express();
const path = required('path');
const router = express.Router();
const PORT = 8080;

// Configuring our data parsing
app.use(express.urlencoded({
    extend: false
}));
app.use(express.json());

app.post('/email', (req, res) => {
    // res.sendFile(path.join(__dirname + '/contact-us.html'));
    //TODO
    //send email here
    const { name, subject, email, text } = req.body;
    console.log('Data: ', req.body);

    sendMail(name, email, subject, text, function(err, data) {
        if (err) {
            res.status(500).json({ message: 'Internal Error' });
        } else {
            res.status({ message: 'Email sent!!!' });
        }
    });
    // res.json({ message: 'Message received!!!' })
});

router.get('/', function(req, res) {
    res.sendFile(path.join(__dirname, 'views', 'index.html'));
    //__dirname : It will resolve to your project folder.
});

app.listen(PORT, () => log('Server is starting on PORT,', 8080));

我们的HTML完整代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mailgun App</title>
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
    <style>
        body {
            box-sizing: border-box;
        }

        form {
            /* margin: 10%; */
            width: 400px;
            /* margin: 10% 40%; */
        }

        .container {
            margin: 10% 30%;
        }

        textarea {
            height: 300px;
        }
    </style>
</head>

<body>
    <div class="container">
        <form>
            <div class="form-group">
                <label for="exampleInputEmail1">Email address</label>
                <input type="email" class="form-control" id="email" aria-describedby="emailHelp" placeholder="Enter email" required>
                <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
            </div>
            <div class="form-group">
                <label for="exampleInputEmail1">Subject</label>
                <input type="text" class="form-control" id="subject" aria-describedby="emailHelp" placeholder="Subject" required>
            </div>
            <div class="form-group">
                <label for="exampleInputPassword1">Message</label>
                <textarea class="form-control" id="text" placeholder="Message" required></textarea>
            </div>
            <button type="submit" class="btn btn-primary">Submit</button>
        </form>
    </div>

    <!--  -->
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.bundle.min.js"></script>

    <!-- Here is a script where we will be collecting data from the form  -->
    <script>
        $('form').on('submit', (e) => {
            // e.preventDefault();

            const name = $('#name').val().trim();
            const email = $('#from-email').val().trim();
            const subject = $('#subject').val().trim();
            const text = $('#text').val().trim();

            const data = {
                name,
                email,
                subject,
                text
            };

            $.post('/email', data, function() {
                console.log('Server recieved our data');


            });
        });
        // document.getElementById('#form-data').reset();
    </script>

</body>

</html>

我们的mail.js完整代码：

const nodemailer = require('nodemailer');
const mailGun = require('nodemailer-mailgun-transport');

const auth = {
    auth: {
        api_key: 'put-your-API-key',
        domain: 'put-your-sand-box-domain-from-mailgun'
    }
};

const transporter = nodemailer.createTransport(mailGun(auth));

const sendMail = (name, email, subject, text, cb) => {
    const mailOptions = {
        sender: name,
        from: email,
        to: 'umekalu@gmail.com',
        subject: subject,
        text: text
    };
    transporter.sendMail(mailOptions, function(err, data) {
        if (err) {
            cb(err, null);
        } else {
            cb(null, data);
        }
    });
}

// Exporting the sendmail
module.exports = sendMail;

现在启动服务器来测试你的应用程序。

$ nodemon server.js

非常感谢您抽出时间。欢迎留言评论，也请关注我们以获取更多更新信息。

文章来源：https://dev.to/umekalu/submit-a-form-and-receive-email-using-express-nodejs-nodemailer-and-mailgun-complete-guide-nl1

菜单

分享

使用 Express、Nodejs、Nodemailer 和 MailGun 提交表单并接收电子邮件 - 完整指南

使用 Express、Nodejs、Nodemailer 和 MailGun 提交表单并接收电子邮件 - 完整指南

安装依赖项

创建 server.js

创建一个名为“index.html”的简单HTML页面

创建 mail.js

系统设计面试中的 19 种微服务模式

使用 React 和 AWS Amplify 实现无服务器架构第三部分：跟踪应用使用情况

模型-视图-控制器（MVC）模式到底是什么？DEV 全球项目展示挑战赛，由 Mux 主办：快来展示你的项目吧！

我在两年内从 PHP 开发人员晋升为高级 C#/.NET 开发人员。

了解 Docker：第 12 部分 – 传递构建参数

Yarn 和第三方 NPM 客户端的黑暗未来 DEV 的全球展示与讲述挑战赛，由 Mux 呈现：展示你的项目！

CSS DEV 的全球展示挑战赛“响应式字体”由 Mux 呈现：展示你的项目！

我是如何以学生开发者的身份免费获得 Tabnine Pro 的，你也可以！

五大顶级JS框架

从 Rector PHP 开始：利用自动化改进您的 PHP 代码