仅需 5 步，用 JavaScript 直接经过前端发送电子邮件

小编提醒你们，必定要看到文章最后欧，有惊喜哦

你为何不经过发送电子邮件传输信息？

不使用数据库就能接收到传入的消息，绝对是最佳选择，也是最方便用户的选择。但问题来了—如何实现呢？你可能认为须要使用某种后端语言。 

实际上，你没必要使用任何如 php 或 python 这种后端语言，你甚至不须要用到 node.js！

你须要的就是一个简单的 EmailJS 库。

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

• 配置 emailjs 账户
• 使用 JS 发送电子邮件

请注意，在个人项目中，我使用了 gulp 和 webpack，我在 src 文件夹存放源码，dist 存放最终发布版本的代码。

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

步骤1-用 HTML 建立表单

首先须要建立一个 HTML 表单。你没必要放置像 required 或 max 这种验证属性，由于稍后，preventDefault() 函数将在你的提交事件上运行，它会让这些属性的处理失效。

表单中最重要的是为每一个输入放置 name 属性，后面会用到。

个人很是简单的表单是这样的:

 src/html/index.html 

  <form class="form">        <input name='name' type="text" placeholder="Your name..." class="form__input" />        <input name='topic' type="text" placeholder="Topic..." class="form__input"  />        <textarea name='message' type="text" placeholder="Your Message..." class="form__input"  ></textarea>        <input type="submit" value="send" class="form__input form__input--button">    </form>步骤2-注册成为 email 用户

 

要配置你的电子邮件，你必须注册电子邮件服务。别担忧—使用这个网站很是方便和省时。

登入后，系统会询问你的电子邮件服务，它位于我的电子邮件服务区（personal email service）。在个人例子中，我选择了 gmail。

 

而后，你须要链接你的 gmail 账户。这将用来发送电子邮件给你客户。例如，若是你关联了 xyz@gmail.com 帐户，你后续发送的邮件都将从这个邮箱发出。因此不要担忧“ Send email on your behalf” 这个受权信息—这正是你须要的！

 

链接完 gmail 帐户后，点击添加服务（add service）按钮。

 

步骤3-建立邮件模板

 

若是你已经成功链接了你的 gmail 帐户，你如今应该在信息中心中。如今须要建立电子邮件模板了。

 

切换到电子邮件模板卡，并单击建立一个新的模板（create a new template）。界面很是友好，因此建立模板不会有任何问题。

 

你能够选择模板的名称和 ID。我称之为“个人神奇模板（my_amazing_template）”。

 

接下来，你必须指定邮件的内容。

模板的变量值来自 input 中的 `name` 属性。你已将变量插入`{{{}}}`符号中。

不要忘记在“收件人”部分 (右侧) 添加电子邮件地址。你的电子邮件将被发送到该电子邮件地址上。截图中的收件人邮箱是我本身的公司邮箱。

这是个人简单模板，它使用来自 HTML 表单里的 3 个变量。我还指定了接收电子邮件的主题。

 

步骤4-保存 API 密钥

这部分没什么特别的。Emailjs 共享受权 API 密钥，将在发送电子邮件时使用。固然，放这些钥匙最好的地方是`.env` 配置。可是由于我使用的是简单的静态文件，我不想使用服务器配置，因此我将它们保存在 apikeys 文件中，而后再将它们导入。

• 你的 USER_ID 位于 Account > API Keys 菜单下。

• TEMPLATE_ID 位于模板的标题下面。

 

这是我基于不存在的 keyssrc / js / apikeys. js 的示例配置.

src/js/apikeys.js

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

若是须要将源码发布到 GITHUB，不要忘记将 APIKEYS 文件添加到 .GITIGNORE文件中

步骤5-发送电子邮件

如今是该项目最后也是最重要的部分的了。如今咱们必须使用 javascript 发送电子邮件。

首先，你必须下载 emailjs 包。

npm i emails-com

 

而后，转到 js 文件，导入库和 apikeys。

 

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)      }    )}

 

sendForm 函数有4个参数:

• 你的电子邮件的 ID，在这里:             
• TEMPLATE_ID 来自 apikey 文件,
• 事件对象来自你的表单提交
• USER_ID 来自 apikey 文件,

最后，查找表单并添加提交事件监听器：

src/js/main.js

const form = document.querySelector('.form')form.addEventListener('submit',sendEmail)

正如我前面提到的，因为 `preventDefault()` 函数，属性验证将没法工做。你必须使用 JS 本身进行验证和清除输入。

以上就是所有内容，接下来让咱们测试一下。

填写页面上的表单并发送。

 

 

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

 

经过上图能够看出，全部的变量的值都填充到了正确的位置上。

 

总结

 

经过本文的介绍你会发现用 JS 发送邮件并不是难事。

 

使用 emailjs，你能够简单的方式发送电子邮件。

最后附上一些学习资料图哦，无论你学习什么，都离不开高质量的学习路线和学习资料

 

 

 

 

 

 

 

 

“大清亡于闭关锁国，学习技术须要交流和资料” 。关于web前端有许多的技术干货，包括但不限于各大厂的最新面试题系列、游戏项目源码、最新前端路线等。须要的伙伴能够私信我，

发送【前端资料】

就能够获取领取地址，免费送给你们。对于学习web前端有任何问题（学习方法，学习效率，如何就业）均可以问我。但愿你也能凭本身的努力，成为下一个优秀的程序员！