使用element表單組件配合nodemailer和koa實(shí)現(xiàn)以下效果：
-
郵件發(fā)送 系統(tǒng)會(huì)向指定郵箱發(fā)送一封包含驗(yàn)證碼的郵件
-
驗(yàn)證碼判別打開郵箱，生成一封具有圖片婆瓜、驗(yàn)證碼和用戶名稱的郵件，且驗(yàn)證碼僅有10分鐘有效期
首先驗(yàn)證element的ruleForm組件中name和email值全部有效近迁，這里使用Promise.all方法來(lái)為異步函數(shù)執(zhí)行加速代嗤。
//check the name and email must has value
let validateArray = ['name', 'email'];
let error = false;
await Promise.all(
validateArray.map(item => {
return this.$refs.ruleForm.validateField(item, Error => {
if (Error) error = true;
});
})
);
接下來(lái)，如果name和email值全部有效炕淮，沒有error的情況下拆火，則向后端請(qǐng)求'/sendEmail'接口
// send email
if (!error) {
let {
status,
data: { code, msg }
} = await this.$axios.post('/sendEmail', {
name: this.ruleForm.name,
email: this.ruleForm.email
});
}
在后端sendEmail路由的寫法，首先在body接收email和name涂圆，之后調(diào)用nodemailer.createTransport生成一個(gè)郵件socket们镜，這里的STMP_CODE需要在郵箱中設(shè)置開啟STMP轉(zhuǎn)發(fā)服務(wù)時(shí)開啟。接下來(lái)設(shè)置ejs的template 润歉，全部是固定寫法模狭，向ejs中輸入name,code,date三個(gè)變量。之后生成mailOptions 發(fā)送選項(xiàng)踩衩，其中html為之前生成的ejs模板嚼鹉，attachments為本地的圖片，注意每個(gè)圖片以cid屬性來(lái)作為唯一的標(biāo)識(shí)九妈，這里我設(shè)置了cid: 'welcome'反砌，在ejs中可以以<img src="cid:welcome">形式來(lái)引用，之后通過(guò) transporter.sendMail來(lái)發(fā)送郵件萌朱，最后根據(jù)發(fā)送成功服務(wù)器后的回調(diào)函數(shù)設(shè)置redis的哈希鍵值宴树，這里用email:${name}的形式來(lái)作為每一個(gè)用戶的唯一id，當(dāng)用戶在注冊(cè)時(shí)會(huì)調(diào)取這個(gè)鍵值晶疼，來(lái)判斷驗(yàn)證碼是否正確以及是否過(guò)期
router.post('/sendEmail', async (ctx) => {
let { email , name } = ctx.request.body
let transporter = nodemailer.createTransport({
service: 'qq',
port: 465, // SMTP 端口
secureConnection: true, // 使用了 SSL
auth: {
user: '’123456@qq.com',
pass: STMP_CODE,
}
})
//ejs inside template
const template = ejs.compile(fs.readFileSync(path.resolve(__dirname, '../views/email.ejs'), 'utf8'));
let code = Math.random().toString().slice(2, 6)
const html = template({
name,
code,
date: new Date().toLocaleDateString()
});
let mailOptions = {
from: '美妝小鋪古風(fēng)版 123456@qq.com',
to: email,
subject: 'Hello',
html,
attachments: [{
filename: 'welcome.jpg',
path: path.resolve(__dirname, '../views/welcome.jpg'),
cid: 'welcome'
}]
}
let err = ''
await transporter.sendMail(mailOptions, (error, info) => {
err = error
});
if (err) {
ctx.body = {
code: 4004,
msg: err
}
} else {
redis.hmset(`email:${name}`, 'name', name, 'code', code, 'max-age', 600000, 'startTime', new Date().getTime())
ctx.body = {
code: 2000,
msg: "郵件已發(fā)送,驗(yàn)證碼十分鐘內(nèi)有效"
}
}
})
ejs模板編寫的十分簡(jiǎn)單
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div class="warpper">
<div class="body">
<img src="cid:welcome">
<p class="title">尊敬的
<%= name %> 您好!</p>
<p class="welcome">歡迎您加入美妝小鋪</p>
<p class="code">驗(yàn)證碼:
<%= code %>
</p>
<p class="thank">感謝您對(duì)美妝小鋪的關(guān)注與支持酒贬！</p>
<p class="time">
<%= date %>
</p>
</div>
</div>
</body>
</html>
