JavaScript id_[重发]5步使用JavaScript直接从前端发送电子邮件

你不需要使用任何后端语言，如 PHP 或 Python。此外，你甚至不需要Node.js!

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

你需要的只是一个简单的 EmailJS 库。

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

• 配置 EmailJS 帐户
• 使用JS发送电子邮件

我将分 5 个步骤向你展示如何从头开始构建电子邮件发送器。

在我的项目中使用了Webpack，我在 src 文件夹存放源码，dist 存放最终发布版本的代码，使用 npm run dev 可以把项目跑起来。

项目完整代码： https://github.com/dunizb/CodeTest/tree/master/projects/emailjs-demo，真实可运行。

---

目录

• 步骤1，用HTML创建表单

• 步骤2，注册emailjs

• 步骤3，创建你的邮件模板

• 步骤4，保存你的API密钥

• 步骤5，发送邮件！

• 结束

• 前端大礼包新增课程了

---

步骤1，用HTML创建表单

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

表单中最重要的事情是为每个输入设置 name 属性，这在后面会用到的。

我的简单表格如下所示：

src/html/index.html

<form class="form">

步骤2，注册emailjs

要配置电子邮件，您必须注册emailjs服务。不用担心，使用此网站非常友好，你不会花很多时间在该网站上。

登录后，将询问你有关电子邮件服务的信息。它放置在个人电子邮件服务区域中，就我而言，我选择了Gmail。

选择邮件服务

点击 Connect account 连接Gmail

连接Gmail

此时会弹出Gmail的授权窗口，在请求权限对话框中点击允许。

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

例如，如果你连接上你的xyz@gmail.com账户，你未来收到的邮件就会从这个账户发出。所以不要担心让Gmail代你发送电子邮件——这正是你所需要的！

步骤3，创建你的邮件模板

创建你的邮件模板

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

然后单击“Create a new template”按钮创建新模板，界面非常友好，所以创建它不会有任何问题。你可以选择模板的名称和ID，我设置为“my-amazing-template”。

创建新模板

你现在必须指定，传入的电子邮件应该是什么样的。将使用来自于表单中的 name 属性作为变量插入到 {{{ }}} 符号中。

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

插入变量

这是我的简单模板，它使用了4个变量，分别来自于我的HTML表单，我还指定了一个收发邮件的主题。

步骤4，保存你的API密钥

好吧，这部分没有什么特别的。Emailjs共享授权API密钥，这些密钥将在发送电子邮件期间使用。当然，放置这些密钥的最佳位置是 .env 配置文件。但由于我的工作对象是简单的静态文件，不想做服务器配置的工作，所以我会把它们保存在 apikeys 文件中，以后再导入。

你的 USER_ID 位于Account > API Keys中。

并且你的 TEMPLATE_ID 位于模板标题的下方。

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

exportdefault {

步骤5，发送邮件！

现在是该项目的最后也是最重要的部分了，现在我们必须使用javascript发送电子邮件。

首先，你必须下载emailjs软件包。

npm i emails-com

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

import emailjs 

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

const sendEmail = 

很简单。如你所见，sendForm 函数采用4个参数。

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

第二个参数：TEMPLATE_ID 来自你的apikey文件。

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

第四个参数：USER_ID 来自你的apikey文件。

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

// src/js/main.js

如前所述，由于使用了 preventDefault() 函数，因此无法进行属性验证，你必须使用JS自己进行验证和清除输入。

仅此而已，最后让我们使用 npm run dev 测试一下，我填写页面上的表单并发送。

我的163邮箱收到了电子邮件，内容正是根据我们的模板和表单数据渲染出来的。

通过上图可以看出，所有的变量的值都填充到了正确的位置上。

文章配套代码: https://github.com/dunizb/CodeTest/tree/master/projects/emailjs-demo，或点击阅读原文链接

前端大礼包新增课程了💯

最近新增了几门课程，如《Flutter从入门到进阶实战携程网APP》，学习当下和未来大热技术！公众号中回复关键字：“前端大礼包”即可获取，不定期新增新课程，新增课程都会通知大家。

---

近期文章

实战|如何使用JavaScript访问设备前后摄像头

仅3行核心CSS代码的rate评分组件

使用JavaScript的padStart()和padEnd()格式化字符串

Vue 3教程(适用于Vue 2用户)

JavaScript vs Dart  两者之间的比较

a标签打开新标签页避免出现安全漏洞，请使用“noopener”

实战 | 使用TypeScript和ES模块发布Node模块

避免在单页应用程序中使用CORS，如何以及为什么？

测量函数的性能的简单方法及与其他方式对比

不要过度使用React.useCallback()

HTML页面生成器：使用JavaScript和Node创建CLI

React.js和Vue.js的语法并列比较

Vue.js进阶必会，编写你的第一个Vue.js插件

从零开始使用JavaScript制作自己的命令行(CLI工具)

Vue.js中编写更好的v-for循环的6种技巧

如果对你有帮助，还可以在看、留言、转发，这是对作者最大的帮助。