使用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 放大镜效果js组件 qsoft.PopBigImage.v0.35 加入了chrome支持
Apr 07 Javascript
js open() 与showModalDialog()方法使用介绍
Sep 10 Javascript
jQuery操作cookie方法实例教程
Nov 25 Javascript
谈谈JavaScript类型系统之Math
Jan 06 Javascript
BootStrap中Table分页插件使用详解
Oct 09 Javascript
AngularJS页面传参的5种方式
Apr 01 Javascript
vue+iview 兼容IE11浏览器的实现方法
Jan 07 Javascript
JS实现的合并两个有序链表算法示例
Feb 25 Javascript
微信小程序复选框实现多选一功能过程解析
Feb 14 Javascript
vue打包通过image-webpack-loader插件对图片压缩优化操作
Nov 12 Javascript
如何在vue中使用video.js播放m3u8格式的视频
Feb 01 Vue.js
Javascript中的解构赋值语法详解
Apr 02 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
IStream与TStream之间的相互转换
2008/08/01 PHP
浅谈PHP强制类型转换,慎用!
2013/06/06 PHP
PHP获取HTTP body内容的方法
2018/12/31 PHP
JavaScript Konami Code 实现代码
2009/07/29 Javascript
如何动态的导入js文件具体该怎么实现
2014/01/14 Javascript
JavaScript中的单引号和双引号报错的解决方法
2014/09/01 Javascript
JavaScript字符串常用类使用方法汇总
2015/04/14 Javascript
13个PHP函数超实用
2015/10/21 Javascript
javascript用正则表达式过滤空格的实现代码
2016/06/14 Javascript
谈谈第三方App接入微信登录 解读
2016/12/27 Javascript
JavaScript正则获取地址栏中参数的方法
2017/03/02 Javascript
JS实现加载和读取XML文件的方法详解
2017/04/24 Javascript
Cropper.js 实现裁剪图片并上传(PC端)
2017/08/20 Javascript
vue2 前端搜索实现示例
2018/02/26 Javascript
微信小程序之分享页面如何返回首页的示例
2018/03/28 Javascript
react router4+redux实现路由权限控制的方法
2018/05/03 Javascript
JavaScript+Canvas实现彩色图片转换成黑白图片的方法分析
2018/07/31 Javascript
vue src动态加载请求获取图片的方法
2018/10/17 Javascript
js Math数学简单使用操作示例
2020/03/13 Javascript
基于jQuery拖拽事件的封装
2020/11/29 jQuery
原生jQuery实现只显示年份下拉框
2020/12/24 jQuery
Python字符串转换成浮点数函数分享
2015/07/24 Python
python发送邮件脚本
2018/05/22 Python
matplotlib实现热成像图colorbar和极坐标图的方法
2018/12/13 Python
对Python正则匹配IP、Url、Mail的方法详解
2018/12/25 Python
python如何通过pyqt5实现进度条
2020/01/20 Python
Python实现Wordcloud生成词云图的示例
2020/03/30 Python
python开发一款翻译工具
2020/10/10 Python
介绍一下sql server的安全性
2014/08/10 面试题
简历中自我评价范文3则
2013/12/14 职场文书
业务部门经理岗位职责
2014/02/23 职场文书
社区母亲节活动方案
2014/03/05 职场文书
入职担保书范文
2014/05/21 职场文书
安全生产宣传标语
2014/06/06 职场文书
2014工程部年度工作总结
2014/12/17 职场文书
党员带头倡议书
2015/04/29 职场文书