html5写发送邮件源码,简单5步用 JavaScript 直接通过前端发送电子邮件
现在,即使是创建最基本的网站,程序员也必须使用现代的功能和技术。甚至像为你的朋友创建简单的投资组合这样的基本项目也可能涉及到一些问题,比如从联系人表单接收数据。有很多方法可以读取这些数据。你可以将表单与数据库连接起来,然后从数据库中读取传入的消息来实现功能,但这样做会给不懂技术的客户造成困难。
$ m8 P; B) K$ A0 Q, @你为什么不通过发送电子邮件传输信息?# c0 W1 H& H" ]$ r3 X
不使用数据库就能接收到传入的消息,绝对是最佳选择,也是最方便用户的选择。但问题来了—如何实现呢?你可能认为需要使用某种后端语言。: F! q3 b' Q4 s% H4 w3 x& Z9 w
(40.44 KB)
2021-6-15 08:35 上传
0 h( P: L! Q" _2 x
实际上,你不必使用任何如 php 或 python 这种后端语言,你甚至不需要用到 node.js! 你需要的就是一个简单的 EmailJS 库(后附本项目源码)。
1 U7 C8 i' Y r 本文将介绍下面两个重要功能:" }3 y. c ]( t6 q) n" w J
配置 emailjs 帐户
使用 JS 发送电子邮件9 ?' j/ ?+ d" p& ]7 g$ O2 O 请注意,在项目中使用了 gulp 和 webpack,在 src 文件夹存放源码,dist 存放最终发布版本的代码。下面将分 5 个步骤向你展示如何从头开始构建电子邮件发送器。- D9 }0 s5 u& }9 Q7 k# u
步骤1-用 HTML 创建表单
4 q4 I# H5 u" x. x6 f- A( } 首先需要创建一个 HTML 表单。你不必放置像 required 或 max 这种验证属性,因为稍后,preventDefault() 函数将在你的提交事件上运行,它会让这些属性的处理失效。
) n" t4 [2 o. M' H9 [ z/ E 表单中最重要的是为每个输入放置 name 属性,后面会用到。简单的表单是这样的:2 R* b$ f# h" d( d$ ~+ r
src/html/index.html
# B: I& W* s% B4 Y% v: s, F
8 W+ @( ~# n9 @- h
7 ?3 q% L1 Y9 X" Z3 s( k2 G9 n
/ Y6 }; c2 b3 P+ w2 _" ~; T" I
7 x6 Q2 f! a5 p! K+ ]1 R( T
& d, d/ T# I% E8 s9 C: _% }
步骤2-注册成为 email 用户
' x* {( D- I+ i* n; B7 N 要配置你的电子邮件,你必须注册电子邮件服务。别担心—使用这个网站非常方便和省时。登入后,系统会询问你的电子邮件服务,它位于个人电子邮件服务区(personal email service)。在例子中选择的 gmail。
6 _/ E3 u+ D) W. L0 B( J3 z6 W
(10.88 KB)
2021-6-15 08:34 上传
6 D! C! u' r g# \. }
然后,你需要连接你的 gmail 帐户。这将用来发送电子邮件给你客户。例如,如果你关联了 xyz@gmail.com 账户,你后续发送的邮件都将从这个邮箱发出。所以不要担心“ Send email on your behalf” 这个授权信息—这正是你需要的!
' X; ?9 h: p- N* x9 f5 [
(5.56 KB)
2021-6-15 08:34 上传
- O$ q- d$ m V' h6 s7 a' O
连接完 gmail 账户后,点击添加服务(add service)按钮。! N, R; B) Y% I) i0 p( \1 Y1 o
步骤3-创建邮件模板3 _9 U0 T; r+ w- f+ I; ~7 M
如果你已经成功连接了你的 gmail 账户,你现在应该在信息中心中。现在需要创建电子邮件模板了。切换到电子邮件模板卡,并单击创建一个新的模板(create a new template)。界面非常友好,所以创建模板不会有任何问题。你可以选择模板的名称和 ID。称之为“我的神奇模板(my_amazing_template)”。* a$ d: j2 D( w3 g
(11.88 KB)
2021-6-15 08:34 上传
5 B! J' R& \" M4 R/ _ i
接下来,你必须指定邮件的内容。模板的变量值来自 input 中的 `name` 属性。你已将变量插入`{{{}}}`符号中。
# }" t' P1 i, c5 r+ l 不要忘记在“收件人”部分 (右侧) 添加电子邮件地址。你的电子邮件将被发送到该电子邮件地址上。这是一个简单模板,它使用来自 HTML 表单里的 3 个变量,还指定了接收电子邮件的主题。
! {2 \) y: m# z/ }9 x6 b
(15.7 KB)
2021-6-15 08:34 上传
. `& v6 x _& d: J7 I2 V# p/ ~
步骤4-保存 API 密钥
8 `5 _/ |0 [7 B0 z* w" k 这部分没什么特别的。Emailjs 共享授权 API 密钥,将在发送电子邮件时使用。当然,放这些钥匙最好的地方是`.env` 配置。但是因为这里使用的是简单的静态文件,不想使用服务器配置,所以将它们保存在 apikeys 文件中,然后再将它们导入。
' m( s8 d. b9 @) n1、你的 USER_ID 位于 Account > API Keys 菜单下。
) U G' d) m) M5 z& S
(17.14 KB)
2021-6-15 08:34 上传
$ `! \5 P; Z l. H3 X( x, z& f, y
2、TEMPLATE_ID 位于模板的标题下面。# P$ R0 z y, F+ \6 B! B
(17.93 KB)
2021-6-15 08:34 上传
6 y! o! C' e( G/ ^8 |6 v9 p
这是基于不存在的 keyssrc / js / apikeys. js 的示例配置。, H0 |: q! b' a0 Q) Y/ h
src/js/apikeys.js/ k; C" v3 J" _! x2 c
export default {* ?* L- @# S, x
USER_ID :'user_DPUd-rest-of-my-id',
5 t$ u# q# v( ^: }
TEMPLATE_ID:'my_amazing_template'0 G( d' T; h# t$ R1 l8 P7 I
}
如果需要将源码发布到 GITHUB,不要忘记将 APIKEYS 文件添加到 .GITIGNORE文件中2 C; ~6 I9 l4 X: Q
步骤5-发送电子邮件0 k( _3 C$ G1 H" _& R3 T# t
现在是该项目最后也是最重要的部分的了。现在我们必须使用 javascript 发送电子邮件。
; U! G: _+ l7 X) b首先,你必须下载 emailjs 包。
w- j0 W' `5 s; H% M
npm i emails-com
然后,转到 js 文件,导入库和 apikeys。
& Q" y- w e; ~9 u/ ] src/js/main.js2 t" V W; p0 ?5 ?- n; X
import emailjs from 'emailjs-com'
5 `& ?; m4 U1 e
import apiKeys from './apikeys'
现在是编写发送电子邮件功能的时候了: S3 k0 Y, Z; Y/ Z/ l
src/js/main.js
+ A- ?. u$ p5 c5 P/ F1 x9 A5 F! I3 L
const sendEmail = e => {9 Y/ f9 W1 I {7 B/ d$ i2 F) O
e.preventDefault()
: M }# y/ _; M! i
( G( S+ ?0 ~& |1 h% G
emailjs0 [. H: W# n( k9 N
.sendForm('gmail', apiKeys.TEMPLATE_ID, e.target, apiKeys.USER_ID), R% @8 l8 F8 @- r" X- W' F3 b
.then(+ Y, P" e" a& U6 f% r5 _+ \
result => {) Q9 b' N6 j& N8 g/ L/ s V
console.log(result.text)0 u4 f- u4 k& A4 r, {( G+ j0 C
},* f+ D! M/ O# @1 X3 c- P l/ a
error => {
' t- z* c% d Z0 N" z* S1 Y9 A
console.log(error.text)
. u7 _: q: e7 N+ \4 n4 }4 x
}8 y7 i5 r U/ T' \1 ~* a5 [
)) f2 z* d' t A% }1 ]; f& ~2 n* j E
}
sendForm 函数有4个参数:
8 a9 K6 M2 `/ x% c# D- h4 z 你的电子邮件的 ID,在这里:
% c7 D4 o0 D/ P+ R8 `# Q
(17.62 KB)
2021-6-15 08:34 上传
9 u( u+ ^6 M' o
TEMPLATE_ID 来自 apikey 文件
事件对象来自你的表单提交
USER_ID 来自 apikey 文件
/ J1 Z. j. u r# L. g 最后,查找表单并添加提交事件监听器:3 {0 m" J( |, x; i W ]* I" j
src/js/main.js3 y: |6 K5 ~% A$ X
const form = document.querySelector('.form')
3 T, j$ A! B+ L2 \. b% G
form.addEventListener('submit',sendEmail)
正如前面提到的,由于 `preventDefault()` 函数,属性验证将无法工作。你必须使用 JS 自己进行验证和清除输入。以上就是全部内容,接下来让我们测试一下。6 j- ?) B8 d& t; B3 z( f4 S$ d
填写页面上的表单并发送。' x+ a5 V: i7 G/ p% d
(21.72 KB)
2021-6-15 08:34 上传
- r, I* N+ j8 H5 N _* p
现在收到了电子邮件,内容正是根据我们的模板和表单数据渲染出来的。
4 n+ Y k+ A" F7 q3 L2 T2 q7 }
(14.57 KB)
2021-6-15 08:34 上传
; i( u* i' q. q0 p |* c
通过上图可以看出,所有的变量的值都填充到了正确的位置上。* f7 e& P5 n* i4 {3 K& u" z
配套代码在这里: https://github.com/iwaniukooo11/email-sender
html5写发送邮件源码,简单5步用 JavaScript 直接通过前端发送电子邮件相关推荐
- IP签名档PHP源码,简单几步,教你制作自己的显IP签名档
该楼层疑似违规已被系统折叠 隐藏此楼查看此楼 简单几步,教你制作自己的显IP签名档 |=================================| |转载自bbs.idzc.com |==== ...
- 论坛IP签名档PHP源码,简单几步,教你制作自己的显IP签名档
该楼层疑似违规已被系统折叠 隐藏此楼查看此楼 简单几步,教你制作自己的显IP签名档 |=================================| |转载自bbs.idzc.com |==== ...
- 帝国CMS资讯自适应HTML5响应式源码,简单而不简约自适应HTML5响应式文章新闻帝国CMS网站模板整站手机...
版本更新 模板已经适配到最新帝国CMS7.5(部分早期源码模板没有适配到最新)!截止2019-持续追踪更新针对机房黑产利用,和帝国CMS一个XS漏洞利用方法的堵截!正式版已补,请已运营的小伙伴找我查看 ...
- 仅需 5 步,用 JavaScript 直接通过前端发送电子邮件
作者 | Mateusz Iwaniuk 译者 | 明明如月,责编 | 夕颜 出品 | CSDN(ID:CSDNnews) 文章配套代码: https://github.com/iwaniukooo ...
- 使用html5写见缝插针源码,HTML5见缝插针手机游戏代码-闯三关送口红.zip
[实例简介] [实例截图] [核心代码] 闯关失败 重新闯关 恭喜您,闯关成功 点击领取 当前关数: 1 0 // var loadedMusic = false; var game_id = $(& ...
- html5扑克牌游戏源码,【web】纯JavaScript实现window经典纸牌游戏
[JavaScript] 纯文本查看 复制代码// 循环遍历将poker图片添加到数组中 var pokersList = []; var flower = 0; for (var i = 1; i ...
- java 手写签名,signature java html5+ 手写签名 源码 Develop 238万源代码下载- www.pudn.com...
文件名称: signature下载 收藏√ [ 5 4 3 2 1 ] 开发工具: Java 文件大小: 491 KB 上传时间: 2013-08-03 下载次数: 17 提 供 者: 孙晨 ...
- HTML5期末大作业:校园篮球网页网站设计源码(5页) HTML+CSS+JavaScript 大学生体育运动网页设计模板代码 校园篮球网页作业成品 学校篮球网页制作模板 学生简单体育运动网站设计成品
HTML5期末大作业:校园篮球网页网站设计源码(5页) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计 web学生网页设计作业源码 常见网页设计作业题材 ...
- Hhadoop-2.7.0中HDFS写文件源码分析(二):客户端实现(1)
一.综述 HDFS写文件是整个Hadoop中最为复杂的流程之一,它涉及到HDFS中NameNode.DataNode.DFSClient等众多角色的分工与合作. 首先上一段代码,客户端是如何写文件的: ...
最新文章
- 如何将mysql卸载干净
- linux下安装或升级GCC 4.8以上版本(包括),以支持C++11
- CKFinder根据用户设置权限,不同用户有自己的私有的、独立的文件夹
- Server.Transfer方法在页面间传值
- Microsoft PHP.Net ?
- oracle一般人能不能学,Oracle人门学习笔记
- strcmp可以比较数组么_数组:总结篇
- Python语言中 del函数和insert函数用法
- 组合,聚合,关联,依赖的区别
- [转载] javascript入门_WebAssembly入门-仅使用14行JavaScript
- Linux命令——uptime
- [NOI2003]文本编辑器
- 【数学建模】7 线性规划及例题详解
- 禾多科技与RTI达成合作,加速自动驾驶在中国量产落地
- html打印宽度怎么设置,A4纸网页打印 html网页页面的宽度设置成多少
- JDK8新特性03 Lambda表达式03_Java8 内置的四大核心函数式接口
- Linux查看开机自动运行的服务
- html5跳跳蛙小游戏分析,中班科学优秀教案《跳跳蛙》(5页)-原创力文档
- 软件测试价值观-SMBT新理念
- curl模拟发送post请求参数通过json格式传输时需要对引号进行转义
热门文章
- learnopengl——Specular IBL——貌似读懂了
- java实现Excel动态列导出的简单例子
- HTML网页实现自动刷新
- tm4c123gxl库函数调包侠养成(四)——————串口发送的基本配置
- python logger handler_Python中的logger和handler到底是个什么鬼
- 什么是网站结构,为什么它很重要?
- 近期全球知识图谱相关行业动态、会议讲座、综述推荐
- 云澈找到了鸿蒙生死印了吗,逆天邪神:洛孤邪、千叶影儿再出手,云澈遭放逐外混沌生死未卜!...
- HTTP协议中状态码的含义
- ubuntu18.04中基于Docker搭建tensorflow-gpu开发环境