者 | Mateusz Iwaniuk

譯者 | 明明如月，責(zé)編 | 夕顏

出品 | CSDN（ID：CSDNnews）

文章配套代碼: https://github.com/iwaniukooo11/email-sender

現(xiàn)在，即使是創(chuàng)建最基本的網(wǎng)站，程序員也必須使用現(xiàn)代的功能和技術(shù)。甚至像為你的朋友創(chuàng)建簡(jiǎn)單的投資組合這樣的基本項(xiàng)目也可能涉及到一些問(wèn)題，比如從聯(lián)系人表單接收數(shù)據(jù)。有很多方法可以讀取這些數(shù)據(jù)。你可以將表單與數(shù)據(jù)庫(kù)連接起來(lái)，然后從數(shù)據(jù)庫(kù)中讀取傳入的消息來(lái)實(shí)現(xiàn)功能，但這樣做會(huì)給不懂技術(shù)的客戶(hù)造成困難。

你為什么不通過(guò)發(fā)送電子郵件傳輸信息？

不使用數(shù)據(jù)庫(kù)就能接收到傳入的消息，絕對(duì)是最佳選擇，也是最方便用戶(hù)的選擇。但問(wèn)題來(lái)了—如何實(shí)現(xiàn)呢？你可能認(rèn)為需要使用某種后端語(yǔ)言。

實(shí)際上，你不必使用任何如 php 或 python 這種后端語(yǔ)言，你甚至不需要用到 node.js！你需要的就是一個(gè)簡(jiǎn)單的EmailJS 庫(kù)。

本文將介紹下面兩個(gè)重要功能:

• 配置 emailjs 帳戶(hù)

• 使用 JS 發(fā)送電子郵件

請(qǐng)注意，在我的項(xiàng)目中，我使用了 gulp 和 webpack，我在 src 文件夾存放源碼，dist 存放最終發(fā)布版本的代碼。

我將分 5 個(gè)步驟向你展示如何從頭開(kāi)始構(gòu)建電子郵件發(fā)送器。

步驟1-用 HTML 創(chuàng)建表單

首先需要?jiǎng)?chuàng)建一個(gè) HTML 表單。你不必放置像 required 或 max 這種驗(yàn)證屬性，因?yàn)樯院螅琾reventDefault 函數(shù)將在你的提交事件上運(yùn)行，它會(huì)讓這些屬性的處理失效。

表單中最重要的是為每個(gè)輸入放置 name 屬性，后面會(huì)用到。

我的非常簡(jiǎn)單的表單是這樣的:

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-注冊(cè)成為 email 用戶(hù)

要配置你的電子郵件，你必須注冊(cè)電子郵件服務(wù)。別擔(dān)心—使用這個(gè)網(wǎng)站非常方便和省時(shí)。

登入后，系統(tǒng)會(huì)詢(xún)問(wèn)你的電子郵件服務(wù)，它位于個(gè)人電子郵件服務(wù)區(qū)（personal email service）。在我的例子中，我選擇了 gmail。

然后，你需要連接你的 gmail 帳戶(hù)。這將用來(lái)發(fā)送電子郵件給你客戶(hù)。例如，如果你關(guān)聯(lián)了 xyz@gmail.com 賬戶(hù)，你后續(xù)發(fā)送的郵件都將從這個(gè)郵箱發(fā)出。所以不要擔(dān)心“ Send email on your behalf” 這個(gè)授權(quán)信息—這正是你需要的！

連接完 gmail 賬戶(hù)后，點(diǎn)擊添加服務(wù)（add service）按鈕。

步驟3-創(chuàng)建郵件模板

如果你已經(jīng)成功連接了你的 gmail 賬戶(hù)，你現(xiàn)在應(yīng)該在信息中心中。現(xiàn)在需要?jiǎng)?chuàng)建電子郵件模板了。

切換到電子郵件模板卡，并單擊創(chuàng)建一個(gè)新的模板（create a new template）。界面非常友好，所以創(chuàng)建模板不會(huì)有任何問(wèn)題。

你可以選擇模板的名稱(chēng)和 ID。我稱(chēng)之為“我的神奇模板（my_amazing_template）”。

接下來(lái)，你必須指定郵件的內(nèi)容。

模板的變量值來(lái)自 input 中的 `name` 屬性。你已將變量插入`{{{}}}`符號(hào)中。

