Cu câteva zile în urmă, am decis să lucrez la un proiect Vue simplu și trebuia să trimit e-mailuri printr-un contact de la tocmai creat. Am vrut să primesc un e-mail automat de fiecare dată când cineva mi-a completat formularul de contact.

Așa că am început să caut și am dat peste E-mailJ. Am decis să scriu acest articol pentru că am considerat că documentația lor este excelentă și că este foarte ușor de utilizat. De asemenea, sper să ajute pe cineva acolo 🙂

Să începem!

În acest articol, vă voi arăta cum să utilizați EmailJS pentru a trimite e-mailuri din aplicația dvs. Vuejs.

Înainte de a continua, presupun că aveți Vue CLI instalat pe computer, deoarece voi crea un mini proiect demo cu acesta. Dacă nu, vă recomandăm să verificați cum să îl instalați aici.

Vom crea proiectul folosind această comandă:

vue create vue-emailjs-demo

Apoi ni se va solicita opțiunea de a alege o presetare implicită sau de a selecta manual caracteristicile. Selectați default.

Va fi creat un nou director de proiect și puteți naviga în el folosind această comandă:

cd vue-emailjs-demo

Cum se instalează EmailJS

EmailJS vă ajută să trimiteți e-mailuri folosind numai tehnologiile clientului. Nu este necesar niciun server – pur și simplu conectați EmailJS la unul dintre serviciile de e-mail acceptate, creați un șablon de e-mail și utilizați biblioteca JavaScript pentru a declanșa un e-mail.

Înainte de a începe să scriem codul nostru, veți dori creați un cont EmailJS. Cu contul dvs., veți putea crea șabloane de e-mail și puteți alege adresa de e-mail la care doriți să accesați e-mailurile automate.

După ce vă conectați la noul dvs. cont, veți fi direcționat către bord.

Cum se creează șablonul de e-mail

Șabloanele de e-mail pot conține, opțional, variabile dinamice în aproape orice câmp (de exemplu, subiect, conținut, TO e-mail, FROM FROM și așa mai departe). Acestea sunt populate din apelul JavaScript. Vom intra în asta în scurt timp.

Mai întâi să adăugăm un serviciu de e-mail. Am selectat Gmail, dar sunteți liber să selectați serviciul care se potrivește cel mai bine nevoilor dvs.

De asemenea, dacă nu doriți să începeți să vă gândiți la un nume pentru dvs. Service ID, apăsați pe pictograma de căutare și va fi generată automat pentru dvs.

Apoi, vom crea șablonul nostru de e-mail. Navigați la pagina șabloane. Creați un șablon nou. Șablonul nostru de e-mail va defini subiectul e-mailului, ce conținut va conține, unde ar trebui să fie trimis și așa mai departe.

Cum sa trimiteti e mailuri din aplicatia Vuejs cu EmailJS

Seturile de acolade duble, arătate ca mai sus {{from_name}} sunt variabile. Când un utilizator ne completează formularul, vom transmite aceste informații către EmailJS folosind aceste variabile.

Mai jos este o mică explicație a câmpurilor disponibile în șablonul nostru:

  • Subiect: Subiectul e-mailului.
  • Conţinut: corpul e-mailului. Vom transmite aici mesajul utilizatorului, numele și adresa de întoarcere.
  • A trimite un email: Conține destinația acestui e-mail.
  • Din Nume: Acest lucru este opțional. Dar îți poți scrie numele acolo.
  • De la email: Adresa de e-mail a expeditorului așa cum va apărea destinatarului. Dacă este activată caseta de selectare adresă de e-mail implicită, atunci EmailJS va utiliza adresa de e-mail asociată serviciului de e-mail utilizat.
  • Raspunde la: Setează adresa de e-mail la care trebuie trimise răspunsurile.
  • BCC și CC: Aceste două câmpuri sunt utilizate în mod obișnuit pentru a trimite o copie a mesajului tuturor celor enumerați. Reply To , BCC and CC nu va fi utilizat în acest ghid, deoarece vrem să îl păstrăm cât mai simplu posibil. Dacă aveți nevoie de informații suplimentare, puteți consulta documentele EmailJS aici.

