Аннотация:
В реальном мире отправка электронной почты из веб-приложения является важной функцией. Существует множество способов реализовать функцию электронной почты. Важно, чтобы мы выбрали эффективный метод в соответствии с нашей кодовой базой. Функция отправки электронной почты требует вызова сервера, она заставляет нас использовать серверный язык, такой как Node, PHP.
В этой статье мы сосредоточимся на функции отправки электронной почты с использованием JavaScript без какого-либо языка сервера. Мы будем использовать библиотеку JavaScript SMTP.js для выполнения обязанностей сервера. Мы реализуем функцию электронной почты в приложении Vue.
Я ожидаю, что читатель имеет базовое представление о JavaScript и VUE.js.
Для отправки электронной почты нам понадобится SMTP-сервер. Вы можете использовать выбранный вами SMTP-сервер, например, Gmail, EmailJS, Elastic Email. SMTP.JS принимает токен безопасности SMTP-сервера для подключения к SMTP-серверу. Я использовал эластичный почтовый сервер.
Как добавить библиотеку SMTP.js в приложение VUE?
Чтобы использовать SMTP.js, нам нужно импортировать библиотеку smtp.js в наш компонент контактной формы. Вы можете перейти на https://smtpjs.com/ и загрузить библиотеку smtp.js на свой локальный компьютер. Вам нужно будет создать файл smtp.js или выбрать имя файла по вашему выбору в локальном проекте, где вы будете хранить загруженную библиотеку smtp.js.
Создайте контактную форму в VUE.js для отправки электронной почты. На снимках экрана ниже вы можете найти код и стиль шаблона.
Как импортировать библиотеку smtp.js в ваш компонент Vue?
В локальном файле smtp.js используется экспорт с именем «Электронная почта». Мы будем использовать объявление импорта внутри компонента контакта для импорта smtp.js.
Мы свяжем поля формы с помощью v-model. У нас есть объявление свойства data(), которое будет содержать значения поля этой формы. Теперь нам нужно создать метод sendEmail() в хуке methods для нашего компонента контактов. Этот метод сработает, когда мы нажмем кнопку отправки. В разделе secureToken вам нужно будет указать свой токен службы smtp. См. снимок экрана ниже.
Теперь все готово, вы можете заполнить контактную форму и отправить электронное письмо. Вы получите электронное письмо.
Вы увидите окно подтверждения на своей веб-странице, как показано ниже, если электронное письмо было успешно отправлено
Теперь вы можете проверить почтовый ящик получателя для подтверждения.
Ссылки
smtp.js https://smtpjs.com/
Vue.js https://vuejs.org/
если вам понравилась моя статья, пожалуйста, не забудьте похлопать. Это побудит меня публиковать больше, которые решают проблемы реального мира. Спасибо!
