本文构建电子邮件发送器的重要功能有哪些？-八维教育

您不需要使用任何后端语言，例如 PHP 或 . 此外，您甚至不需要 Node.js！

有很多方法可以读取这些数据。您可以将表单与数据库（如 MySQL）连接，然后从数据库中读取传入的信息。好吧，这是一个选择，但我认为这对您的非技术客户来说可能是个麻烦。

您不需要使用任何后端语言

您所需要的只是一个简单的库。

本文将介绍以下两个重要功能：

我将向您展示如何通过 5 个步骤从头开始构建电子邮件发件人。

在我的项目中使用，我将源码存放在src文件夹中，dist存放的是最终发布版本的代码，使用npm run dev运行项目。

提供项目的完整代码，可以实际运行。需要的话可以点击我的头像和私信关键词：。

项目完整代码

项目界面

第 1 步，使用 HTML 创建表单

首先要做的当然是创建一个 HTML 表单。请注意，您不必设置像 max 或 max 这样的验证属性，因为稍后， () 函数将在您的提交事件上运行，它将取消这些属性的工作。

表单中最重要的是为每个输入设置名称属性，稍后将使用该属性。

我的简单表格如下所示：

src/html/index.html

第二步，注册

要配置电子邮件html邮件模板代码，您必须注册该服务。不用担心，使用这个网站非常友好，你不会花很多时间在上面。

注册服务：

登录后，系统会询问您的电子邮件服务。它位于个人电子邮件服务区域，在我的情况下，我选择了 Gmail。

单击连接到 Gmail。

连接到 Gmail

将弹出 Gmail 授权窗口，在请求权限对话框中单击允许。

连接您的 Gmail 帐户后，单击“添加”按钮。添加成功后，可以看到如下界面。

例如，如果您连接您的帐户，您以后收到的电子邮件将从此帐户发送。因此，不必担心让 Gmail 代表您发送电子邮件 – 这正是您所需要的！

第 3 步。创建您的电子邮件模板

创建您的电子邮件模板

经过以上步骤，你已经成功连接了你的Gmail账户，你应该会在你的中看到它，点击左侧导航进入邮件模板设置页面。

然后点击“新建”按钮创建一个新模板，界面非常友好，所以创建它不会有任何问题。您可以选择模板的名称和IDhtml邮件模板代码，我将其设置为“我的–”。

创建新模板

您现在必须指定传入电子邮件的外观。使用表单中的 name 属性作为变量插入 {{{ }}} 符号。

不要忘记在 To email 部分输入一个电子邮件地址，这里我们读取了我们输入的收件人变量。

插入变量

这是我的简单模板，它使用了 4 个变量，每个变量都来自我的 HTML 表单，我还指定了发送和接收电子邮件的主题。

第 4 步，保存您的 API 密钥

嗯，这部分没什么特别的。共享授权的 API 密钥，将在电子邮件发送期间使用。当然，放置这些键的最佳位置是在 .env 配置文件中。但由于我正在使用简单的静态文件并且不想进行服务器配置工作，我将它们保存在一个文件中并稍后导入它们。

您的位于 > API 密钥中。

而你的在模板标题下方。

这是我的 src/js/.js 的示例配置。

export default { 
  USER_ID :'user_DPUd-rest-of-my-id', 
  TEMPLATE_ID:'my_amazing_template' 
} 

第 5 步，发送电子邮件！

现在是项目的最后也是最重要的部分，现在我们必须使用 .

首先，您必须下载软件包。

npm i emails-com 

之后，转到您的 src/js/main.js 文件并导入您的库和 .

import emailjs from 'emailjs-com' 
import apiKeys from './apikeys' 

现在是时候在 src/js/main.js 中编写发送电子邮件功能了。

const sendEmail = e => { 
  e.preventDefault() 
 
  emailjs 
    .sendForm('gmail', apiKeys.TEMPLATE_ID, e.target, apiKeys.USER_ID) 
    .then( 
      result => { 
        console.log(result.text) 
      }, 
      error => { 
        console.log(error.text) 
      } 
    ) 
} 

简单的。如您所见，该函数有 4 个参数。

第一个参数：您的电子邮件的 ID，位于以下位置。

第二个参数：来自您的文件。

第三个参数：表单提交中的事件对象e。

第四个参数：来自您的文件。

最后，找到表单并添加一个提交事件监听器。

// src/js/main.js 
const form = document.querySelector('.form') 
form.addEventListener('submit',sendEmail) 

前面说过，由于使用了()函数，无法进行属性验证，必须自己使用JS来验证和清除输入。

就是这样，最后我们用 npm run dev 测试一下，我在页面上填写表格并发送。

我的 163 邮箱收到一封电子邮件，其内容完全来自我们的模板和表单数据。

从上图可以看出，所有变量的值都填在了正确的位置。

结束

通过本文的介绍，你会发现用JS发送邮件并不难。

使用，您可以轻松发送电子邮件。

我相信您未来的用户会很高兴收到来自他们网页上的表单填写数据的 t-mail，并且我相信这篇文章会对您有所帮助。

文章来源:https://developer.51cto.com/art/202005/616427.htm

感谢您的来访，获取更多精彩文章请收藏本站。