EmailJS 一款不需要服务端实现的邮件发送【全程图文】

以下内容全程图文麻麻不用担心看不懂了

今天天气晴，室温凉爽，又是辛苦搬砖的一天

分享一下今天的砖头

让我们废话不多说直接开撸

一、打开地址eamilJs 管理后台直接登录

dashboard.emailjs.com/sign-in

如果有账户直接登录，不过我相信看到我这篇文章的应该都没账户吧 那么点击红框內链接注册即可

注册这块小伙伴么注意了，可能就会有人问道：咦我这块咋没这个人机身份验证呀此刻你不要着急，不要慌张，轻轻的把你的vpn打开 它就出来了毕竟国外大佬整的

二、创建services 获取servicesID

注册完了就去登录登录进来就会看到这个页面，点击图内红框add 添加services 这个东西也就是说之后发邮箱会以谁的邮箱去发出

这块一般是选择第一个邮箱登录是谷歌邮箱 如果有大佬有其他邮箱的，那么点其他即可

进入了这步之后点击 connect account 点击连接账户

这块如果有已经登录的谷歌邮箱账户那么直接点击就ok，没有登录的点击使用其他账户，如果没有谷歌邮箱那么就去注册一个，谷歌邮箱注册简单我就不多介绍了，不然有人就说这文章水分太多全是废话了

三、创建Templates 获取TemplatesID

左侧菜单栏第二个就是模板管理了，点击create new templates 创建新模板，创建完成就如同图中一样出现一个模板，红框內就是tmplatesID了 之后会用到

创建模板也就不多说了 变量写法{{message}}

创建完了在列表点击刚刚创建的那个模板 然后点红框內playground在云上运行，打开这个的目的是去复制代码滴，搬砖到自己项目小卡车上

这里有3块砖 html css js 都把他们搬自己卡车即可，注意红框內需要改成自己的id，serviceID，templateID改成刚刚创建的那个serivce跟template就好

下面给大家补上几种安装方式

1. 1.npm安装$ npm install emailjs-com --save
2. bower安装$ bower install emailjs-com --save
3. cdn引入<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/emailjs-com@2/dist/email.min.js"></script>

最后附上代码，刚刚网络不好的可能点击playground进不去看不到代码

vue

<template>
  <form class="contact-form" @submit.prevent="sendEmail">
    <label>Name</label>
    <input type="text" name="user_name">
    <label>Email</label>
    <input type="email" name="user_email">
    <label>Message</label>
    <textarea name="message"></textarea>
    <input type="submit" value="Send">
  </form>
</template>

<script>
import emailjs from 'emailjs-com';

export default {
  methods: {
    sendEmail: (e) => {
      emailjs.sendForm('YOUR_SERVICE_ID', 'YOUR_TEMPLATE_ID', e.target, 'YOUR_USER_ID')
        .then((result) => {
            console.log('SUCCESS!', result.status, result.text);
        }, (error) => {
            console.log('FAILED...', error);
        });
    }
  }
}
</script>

cdn js

<!--html-->
<form id="form">
  <div class="field">
    <label for="name">name</label>
    <input type="text" name="name" id="name">
  </div>
  <div class="field">
    <label for="telephone">telephone</label>
    <input type="text" name="telephone" id="telephone">
  </div>
  <div class="field">
    <label for="message">message</label>
    <input type="text" name="message" id="message">
  </div>

  <input type="submit" id="button" value="Send Email" >
</form>

<script type="text/javascript"
  src="https://cdn.jsdelivr.net/npm/emailjs-com@2/dist/email.min.js"></script>

<script type="text/javascript">
  emailjs.init('YOUR_USER_ID')
</script>

<script>
const btn = document.getElementById('button');

document.getElementById('form')
 .addEventListener('submit', function(event) {
   event.preventDefault();

   btn.value = 'Sending...';

   const serviceID = 'YOUR_SERVICE_ID';
   const templateID = 'YOUR_TEMPLATE_ID';

   emailjs.sendForm(serviceID, templateID, this)
    .then(() => {
      btn.value = 'Send Email';
      alert('Sent!');
    }, (err) => {
      btn.value = 'Send Email';
      alert(JSON.stringify(err));
    });
});
</script>

<style>
.field {
  margin-bottom: 10px;
}

.field label {
  display: block;
  font-size: 12px;
  color: #777;
}

.field input {
  display: block;
  min-width: 250px;
  line-height: 1.5;
  font-size: 14px;
}

input[type="submit"] {
  display: block;
  padding: 6px 30px;
  font-size: 14px;
  background-color: #4460AA;
  color: #fff;
  border: none
}
</style>

有啥不清楚的可以在下方评论~~

有更好更简单的方法也欢迎在下方评论 互相学习~~