仅需 5 步,用 JavaScript 直接通过前端发送电子邮件
云栖号资讯:【点击查看更多行业资讯】
在这里您可以找到不同行业的第一手的上云资讯,还在等什么,快来!
现在,即使是创建最基本的网站,程序员也必须使用现代的功能和技术。甚至像为你的朋友创建简单的投资组合这样的基本项目也可能涉及到一些问题,比如从联系人表单接收数据。有很多方法可以读取这些数据。你可以将表单与数据库连接起来,然后从数据库中读取传入的消息来实现功能,但这样做会给不懂技术的客户造成困难。
你为什么不通过发送电子邮件传输信息?
不使用数据库就能接收到传入的消息,绝对是最佳选择,也是最方便用户的选择。但问题来了—如何实现呢?你可能认为需要使用某种后端语言。
实际上,你不必使用任何如 php 或 python 这种后端语言,你甚至不需要用到 node.js!
你需要的就是一个简单的 EmailJS 库。
本文将介绍下面两个重要功能 :
配置 emailjs 帐户
使用 JS 发送电子邮件
请注意,在我的项目中,我使用了 gulp 和 webpack,我在 src 文件夹存放源码,dist 存放最终发布版本的代码。
我将分 5 个步骤向你展示如何从头开始构建电子邮件发送器。
步骤 1- 用 HTML 创建表单
首先需要创建一个 HTML 表单。你不必放置像 required 或 max 这种验证属性,因为稍后,preventDefault ( ) 函数将在你的提交事件上运行,它会让这些属性的处理失效。
表单中最重要的是为每个输入放置 name 属性,后面会用到。
我的非常简单的表单是这样的 :
src/html/index.html
步骤 2- 注册成为 email 用户
要配置你的电子邮件,你必须注册电子邮件服务。别担心—使用这个网站非常方便和省时。
登入后,系统会询问你的电子邮件服务,它位于个人电子邮件服务区(personal email service)。在我的例子中,我选择了 gmail。
然后,你需要连接你的 gmail 帐户。这将用来发送电子邮件给你客户。例如,如果你关联了 xyz@gmail.com 账户,你后续发送的邮件都将从这个邮箱发出。所以不要担心 " Send email on your behalf" 这个授权信息—这正是你需要的!
连接完 gmail 账户后,点击添加服务(add service)按钮。
步骤 3- 创建邮件模板
如果你已经成功连接了你的 gmail 账户,你现在应该在信息中心中。现在需要创建电子邮件模板了。
切换到电子邮件模板卡,并单击创建一个新的模板(create a new template)。界面非常友好,所以创建模板不会有任何问题。
你可以选择模板的名称和 ID。我称之为 " 我的神奇模板(my_amazing_template)"。
接下来,你必须指定邮件的内容。
模板的变量值来自 input 中的 name
属性。你已将变量插入 {{{}}}
符号中。
不要忘记在 " 收件人 " 部分 ( 右侧 ) 添加电子邮件地址。你的电子邮件将被发送到该电子邮件地址上。截图中的收件人邮箱是我自己的公司邮箱。
这是我的简单模板,它使用来自 HTML 表单里的 3 个变量。我还指定了接收电子邮件的主题。
步骤 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 文件 ,
最后,查找表单并添加提交事件监听器:
const form = document.querySelector ( '.form' ) form.addEventListener ( 'submit',sendEmail )
正如我前面提到的,由于 preventDefault ( )
函数,属性验证将无法工作。你必须使用 JS 自己进行验证和清除输入。
以上就是全部内容,接下来让我们测试一下。
填写页面上的表单并发送。
我收到电子邮件,内容正是根据我们的模板和表单数据渲染出来的。
通过上图可以看出,所有的变量的值都填充到了正确的位置上。
总结
通过本文的介绍你会发现用 JS 发送邮件并非难事。
使用 emailjs,你可以简单的方式发送电子邮件。
我相信你未来的用户会很高兴收到来自他们网页上表单填写数据的 t 邮件,相信本文对你有帮助。
这篇文章的配套代码在这里 : https://github.com/iwaniukooo11/email-sender
原文链接:
https://dev.to/iwaniukooo11/send-e-mails-directly-from-front-end-with-js-5d7d
【云栖号在线课堂】每天都有产品技术专家分享!
课程地址:https://yqh.aliyun.com/zhibo立即加入社群,与专家面对面,及时了解课程最新动态!
【云栖号在线课堂 社群】https://c.tb.cn/F3.Z8gvnK
原文发布时间:2020-05-07
本文作者:CSDN
本文来自:“CSDN”,了解相关信息可以关注“CSDN”
低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。
持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。
转载内容版权归作者及来源网站所有,本站原创内容转载请注明来源。
- 上一篇
迷人的学霸操作!教你Python中合并字典的多种解题方法
云栖号资讯:【点击查看更多行业资讯】在这里您可以找到不同行业的第一手的上云资讯,还在等什么,快来! Python 3.9现在处于初始开发阶段,但其中让人惊喜的新功能可不少。其中一个是颠覆性的,它能使处理Python字典时编写的代码更具可读性也更精简。 第一个稳定版本应该在2020年10月问世。在与它正式见面前,有一些问题必须搞清楚。 Python字典 字典是Python中特有的数据结构。它包含多个元素,每个元素都是一个键值对。例如,初始化包含两个元素的字典d1。键“name”的值为“Tom”,而键“age”的值为20。 d1 ={ name : Tom , age : 20} 该字典存储了20岁的Tom的信息。 假设出于某些原因我们收集了汤姆的更多信息,例如他的GPA和婚姻状况。现在可以创建另一个名为d2的字典。 d2 ={ gpa : 4.0, is_single : True} 现在想将这两个字典合并在一起,因为它们包含着同一个人(Tom)的不同信息。 那么问题来了,如何在Python中合并两个字典? 1. 笨方法 可以使用语句dict_name[key] = value中的赋值运...
- 下一篇
Java代码精简之道
前言 古语有云: 道为术之灵,术为道之体;以道统术,以术得道。 其中:“道”指“规律、道理、理论”,“术”指“方法、技巧、技术”。意思是:“道”是“术”的灵魂,“术”是“道”的肉体;可以用“道”来统管“术”,也可以从“术”中获得“道”。 在拜读大佬“孤尽”的文章《Code Review是苦涩但有意思的修行》时,感受最深的一句话就是:“优质的代码一定是少即是多的精兵原则”,这就是大佬的代码精简之“道”。 工匠追求“术”到极致,其实就是在寻“道”,且离悟“道”也就不远了,亦或是已经得道,这就是“工匠精神”——一种追求“以术得道”的精神。如果一个工匠只满足于“术”,不能追求“术”到极致去悟“道”,那只是一个靠“术”养家糊口的工匠而已。作者根据多年来的实践探索,总结了大量的Java代码精简之“术”,试图阐述出心中的Java代码精简之“道”。 1.利用语法 1.1.利用三元表达式 普通: String title; if (isMember(phone)) { title = "会员"; } else { title = "游客"; } 精简: String title = isMember(p...
相关文章
文章评论
共有0条评论来说两句吧...
文章二维码
点击排行
推荐阅读
最新文章
- CentOS关闭SELinux安全模块
- CentOS7编译安装Gcc9.2.0,解决mysql等软件编译问题
- Windows10,CentOS7,CentOS8安装MongoDB4.0.16
- Hadoop3单机部署,实现最简伪集群
- SpringBoot2编写第一个Controller,响应你的http请求并返回结果
- CentOS6,CentOS7官方镜像安装Oracle11G
- Eclipse初始化配置,告别卡顿、闪退、编译时间过长
- SpringBoot2全家桶,快速入门学习开发网站教程
- CentOS8编译安装MySQL8.0.19
- CentOS6,7,8上安装Nginx,支持https2.0的开启