Как да изпращате имейли от приложението си Vue.js с EmailJS

Преди няколко дни реших да работя по прост Vue проект и трябваше да изпращам имейли чрез контакт от току-що създадения от мен. Исках да получа автоматичен имейл всеки път, когато някой попълни формуляра ми за контакт.

Така че стигнах до търсене и се натъкнах на EmailJs. Реших да напиша тази статия, защото смятах, че тяхната документация е страхотна и е много лесна за използване. Надявам се също да помогне на някой там :)

Да започваме!

В тази статия ще ви покажа как да използвате EmailJS за изпращане на имейли от вашето приложение Vuejs.

Преди да продължа, предполагам, че на компютъра ви е инсталиран Vue CLI, тъй като ще създам мини демо проект с него. Ако не, може да искате да проверите как да го инсталирате тук.

Ще създадем проекта с помощта на тази команда:

vue create vue-emailjs-demo

След това ще бъдем подканени с опцията да изберем предварително зададена по подразбиране или да изберем ръчно функции. Изберете default.

Ще бъде създадена нова директория на проекта и можете да навигирате в нея, като използвате тази команда:

cd vue-emailjs-demo

Как да инсталираме EmailJS

EmailJS ви помага да изпращате имейли само с помощта на клиентски технологии. Не се изисква сървър - просто свържете EmailJS с една от поддържаните имейл услуги, създайте шаблон за имейл и използвайте тяхната библиотека на JavaScript, за да задействате имейл.

Преди да започнем да пишем нашия код, ще искате да създадете акаунт в EmailJS. С вашия акаунт ще можете да създавате шаблони за имейли и да избирате имейла, на който искате да отиват вашите автоматизирани имейли.

След като влезете в новия си акаунт, ще бъдете насочени към таблото за управление.

Как да създадете шаблон за имейл

Шаблоните за имейли могат по избор да съдържат динамични променливи в почти всяко поле (например тема, съдържание, TO имейл, FROM име и т.н.). Те се попълват от извикването на JavaScript. Ще влезем в това скоро.

Първо нека добавим имейл услуга. Избрах Gmail, но вие можете свободно да изберете коя услуга най-добре отговаря на вашите нужди.

Освен това, ако не искате да започнете да мислите за име за вашето Service ID, докоснете иконата за търсене и то ще се генерира автоматично за вас.

След това ще създадем нашия имейл шаблон. Придвижете се до страницата с шаблони. Създайте нов шаблон. Нашият шаблон за имейл ще дефинира темата на нашия имейл, какво съдържание ще съдържа, къде трябва да бъде изпратен и т.н.

Наборите от двойни фигурни скоби, показани по-горе, {{from_name}}са променливи. Когато потребител попълни нашия формуляр, ние ще предадем тази информация на EmailJS, използвайки тези променливи.

По-долу има малко обяснение на наличните полета в нашия шаблон:

  • Тема: Темата на имейла.
  • Съдържание: Най-тяло на имейла. Тук ще предадем потребителското съобщение, неговото име и адреса им за връщане.
  • До имейл: Съдържа дестинацията на този имейл.
  • От Име : Това не е задължително. Но можете да напишете името си там.
  • От имейл: имейл адресът на подателя, както ще се появи за получателя. Ако квадратчето за имейл адрес по подразбиране е активирано, тогава EmailJS ще използва имейл адреса, свързан с използваната услуга за електронна поща.
  • Отговор на: Задава имейл адреса, на който да се изпращат отговорите.
  • BCC и CC: Тези две полета обикновено се използват за изпращане на копие на съобщението до всички, които сте изброили. Reply To,BCC and CCняма да се използва в това ръководство, тъй като искаме да го направим възможно най-опростено. Ако имате нужда от допълнителна информация, можете да проверите документите на EmailJS тук.

Забележка: В даден момент от тази статия ще използваме Service IDи Template ID. Ще ни трябва и User ID. Можете да го намерите User IDв интеграционната част на таблото. Можете да копирате подробностите в клипборда си и да ги поставите, когато са необходими.

Как да инсталирате EmailJS във вашето приложение

Сега преминаваме към кода :) За да инсталирате EmailJS във вашето приложение, използвайте тази команда:

npm install emailjs-com --save

Ще изпращаме имейли от много проста форма за контакт. Той ще събира данни, включително: име (на подателя), имейл (на подателя) и съдържанието на съобщението. Прости неща!

Можете да редактирате HelloWorld.Vueкомпонента, който е създаден автоматично за нас, когато сме използвали Vue CLI, или можете да създадете нов компонент, наречен ContactForm.vue. Ще правя последното.

По-долу ще изградим компонента на контактната форма ContactForm.vue,.

Нека започнем с template:

 Name  Email  Message 

Обясняваме нашата маркировка

Както споменах по-рано, ние ще изпращаме имейли от много проста форма за контакт. Така че създайте divелемент, който ще съдържа съдържанието на нашата форма. Ще добавим стил към нашата форма, така че добавете клас containerкъм div елемента.

 * {box-sizing: border-box;} .container { display: block; margin:auto; text-align: center; border-radius: 5px; background-color: #f2f2f2; padding: 20px; width: 50%; } label { float: left; } input[type=text], [type=email], textarea { width: 100%; padding: 12px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; margin-top: 6px; margin-bottom: 16px; resize: vertical; } input[type=submit] { background-color: #4CAF50; color: white; padding: 12px 20px; border: none; border-radius: 4px; cursor: pointer; } input[type=submit]:hover { background-color: #45a049; } 

Можете да стартирате сървъра си с командата:

npm run serve

Сега отворете браузъра си за localhost: 8080 и ще видите формуляра си:

Също така ще създадем метод, наречен, sendEmailкойто се справя с подаването на нашите данни. Но преди да направим това, трябва да импортираме emailjsв нашия файл.

Добавете следния ред точно под script:

import emailjs from 'emailjs-com';

По-долу е останалата част от кода, необходим в нашата script:

 export default { name: 'ContactUs', data() { return { name: '', email: '', message: '' } }, methods: { sendEmail(e) { try { emailjs.sendForm('YOUR_SERVICE_ID', 'YOUR_TEMPLATE_ID', e.target, 'YOUR_USER_ID', { name: this.name, email: this.email, message: this.message }) } catch(error) { console.log({error}) } // Reset form field this.name = '' this.email = '' this.message = '' }, } } 

Какво прави този код

Използвах по- try...catchгоре, но не е задължително да го използвате. Спомни си, когато те помолихда копирате вашия Service ID, Template ID и User ID данни в клипборда си и да ги поставите, когато са необходими? Ами абсолютно необходими са ви сега! Затова заменете тази част от фрагмента с действителните си данни.

emailjs.sendForm() is how we send data to EmailJS after passing the Service ID, Template ID, User ID and form data that were passed into sendEmail(). We console.log() any error encountered with the catch() block.

It is important to note that sendForm() sends an email based on the specified email template and the passed form data. So make sure that your form input name is the same as the variable in your EmailJS template.

Below is my modified EmailJS template with the name (of the sender), email (of the sender), and the message content.

That's it!

Check the To Email address included in your template and you should have your email sent there already. You could also play around with the Test it or playground feature on the top-right corner of the template if you want.

GitHub Repo

You can find the code for this article in my GitHub account.

Feel free to share this article if you found it helpful. Thanks for reading!