Hogyan küldhetünk e-maileket a Vue.js alkalmazásból az EmailJS segítségével

Néhány nappal ezelőtt úgy döntöttem, hogy egy egyszerű Vue projekten dolgozom, és e-maileket kell küldenem egy általam létrehozott kapcsolattartón keresztül. Automatikus e-mailt akartam kapni minden alkalommal, amikor valaki kitöltötte a kapcsolattartási űrlapomat.

Tehát rátértem a keresésre és az EmailJ-ekbe botlottam. Úgy döntöttem, hogy megírom ezt a cikket, mert nagyszerűnek éreztem a dokumentációikat, és nagyon egyszerűen használható. Remélem, hogy ez segít valakinek odakint :)

Kezdjük el!

Ebben a cikkben bemutatom, hogyan lehet az EmailJS használatával e-maileket küldeni a Vuejs alkalmazásból.

Mielőtt folytatom, feltételezem, hogy a Vue CLI telepítve van a számítógépére, mivel egy mini bemutató projektet hozok létre vele. Ha nem, akkor érdemes itt ellenőrizni a telepítés módját.

A projektet a következő paranccsal hozzuk létre:

vue create vue-emailjs-demo

Ezután megkérjük, hogy válasszon egy alapértelmezett beállítást, vagy manuálisan válassza ki a szolgáltatásokat. Válassza a lehetőséget default.

Új projektkönyvtár jön létre, amelybe a következő paranccsal navigálhat:

cd vue-emailjs-demo

Az EmailJS telepítése

Az EmailJS segít az e-mailek küldésében csak az ügyféloldali technológiák segítségével. Nincs szükség szerverre - csak csatlakoztassa az EmailJS-t az egyik támogatott e-mail szolgáltatáshoz, hozzon létre egy e-mail sablont, és használja a JavaScript könyvtárukat az e-mail indításához.

Mielőtt elkezdenénk írni a kódunkat, létre kell hoznia egy EmailJS fiókot. Fiókjával létrehozhat e-mail sablonokat, és kiválaszthatja azt az e-mailt, amelyre az automatikus e-maileket szeretné használni.

Miután bejelentkezett új fiókjába, az irányítópultra irányítja.

Az e-mail sablon létrehozása

Az e-mail sablonok opcionálisan szinte bármely mezőben tartalmazhatnak dinamikus változót (például tárgy, tartalom, E-mail cím, FROM név stb.). A JavaScript-hívásból kerülnek feltöltésre. Rövidesen belemegyünk.

Először adjunk hozzá egy e-mail szolgáltatást. Én a Gmailt választottam, de Ön szabadon kiválaszthatja azt, amelyik a legjobban megfelel az Ön igényeinek.

Továbbá, ha nem akar elkezdenie nevét gondolni Service ID, érintse meg a keresés ikont, és ez automatikusan létrejön az Ön számára.

Ezután elkészítjük az e-mail sablonunkat. Navigáljon a sablonok oldalra. Hozzon létre egy új sablont. Az E-mail sablonunk meghatározza e-mailünk tárgyát, milyen tartalmat fog tartalmazni, hová kell elküldeni stb.

A fent bemutatott kettős göndör zárójelkészletek {{from_name}}változók. Amikor a felhasználó kitölti űrlapunkat, ezeket a változókat felhasználva továbbítjuk ezeket az információkat az EmailJS-nek.

Az alábbiakban bemutatunk egy kis magyarázatot a sablonunkban elérhető mezőkre:

  • Tárgy: Az e-mail tárgya.
  • Tartalom: Aaz e-mail törzse. Itt továbbítjuk a felhasználói üzenetet, nevüket és visszaküldési címüket.
  • E-mailben: Az e-mail címét tartalmazza.
  • From Name : Ez nem kötelező. De odaírhatja a nevét.
  • E -mailből : A feladó e-mail címe, ahogy az a címzett számára megjelenik. Ha az alapértelmezett e-mail cím be van jelölve, akkor az EmailJS a használt e-mail szolgáltatáshoz társított e-mail címet fogja használni.
  • Válasz: Beállítja azt az e-mail címet, amelyre a válaszokat el kell küldeni.
  • BCC és CC: Ezt a két mezőt általában arra használják, hogy az üzenet másolatát elküldjék mindenkinek, akit felsorolt. Reply To,BCC and CCnem használjuk ebben az útmutatóban, mivel azt a lehető legegyszerűbben szeretnénk megtartani. Ha további információra van szüksége, itt ellenőrizheti az EmailJS dokumentumait.

Megjegyzés: Az egy pont ebben a cikkben, mi lesz a Service IDés Template ID. Szükségünk lesz egy User ID. Megtalálhatja User IDa integrációja részeként a műszerfalon. A részleteket átmásolhatja a vágólapra, és beillesztheti, amikor szükség van rájuk.

Az EmailJS telepítése az alkalmazásba

Most lépünk a kódra :) Az EmailJS telepítéséhez az alkalmazásba használja ezt a parancsot:

npm install emailjs-com --save

E-mailt fogunk küldeni egy nagyon egyszerű kapcsolatfelvételi űrlap segítségével. Gyűjteni fogja az adatokat, beleértve a következőket: név (a feladó), e-mail (a feladó) és az üzenet tartalma. Egyszerű dolgok!

Szerkesztheti a HelloWorld.Vueszámunkra automatikusan létrehozott összetevőt, amikor a Vue parancssori felületet használtuk, vagy létrehozhat egy újat nevű összetevőt ContactForm.vue. Én az utóbbit fogom megtenni.

Az alábbiakban fogunk építeni az űrlapot komponens ContactForm.vue.

Kezdjük a következőkkel template:

 Name  Email  Message 

A jelölésünk magyarázata

Mint korábban említettem, e-mailt küldünk egy nagyon egyszerű kapcsolatfelvételi űrlapon keresztül. Tehát hozzon létre egy divelemet, amely tartalmazza az űrlaptartalmunkat. Stílust adunk az űrlapunkhoz, ezért adjon hozzá egy osztályt containeraz div elemhez.

 * {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; } 

A szervert a következő paranccsal indíthatja el:

npm run serve

Most nyissa meg a böngészőt a localhost: 8080 webhelyen, és látnia kell az űrlapot:

Létrehozunk egy úgynevezett módszert is, sendEmailamely az adataink benyújtását kezeli. De mielőtt ezt megtennénk, importálnunk emailjskell a fájlunkba.

Adja hozzá a következő sort script:

import emailjs from 'emailjs-com';

Az alábbiakban látható a kód további része, amelyre szükségünk van 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 = '' }, } } 

Mit csinál ez a kód

A try...catchfentieket használtam, de nem feltétlenül kell használnia. Emlékezz, amikor megkértemátmásolja a szolgáltatásazonosítót, a sablonazonosítót és a felhasználói azonosító adatait a vágólapra, és beillesztheti, ha szükség van rájuk? Nos, most mindenképpen szükséged van rájuk! Tehát cserélje ki a kivonat ezen részét a tényleges adataival.

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!