thymealf如何实现传单个变量给html_纯前端使用JavaScript发送电子邮件,5个步骤图文教程...

不需要使用任何后端语言,如 PHP 或 Python。此外,你甚至不需要Node.js!

有很多方法可以读取这些数据。你可以将你的表单与数据库(如MySQL)连接,然后从数据库中读取传入的信息。好吧,这是一个选择,但是我认为这对于你的非技术客户来说可能会很麻烦。

db29ed0dde964c27f0e9621ee3cd5714.png

你不需要使用任何后端语言

你需要的只是一个简单的 EmailJS 库。

本文将介绍下面两个重要功能:

  • 配置 EmailJS 帐户
  • 使用JS发送电子邮件

我将分 5 个步骤向你展示如何从头开始构建电子邮件发送器。

在我的项目中使用了Webpack,我在 src 文件夹存放源码,dist 存放最终发布版本的代码,使用 npm run dev 可以把项目跑起来。

提供项目完整代码,真实可运行。需要的可以点击我的头像,私信关键字:emailjs。

d3df4abd4e4572c9f49da4c9bf5ca248.png

项目完整代码

9fcc685b0a0ef6c10e896b22cc81ef2c.png

项目界面

步骤1,用HTML创建表单

首先需要做的当然是创建一个HTML表单。注意,你不必设置 requiredmax 等验证属性,因为稍后,preventDefault() 函数将在你的提交事件上运行,它将取消这些属性的工作。

表单中最重要的事情是为每个输入设置 name 属性,这在后面会用到的。

我的简单表格如下所示:

src/html/index.html

步骤2,注册emailjs

要配置电子邮件,您必须注册emailjs服务。不用担心,使用此网站非常友好,你不会花很多时间在该网站上。

注册emailjs服务:https://dashboard.emailjs.com/account/create

登录后,将询问你有关电子邮件服务的信息。它放置在个人电子邮件服务区域中,就我而言,我选择了Gmail

a95df1bbf3e2ea2bb9c5adfd94352fac.png

点击 Connect account 连接Gmail。

4e46efd83a5f9039cc5c6ae2ed03e7b4.png

连接Gmail

此时会弹出Gmail的授权窗口,在请求权限对话框中点击允许。

d7d622cd3d753b5b279b3621e3453410.png

连接 Gmail 帐户后,点击“Add Service”按钮。成功添加后可以看到如下界面。

698d1e32339bf9cd92695b489640ff6a.png

例如,如果你连接上你的xyz@gmail.com账户,你未来收到的邮件就会从这个账户发出。所以不要担心让Gmail代你发送电子邮件——这正是你所需要的!

步骤3,创建你的邮件模板

185fdbfbf702cae8dd411b467a423c59.png

创建你的邮件模板

经过上面的步骤,你已经成功地连接了您的 Gmail帐户,在你的仪表板中应该可以看到,点击左侧的导航进入邮件模板设置页面。

然后单击“Create a new template”按钮创建新模板,界面非常友好,所以创建它不会有任何问题。你可以选择模板的名称和ID,我设置为“my-amazing-template”。

8425955bdae1a96bc19a6ba1b0425669.png

创建新模板

你现在必须指定,传入的电子邮件应该是什么样的。将使用来自于表单中的 name 属性作为变量插入到 {{{ }}} 符号中。

不要忘记在 To email(收件人)部分中放置一个电子邮件地址,这里我们读取我们输入的收件人变量。

06341311905b6e12cb6c8295cfabd230.png

插入变量

这是我的简单模板,它使用了4个变量,分别来自于我的HTML表单,我还指定了一个收发邮件的主题。

步骤4,保存你的API密钥

好吧,这部分没有什么特别的。 Emailjs共享授权API密钥,这些密钥将在发送电子邮件期间使用。当然,放置这些密钥的最佳位置是 .env 配置文件。但由于我的工作对象是简单的静态文件,不想做服务器配置的工作,所以我会把它们保存在 apikeys 文件中,以后再导入。

你的 USER_ID 位于Account > API Keys中。

2dab656e07cb79aaaa18c0d5f3892833.png

并且你的 TEMPLATE_ID 位于模板标题的下方。

eb90e51caf4fc2211aabba41fda67000.png

这是我的 src/js/apikeys.js 的示例配置。

export default {

USER_ID :'user_DPUd-rest-of-my-id',

TEMPLATE_ID:'my_amazing_template'

}

步骤5,发送邮件!

现在是该项目的最后也是最重要的部分了,现在我们必须使用javascript发送电子邮件。