Notă: La un moment dat în acest articol, vom folosi fișierul Service ID și Template ID. De asemenea, vom avea nevoie de un User ID. Puteți găsi User ID în integrare parte a tabloului de bord. Puteți copia detaliile în clipboard și le puteți lipi atunci când sunt necesare.

Cum se instalează EmailJS în aplicația dvs.

Acum treceți la cod 🙂 Pentru a instala EmailJS în aplicația dvs., utilizați această comandă:

npm install emailjs-com --save

Vom trimite e-mailuri dintr-un formular de contact foarte simplu. Acesta va colecta date, inclusiv: numele (expeditorului), e-mailul (expeditorului) și conținutul mesajului. Lucruri simple!

Puteți edita fișierul HelloWorld.Vue componentă care a fost creată automat pentru noi atunci când am folosit Vue CLI sau puteți crea o componentă nouă numită ContactForm.vue. Voi face asta din urmă.

Mai jos vom construi componenta formularului de contact, ContactForm.vue.

Să începem cu template:

<template>
    <div class="container">
        <form>
          <label>Name</label>
          <input 
            type="text" 
            v-model="name"
            name="name"
            placeholder="Your Name"
          >
          <label>Email</label>
          <input 
            type="email" 
            v-model="email"
            name="email"
            placeholder="Your Email"
            >
          <label>Message</label>
          <textarea 
            name="message"
            v-model="message"
            cols="30" rows="5"
            placeholder="Message">
          </textarea>
          
          <input type="submit" value="Send">
        </form>
    </div>
</template>

Explicând marcajul nostru

După cum am menționat mai devreme, vom trimite e-mailuri dintr-un formular de contact foarte simplu. Deci, creați un div element care va conține conținutul formularului nostru. Vom adăuga stil la formularul nostru, așa că adăugați o clasă container la div element.

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

Puteți porni serverul cu comanda:

npm run serve

Acum, deschideți browserul la localhost: 8080 și ar trebui să vedeți formularul:

1611537906 694 Cum sa trimiteti e mailuri din aplicatia Vuejs cu EmailJS

Vom crea, de asemenea, o metodă numită sendEmail care se ocupă de transmiterea datelor noastre. Dar înainte de a face acest lucru, trebuie să importăm emailjs în dosarul nostru.

Adăugați următoarea linie chiar sub script :

import emailjs from 'emailjs-com';

Mai jos este restul codului necesar în script:

<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=""
    },
  }
}
</script>

Ce face acest cod

Am folosit un try...catch de mai sus, dar nu trebuie neapărat să-l folosiți. Amintiți-vă când v-am cerut copiați ID-ul de serviciu, ID-ul șablonului și detaliile ID-ului utilizatorului în clipboard și lipiți-le pentru când sunt necesare? Ei bine, ai absolut nevoie de ele acum! Deci, înlocuiți acea parte a fragmentului cu detaliile dvs. reale.

emailjs.sendForm() este modul în care trimitem date către EmailJS după ce am trecut ID-ul serviciului, ID-ul șablonului, ID-ul utilizatorului și datele formularului care au fost transmise sendEmail(). Consolăm log () orice eroare întâlnită cu catch() bloc.

Este important să rețineți că sendForm() trimite un e-mail pe baza șablonului de e-mail specificat și a datelor de formular transmise. Deci, asigurați-vă că numele de introducere a formularului este același cu variabila din șablonul dvs. EmailJS.

Mai jos este șablonul meu EmailJS modificat cu numele (expeditorului), e-mailul (expeditorului) și conținutul mesajului.

1611537906 694 Cum sa trimiteti e mailuri din aplicatia Vuejs cu EmailJS

Asta e!

Verifică To Email adresa inclusă în șablonul dvs. și ar trebui să vi se trimită deja e-mailul. De asemenea, ai putea să te joci cu Testează-l sau loc de joaca caracteristică din colțul din dreapta sus al șablonului, dacă doriți.

GitHub Repo

Puteți găsi codul pentru acest articol în Cont GitHub.

Simțiți-vă liber să împărtășiți acest articol dacă vi s-a părut de ajutor. Mulțumesc pentru lectură!