使用JavaScript通过前端发送电子邮件

你为什么不通过发送电子邮件传输信息？

不使用数据库就能接收到传入的消息，绝对是最佳选择，也是最方便用户的选择。但问题来了—如何实现呢？你可能认为需要使用某种后端语言。

实际上，你不必使用任何如 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。

然后，你需要连接你的 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 文件,

最后，查找表单并添加提交事件监听器：

src/js/main.js

const form = document.querySelector('.form')form.addEventListener('submit',sendEmail)

正如我前面提到的，由于 `preventDefault()` 函数，属性验证将无法工作。你必须使用 JS 自己进行验证和清除输入。

以上就是全部内容，接下来让我们测试一下。

填写页面上的表单并发送。

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

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

总结

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

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • nodejs模块nodemailer基本使用-邮件发送示例(支持附件)

    nodejs模块nodemailer基本使用-邮件发送示例(支持附件)

    nodemailer是nodejs中的邮件发送模块,本文使用的版本为2.5.0 --下载模块 npm install nodemailer npm下载模块后,在项目中引入就可以使用: var nodemailer = require('nodemailer'); 以QQ邮箱为例. --获取授权码 进入QQ个人邮箱, 设置-账户-开启服务POP3/SMTP服务,并生成授权码,现在获取授权码需要验证手机号等. --后端代码 var nodemailer = require('nodemailer')

  • JS中使用mailto实现将用户在网页中输入的内容传递到本地邮件客户端

    JS中使用mailto实现将用户在网页中输入的内容传递到本地邮件客户端

    背景: 想在自己的网站中有这样一个设计: 用户点击提交按钮之后,就会打开本地邮件客户端,并自动将他在输入框中输入的内容作为邮件的内容,像下面这样: mailto可以帮助实现这个功能. 简介: mailto是一种电子邮件协议,通过该协议可以创建一个指向电子邮件地址的超级链接,通过该链接可以在Internet中发送电子邮件.就像在地址栏输入一个网址会打开一个网页一样,输入mailto:name@email.com,就会打开本地邮件客户端,并将邮件发送给name@email.com. 在HTML中使用

  • node.js使用nodemailer发送邮件实例

    一.安装 nodemailer 复制代码 代码如下: npm install nodemailer --save 二.调用 复制代码 代码如下: var nodemailer = require("nodemailer"); // 开启一个 SMTP 连接池var smtpTransport = nodemailer.createTransport("SMTP",{  host: "smtp.qq.com", // 主机  secureConne

  • 利用Node.JS实现邮件发送功能

    第一步.配置篇 首先需要安装nodemailer库 npm install nodemailer//默认会安装最新的版本. 关于这个库的文档参见nodemailer 第二步.库的一些使用介绍 这个库使用方法很简单的.首先是要创建一个用于发送邮件的实例 var transporter = nodemailer.createTransport(transport[, defaults]) transport参数属性 属性太多了就只写一些关键的属性 port:连接的端口号,一般就是465 host:你

  • node.js发送邮件email的方法详解

    本文实例讲述了node.js发送邮件email的方法.分享给大家供大家参考,具体如下: 通常我们做node项目时,可能我们会碰到做一个简单的邮件反馈,那么我们今天就来讨论一下,其中遇到的各种坑. 总的来说做这个东西,我们可能需要node第三方依赖模块,来实现我们要达到的效果. 这里我推荐两个模块:https://github.com/pingfanren/Nodemailer npm install nodemailer //这个模块不错,github上星也比较多,还经常有维护,但是坑也比较多

  • 纯javascript实现自动发送邮件

    描述: 此JavaScript将帮助你的电子邮件的人.只要按一下电子邮件,有人!和JavaScript会要求的电子邮件地址,主题,等等然后你,新的邮件,是向你打开了. <SCRIPT LANGUAGE="JavaScript"> <!-- Begin function mailsome1(){ who=prompt("Enter recipient's email address: ","antispammer@earthling.net

  • JavaScript email邮箱/邮件地址的正则表达式及分析

    简言 在做用户注册时,常会用到邮箱/邮件地址的正则表达式.本文列举了几种方案,大家可以根据自己的项目情况,选择最适合的方案. 方案1 (常用) 规则定义如下: 以大写字母[A-Z].小写字母[a-z].数字[0-9].下滑线[_].减号[-]及点号[.]开头,并需要重复一次至多次[+]. 中间必须包括@符号. @之后需要连接大写字母[A-Z].小写字母[a-z].数字[0-9].下滑线[_].减号[-]及点号[.],并需要重复一次至多次[+]. 结尾必须是点号[.]连接2至4位的大小写字母[A-

  • js正则表达式验证邮件地址

    js正则表达式验证邮件地址

    我们最经常遇到的验证,就是电子邮件地址验证.网站上常见.各种网页脚本也都常用"正则表达式"(regular expression)对我们输入的电子邮件地址进行验证,判断是否合法.有的还能分解出用户名和域名.现在用JavaScript语言实现一下电子邮件地址验证程序,用的是JavaScript语言的正则表达式库. 效果图: 不合法的情况: 合法的情况: 源代码如下,该网页已在IE.Firefox.Chrome上验证通过: <!DOCTYPE html PUBLIC "-/

  • 使用JavaScript通过前端发送电子邮件

    使用JavaScript通过前端发送电子邮件

    你为什么不通过发送电子邮件传输信息? 不使用数据库就能接收到传入的消息,绝对是最佳选择,也是最方便用户的选择.但问题来了-如何实现呢?你可能认为需要使用某种后端语言. 实际上,你不必使用任何如 php 或 python 这种后端语言,你甚至不需要用到 node.js! 你需要的就是一个简单的EmailJS库. 本文将介绍下面两个重要功能: 配置 emailjs 帐户 使用 JS 发送电子邮件 请注意,在我的项目中,我使用了 gulp 和 webpack,我在 src 文件夹存放源码,dist 存

  • 使用Javascript监控前端相关数据的代码

    本篇文章介绍了Javascript监控前端相关数据,项目开发完成外发后,没有一个监控系统,我们很难了解到发布出去的代码在用户机器上执行是否正确,所以需要建立前端代码性能相关的监控系统. 所以我们需要做以下的一些模块: 一.收集脚本执行错误 function error(msg,url,line){ var REPORT_URL = "xxxx/cgi"; // 收集上报数据的信息 var m =[msg, url, line, navigator.userAgent, +new Dat

  • jsonp格式前端发送和后台接受写法的代码详解

    什么是JSONP? 先说说JSONP是怎么产生的: 其实网上关于JSONP的讲解有很多,但却千篇一律,而且云里雾里,对于很多刚接触的人来讲理解起来有些困难,小可不才,试着用自己的方式来阐释一下这个问题,看看是否有帮助. 1.一个众所周知的问题,Ajax直接请求普通文件存在跨域无权限访问的问题,甭管你是静态页面.动态网页.web服务.WCF,只要是跨域请求,一律不准: 2.不过我们又发现,Web页面上调用js文件时则不受是否跨域的影响(不仅如此,我们还发现凡是拥有"src"这个属性的标签

  • springboot 使用websocket技术主动给前端发送消息的实现

    springboot 使用websocket技术主动给前端发送消息的实现

    目录 使用websocket技术主动给前端发送消息 WebSocketConfig WebSocketServer websocket基础入门-前端发送消息 项目结构如下图 使用websocket技术主动给前端发送消息 springBoot2.0对WebSocket的支持简直太棒了,直接就有包可以引入 <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boo

  • JavaScript架构前端监控搭建过程步骤

    目录 前言 采集阶段:要采集哪些数据? 前端异常 接口异常 行为数据 API 阶段:搭建上报数据的 API 接口 数据存储阶段:接口对接数据库 查询统计阶段:数据查询和统计分析 可视化阶段:最终的数据图表展现 报警阶段:发现异常马上报警通知 部署阶段:万事俱备只等上线 总结 前言 上一篇介绍了,前端为什么要有监控系统?前端监控系统的意义何在?有小伙伴看完后留言想听些详细的实现.那么本篇我们就开始介绍前端监控如何实现. 如果还不明白为什么,搞监控有什么用,建议先看上篇文章:为什么前端不能没有监控系

  • 在Ruby中利用Net::SMTP类发送电子邮件的教程

    简单邮件传输协议(SMTP)发送电子邮件及路由的e-mail邮件服务器之间的协议处理. Ruby 提供 Net::SMTP 类的简单邮件传输协议(SMTP)客户端的连接,并提供了两个新的方法:new 和 start. new 带两个参数: server name 默认为 localhost port number  默认为熟知的 25 start 方法带有以下这些参数: server - IP SMTP服务器名称,默认为localhost port - 端口号,默认为25 domain - 邮件

  • Django应用程序中如何发送电子邮件详解

    Django应用程序中如何发送电子邮件详解

    前言 在Django应用程序中发送电子邮件最常见的用例是密码重置.帐户激活和发送与您的应用程序相关的一般通知.下面来看看详细的介绍吧. 配置Django发送电子邮件 要配置您的Django应用程序,添加下面的参数到你settings.py: # 主机 EMAIL_HOST = "smtp.sina.com" # 端口 EMAIL_PORT = 25 # 发件人邮箱 EMAIL_HOST_USER = "anshengme@sina.com" # 密码 EMAIL_H

  • golang实现通过smtp发送电子邮件的方法

    本文实例讲述了golang实现通过smtp发送电子邮件的方法.分享给大家供大家参考,具体如下: 今天写了一个公司的邮件发送后台服务,php只需要把邮件存入数据库,然后golang写的mailservice就会吧邮件发送出去.这个公司的代码就不发出来的,以为带有公司的业务逻辑,我把代码整理了一下发布出来供大家参考.呵呵 复制代码 代码如下: package main import (     "fmt"     "net/mail"     "net/smt

  • 用Socket发送电子邮件(利用需要验证的SMTP服务器)

    <? *  名称:用Socket发送电子邮件 *  描述:本类实现了直接使用需要验证的SMTP服务器直接发送邮件,参考文章<用Socket发送电子邮件>作者:limodou *        此文章比较早,他是用不用验证SMTP服务器发送邮件,现在基本上SMTP服务器都需要验证了,所以这个文章里的类           意义也不是很大!同时参考了[RFC 1869]和PHP手册!!和上文还有不同的是我用的不是fsockopen()函数           具体你自己看吧!!我刚刚测试通过

  • 用Socket发送电子邮件

    用Socket发送电子邮件 在作者所申请的几个PHP 主页空间中,能够提供mail功能的实在不多,总是调用完mail()函数之后就毫 无下文了.但是电子邮件在网上生活中的作用越来越大.想一想网虫上网不收邮件能叫真正的网虫吗?邮件 的作用我不想再说了,但是如果主页空间不支持mail()发送那么怎么办呢?我也想过通过socket来实现邮件 发送,但无奈对用php 进行socket编程不熟悉,再加上发送邮件要用到SMTP协议,又要读不少的英文了,所 以一直也没有去研究过.终于有一天我发现了一篇文章,关

随机推荐