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

&