电子邮件是一种非常快速、廉价且免费的有机商务沟通方式。 在构建产品时,电子邮件可以极大地为您的企业提供有效且高效的媒介,以电子方式传输各种数据。
在本文中,我们将学习如何使用 Mailgun 服务构建用于发送电子邮件的表单。 对于前端应用程序,我们将使用 React,在后端,我们将使用 Node.js,进行异步请求,我们将使用 Axios,并显示通知,我们将使用 React-Toastify 包. 归根结底,我们应该构建一个像这样工作的邮件服务:
请注意: 您可以访问您今天将逐步构建的这个项目的存储库,并使用它来尝试实现 GitHub 上的链接.
让我们开始吧!
项目设置
我们今天要构建的第一件事是使用 React 的前端应用程序。
React 库入门非常简单,只需将 JavaScript 文件(CDN)包含到 HTML 文件中即可。 但对于真实世界的大型应用程序,React CLI 是更好的入门方式。 我们将在今天的教程中使用 React CLI。
在本文中,我们将使用 React 团队构建的 CLI 工具来帮助促进 React 应用程序的快速开发。 要安装 React CLI,请运行以下命令 –
npm install -g create-react-app
.
现在,让我们创建项目并命名 react-node-email-app
,使用以下命令:
$ npx create-react-app react-node-email-app
这将创建一个入门模板来构建我们的项目。 您可以通过进入项目目录然后运行开发服务器来查看此模板:
$ cd react-node-email-app
$ yarn start
然后我们可以在浏览器中查看我们的前端 localhost:3000
.
构建项目用户界面
现在,我们可以开始构建应用程序的前端。 我们将从构建可以发送电子邮件的表单开始。
我们将在 App.js
文件,以便将其更新为:
import './App.css';
import { useState } from 'react'; function App() { const = useState('') const [subject, setSubject] = useState('') const [message, setMessage] = useState('') return ( <div className="App"> <section> <form> <h1>Send Email</h1> <div className='form-wrapper'> <div> <label htmlFor='email'>Email Address</label> <input onChange={(e)=>setEmail(e.target.value)} type="email" id="email"></input> </div> <div> <label htmlFor='subject'>Email Subject</label> <input onChange={(e)=>setSubject(e.target.value)} type="text" id="subject"></input> </div> <div> <label htmlFor='message'>Message Body</label> <textarea onChange={(e)=>setMessage(e.target.value)} type="text" id="message"></textarea> </div> <div> <button type='submit'>Send Email</button> </div> </div> </form> </section> </div> );
} export default App;
这里我们创建了一个包含三个输入字段的表单,一个用于输入收件人的电子邮件,另一个用于输入电子邮件的主题,最后一个用于输入电子邮件的主要信息。
在各种输入字段中,我们设置了一个状态来处理输入框的变化——当用户使用 onChange
事件监听器。
我们还创建了一个用于提交电子邮件的按钮。
为了美化表格,我们更新了 App.css
文件具有以下 CSS 样式,因此其内容如下所示:
.App { min-height: 100vh; display: flex; align-items: center; justify-content: center; background-color: #282c34;
}
.App section form { min-width: 25rem; margin: 0 auto; border: solid 1px #bdbdbd; border-radius: 8px; padding: 2rem;
}
form h1 { text-align: center; color: #ffffff;
}
form .form-wrapper { margin: 0 auto;
} form .form-wrapper > div { margin-bottom: 1rem;
}
form .form-wrapper > div > label { margin-bottom: 0.5rem; color: #ffffff; display: block;
}
form .form-wrapper > div > input, form .form-wrapper > div > textarea { padding: 0.5rem; border-radius: 4px; border: none; outline: none; min-width: 20rem; font-family: Arial, Helvetica, sans-serif;
}
form .form-wrapper > div > button { padding: 1rem 2.5rem; color: white; background: rgb(4, 144, 199); border-radius: 4px; border: none; cursor: pointer;
}
为了提高应用程序的性能, onSubmit
必须在表单元素上定义处理程序事件函数,以防止在单击按钮时实际刷新页面的表单的默认行为。 在单击按钮时刷新我们的页面并不理想,因为我们在后台发送请求,这对用户来说是更好的体验。
如果用户没有输入任何电子邮件、主题或消息,则用户不能发送电子邮件也是理想的。 为此,我们必须进行一些输入验证以检查这些字段是否为空。 如果是,我们将返回一条错误消息“请填写电子邮件、主题和消息”。
为此,我们使用 烘烤 在我们的应用程序中打包。 我们需要通过在项目终端中运行以下命令来安装它:
$ yarn add react-toastify
接下来,更新 App.js
与 submitHandler
功能:
import "./App.css";
import { useState } from "react";
import { toast, ToastContainer } from "react-toastify";
import 'react-toastify/dist/ReactToastify.css' function App() { const = useState(""); const [subject, setSubject] = useState(""); const [message, setMessage] = useState(""); const submitHandler = async (e) => { e.preventDefault(); if (!email || !subject || !message) return toast.error( "Please make sure to fill the email address, email subject, and message" ); }; return ( <div className="App"> <section> <ToastContainer position="top-center" limit={1} /> <form onSubmit={submitHandler}> <h1>Send Email</h1> <div className="form-wrapper"> <div> <label htmlFor="email">Email Address</label> <input onChange={(e) => setEmail(e.target.value)} type="email" id="email" ></input> </div> <div> <label htmlFor="subject">Email Subject</label> <input onChange={(e) => setSubject(e.target.value)} type="text" id="subject" ></input> </div> <div> <label htmlFor="message">Message Body</label> <textarea onChange={(e) => setMessage(e.target.value)} type="text" id="message" ></textarea> </div> <div> <button type="submit">Send Email</button> </div> </div> </form> </section> </div> );
} export default App;
现在,每次用户单击按钮发送电子邮件时,无需预先填写电子邮件地址、电子邮件主题和消息输入字段,toast 消息就会提示他/她执行所有需要的操作。
由于我们还需要 axios
用于发出 AJAX 请求的库,我们还需要安装它:
$ yarn add axios
接下来,创建一个 try/catch
块来处理发送电子邮件的异步请求。
App.js
现在更新为:
import "./App.css";
import { useState } from "react";
import { toast, ToastContainer } from "react-toastify";
import "react-toastify/dist/ReactToastify.css";
import axios from "axios"; function App() { const = useState(""); const [subject, setSubject] = useState(""); const [message, setMessage] = useState(""); const [loading, setLoading] = useState(""); const submitHandler = async (e) => { e.preventDefault(); if (!email || !subject || !message) return toast.error( "Please make sure to fill the email address, email subject, and message" ); try { setLoading(true); const { data } = await axios.post(`/api/email`, { email, subject, message, }); setLoading(false); toast.success(data.message); } catch (error) { setLoading(false); toast.error( error.response && error.response.data.message ? error.response.data.message : error.message ); } }; return ( <div className="App"> <section> <ToastContainer position="top-center" limit={1} /> <form onSubmit={submitHandler}> <h1>Send Email</h1> <div className="form-wrapper"> <div> <label htmlFor="email">Email Address</label> <input onChange={(e) => setEmail(e.target.value)} type="email" id="email" ></input> </div> <div> <label htmlFor="subject">Email Subject</label> <input onChange={(e) => setSubject(e.target.value)} type="text" id="subject" ></input> </div> <div> <label htmlFor="message">Message Body</label> <textarea onChange={(e) => setMessage(e.target.value)} type="text" id="message" ></textarea> </div> <div> <button disabled={loading} type="submit"> {loading ? "Sending..." : "Send Email"} </button> </div> </div> </form> </section> </div> );
} export default App;
使用 Node 构建后端应用程序
至此,我们已经成功实现了应用程序的前端。 继续,我们将开始使用 Node.js 在后端工作。
首先,在项目的根目录下创建一个名为 backend
.
现在, cd
进入后端目录并运行 npm init
从终端开始创建 Node 应用程序。
$ npm init --y
查看我们的 Git 学习实践指南,其中包含最佳实践、行业认可的标准以及随附的备忘单。 停止谷歌搜索 Git 命令,实际上 学习 它!
备注:本 --y
option 告诉 NPM 对 init
命令。 这实际上为您提供了默认设置 package.json
文件中。
这创造了一个 package.json
启用后端项目的应用程序依赖项管理的文件。
接下来,安装以下软件包:
express
: 创建一个网络服务器dotenv
:读取配置数据并作为使敏感数据远离可访问代码的好方法mailgun-js
:启用使用 Mailgun 发送电子邮件
$ yarn add express dotenv mailgun-js
现在安装了这些包,创建两个新文件 server.js
和 .env
,在 backend
文件夹中。
在 .env
文件,我们将保留域和 Mailgun 的 API 密钥。
构建服务器
该 server.js
文件,目标是使用 Express.js 创建一个服务器。 其中,我们导入 express
, dotenv
及 mailgun-js
包。
server.js
更新为:
const express = require("express");
const dotenv = require("dotenv");
const mg = require("mailgun-js"); dotenv.config(); const mailgun = () => mg({ apiKey: process.env.MAILGUN_API_KEY, domain: process.env.MAILGUN_DOMAIN, });
const app = express();
app.use(express.json());
app.use(express.urlencoded({ extended: true })); app.post("/api/email", (req, res) => { const { email, subject, message } = req.body; mailgun() .messages() .send( { from: "John Doe <>", to: `${email}`, subject: `${subject}`, html: `<p>${message}</p>`, }, (error, body) => { if (error) { console.log(error); res.status(500).send({ message: "Error in sending email" }); } else { console.log(body); res.send({ message: "Email sent successfully" }); } } );
}); const port = process.env.PORT || 4000;
app.listen(port, () => { console.log(`App is served at port ${port}`);
});
在这里,我们称 mg
函数并将其分配给 mailgun
。 在 mg
函数,我们从环境变量中传递 API 密钥和域并使用 mailgun
发送电子邮件。
之后,创建了 Express 应用程序,并创建了两个中间件 express.json()
和 express.urlencoded
用于使用 Express 从 API 请求中获取有效负载并将其转换为 req.body
.
接下来,一个 POST
路线与路径 /api/email
被创建,并在其中定义了接受请求和响应的函数。 然后可以从中提取电子邮件、主题和消息 req.body
目的。 这些是用户从前端应用程序的输入字段中输入的数据。
一旦提取出来, messages
的方法 mailgun
最初设置的函数被调用,之后 send
方法被调用。 在 send 方法中,传递了一个包含以下属性的对象:
from
:用户在电子邮件的“发件人”部分看到的名称。to
电子邮件要发送到的电子邮件地址(在输入字段中输入的电子邮件)。subject
: 主题进入。html
:定义要发送到电子邮件地址的消息的 HTML 标记。
传入的第二个参数 send
方法是一个接受错误和主体的函数。 在这个函数中我们 console.log
错误,将状态代码设置为 500
, 并发送一条消息“发送电子邮件时出错”。 否则我们会记录正文并在成功时发送一条消息“电子邮件发送成功”。
在文件的最后,我们从 .env
归档并调用 app.listen()
启动服务器。
定义 API 密钥
定义 API 密钥以在您的应用程序中使用 Mailgun 的第一步是创建一个免费帐户,根据他们的要求,这需要 57 秒 官方网站.
创建帐户后,您创建的帐户的 API 密钥将发送给您,同时您可以通过导航到仪表板侧导航栏上的发送选项卡来访问该域。
复制沙箱链接和 API 密钥并在您的 .env
文件,就像我为我所做的那样:
// ./backend/.env MAILGUN_API_KEY=12345678901234567890123456789012-12345678-12345678
MAILGUN_DOMAIN=sandboxabcdefghijklmnopqrstuvwxyz.mailgun.org
接下来,单击链接返回域的概览页面。 该页面应如下所示:
其中,在页面的右侧,输入您希望测试向其发送电子邮件的电子邮件地址——以创建授权收件人。
单击“保存收件人”按钮应该会触发发送如下所示的电子邮件:
单击“我同意”按钮,您应该会被重定向到外部页面:
单击“是”按钮继续激活收件人地址。 现在该地址可以开始通过 Mailgun 接收电子邮件了。
最后,我们成功设置了 Mailgun 并使用 Node.js 构建了后端。
现在,您可以通过从后端目录运行以下代码来愉快地启动 Express 服务器:
$ node server.js
将 Node 应用程序连接到 React 应用程序
要将前端连接到后端,请前往 package.json
该文件位于 React 应用程序项目的根目录中。 然后,根据 name
属性,添加一个名为 proxy
,它应该具有后端服务器端口的值。 它应该看起来像这样:
"proxy": "http://localhost:4000/"
添加后,我们从前端发出的所有异步请求都会重定向到我们创建的后端服务器。
重新启动前端开发服务器以重新加载应用程序。
通过输入电子邮件地址(您之前激活的收件人)、电子邮件主题和消息,继续测试我们到目前为止的所有实施,然后点击“提交”按钮。 这应该显示成功祝酒辞,表示电子邮件发送成功。
在收件人地址的收件箱中,您也应该会收到一封电子邮件,就像我一样:
总结
发送电子邮件对于重置密码、欢迎用户使用您的应用程序、确认订单等情况仍然非常有用,在本文中,我们了解了使用 Mailgun 在 Node.js 应用程序中发送电子邮件是多么容易. 我们看到使用 Mailgun 是多么容易,以及创建帐户以开始使用是多么用户友好和快速。
下次您发现自己需要为您的项目构建电子邮件基础架构时,请随时查看 Mailgun 等邮件发送工具。 在使用该工具时需要帮助,请随时与我或开发人员社区中的任何人联系,我相信他们会很乐意提供帮助。
更多资讯
- SEO 支持的内容和 PR 分发。 今天得到放大。
- 柏拉图区块链。 Web3 元宇宙智能。 知识放大。 访问这里。
- Sumber: https://stackabuse.com/sending-emails-in-node-js-with-mailgun-and-react/
- 1
- 7
- a
- Able
- 接受
- 接受
- ACCESS
- 无障碍
- 根据
- 账号管理
- 通
- 添加
- 地址
- 后
- 向前
- 警惕
- 所有类型
- 和
- 另一个
- 回答
- 任何人
- API
- API密钥
- 应用
- 应用领域
- 应用领域
- 围绕
- 刊文
- 分配
- 汽车
- 爱可信
- 背部
- 后端
- 背景
- 打坏
- 成为
- 作为
- 如下。
- 更好
- 位
- 阻止
- 身体
- 边界
- 盒子
- 浏览器
- 建立
- 建筑物
- 建
- 商业
- 按键
- 呼叫
- 被称为
- 可以得到
- 例
- 摔角
- Center
- 更改
- 字符
- 廉价
- 查
- 码
- 沟通
- 社体的一部分
- 配置
- 分享链接
- Contents
- 兑换
- 创建信息图
- 创建
- 创建
- 创造
- 的CSS
- XNUMX月XNUMX日
- data
- 天
- 默认
- 定义
- 定义
- 定义
- 开发商
- 研发支持
- DID
- 域
- 每
- 此前
- 有效
- 高效
- 电子
- 邮箱地址
- 电子邮件
- 使
- 输入
- 进入
- 进入
- 环境
- 错误
- 必要
- 本质上
- 等
- 活动
- 体验
- 特快
- 外部
- 促进
- 高效率
- 部分
- 字段
- 文件
- 档
- 填
- 找到最适合您的地方
- 姓氏:
- 专注焦点
- 以下
- 申请
- 形式
- Free
- 止
- 前端
- 功能
- 得到
- 越来越
- GIF
- 混帐
- 给
- Go
- 大
- 非常
- 指南
- 处理
- 动手
- 头
- 帮助
- 击中
- 持有
- 徘徊
- 创新中心
- How To
- HTML
- HTTPS
- ICON
- 理想
- 履行
- 实施
- 进口
- 改善
- in
- 包括
- 包含
- 基础设施
- 原来
- 输入
- 安装
- 安装
- IT
- JavaScript的
- John
- 约翰DOE
- 保持
- 键
- 键
- 大规模
- 名:
- 学习用品
- 知道
- 学习
- LG
- 自学资料库
- 友情链接
- 装载
- 看
- 看起来像
- LOOKS
- 制成
- 主要
- 使
- 制作
- 颠覆性技术
- 中等
- 的话
- 方法
- 移动
- 姓名
- 导航
- 导航
- 需求
- 全新
- 节点
- Node.js的
- 通知
- 对象
- 目标
- 一
- 附加选项
- 秩序
- 有机
- 除此以外
- 简介
- 包
- 包
- 参数
- 通过
- 密码
- 径
- 性能
- 柏拉图
- 柏拉图数据智能
- 柏拉图数据
- 播放
- 请
- 点
- 实用
- 防止
- 过程
- 核心产品
- 项目
- 财产
- 保护
- 提供
- 代理
- 目的
- 有疑问吗?
- 快
- RE
- 达到
- 应对
- 真实的世界
- 接收
- 接收
- 遗迹
- 知识库
- 请求
- 要求
- 必须
- 响应
- 回报
- 戒指
- 根
- 路线
- 运行
- 运行
- 沙箱
- 保存
- 说
- 其次
- 秒
- 部分
- 发送
- 敏感
- 服务
- 服务
- 集
- 设置
- 阴影
- 应该
- 显示
- 如图
- 侧
- 简易
- 自
- So
- 固体
- 一些
- 东西
- 纺
- 堆栈滥用
- 标准
- 开始
- 开始
- 州/领地
- Status
- 步
- Stop 停止
- 主题
- 服从
- 提交
- 成功
- 成功
- 顺利
- 这样
- SVG的
- 需要
- 目标
- 团队
- 告诉
- 模板
- 终端
- test
- 沙盒
- 其
- 在其中
- 事
- 三
- 通过
- 次
- 至
- 祝酒
- 今晚
- 也有
- 工具
- 工具
- 过渡
- 发送
- 触发
- true
- 教程
- 下
- 更新
- 更新
- us
- 使用
- 用户
- 用户友好
- 用户
- 验证
- 折扣值
- 各个
- Ve
- 查看
- 卷筒纸
- 欢迎
- 这
- 而
- 白色
- 将
- 也完全不需要
- 工作
- 合作
- 将
- XML
- 完全
- 您一站式解决方案
- 你自己
- 和风网