Kendo UI致力于新的開發(fā)，來滿足不斷變化的需求。Kendo UI for Vue使用旨在提高性能和豐富用戶體驗(yàn)的Vue組件，幫助開發(fā)人員構(gòu)建下一代應(yīng)用程序。它是為Vue技術(shù)框架提供可用的Kendo UI組件，以便更快地構(gòu)建更好的Vue應(yīng)用程序。

聯(lián)系表單用于在網(wǎng)站上發(fā)送和接收用戶信息的表單。EmailJS是一個(gè)強(qiáng)大的庫(kù)，我們可以用它來創(chuàng)建聯(lián)系表單，從而只使用客戶端技術(shù)發(fā)送消息。由此我們可以整合其他電子郵件服務(wù)，并使用自動(dòng)回復(fù)功能。在本文中，我們將學(xué)習(xí)什么是EmailJS，以及如何使用Vue.js發(fā)送和接收電子郵件，以及為大家介紹如何使用響應(yīng)式UI組件Kendo UI for Vue輕松創(chuàng)建聯(lián)系表單。

Kendo UI 最新版下載

Telerik_KendoUI產(chǎn)品技術(shù)交流群：726377843    歡迎一起進(jìn)群討論

先決條件

開發(fā)者必須具備使用Vue的基本知識(shí)，并且熟悉創(chuàng)建Vue項(xiàng)目。

EmailJS簡(jiǎn)介

EmailJS 是我們用于僅使用客戶端技術(shù)發(fā)送郵件的庫(kù)。在您的項(xiàng)目中實(shí)現(xiàn) Email JS 非常簡(jiǎn)單，因?yàn)樗恍枰魏畏?wù)器。EmailJS 使您可以訪問項(xiàng)目中一些您喜歡的電子郵件服務(wù)，例如 Gmail、Yahoo、iCloud 等。

設(shè)置 EmailJS 帳戶

為了使用 EmailJS，我們需要?jiǎng)?chuàng)建一個(gè)帳戶。為此，請(qǐng)?jiān)L問該并注冊(cè)一個(gè)帳戶。

創(chuàng)建帳戶后，我們將被重定向到我們的管理儀表板，我們可以在其中創(chuàng)建電子郵件模板或選擇作為首選的電子郵件服務(wù)。本文首選電子郵件服務(wù)，并選擇 Gmail 作為我們的服務(wù)。

選擇 Gmail 后會(huì)收到一條消息，要求我們鏈接到想要使用的帳戶來接收消息。

賬戶連接完成后，接下來請(qǐng)點(diǎn)擊“創(chuàng)建服務(wù)”。

創(chuàng)建電子郵件模板

電子郵件模板是我們完成電子郵件服務(wù)創(chuàng)建后的下一步。EmailJS 的一個(gè)顯著特點(diǎn)是用戶可以調(diào)整電子郵件模板以適應(yīng)其喜好。讓我們看看如何在下面的例子中做到這一點(diǎn)。

首先，我們將前往儀表板并從左側(cè)菜單中選擇“電子郵件模板”。

上圖顯示了電子郵件模板示例。我們可以快速修改和個(gè)性化電子郵件模板以滿足需要。

自定義電子郵件模板后，下一步是保存更改并單擊“測(cè)試”按鈕以查看最終結(jié)果。

這便是使用 EmailJS 儀表板發(fā)送電子郵件的最終結(jié)果。

在 Vue 項(xiàng)目中安裝 EmailJS

要在 Vue 項(xiàng)目中安裝 EmailJS 庫(kù)，我們將使用以下命令：

npm install emailjs-com --save

安裝我們的庫(kù)后，我們將庫(kù)導(dǎo)入到腳本標(biāo)簽內(nèi)的組件文件中：

import emailjs from 'emailjs-com'

創(chuàng)建聯(lián)系表

安裝我們的庫(kù)后，我們將使用 Kendo UI for Vue 創(chuàng)建我們的聯(lián)系表單，這是一個(gè)廣泛的 UI 組件庫(kù)。為此，我們將安裝我們的表單包：

