자 바스 크 립 트 를 사용 하여 전단 으로 이메일 보 내기

당신 은 왜 이메일 로 정 보 를 전송 하지 않 습 니까?
데이터 베 이 스 를 사용 하지 않 으 면 들 어 오 는 메 시 지 를 받 을 수 있 습 니 다.가장 좋 은 선택 이자 사용자 의 선택 에 가장 편리 합 니 다.그런데 문제 가 생 겼 어 요.어떻게 이 루어 질 까요?어떤 백 엔 드 언어 를 사용 해 야 한다 고 생각 할 수도 있 습 니 다.
실제로 phop 이나 python 같은 백 엔 드 언어 를 사용 할 필요 가 없습니다.node.js 를 사용 할 필요 도 없습니다!
당신 에 게 필요 한 것 은 간단 한 EmailJS 라 이브 러 리 입 니 다.
본 고 는 다음 과 같은 두 가지 중요 한 기능 을 소개 할 것 이다.
emailjs 계 정 설정
JS 로 이메일 보 내기제 프로젝트 에서 저 는 gulp 와 webpack 을 사 용 했 습 니 다.src 폴 더 에 원본 코드 를 저장 하고 dist 는 최종 버 전의 코드 를 저장 합 니 다.
나 는 5 단계 로 나 누 어 너 에 게 처음부터 이메일 발송 기 를 구축 하 는 방법 을 보 여줄 것 이다.
STEP 1-HTML 로 폼 만 들 기
우선 HTML 폼 을 만들어 야 합 니 다.required 나 max 와 같은 인증 속성 을 설치 할 필요 가 없습니다.나중에 preventDefault()함수 가 제출 이벤트 에서 실 행 될 것 입 니 다.이 속성 들 의 처 리 를 무효 화 할 것 입 니 다.
폼 에서 가장 중요 한 것 은 모든 입력 에 name 속성 을 배치 하 는 것 입 니 다.나중에 사용 할 것 입 니 다.
나의 매우 간단 한 양식 은 이렇다.
src/html/index.html

<form class="form">
	<input name='name' type="text" placeholder="Your name..."
	class="form__input" />
	<input name='topic' type="text" placeholder="Topic..."
	class="form__input" />
	<textarea name='message' type="text" placeholder="Your Message..."
	class="form__input"></textarea>
	<input type="submit" value="send"
	class="form__input form__input--button"> </form>

STEP 2-이메일 사용자 등록
이메일 을 설정 하려 면 이메일 서 비 스 를 등록 해 야 합 니 다.걱정 하지 마 세 요.이 사 이 트 를 사용 하 는 것 은 매우 편리 하고 시간 을 절약 할 수 있 습 니 다.
로그 인하 면 시스템 은 개인 이메일 서비스 구역(personal email service)에 있 는 이메일 서 비 스 를 물 어 볼 것 입 니 다.나의 예 에서 나 는 gmail 을 선택 했다.

그리고 gmail 계 정 을 연결 해 야 합 니 다.이것 은 당신 의 고객 에 게 이메일 을 보 내 는 데 쓰 일 것 입 니 다.하면,만약,만약[email protected]계 정,당신 이 후속 으로 보 낸 메 일 은 모두 이 메 일 에서 보 낼 것 입 니 다.그 러 니'Send email on your 대리 lf'라 는 권한 수여 정 보 를 걱정 하지 마 세 요.이것 이 바로 당신 이 필요 로 하 는 것 입 니 다!

gmail 계 정 에 연결 한 후 서비스 추가(add service)단 추 를 누 르 십시오.
STEP 3-메 일 템 플 릿 만 들 기
gmail 계 정 에 성공 적 으로 연결 되 었 다 면 지금 정보 센터 에 있 을 것 입 니 다.이제 전자 우편 템 플 릿 을 만들어 야 합 니 다.
전자 우편 템 플 릿 카드 로 전환 하고 새 템 플 릿 을 만 들 려 면 누 르 십시오(create a new template).인터페이스 가 매우 우호 적 이기 때문에 템 플 릿 을 만 드 는 데 아무런 문제 가 없 을 것 입 니 다.
템 플 릿 의 이름과 ID 를 선택 할 수 있 습 니 다.나 는'나의 신기 한 템 플 릿(myamazing_template）”。