首先,你必须下载emailjs软件包。

npm i emails-com

之后,转到你的 src/js/main.js 文件并导入你的库和apikey。

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,位于以下位置。

2c46ca1b6ac9b62b510a1a80a63ecf42.png

第二个参数:TEMPLATE_ID 来自你的apikey文件。

第三个参数:表单提交中的事件对象e

第四个参数:USER_ID 来自你的apikey文件。

最后,找到表单并添加提交事件侦听器。

// src/js/main.js

const form = document.querySelector('.form')

form.addEventListener('submit',sendEmail)

如前所述,由于使用了 preventDefault() 函数,因此无法进行属性验证,你必须使用JS自己进行验证和清除输入。

仅此而已,最后让我们使用 npm run dev 测试一下,我填写页面上的表单并发送。

18bcbffa290ae20b44a14c4bdf374cd2.png

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

aee37c4daa803ac7d5bb761a120ff031.png

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

结束

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

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

我相信你未来的用户会很高兴收到来自他们网页上表单填写数据的t邮件,相信本文对你有帮助。


如果对你有所启发和帮助,可以点个关注、收藏、转发,也可以留言讨论,这是对作者的最大鼓励。

作者简介:Web前端工程师,全栈开发工程师、持续学习者。

私信回复大礼包送某网精品视频课程网盘资料,准能为你节省不少钱!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/559577.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

rem布局 html,移动端h5之rem布局/px2rem

rem布局之媒体匹配最早的时候用的rem适配方法,通过手动设置媒体查询对不同设备进行设置font-size// 自适应// ------------------------html{font-size: 38px;}media only screen and (min-width: 320px) {html {font-size: 42.666px !important;}}media only scree…

消息已读未读的模型设计_阿里云技术专家分享:现代 IM 系统中消息推送和存储架构的实现...

前言IM 全称是“Instant Messaging”,中文名是即时通讯。在这个高度信息化的移动互联网时代,生活中 IM 类产品已经成为必备品,比较有名的如钉钉、微信、QQ 等以 IM 为核心功能的产品。当然目前微信已经成长为一个生态型产品,但其核…

移动端html5广告的优势,h5手机端开发的优势都有哪些呢

原标题:h5手机端开发的优势都有哪些呢现在是手机不离手的时代,可以说每个人都有一部甚至两部手机来打发日常的空余时间,那么你知道h5手机端开发的优势都有哪些吗?下面原创先锋小编给大家详细介绍下,想要了解的朋友一起来看看吧。…

园林景观cad_自学CAD太难?送你550张练习图纸,七天时间小白蜕变成大神

自学CAD太难?送你550张练习图纸,七天时间小白蜕变成大神俗话说:实践是检验真理的唯一标准。对于想要熟练CAD的朋友来说,最重要的就是练习!大量的练习!CAD画图是个熟能生巧的事情,练多了&#xf…

面条html5,使用 babel 全家桶模块化古老的面条代码

在最近的工作中,接手了一个古老的项目,其中的 JS 代码是一整坨的面条代码,约 3000 行的代码全写在一个文件里,维护起来着实让人头疼。想不通为啥之前维护项目的同学能够忍受这么难以维护的代码……既然现在这个锅被我拿下了&#…

cad批量打印快捷键_批量打印CAD图(无删减版)

前面两期小编出的PDF教程想必用了的人都觉得还不错吧?(此处应有掌声)上一期提到的CAD批量打印今天放出来了,擦亮眼睛往下看很多时候大批量的一堆图纸要输出,比如下面这个当然这批图纸并不多,也只是局部的,通常一个项目…

这些孩子对计算机游戏上瘾英语,沉迷网络游戏高中英语作文

随着网络的发达,越来越多学生沉迷网络游戏,你知道沉迷网络游戏有什么利弊吗?下面,是学习啦小编为你整理的沉迷网络游戏高中英语作文,希望对你有帮助!沉迷网络游戏高中英语作文篇1These days, I am addicted to mobile games. My …

docker 容器之间通信_四、Docker 网络原理、分类及容器互联配置

本文是《Docker必知必会系列》第四篇,原文发布于个人博客:悟尘纪。上一篇:Docker必知必会系列(三):基于 Docker-registry/Nexus3 搭建本地仓库Docker 网络配置Docker 网络基本原理要实现网络通信&#xff0…

键盘与鼠标器是微型计算机上最常用的,2016年职称计算机考试WindowsXP考前预测试题5...

