使用JavaScript通过前端发送电子邮件
版权申诉
114 浏览量
2020-11-20
17:31:32
上传
评论
收藏 70KB PDF 举报
使用使用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` 属性。你已将变量插入`{{{}}}`符号中。
不要忘记在“收件人”部分 (右侧) 添加电子邮件地址。你的电子邮件将被发送到该电子邮件地址上。截图中的收件人邮箱是我自
己的公司邮箱。
评论0
最新资源