不要忘記在“收件人”部分 (右側(cè)) 添加電子郵件地址。你的電子郵件將被發(fā)送到該電子郵件地址上。截圖中的收件人郵箱是我自己的公司郵箱。

這是我的簡(jiǎn)單模板，它使用來(lái)自 HTML 表單里的 3 個(gè)變量。我還指定了接收電子郵件的主題。

步驟4-保存 API 密鑰

這部分沒(méi)什么特別的。Emailjs 共享授權(quán) API 密鑰，將在發(fā)送電子郵件時(shí)使用。當(dāng)然，放這些鑰匙最好的地方是`.env` 配置。但是因?yàn)槲沂褂玫氖呛?jiǎn)單的靜態(tài)文件，我不想使用服務(wù)器配置，所以我將它們保存在 apikeys 文件中，然后再將它們導(dǎo)入。

你的 USER_ID 位于 Account > API Keys 菜單下。

TEMPLATE_ID 位于模板的標(biāo)題下面。

這是我基于不存在的 keyssrc / js / apikeys. js 的示例配置.

src/js/apikeys.js

export default { USER_ID :'user_DPUd-rest-of-my-id', TEMPLATE_ID:'my_amazing_template'}

如果需要將源碼發(fā)布到 GITHUB，不要忘記將 APIKEYS 文件添加到 .GITIGNORE文件中

步驟5-發(fā)送電子郵件

現(xiàn)在是該項(xiàng)目最后也是最重要的部分的了。現(xiàn)在我們必須使用 javascript 發(fā)送電子郵件。

首先，你必須下載 emailjs 包。

npm i emails-com

然后，轉(zhuǎn)到 js 文件，導(dǎo)入庫(kù)和 apikeys。

src/js/main.js

import emailjs from 'emailjs-com'import apiKeys from './apikeys'

現(xiàn)在是編寫(xiě)發(fā)送電子郵件功能的時(shí)候了

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 函數(shù)有4個(gè)參數(shù):

你的電子郵件的 ID，在這里:

TEMPLATE_ID 來(lái)自 apikey 文件,

事件對(duì)象來(lái)自你的表單提交

USER_ID 來(lái)自 apikey 文件,

最后，查找表單并添加提交事件監(jiān)聽(tīng)器：

src/js/main.js

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

正如我前面提到的，由于 `preventDefault` 函數(shù)，屬性驗(yàn)證將無(wú)法工作。你必須使用 JS 自己進(jìn)行驗(yàn)證和清除輸入。

以上就是全部?jī)?nèi)容，接下來(lái)讓我們測(cè)試一下。

填寫(xiě)頁(yè)面上的表單并發(fā)送。

我收到電子郵件，內(nèi)容正是根據(jù)我們的模板和表單數(shù)據(jù)渲染出來(lái)的。

通過(guò)上圖可以看出，所有的變量的值都填充到了正確的位置上。

總結(jié)

通過(guò)本文的介紹你會(huì)發(fā)現(xiàn)用 JS 發(fā)送郵件并非難事。

使用 emailjs，你可以簡(jiǎn)單的方式發(fā)送電子郵件。

我相信你未來(lái)的用戶(hù)會(huì)很高興收到來(lái)自他們網(wǎng)頁(yè)上表單填寫(xiě)數(shù)據(jù)的t郵件，相信本文對(duì)你有幫助。

這篇文章的配套代碼在這里: https://github.com/iwaniukooo11/email-sender

原文鏈接：

https://dev.to/iwaniukooo11/send-e-mails-directly-from-front-end-with-js-5d7d

本文為CSDN翻譯文章，轉(zhuǎn)載請(qǐng)注明出處。

?我們想研發(fā)一個(gè)機(jī)器學(xué)習(xí)框架，6 個(gè)月后失敗了
?生產(chǎn)型機(jī)器學(xué)習(xí)已經(jīng)沒(méi)那么困難了？
?視頻 | 你不知道的"開(kāi)源"60年秘史
?GitHub標(biāo)星10,000+，Apache項(xiàng)目ShardingSphere的開(kāi)源之路
?阿里技術(shù)專(zhuān)家告訴你，如何畫(huà)出優(yōu)秀的架構(gòu)圖？
?加拿大API平臺(tái)如何做到30%為中國(guó)明星項(xiàng)目？創(chuàng)業(yè)老兵這樣說(shuō)……

言