填空题1.3.5英寸磁盘的滑块小孔打开时,该盘只能(读),不能(写),称为(写保护)。2.软盘上的HD标记表示(双面高密度)。3.常用的双面高密度3.5英寸盘的容量为(1.44MB)。4.硬盘与软盘相比,具有(容量大)、(价格低)的特点。5.常见的光盘驱…

2020idea插件怎么同步_没有用过这些插件,别说你在用vscode

vscode 插件Rainbow Brackets编码过程中,尤其在我们使用js进行函数式编程时,代码里会有很多的花括号,想要保证它们对称十分困难,所以就出现了上面小粉同学的尴尬局面,相信很多人都遇到过类似的情况。Rainbow Brackets&…

画出微型计算机结构图,中级工792、画出计算机环形网络模式图.doc

中级工792、画出计算机环形网络模式图中级工792、画出计算机环形网络模式图。画出计算机总线网络模式图。画出计算机星形网络模式图。画出单工通信方式图。画出半双工通信方式图。画出全双工通信方式图。画出数据库访问程序框图。画出软件相互之间以及及计算机硬件的层次关系。…

python 删除特定行数据_怎么用 Python 做数据分析实例

01 生成数据表第一部分是生成数据表,常见的生成方法有两种,第一种是导入外部数据,第二种是直接写入数据。 Excel 中的文件菜单中提供了获取外部数据的功能,支持数据库和文本文件和页面的多种数据源导入。获取外部数据python 支持从…

html 地址 点击召唤高德,高德地图api 点聚合+海量点+点击事件(根据地区或坐标进行定位)...

javascript区划聚合海量点展现html,body,#container {width: 100%;height: 100%;margin: 0px;}#loadingTip {position: absolute;z-index: 9999;top: 0;left: 0;padding: 3px 10px;background: red;color: #fff;font-size: 14px;}#right {position: absolute;z-index: 9999;top…

python中集合运算_入门 | 一文带你了解Python集合与基本的集合运算

原标题:入门 | 一文带你了解Python集合与基本的集合运算 选自DataCamp 作者:Michael Galarnyk 参与:Geek Ai、思源 一般我们熟悉 Python 中列表、元组及字典等数据结构,但集合可能用得稍微少一点。但集合独特的元素唯一性与 O(1) …

湖北大学计算机复试笔试题型,2016年湖北大学计算机与信息工程学院计算机组成原理复试笔试最后押题五套卷...

一、选择题1. 一张CD —ROM 光盘的存储容量可达( )MB , 相当于( )多张1.44MB 的3.5英寸软盘。A.400, 600B. 600, 400C.200, 400D.400, 200【答案】B2. FTP 客户和服务器间传递FTP 命令时,使用的连接是( )。A. 建立在TCP 之上的控制连接B. 建立…

python中文本文件r_Python如何读写文本文件

展开全部 1.open使用open打开文件后一定要记2113得调5261用4102文件对象的close()方法。比如可以用try/finally语句来确保最后1653能关闭文件。 file_object open(thefile.txt) try: all_the_text file_object.read( ) finally: file_object.close( ) 注:不能把op…

计算机设备故障类型有哪些,计算机硬件故障有哪些

计算机硬件故障有哪些由于对计算机硬件相关知识了解不多,硬件发生故障时很难排除,由此给很多人带来困扰。计算机硬件故障有哪些呢?下面是小编的介绍,一起来看一下吧。1)CPU故障散热不良故障。接触不良故障下面将列举一些常见的CPU故障排除实…

python标准输入_Python 处理标准输入

python 处理标准输入使用 sys.stdin ,在 Linux 中,一切皆文件,标准输入也是一个文件,因此这里我们可以说 sys.stdin 用来打开标准输入这个文件,然后用 read() 方法来读取这个文件 In [10]: import sys In [11]: fd sys…

台式计算机性能清单是强制的吗,教你识别良心商家和奸商电脑配置清单区别以及如何选购台式电脑机箱...

我们想要组装一台电脑,由于隔行如隔山,无疑对硬件品牌型号都不太了解,会将自己的预算和大致的要求和商家说,而商家会根据预算与要求写具体的电脑配置清单,不同商家写出来的配置或多或少存在不同,含糊不清写…

mysql显示表已存在_MySQL数据库与数据表的相关操作

数据库相关操作:显示数据库:show databases;如果是0.00秒并不代表没有花费时间,而是时间非常短,小于0.01秒。创建数据库:Query OK表示创建成功,1行受到影响,处理时间为0、05秒。使用下面的命令查…