다음은 메 일의 내용 을 지정 해 야 합 니 다.
템 플 릿 의 변수 값 은 input 의'name'속성 에서 나 옵 니 다.변 수 를'{{{}}'기호 에 삽입 하 였 습 니 다.
'받 는 사람'부분(오른쪽)에 이메일 주 소 를 추가 하 는 것 을 잊 지 마 세 요.당신 의 이메일 은 이 이메일 주소 로 발 송 될 것 입 니 다.캡 처 한 수신 자 메 일 은 제 회사 메 일 입 니 다.
이것 은 HTML 폼 에서 온 세 개의 변 수 를 사용 하 는 간단 한 템 플 릿 입 니 다.나 는 이메일 을 받 을 테 마 를 지정 했다.

단계 4-API 키 저장
이 부분 은 별 다른 것 이 없다.Emailjs 는 인증 API 키 를 공유 하여 이메일 을 보 낼 때 사용 합 니 다.물론 이 열쇠 들 을 놓 는 가장 좋 은 곳 은'env'배치 입 니 다.그러나 저 는 간단 한 정적 파일 을 사용 하기 때문에 서버 설정 을 사용 하고 싶 지 않 습 니 다.그래서 apikeys 파일 에 저장 하고 가 져 옵 니 다.
당신 의 USERID 는 Account>API Keys 메뉴 아래 에 있 습 니 다

TEMPLATE_ID 는 템 플 릿 의 제목 아래 에 있 습 니 다

이것 은 제 가 존재 하지 않 는 keyssrc/js/apikeys.js 를 기반 으로 한 예제 설정 입 니 다.
src/js/apikeys.jsexport default { USER_ID :'user_DPUd-rest-of-my-id', TEMPLATE_ID:'my_amazing_template'}GITHUB 에 소스 코드 를 발표 할 필요 가 있다 면,APIKEYS 파일 을.GITIGNORE 파일 에 추가 하 는 것 을 잊 지 마 세 요.
STEP 5-이메일 보 내기
지금 은 이 프로젝트 의 마지막 이자 가장 중요 한 부분 이다.지금 우 리 는 자바 script 을 사용 하여 이메일 을 보 내야 합 니 다.
우선,emailjs 가방 을 다운로드 해 야 합 니 다.
npm i emails-com
그리고 js 파일 로 이동 하여 라 이브 러 리 와 apikeys 를 가 져 옵 니 다.
src/js/main.jsimport emailjs from 'emailjs-com'import apiKeys from './apikeys'지금 은 이메일 보 내기 기능 을 작성 할 때 입 니 다.
src/js/main.js

const sendEmail = e = >{
  e.preventDefault() emailjs.sendForm('gmail', apiKeys.TEMPLATE_ID, e.target, apiKeys.USER_ID).then(result = >{
    console.log(result.text)
  },
  error = >{
    console.log(error.text)
  })
}

sendform 함 수 는 4 개의 인자 가 있 습 니 다:

당신 의 이메일 ID,여기 있 습 니 다

TEMPLATE_ID 는 apikey 파일 에서 왔 습 니 다

사건 대상 은 당신 의 양식 제출 에서 왔 습 니 다

USER_ID 는 apikey 파일 에서 왔 습 니 다

마지막 으로 폼 을 찾 아 제출 이벤트 모니터 를 추가 합 니 다.
src/js/main.jsconst form = document.querySelector('.form')form.addEventListener('submit',sendEmail)앞에서 언급 한 바 와 같이'preventDefault()'함수 로 인해 속성 검증 이 작 동 하지 않 습 니 다.JS 를 사용 하여 입력 을 검증 하고 제거 해 야 합 니 다.
이상 이 전부 입 니 다.다음은 테스트 해 보 겠 습 니 다.
페이지 의 양식 을 작성 하여 보 냅 니 다.

나 는 이메일 을 받 았 는데,내용 은 바로 우리 의 템 플 릿 과 폼 데이터 에 따라 과장 되 었 다.

위의 그림 을 통 해 모든 변수의 값 이 정확 한 위치 에 채 워 졌 음 을 알 수 있다.
총결산
본문 소 개 를 통 해 JS 로 메 일 을 보 내 는 것 이 어렵 지 않다 는 것 을 알 게 될 것 이다.
emailjs 를 사용 하면 이메일 을 간단하게 보 낼 수 있 습 니 다.
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.