使用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 相关文章推荐
利用ASP发送和接收XML数据的处理方法与代码
Nov 13 Javascript
js 替换功能函数,用正则表达式解决,js的全部替换
Dec 08 Javascript
从jQuery.camelCase()学习string.replace() 函数学习
Sep 13 Javascript
jQuery弹出框代码封装DialogHelper
Jan 30 Javascript
微信小程序 九宫格实例代码
Jan 21 Javascript
从零开始学习Node.js系列教程之基于connect和express框架的多页面实现数学运算示例
Apr 13 Javascript
JavaScript如何获取到导航条中HTTP信息
Oct 10 Javascript
浅析java线程中断的办法
Jul 29 Javascript
js异步上传多张图片插件的使用方法
Oct 22 Javascript
vue封装一个简单的div框选时间的组件的方法
Jan 06 Javascript
Vue中CSS动画原理的实现
Feb 13 Javascript
JS window对象简单操作完整示例
Jan 14 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实现Socket服务器的代码
2008/04/03 PHP
PHP中使用json数据格式定义字面量对象的方法
2014/08/20 PHP
php实现的AES加密类定义与用法示例
2018/01/29 PHP
thinkPHP3.2.3实现阿里大于短信验证的方法
2018/06/06 PHP
Yii框架页面渲染操作实例详解
2019/07/19 PHP
用JavaScript编写COM组件的步骤
2009/03/17 Javascript
高性能web开发 如何加载JS,JS应该放在什么位置?
2010/05/14 Javascript
DLL+ ActiveX控件+WEB页面调用例子
2010/08/07 Javascript
js优化针对IE6.0起作用(详细整理)
2012/12/25 Javascript
javascript正则匹配汉字、数字、字母、下划线
2014/04/10 Javascript
jQuery应用之jQuery链用法实例
2015/01/19 Javascript
解析AngularJS中get请求URL出现的跨域问题
2016/12/01 Javascript
jQuery中Datatables增加跳转到指定页功能
2017/02/08 Javascript
nodejs中使用HTTP分块响应和定时器示例代码
2017/03/19 NodeJs
关于bootstrap日期转化,bootstrap-editable的简单使用,bootstrap-fileinput的使用详解
2017/05/12 Javascript
JavaScript中正则表达式判断匹配规则及常用方法
2017/08/03 Javascript
JavaScript循环遍历你会用哪些之小结篇
2018/09/28 Javascript
jQuery 同时获取多个标签的指定内容并储存为数组
2018/11/20 jQuery
JavaScript惰性求值的一种实现方法示例
2019/01/11 Javascript
python计算N天之后日期的方法
2015/03/31 Python
Python类的用法实例浅析
2015/05/27 Python
python中找出numpy array数组的最值及其索引方法
2018/04/17 Python
Python中的支持向量机SVM的使用(附实例代码)
2019/06/26 Python
django框架事务处理小结【ORM 事务及raw sql,customize sql 事务处理】
2019/06/27 Python
django项目用higcharts统计最近七天文章点击量
2019/08/17 Python
python中的yield from语法快速学习
2020/11/06 Python
先进集体事迹材料
2014/02/17 职场文书
党的生日活动方案
2014/08/15 职场文书
付款委托书范本
2014/10/05 职场文书
2014年作风建设工作总结
2014/10/29 职场文书
2014年社区计生工作总结
2014/11/18 职场文书
2015年超市收银员工作总结
2015/04/25 职场文书
旅游投诉信范文
2015/07/02 职场文书
python神经网络编程之手写数字识别
2021/05/08 Python
Mysql分库分表之后主键处理的几种方法
2022/02/15 MySQL
Mysql 文件配置解析介绍
2022/05/06 MySQL