親愛(ài)的讀者，我們已經(jīng)成功地發(fā)送了簡(jiǎn)單的文本郵件。但在實(shí)際應(yīng)用中，我們可能還需要發(fā)送格式更加豐富的HTML郵件，或者包含附件的郵件。今天，我們就來(lái)探索如何使用Python來(lái)構(gòu)建并發(fā)送這樣的郵件。

一、發(fā)送HTML郵件

HTML郵件可以讓你的郵件內(nèi)容更加豐富多彩，包含圖片、鏈接、樣式等。在Python中，我們同樣可以使用email模塊來(lái)構(gòu)建HTML郵件。

from email.mime.multipart import MIMEMultipart
from email.mime.text import MIMEText

# HTML郵件正文內(nèi)容
html_content = """
<html>
<head></head>
<body>
    <h1>Hello, this is an HTML email from Python!</h1>
    <p>Here's a <a href="https://www.python.org">link to Python's website</a>.</p>
    <img src="cid:image1">  <!-- 注意：這里使用了cid引用，稍后我們將添加圖片附件 -->
</body>
</html>
"""

# 創(chuàng)建一個(gè)多部分郵件對(duì)象
msg = MIMEMultipart('related')
msg['From'] = 'your_email@gmail.com'
msg['To'] = 'receiver_email@example.com'
msg['Subject'] = 'HTML Email with Python'

# 添加HTML郵件正文
msg_alternative = MIMEMultipart('alternative')
msg.attach(msg_alternative)
html_part = MIMEText(html_content, 'html', 'utf-8')
msg_alternative.attach(html_part)

# （可選）添加圖片附件（這里僅為示例，實(shí)際發(fā)送時(shí)請(qǐng)確保圖片文件存在）
# 注意：由于示例中HTML中引用了圖片，我們需要在郵件中添加這個(gè)圖片作為附件，并使用cid引用
# 這里為了簡(jiǎn)化，我們略過(guò)實(shí)際文件讀取和添加的過(guò)程，僅展示邏輯
# ... 添加圖片附件的代碼會(huì)涉及到打開(kāi)文件、讀取內(nèi)容、創(chuàng)建MIMEImage對(duì)象，并設(shè)置Content-ID為"image1"

# 發(fā)送郵件（假設(shè)SMTP連接和登錄已經(jīng)完成）
# ... 使用smtplib發(fā)送msg對(duì)象，與之前的示例類(lèi)似

注意：上面的代碼示例中，關(guān)于添加圖片附件的部分被省略了，因?yàn)樗婕暗轿募蘒/O操作和MIMEImage對(duì)象的使用，這可能會(huì)讓示例變得復(fù)雜。在實(shí)際應(yīng)用中，你需要讀取圖片文件，創(chuàng)建MIMEImage對(duì)象，并將其附加到郵件中，同時(shí)確保HTML中的<img>標(biāo)簽通過(guò)cid屬性正確引用該圖片。

二、發(fā)送帶附件的郵件

發(fā)送帶附件的郵件與發(fā)送HTML郵件類(lèi)似，但你需要?jiǎng)?chuàng)建一個(gè)多部分郵件（MIMEMultipart），并為每個(gè)部分（文本、HTML、附件等）設(shè)置不同的MIME類(lèi)型。

from email.mime.base import MIMEBase
from email import encoders

# 假設(shè)我們要發(fā)送一個(gè)名為"example.txt"的文本文件作為附件
filename = 'example.txt'

# 讀取文件內(nèi)容并編碼為base64
with open(filename, 'rb') as attachment:
    part = MIMEBase('application', 'octet-stream')
    part.set_payload((attachment).read())
encoders.encode_base64(part)

# 添加文件頭信息
part.add_header('Content-Disposition', "attachment; filename= %s" % filename)

# 將附件添加到郵件中
msg.attach(part)

# 現(xiàn)在，msg對(duì)象包含了文本（或HTML）和附件，你可以使用smtplib發(fā)送它
# ... 發(fā)送郵件的代碼與之前相同

結(jié)語(yǔ)

恭喜你，現(xiàn)在你已經(jīng)掌握了使用Python發(fā)送文本郵件、HTML郵件以及帶附件郵件的技能！這些技能將幫助你在自動(dòng)化任務(wù)、通知系統(tǒng)或任何需要郵件通信的應(yīng)用程序中大展拳腳。記得在實(shí)踐中不斷探索和嘗試，你會(huì)發(fā)現(xiàn)Python在郵件處理方面的更多可能性。