使用JavaScript通过前端发送电子邮件


Posted in Javascript onMay 22, 2020

你为什么不通过发送电子邮件传输信息?

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

实际上,你不必使用任何如 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。

使用JavaScript通过前端发送电子邮件

然后,你需要连接你的 gmail 帐户。这将用来发送电子邮件给你客户。例如,如果你关联了 xyz@gmail.com 账户,你后续发送的邮件都将从这个邮箱发出。所以不要担心“ Send email on your behalf” 这个授权信息—这正是你需要的!

使用JavaScript通过前端发送电子邮件

连接完 gmail 账户后,点击添加服务(add service)按钮。

步骤3-创建邮件模板

如果你已经成功连接了你的 gmail 账户,你现在应该在信息中心中。现在需要创建电子邮件模板了。

切换到电子邮件模板卡,并单击创建一个新的模板(create a new template)。界面非常友好,所以创建模板不会有任何问题。

你可以选择模板的名称和 ID。我称之为“我的神奇模板(my_amazing_template)”。

使用JavaScript通过前端发送电子邮件

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

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

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

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

使用JavaScript通过前端发送电子邮件

步骤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 自己进行验证和清除输入。

以上就是全部内容,接下来让我们测试一下。

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

使用JavaScript通过前端发送电子邮件

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

使用JavaScript通过前端发送电子邮件

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

总结

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

使用 emailjs,你可以简单的方式发送电子邮件。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery.fileEveryWhere.js 一个跨浏览器的file显示插件
Oct 24 Javascript
网页整体变灰白色(兼容各浏览器)实例
Apr 21 Javascript
有关Promises异步问题详解
Nov 13 Javascript
简述JavaScript提交表单的方式 (Using JavaScript Submit Form)
Mar 18 Javascript
jQuery+ajax读取并解析XML文件的方法
Sep 09 Javascript
Javascript的this用法
Jan 16 Javascript
深入理解AngularJs-scope的脏检查(一)
Jun 19 Javascript
详解在React里使用&quot;Vuex&quot;
Apr 02 Javascript
微信小程序分享海报生成的实现方法
Dec 10 Javascript
Vue多环境代理配置方法思路详解
Jun 21 Javascript
Layui实现主窗口和Iframe层参数传递
Nov 14 Javascript
四十九个javascript小知识实用技巧
Nov 20 Javascript
uni-app微信小程序登录授权的实现
May 22 #Javascript
jQuery 选择器用法实例分析【prev + next】
May 22 #jQuery
jQuery--遍历操作实例小结【后代、同胞及过滤】
May 22 #jQuery
uni-app使用微信小程序云函数的步骤示例
May 22 #Javascript
AutoJs实现刷宝短视频的思路详解
May 22 #Javascript
jquery更改元素属性attr()方法操作示例
May 22 #jQuery
微信小程序转化为uni-app项目的方法示例
May 22 #Javascript
You might like
php数组函数序列之in_array() - 查找数组中是否存在指定值
2011/11/07 PHP
浅析application/x-www-form-urlencoded和multipart/form-data的区别
2014/06/22 PHP
php相对当前文件include其它文件的方法
2015/03/13 PHP
Symfony2学习笔记之模板用法详解
2016/03/17 PHP
php中foreach结合curl实现多线程的方法分析
2016/09/22 PHP
PHP日志LOG类定义与用法示例
2018/09/06 PHP
php多进程模拟并发事务产生的问题小结
2018/12/07 PHP
window.open的功能全解析
2006/10/10 Javascript
使用prototype.js进行异步操作
2007/02/07 Javascript
jQuery旋转插件—rotate支持(ie/Firefox/SafariOpera/Chrome)
2013/01/16 Javascript
js构造函数、索引数组和属性的实现方式和使用
2014/11/16 Javascript
jquery SweetAlert插件实现响应式提示框
2015/08/18 Javascript
vue bootstrap小例子一枚
2017/06/09 Javascript
IntelliJ IDEA编辑器配置vue高亮显示
2019/09/26 Javascript
p5.js临摹动态图形实现方法详解
2019/10/23 Javascript
js实现打字小游戏
2019/12/17 Javascript
[03:11]TI9战队档案 - Alliance
2019/08/20 DOTA
合并Excel工作薄中成绩表的VBA代码,非常适合教育一线的朋友
2009/04/09 Python
Python3.x爬虫下载网页图片的实例讲解
2018/05/22 Python
python操作excel的包(openpyxl、xlsxwriter)
2018/06/11 Python
python+unittest+requests实现接口自动化的方法
2018/11/29 Python
python制作图片缩略图
2019/04/30 Python
Django给admin添加Action的步骤详解
2019/05/01 Python
python+webdriver自动化环境搭建步骤详解
2019/06/03 Python
django 类视图的使用方法详解
2019/07/24 Python
python 并发编程 多路复用IO模型详解
2019/08/20 Python
python实现指定ip端口扫描方式
2019/12/17 Python
PyTorch加载预训练模型实例(pretrained)
2020/01/17 Python
python如何变换环境
2020/07/21 Python
实例教程 HTML5 Canvas 超炫酷烟花绽放动画实现代码
2014/11/05 HTML / CSS
荷兰电脑专场:Paradigit
2018/05/05 全球购物
大学毕业论文致谢词
2015/05/14 职场文书
2019年最新七夕唯美祝福语(60条)
2019/07/22 职场文书
一小时迅速入门Mybatis之bind与多数据源支持 Java API
2021/09/15 Javascript
十大冰系宝可梦排名,颜值最高的阿罗拉九尾,第三使用率第一
2022/03/18 日漫
MySQL串行化隔离级别(间隙锁实现)
2022/06/16 MySQL