Vài ngày trước, tôi quyết định làm một dự án Vue đơn giản và cần gửi email thông qua một liên hệ từ tôi vừa tạo. Tôi muốn nhận được một email tự động mỗi khi ai đó điền vào biểu mẫu liên hệ của tôi.
Vì vậy, tôi đã phải tìm kiếm và tình cờ trên EmailJs. Tôi quyết định viết bài này vì tôi cảm thấy tài liệu của họ rất tuyệt và nó thực sự dễ sử dụng. Tôi cũng hy vọng nó sẽ giúp ai đó ngoài kia :)
Hãy bắt đầu!
Trong bài viết này, tôi sẽ hướng dẫn bạn cách sử dụng EmailJS để gửi email từ ứng dụng Vuejs của bạn.
Trước khi tiếp tục, tôi giả sử bạn đã cài đặt Vue CLI trên máy tính của mình vì tôi sẽ tạo một dự án demo nhỏ với nó. Nếu không, bạn có thể muốn xem cách cài đặt nó tại đây.
Chúng tôi sẽ tạo dự án bằng lệnh này:
vue create vue-emailjs-demo
Sau đó, chúng tôi sẽ được nhắc với tùy chọn chọn giá trị đặt trước mặc định hoặc chọn các tính năng theo cách thủ công. Chọn default .
Một thư mục dự án mới sẽ được tạo và bạn có thể điều hướng vào đó bằng lệnh sau:
cd vue-emailjs-demoCách cài đặt EmailJS
EmailJS chỉ giúp bạn gửi email bằng công nghệ phía máy khách. Không cần máy chủ - chỉ cần kết nối EmailJS với một trong các dịch vụ email được hỗ trợ, tạo mẫu email và sử dụng thư viện JavaScript của chúng để kích hoạt email.
Trước khi bắt đầu viết mã, bạn cần tạo một tài khoản EmailJS. Với tài khoản của mình, bạn có thể tạo các mẫu email và chọn email mà bạn muốn các email tự động của mình chuyển đến.
Sau khi đăng nhập vào tài khoản mới của mình, bạn sẽ được chuyển đến trang tổng quan.
Cách tạo Mẫu Email
Các mẫu email có thể tùy chọn chứa các biến động trong hầu hết mọi trường (ví dụ:chủ đề, nội dung, ĐẾN email, Tên TỪ, v.v.). Chúng được điền từ lệnh gọi JavaScript. Chúng tôi sẽ đi vào vấn đề này trong thời gian ngắn.
Đầu tiên, hãy thêm một dịch vụ email. Tôi đã chọn Gmail nhưng bạn có thể tự do chọn bất kỳ dịch vụ nào phù hợp nhất với nhu cầu của mình.
Ngoài ra, nếu bạn không muốn bắt đầu nghĩ về một cái tên cho Service ID của mình , hãy nhấn vào biểu tượng tìm kiếm và nó sẽ được tạo tự động cho bạn.
Tiếp theo, chúng tôi sẽ tạo mẫu email của mình. Điều hướng đến trang mẫu. Tạo một mẫu mới. Mẫu Email của chúng tôi sẽ xác định chủ đề email của chúng tôi, nội dung của nó, nơi gửi, v.v.
Bộ dấu ngoặc nhọn kép được hiển thị ở trên như {{from_name}} là các biến. Khi người dùng điền vào biểu mẫu của chúng tôi, chúng tôi sẽ chuyển thông tin đó đến EmailJS bằng cách sử dụng các biến này.
Dưới đây là phần giải thích nhỏ về các trường có sẵn trong mẫu của chúng tôi:
- Chủ đề: Chủ đề của email.
- Nội dung: nội dung của email. Chúng tôi sẽ chuyển thông điệp của người dùng, tên của họ và địa chỉ trả hàng của họ ở đây.
- Tới Email: Chứa đích của email này.
- Từ Tên : Đây là tùy chọn. Nhưng bạn có thể viết tên của mình ở đó.
- Từ Email: Địa chỉ email của người gửi sẽ hiển thị cho người nhận. Nếu hộp kiểm địa chỉ email mặc định được bật thì EmailJS sẽ sử dụng địa chỉ email được liên kết với dịch vụ email đang sử dụng.
- Trả lời: Đặt địa chỉ email để gửi thư trả lời.
- BCC và CC: Hai trường này thường được sử dụng để gửi một bản sao của tin nhắn đến những người mà bạn đã liệt kê.
Reply To,BCC and CCsẽ không được sử dụng trong hướng dẫn này vì chúng tôi muốn giữ cho nó đơn giản nhất có thể. Nếu cần thêm thông tin, bạn có thể xem tài liệu EmailJS tại đây.
Lưu ý:Tại một điểm trong bài viết này, chúng tôi sẽ sử dụng Service ID và Template ID . Chúng tôi cũng sẽ cần một User ID . Bạn có thể tìm thấy User ID của mình trong tích hợp một phần của trang tổng quan. Bạn có thể sao chép các chi tiết vào khay nhớ tạm của mình và dán chúng khi cần.
Cách cài đặt EmailJS trong ứng dụng của bạn
Bây giờ chuyển sang mã :) Để cài đặt EmailJS trong ứng dụng của bạn, hãy sử dụng lệnh sau:
npm install emailjs-com --saveChúng tôi sẽ gửi email từ một biểu mẫu liên hệ rất đơn giản. Nó sẽ thu thập dữ liệu bao gồm:tên (của người gửi), email (của người gửi), và nội dung thư. Công cụ đơn giản!
Bạn có thể chỉnh sửa HelloWorld.Vue thành phần được tạo tự động cho chúng tôi khi chúng tôi sử dụng Vue CLI hoặc bạn có thể tạo một thành phần mới có tên ContactForm.vue . Tôi sẽ làm phần sau.
Dưới đây, chúng tôi sẽ xây dựng thành phần biểu mẫu liên hệ, ContactForm.vue .
Hãy bắt đầu với 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>Giải thích đánh dấu của chúng tôi
Như tôi đã đề cập trước đó, chúng tôi sẽ gửi email từ một biểu mẫu liên hệ rất đơn giản. Vì vậy, hãy tạo một div phần tử sẽ chứa nội dung biểu mẫu của chúng tôi. Chúng tôi sẽ thêm kiểu vào biểu mẫu của mình, vì vậy hãy thêm một lớp container đến div phần tử.
<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>Bạn có thể khởi động máy chủ của mình bằng lệnh:
npm run serveBây giờ, hãy mở trình duyệt của bạn lên localhost:8080 và bạn sẽ thấy biểu mẫu của mình:
Chúng tôi cũng sẽ tạo một phương thức có tên là sendEmail xử lý việc gửi dữ liệu của chúng tôi. Nhưng trước khi làm điều đó, chúng ta cần nhập emailjs trong hồ sơ của chúng tôi.
Thêm dòng sau ngay dưới script :
import emailjs from 'emailjs-com';
Dưới đây là phần còn lại của mã cần thiết trong script của chúng tôi :
<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>Mã này đang làm gì
Tôi đã sử dụng try...catch ở trên nhưng bạn không nhất thiết phải sử dụng nó. Hãy nhớ khi tôi yêu cầu bạn sao chép các chi tiết ID dịch vụ, ID mẫu và ID người dùng của bạn vào khay nhớ tạm và dán chúng vào khi cần? Vâng, bạn hoàn toàn cần chúng ngay bây giờ! Vì vậy, hãy thay thế phần đó của đoạn mã bằng các chi tiết thực tế của bạn.
emailjs.sendForm() là cách chúng tôi gửi dữ liệu đến EmailJS sau khi chuyển ID dịch vụ, ID mẫu, ID người dùng và dữ liệu biểu mẫu đã được chuyển vào sendEmail() . Chúng tôi console.log () bất kỳ lỗi nào gặp phải với catch() khối.
Điều quan trọng cần lưu ý là sendForm() gửi email dựa trên mẫu email được chỉ định và dữ liệu biểu mẫu đã chuyển. Vì vậy, hãy đảm bảo rằng tên đầu vào biểu mẫu của bạn giống với biến trong mẫu EmailJS của bạn.
Dưới đây là mẫu EmailJS đã sửa đổi của tôi với tên (của người gửi), email (của người gửi) và nội dung thư.
Vậy là xong!
Kiểm tra To Email địa chỉ bao gồm trong mẫu của bạn và bạn sẽ có email của bạn được gửi đến đó. Bạn cũng có thể thử nghiệm với Kiểm tra nó hoặc sân chơi ở góc trên bên phải của mẫu nếu bạn muốn.
GitHub Repo
Bạn có thể tìm thấy mã cho bài viết này trong tài khoản GitHub của tôi.
Hãy chia sẻ bài viết này nếu bạn thấy nó hữu ích. Cảm ơn vì đã đọc!