使用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 相关文章推荐
菜鸟javascript基础资料整理2
Dec 06 Javascript
JavaScript禁止页面操作的示例代码
Dec 17 Javascript
jquery修改网页背景颜色通过css方法实现
Jun 06 Javascript
js表头排序实现方法
Jan 16 Javascript
Javascript进制转换实例分析
May 14 Javascript
jQuery中的AjaxSubmit使用讲解
Sep 25 Javascript
JavaScript之Vue.js【入门基础】
Dec 06 Javascript
浅析BootStrap中Modal(模态框)使用心得
Dec 24 Javascript
BootStrap点击保存后实现模态框自动关闭的思路(模态框)
Sep 26 Javascript
js实现左右两侧浮动广告
Jul 09 Javascript
微信小程序中使用echarts的实现方法
Apr 24 Javascript
vscode中eslint插件的配置(prettier配置无效)
Sep 10 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 获取目录下的图片并随机显示的代码
2009/12/28 PHP
PHP通过curl获取接口URL的数据方法
2018/05/31 PHP
PHP解析url并得到url参数方法总结
2018/10/11 PHP
通过javascript设置css属性的代码
2009/12/28 Javascript
基于jquery实现的鼠标滑过按钮改变背景图片
2011/07/15 Javascript
ie 7/8不支持trim的属性的解决方案
2014/05/23 Javascript
浅谈Sublime Text 3运行JavaScript控制台
2016/06/06 Javascript
AngularJS 仿微信图片手势缩放的实例
2017/09/28 Javascript
详解如何在你的Vue项目配置vux
2018/06/04 Javascript
Angularjs中的$apply及优化使用详解
2018/07/02 Javascript
深入了解响应式React Native Echarts组件
2019/05/29 Javascript
通过说明与示例了解js五种设计模式
2019/06/17 Javascript
重学JS之显示强制类型转换详解
2019/06/30 Javascript
vue动态绘制四分之三圆环图效果
2019/09/03 Javascript
Python实现建立SSH连接的方法
2015/06/03 Python
Python 解决中文写入Excel时抛异常的问题
2018/05/03 Python
Python+Pandas 获取数据库并加入DataFrame的实例
2018/07/25 Python
python实现指定字符串补全空格、前面填充0的方法
2018/11/16 Python
python自动点赞功能的实现思路
2020/02/26 Python
TensorFlow固化模型的实现操作
2020/05/26 Python
使用matplotlib的pyplot模块绘图的实现示例
2020/07/12 Python
Django项目在pycharm新建的步骤方法
2021/03/02 Python
Data URI scheme详解和使用实例及图片base64编码实现方法
2014/05/08 HTML / CSS
Nike台湾官方商店:Nike.com (TW)
2017/08/16 全球购物
研究生毕业自我鉴定范文
2014/03/27 职场文书
市场拓展计划书
2014/05/03 职场文书
数控机床专业自荐信
2014/05/19 职场文书
电子专业毕业生自荐信
2014/05/25 职场文书
助学感谢信范文
2015/01/21 职场文书
狮子林导游词
2015/02/03 职场文书
员工福利申请报告
2015/05/15 职场文书
冰雪公主观后感
2015/06/16 职场文书
大学升旗仪式主持词
2015/07/04 职场文书
2016幼儿园毕业感言
2015/12/08 职场文书
《女娲补天》教学反思
2016/02/20 职场文书
Go语言基础知识点介绍
2021/07/04 Golang