npm install --save @progress/kendo-vue-inputs @progress/kendo-vue-intl @progress/kendo-licensing

安裝軟件包后，我們將需要的表單輸入導(dǎo)入到表單組件中的腳本標(biāo)簽中：

import { Input } from '@progress/kendo-vue-inputs';

下面是代碼導(dǎo)入后的樣子：

<script>
import { Input, TextArea } from "@progress/kendo-vue-inputs";
import { Button } from "@progress/kendo-vue-buttons";
export default { components: {
KInput: Input,
KButton: Button,
KTtextarea: TextArea,
},
};
</script>

接下來，創(chuàng)建聯(lián)系表。

<template>
<div>
<card class="card-section" style="width: 450px; margin: auto">
<h1>Contact Form</h1>
<form ref="values" @submit.prevent="sendEmail">
<div class="form-group">
<KInput
class="form-input"
:style="{ width: '290px' }"
name="name"
v-model="user_name"
placeholder="Name"
></KInput>
</div>
<div class="form-group">
<KInput
class="form-input"
:style="{ width: '290px' }"
name="email"
v-model="user_email"
placeholder="email address"
></KInput>
</div>
<div class="form-group">
<kTextarea
class="form-input"
:style="{ width: '290px' }"
name="message"
v-model="user_message"
placeholder="Message"
:rows="4"
/>
</div>
<div class="example-col">
<kButton
:style="{ width: '100px' }"
id="submit-btn"
>Submit form</kButton
>
</div>
</form>
</card>
</div>
</template>

注意： Kendo UI for Vue 是一個(gè)商業(yè) UI 組件庫(kù)，作為其中的一部分，您在 Vue 項(xiàng)目中使用這些組件時(shí)需要提供許可證密鑰。您可以通過免費(fèi)試用或擁有商業(yè)許可證來獲取許可證密鑰。

通過聯(lián)系表接收消息

在前面的示例中，我們看到了如何通過 EmailJS 儀表板向某人發(fā)送電子郵件。在這個(gè)例子中，我們將看到如何通過我們的聯(lián)系表單接收消息。

為此，我們將創(chuàng)建返回三個(gè)輸入（姓名、電子郵件和消息）的數(shù)據(jù)和一個(gè)具有名為“sendEmail”的函數(shù)的方法。此函數(shù)將包含我們的數(shù)據(jù)、TemplateID、ServiceID 和公鑰。

<script>
import emailjs from 'emailjs-com';
import {
Card,
} from "@progress/kendo-vue-layout";
// ES2015 module syntax
import { Input, TextArea } from "@progress/kendo-vue-inputs";
import "@progress/kendo-theme-default";
import { Button } from "@progress/kendo-vue-buttons";
export default {
name: "CardComponent",
components: {
card: Card,
KInput: Input,
"k-textarea": TextArea,
kbutton: Button,
},
data() {
return {
user_name: "",
user_email: "",
user_message: "",
};
},
methods: {
sendEmail() {
emailjs
.sendForm(
"Service ID",
"Template ID",
"Public Key"
)
.then(
(result) => {
console.log(
"You have successfully submitted your message",
result.text
);
},
(error) => {
console.log(
"This form failed to submit, please kindly check your internet connection",
error.text
);
}
);
},
},
};
</script>

將服務(wù)密鑰、模板 ID 和公鑰的空間替換為我們創(chuàng)建的空間：

.sendForm(
"Service ID",
"Template ID",
"Public Key"
)

總的來說，用于發(fā)送和接收電子郵件的易于使用的 JavaScript 庫(kù)之一稱為 EmailJS。您還可以對(duì)某些功能進(jìn)行個(gè)性化設(shè)置，例如自動(dòng)回復(fù)選項(xiàng)。我們?cè)谶@篇文章中學(xué)習(xí)了如何使用 Vue 和 EmailJS 發(fā)送和接收電子郵件，還使用Kendo UI for Vue 輕松創(chuàng)建我們的聯(lián)系表單。