เมื่อไม่กี่วันก่อน ฉันตัดสินใจทำงานในโปรเจ็กต์ Vue ง่ายๆ และจำเป็นต้องส่งอีเมลผ่านผู้ติดต่อที่ฉันเพิ่งสร้างขึ้น ฉันต้องการรับอีเมลอัตโนมัติทุกครั้งที่มีคนกรอกแบบฟอร์มติดต่อของฉัน
ดังนั้นฉันจึงต้องค้นหาและสะดุดกับ EmailJs ฉันตัดสินใจเขียนบทความนี้เพราะรู้สึกว่าเอกสารของพวกเขาดีมากและใช้งานง่ายมาก ฉันหวังว่ามันจะช่วยใครซักคนที่นั่น :)
มาเริ่มกันเลย!
ในบทความนี้ ผมจะแสดงให้คุณเห็นถึงวิธีการใช้ EmailJS เพื่อส่งอีเมลจากแอปพลิเคชัน Vuejs ของคุณ
ก่อนที่ฉันจะดำเนินการต่อ ฉันคิดว่าคุณได้ติดตั้ง Vue CLI บนคอมพิวเตอร์ของคุณแล้ว เนื่องจากฉันจะสร้างโปรเจ็กต์สาธิตขนาดเล็กด้วย หากไม่เป็นเช่นนั้น คุณอาจต้องการตรวจสอบวิธีการติดตั้งที่นี่
เราจะสร้างโครงการโดยใช้คำสั่งนี้:
vue create vue-emailjs-demo
จากนั้นเราจะได้รับแจ้งพร้อมตัวเลือกให้เลือกค่าที่ตั้งไว้เริ่มต้นหรือเลือกคุณสมบัติด้วยตนเอง เลือก default .
ไดเร็กทอรีโครงการใหม่จะถูกสร้างขึ้น และคุณสามารถไปยังไดเร็กทอรีนี้ได้โดยใช้คำสั่งนี้:
cd vue-emailjs-demoวิธีการติดตั้ง EmailJS
EmailJS ช่วยให้คุณส่งอีเมลโดยใช้เทคโนโลยีฝั่งไคลเอ็นต์เท่านั้น ไม่จำเป็นต้องใช้เซิร์ฟเวอร์ เพียงเชื่อมต่อ EmailJS กับหนึ่งในบริการอีเมลที่รองรับ สร้างเทมเพลตอีเมล และใช้ไลบรารี JavaScript เพื่อทริกเกอร์อีเมล
ก่อนที่เราจะเริ่มเขียนโค้ด คุณจะต้องสร้างบัญชี EmailJS ด้วยบัญชีของคุณ คุณจะสามารถสร้างเทมเพลตอีเมลและเลือกอีเมลที่คุณต้องการให้อีเมลอัตโนมัติไปถึงได้
เมื่อคุณลงชื่อเข้าใช้บัญชีใหม่ คุณจะถูกนำไปยังแดชบอร์ด
วิธีสร้างเทมเพลตอีเมล
เทมเพลตอีเมลสามารถเลือกมีตัวแปรไดนามิกในเกือบทุกฟิลด์ (เช่น หัวเรื่อง เนื้อหา อีเมลถึง ชื่อ FROM และอื่นๆ) พวกมันถูกเติมจากการเรียก JavaScript เราจะเข้าสู่เรื่องนี้ในไม่ช้า
ขั้นแรก มาเพิ่มบริการอีเมลกันก่อน ฉันเลือก Gmail แล้ว แต่คุณสามารถเลือกบริการที่เหมาะกับความต้องการของคุณได้ดีที่สุด
นอกจากนี้ หากคุณไม่ต้องการเริ่มคิดชื่อสำหรับ Service ID . ของคุณ ให้แตะที่ไอคอนค้นหา แล้วระบบจะสร้างขึ้นให้คุณโดยอัตโนมัติ
ต่อไป เราจะสร้างเทมเพลตอีเมลของเรา ไปที่หน้าเทมเพลต สร้างเทมเพลตใหม่ เทมเพลตอีเมลของเราจะกำหนดหัวเรื่องของอีเมล เนื้อหาในอีเมล ตำแหน่งที่ควรส่ง และอื่นๆ
ชุดของวงเล็บปีกกาคู่ที่แสดงด้านบนเช่น {{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 และคุณจะเห็นแบบฟอร์มของคุณ:
เราจะสร้างวิธีการที่เรียกว่า 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 ผู้ใช้ไปยังคลิปบอร์ดของคุณ แล้ววางเมื่อจำเป็นหรือไม่ ตอนนี้คุณต้องการมันจริงๆ! ดังนั้นให้แทนที่ส่วนย่อยนั้นด้วยรายละเอียดที่แท้จริงของคุณ
emailjs.sendForm() คือวิธีที่เราส่งข้อมูลไปยัง EmailJS หลังจากส่ง Service ID, Template ID, User ID และข้อมูลแบบฟอร์มที่ส่งผ่านไปยัง sendEmail() . เรา console.log() พบข้อผิดพลาดใด ๆ กับ catch() บล็อก.
เป็นสิ่งสำคัญที่จะต้องทราบว่า sendForm() ส่งอีเมลตามเทมเพลตอีเมลที่ระบุและข้อมูลแบบฟอร์มที่ส่งผ่าน ดังนั้นตรวจสอบให้แน่ใจว่าชื่ออินพุตของฟอร์มเหมือนกับตัวแปรในเทมเพลต EmailJS ของคุณ
ด้านล่างนี้คือเทมเพลต EmailJS ที่แก้ไขแล้วซึ่งมีชื่อ (ของผู้ส่ง) อีเมล (ของผู้ส่ง) และเนื้อหาข้อความ
แค่นั้นแหละ!
ตรวจสอบ To Email ที่อยู่ในเทมเพลตของคุณ และคุณควรส่งอีเมลไปที่นั่นแล้ว คุณยังสามารถลองใช้ ทดสอบ . ได้ หรือ สนามเด็กเล่น ที่มุมบนขวาของเทมเพลตหากต้องการ
GitHub Repo
คุณสามารถค้นหารหัสสำหรับบทความนี้ในบัญชี GitHub ของฉัน
อย่าลังเลที่จะแบ่งปันบทความนี้หากคุณพบว่ามีประโยชน์ ขอบคุณสำหรับการอ่าน!
