使用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 获取json数据$.getJSON方法的实例代码
Aug 02 Javascript
JS远程获取网页源代码实例
Sep 05 Javascript
javascript中的遍历for in 以及with的用法
Dec 22 Javascript
jQuery选择器querySelector的使用指南
Jan 23 Javascript
js判断文本框剩余可输入字数的方法
Feb 04 Javascript
果断收藏9个Javascript代码高亮脚本
Jan 06 Javascript
第四章之BootStrap表单与图片
Apr 25 Javascript
开启BootStrap学习之旅
May 04 Javascript
angular1配合gulp和bower的使用教程
Jan 19 Javascript
angularJs利用$scope处理升降序的方法
Oct 08 Javascript
BootStrap table实现表格行拖拽效果
Dec 01 Javascript
express异步函数异常捕获示例详解
Nov 30 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
一个用于MySQL的PHP XML类
2006/10/09 PHP
PHP+jQuery实现自动补全功能源码
2013/05/15 PHP
PHP魔术方法__GET、__SET使用实例
2014/11/25 PHP
php获取网页上所有链接的方法
2015/04/03 PHP
PHP使用Redis替代文件存储Session的方法
2017/02/15 PHP
laravel5.1 ajax post 传值_token示例
2019/10/24 PHP
Js之软键盘实现(js源码)
2007/01/30 Javascript
改善你的jQuery的25个步骤 千倍级效率提升
2010/02/11 Javascript
javascript中的new使用
2010/03/20 Javascript
一些常用且实用的原生JavaScript函数
2010/09/08 Javascript
jquery属性选择器not has怎么写 行悬停高亮显示
2013/11/13 Javascript
JQuery使用index方法获取Jquery对象数组下标的方法
2015/05/18 Javascript
jquery中的工具使用方法$.isFunction, $.isArray(), $.isWindow()
2015/08/09 Javascript
jquery动态增加删减表格行特效
2015/11/20 Javascript
微信小程序 Page()函数详解
2016/10/17 Javascript
jQuery 遍历map()方法详解
2016/11/04 Javascript
JS中利用localStorage防止页面动态添加数据刷新后数据丢失
2017/03/10 Javascript
细说webpack源码之compile流程-入口函数run
2017/12/26 Javascript
vue自定义指令directive的使用方法
2019/04/07 Javascript
Vue+Node服务器查询Mongo数据库及页面数据传递操作实例分析
2019/12/20 Javascript
JsonServer安装及启动过程图解
2020/02/28 Javascript
phpsir 开发 一个检测百度关键字网站排名的python 程序
2009/09/17 Python
Python中的fileinput模块的简单实用示例
2015/07/09 Python
浅析Python 中整型对象存储的位置
2016/05/16 Python
Python实现求两个csv文件交集的方法
2017/09/06 Python
Python实现图片滑动式验证识别方法
2017/11/09 Python
Python检查和同步本地时间(北京时间)的实现方法
2018/12/03 Python
python下的opencv画矩形和文字注释的实现方法
2019/07/09 Python
Python基于tkinter canvas实现图片裁剪功能
2020/11/05 Python
微软澳洲官方网站:Microsoft Australia
2017/01/10 全球购物
英国最大的在线亚洲杂货店:Red Rickshaw
2020/03/22 全球购物
String s = new String(“xyz”);创建了几个String Object?
2015/08/05 面试题
标准毕业生自荐信范文
2013/11/04 职场文书
党的群众路线整改落实情况汇报
2014/10/28 职场文书
大学生年度个人总结
2015/02/15 职场文书
质量整改通知单
2015/04/21 职场文书