怎樣使用JavaScript直接從前端發(fā)送電子郵件

怎樣使用JavaScript直接從前端發(fā)送電子郵件，針對(duì)這個(gè)問(wèn)題，這篇文章詳細(xì)介紹了相對(duì)應(yīng)的分析和解答，希望可以幫助更多想解決這個(gè)問(wèn)題的小伙伴找到更簡(jiǎn)單易行的方法。

你不需要使用任何后端語(yǔ)言，如 PHP 或 Python。此外，你甚至不需要Node.js!

有很多方法可以讀取這些數(shù)據(jù)。你可以將你的表單與數(shù)據(jù)庫(kù)(如MySQL)連接，然后從數(shù)據(jù)庫(kù)中讀取傳入的信息。好吧，這是一個(gè)選擇，但是我認(rèn)為這對(duì)于你的非技術(shù)客戶(hù)來(lái)說(shuō)可能會(huì)很麻煩。

你不需要使用任何后端語(yǔ)言

你需要的只是一個(gè)簡(jiǎn)單的 EmailJS 庫(kù)。

在我的項(xiàng)目中使用了Webpack，我在 src 文件夾存放源碼，dist 存放最終發(fā)布版本的代碼，使用 npm run dev 可以把項(xiàng)目跑起來(lái)。

提供項(xiàng)目完整代碼，真實(shí)可運(yùn)行。需要的可以點(diǎn)擊我的頭像，私信關(guān)鍵字：emailjs。

項(xiàng)目完整代碼

項(xiàng)目界面

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

首先需要做的當(dāng)然是創(chuàng)建一個(gè)HTML表單。注意，你不必設(shè)置 required 或 max 等驗(yàn)證屬性，因?yàn)樯院?，preventDefault()  函數(shù)將在你的提交事件上運(yùn)行，它將取消這些屬性的工作。

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

我的簡(jiǎn)單表格如下所示：

src/html/index.html

<form class="form">   <input name='to' type="text" placeholder="收件人" class="form__input" />   <input name='name' type="text" placeholder="你的名字" class="form__input" />   <input name='topic' type="text" placeholder="主題" class="form__input"  />   <textarea name='message' type="text" placeholder="你的消息" class="form__input"  ></textarea>    <input type="submit" value="發(fā)送" class="form__input form__input--button"> </form>

步驟2，注冊(cè)emailjs

要配置電子郵件，您必須注冊(cè)emailjs服務(wù)。不用擔(dān)心，使用此網(wǎng)站非常友好，你不會(huì)花很多時(shí)間在該網(wǎng)站上。

注冊(cè)emailjs服務(wù)：https://dashboard.emailjs.com/account/create

登錄后，將詢(xún)問(wèn)你有關(guān)電子郵件服務(wù)的信息。它放置在個(gè)人電子郵件服務(wù)區(qū)域中，就我而言，我選擇了Gmail。

點(diǎn)擊 Connect account 連接Gmail。

連接Gmail

此時(shí)會(huì)彈出Gmail的授權(quán)窗口，在請(qǐng)求權(quán)限對(duì)話(huà)框中點(diǎn)擊允許。

連接 Gmail 帳戶(hù)后，點(diǎn)擊“Add Service”按鈕。成功添加后可以看到如下界面。

例如，如果你連接上你的xyz@gmail.com賬戶(hù)，你未來(lái)收到的郵件就會(huì)從這個(gè)賬戶(hù)發(fā)出。所以不要擔(dān)心讓Gmail代你發(fā)送電子郵件——這正是你所需要的!

步驟3，創(chuàng)建你的郵件模板

創(chuàng)建你的郵件模板

經(jīng)過(guò)上面的步驟，你已經(jīng)成功地連接了您的 Gmail帳戶(hù)，在你的儀表板中應(yīng)該可以看到，點(diǎn)擊左側(cè)的導(dǎo)航進(jìn)入郵件模板設(shè)置頁(yè)面。

然后單擊“Create a new  template”按鈕創(chuàng)建新模板，界面非常友好，所以創(chuàng)建它不會(huì)有任何問(wèn)題。你可以選擇模板的名稱(chēng)和ID，我設(shè)置為“my-amazing-template”。

創(chuàng)建新模板

你現(xiàn)在必須指定，傳入的電子郵件應(yīng)該是什么樣的。將使用來(lái)自于表單中的 name 屬性作為變量插入到 {{{ }}} 符號(hào)中。

不要忘記在 To email(收件人)部分中放置一個(gè)電子郵件地址，這里我們讀取我們輸入的收件人變量。

插入變量

這是我的簡(jiǎn)單模板，它使用了4個(gè)變量，分別來(lái)自于我的HTML表單，我還指定了一個(gè)收發(fā)郵件的主題。

步驟4，保存你的API密鑰

好吧，這部分沒(méi)有什么特別的。 Emailjs共享授權(quán)API密鑰，這些密鑰將在發(fā)送電子郵件期間使用。當(dāng)然，放置這些密鑰的最佳位置是 .env  配置文件。但由于我的工作對(duì)象是簡(jiǎn)單的靜態(tài)文件，不想做服務(wù)器配置的工作，所以我會(huì)把它們保存在 apikeys 文件中，以后再導(dǎo)入。

你的 USER_ID 位于A(yíng)ccount > API Keys中。

并且你的 TEMPLATE_ID 位于模板標(biāo)題的下方。

這是我的 src/js/apikeys.js 的示例配置。

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

步驟5，發(fā)送郵件!

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

首先，你必須下載emailjs軟件包。

npm i emails-com

之后，轉(zhuǎn)到你的 src/js/main.js 文件并導(dǎo)入你的庫(kù)和apikey。

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

現(xiàn)在是時(shí)候在 src/js/main.js 中編寫(xiě)發(fā)送電子郵件功能了。

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)       }     ) }

很簡(jiǎn)單。如你所見(jiàn)，sendForm 函數(shù)采用4個(gè)參數(shù)。

第一個(gè)參數(shù)：你的電子郵件的ID，位于以下位置。

第二個(gè)參數(shù)：TEMPLATE_ID 來(lái)自你的apikey文件。

第三個(gè)參數(shù)：表單提交中的事件對(duì)象e。

第四個(gè)參數(shù)：USER_ID 來(lái)自你的apikey文件。

最后，找到表單并添加提交事件偵聽(tīng)器。

// src/js/main.js const form = document.querySelector('.form') form.addEventListener('submit',sendEmail)

如前所述，由于使用了 preventDefault() 函數(shù)，因此無(wú)法進(jìn)行屬性驗(yàn)證，你必須使用JS自己進(jìn)行驗(yàn)證和清除輸入。

僅此而已，最后讓我們使用 npm run dev 測(cè)試一下，我填寫(xiě)頁(yè)面上的表單并發(fā)送。

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

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

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

關(guān)于怎樣使用JavaScript直接從前端發(fā)送電子郵件問(wèn)題的解答就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，如果你還有很多疑惑沒(méi)有解開(kāi)，可以關(guān)注億速云行業(yè)資訊頻道了解更多相關(guān)知識(shí)。