Computer >> 컴퓨터 >  >> 소프트웨어 >> 우편

EmailJS를 사용하여 Vue.js 애플리케이션에서 이메일을 보내는 방법

며칠 전 간단한 Vue 프로젝트를 진행하기로 결정하고 방금 만든 연락처를 통해 이메일을 보내야 했습니다. 누군가 내 연락처 양식을 작성할 때마다 자동 이메일을 받고 싶었습니다.

그래서 나는 EmailJs를 검색하고 우연히 발견했습니다. 나는 그들의 문서가 훌륭하고 사용하기 정말 쉽기 때문에 이 기사를 쓰기로 결정했습니다. 누군가에게 도움이 되었으면 합니다. :)

시작하자!

이 기사에서는 EmailJS를 사용하여 Vuejs 애플리케이션에서 이메일을 보내는 방법을 보여 드리겠습니다.

계속하기 전에 컴퓨터에 Vue CLI가 설치되어 있다고 가정하고 미니 데모 프로젝트를 만들 것입니다. 그렇지 않은 경우 여기에서 설치 방법을 확인하는 것이 좋습니다.

다음 명령을 사용하여 프로젝트를 생성합니다.

vue create vue-emailjs-demo

그러면 기본 사전 설정을 선택하거나 기능을 수동으로 선택하는 옵션이 표시됩니다. default 선택 .

새 프로젝트 디렉토리가 생성되고 다음 명령을 사용하여 해당 디렉토리로 이동할 수 있습니다.

cd vue-emailjs-demo

EmailJS 설치 방법

EmailJS는 클라이언트 측 기술만을 사용하여 이메일을 보낼 수 있도록 도와줍니다. 서버가 필요하지 않습니다. EmailJS를 지원되는 이메일 서비스 중 하나에 연결하고 이메일 템플릿을 만들고 JavaScript 라이브러리를 사용하여 이메일을 트리거하기만 하면 됩니다.

코드 작성을 시작하기 전에 EmailJS 계정을 만들고 싶을 것입니다. 귀하의 계정으로 이메일 템플릿을 만들고 자동 이메일을 수신할 이메일을 선택할 수 있습니다.

새 계정에 로그인하면 대시보드로 이동합니다.

이메일 템플릿을 만드는 방법

이메일 템플릿은 거의 모든 필드(예:제목, 콘텐츠, TO 이메일, 보낸 사람 이름 등)에 동적 변수를 선택적으로 포함할 수 있습니다. JavaScript 호출에서 채워집니다. 우리는 곧 이것에 들어갈 것입니다.

먼저 이메일 서비스를 추가해 보겠습니다. 저는 Gmail을 선택했지만 필요에 가장 적합한 서비스를 자유롭게 선택할 수 있습니다.

또한 Service ID의 이름을 생각하고 싶지 않다면 , 검색 아이콘을 탭하면 자동으로 생성됩니다.

다음으로 이메일 템플릿을 만듭니다. 템플릿 페이지로 이동합니다. 새 템플릿을 만듭니다. 이메일 템플릿은 이메일 제목, 포함할 콘텐츠, 전송 위치 등을 정의합니다.

EmailJS를 사용하여 Vue.js 애플리케이션에서 이메일을 보내는 방법

{{from_name}}와 같이 위에 표시된 이중 중괄호 세트 변수들이다. 사용자가 양식을 작성하면 이러한 변수를 사용하여 해당 정보를 EmailJS에 전달합니다.

다음은 템플릿에서 사용 가능한 필드에 대한 간단한 설명입니다.

  • 제목: 이메일 제목입니다.
  • 콘텐츠: 이메일 본문. 여기에서 사용자 메시지, 이름 및 반송 주소를 전달할 것입니다.
  • 이메일로: 이 이메일의 목적지를 포함합니다.
  • 발신자 이름 : 이것은 선택 사항입니다. 하지만 거기에 이름을 쓸 수 있습니다.
  • 이메일에서: 받는 사람에게 표시되는 보낸 사람의 이메일 주소입니다. 기본 이메일 주소 확인란이 활성화된 경우 EmailJS는 사용 중인 이메일 서비스와 연결된 이메일 주소를 사용합니다.
  • 답장: 답장을 보낼 이메일 주소를 설정합니다.
  • 숨은 참조 및 참조: 이 두 필드는 일반적으로 귀하가 나열한 모든 사람에게 메시지 사본을 보내는 데 사용됩니다. 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부터 시작하겠습니다. :

<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>

마크업 설명

앞서 언급했듯이 매우 간단한 문의 양식에서 이메일을 보내드립니다. 따라서 div을 만듭니다. 양식 콘텐츠를 포함할 요소입니다. 양식에 스타일을 추가할 것이므로 container 클래스를 추가합니다. div 로 요소.

<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>

다음 명령으로 서버를 시작할 수 있습니다.

npm run serve

이제 브라우저를 localhost:8080으로 열면 다음과 같은 양식이 표시됩니다.

EmailJS를 사용하여 Vue.js 애플리케이션에서 이메일을 보내는 방법

sendEmail이라는 메소드도 생성할 것입니다. 데이터 제출을 처리합니다. 하지만 그 전에 emailjs를 가져와야 합니다. 우리 파일에.

script 바로 아래에 다음 줄을 추가합니다. :

import emailjs from 'emailjs-com';

다음은 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>

이 코드의 기능

try...catch를 사용했습니다. 위에 있지만 반드시 사용할 필요는 없습니다. 내가 을 요청했을 때를 기억하십시오. 서비스 ID, 템플릿 ID 및 사용자 ID 세부 정보를 클립보드에 복사하여 필요할 때 붙여넣으시겠습니까? 글쎄, 당신은 지금 절대적으로 필요합니다! 따라서 스니펫의 해당 부분을 실제 세부정보로 바꾸세요.

emailjs.sendForm() sendEmail()에 전달된 서비스 ID, 템플릿 ID, 사용자 ID 및 양식 데이터를 전달한 후 EmailJS로 데이터를 보내는 방법입니다. . catch()에서 발생한 모든 오류를 console.log()합니다. 차단하다.

sendForm() 지정된 이메일 템플릿과 전달된 양식 데이터를 기반으로 이메일을 보냅니다. 따라서 양식 입력 이름이 EmailJS 템플릿의 변수와 동일한지 확인하십시오.

아래는 이름(발신자), 이메일(발신자) 및 메시지 내용이 포함된 수정된 EmailJS 템플릿입니다.

EmailJS를 사용하여 Vue.js 애플리케이션에서 이메일을 보내는 방법

그게 다야!

To Email 확인 주소가 템플릿에 포함되어 있고 이메일이 이미 전송되어 있어야 합니다. 테스트를 사용해 볼 수도 있습니다. 또는 놀이터 원하는 경우 템플릿의 오른쪽 상단 모서리에 있는 기능입니다.

GitHub 저장소

내 GitHub 계정에서 이 기사의 코드를 찾을 수 있습니다.

이 기사가 도움이 되었다면 자유롭게 공유하십시오. 읽어주셔서 감사합니다!