背景
之前看着邮件的小按钮，只能展示邮箱，不能发消息
如图
虽然这个简陋的网站也没人访问，但是如果我是游客进来也不会去发送邮件反馈，打开邮箱去编辑消息，太繁琐，很消耗体力。
于是我就想着可以编辑消息发送给我。由于邮箱免费
所以反馈的信息我这边就通过自己发送给自己。
效果
前端
传递一个object给抽屉子组件，控制打开关闭，添加一个表单的非空校验即可
<template>
<!-- 测试-->
<!-- 抽屉-->
<el-drawer
:title="msgDrawTitle"
:visible.sync="drawObj.show"
:direction="direction"
v-loading="loading"
element-loading-text="正在发送邮件..."
element-loading-spinner="el-icon-loading"
:before-close="handleDrawClose"
>
<div class="email-container">
<div class="email-content">
<el-form
ref="emailForm"
:model="emailForm"
:rules="emailForm.rules"
label-width="80px"
>
<el-form-item label="标题" prop="title">
<el-input placeholder="标题" v-model="emailForm.title" clearable>
</el-input>
</el-form-item>
<el-form-item label="邮箱" prop="email">
<el-input placeholder="邮箱" v-model="emailForm.email" clearable>
</el-input>
</el-form-item>
<el-form-item label="内容" prop="content">
<el-input
type="textarea"
:autosize="{ minRows: 2, maxRows: 4 }"
placeholder="请输入邮件内容"
v-model="emailForm.content"
clearable
>
</el-input>
</el-form-item>
<div class="email-submit">
<el-button type="primary" @click="sendEmail('emailForm')"
>发送</el-button
>
</div>
</el-form>
</div>
<div class="email-footer">
<p>联系邮箱</p>
<p>1432448610@qq.com</p>
</div>
</div>
</el-drawer>
</template>
<script>
//
import axios from "axios";
export default {
props: {
drawObj: Object,
},
data() {
return {
msgDrawTitle: "~邮件沟通~",
direction: "rtl",
msgDraw: false,
baseUrl: "/api/",
basePath: "send-email/",
loading: false,
emailForm: {
title: "",
email: "",
content: "",
rules: {
title: [
{
type: "string",
required: true,
message: "标题不能为空",
trigger: "blur",
},
],
email: [
{
type: "string",
required: true,
message: "邮件不能为空",
trigger: "blur",
},
{
validator: (callback, value) => {
if (value) {
// 验证邮箱
let patter =
/^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/;
let testEmail = patter.test(value);
if (!testEmail) {
return Promise.reject("邮箱格式有误");
}
}
return Promise.resolve("");
},
trigger: "blur",
},
],
content: [
{
type: "string",
required: true,
message: "内容不能为空",
trigger: "blur",
},
],
},
},
};
},
methods: {
//关闭抽屉
handleDrawClose() {
const that = this;
that.drawObj.show = false;
},
// 发送消息
sendEmail(formName) {
// 发送email内容
try {
const that = this;
that.loading = true;
that.$refs[formName].validate((valid) => {
if (valid) {
const params = {
title: that.emailForm.title,
email: that.emailForm.email,
content: that.emailForm.content,
};
try {
axios.post(that.baseUrl + that.basePath, params).then((res) => {
console.log(res);
if (
res &&
res.data &&
res.data.code &&
res.data.code === 20000
) {
that.loading = false;
that.$message({
message: "邮件发送成功！",
type: "success",
});
that.drawObj.show = false;
} else {
that.loading = false;
that.$message({
message: "邮件发送失败！",
type: "warning",
});
}
});
} catch (r) {
that.loading = false;
throw Error(r);
}
} else {
that.loading = false;
}
});
} catch (r) {
that.loading = false;
throw Error(r);
}
},
},
};
</script>
<style>
.email-container {
}
.email-content {
margin: 10px;
}
.email-submit {
float: right;
}
.email-title,
.email-email {
width: 50%;
margin: 10px;
display: block;
}
.email-footer {
float: left;
width: 100%;
margin-left: 30px;
text-align: left;
font-size: 12px;
}
</style>
后端
前提需要去qq邮箱获取smtp的授权码
from django.http import JsonResponse
from email.mime.text import MIMEText
from email.utils import formataddr
from email.header import Header
import smtplib,json
def postEmialMsg(request):#发送邮件
if request.method=='POST':
try:
reqData=json.loads(request.body.decode('utf-8'))
title=reqData['title']#获取page
email=reqData['email']
content=reqData['content']
if sendEmail(title,email,content):
return JsonResponse({'code': 20000, 'msg': '发送成功',"data":reqData})
return JsonResponse({'code': 0, 'msg': '发送失败',"data":""}) # 返回json数据
except Exception as e:
print(e)
data = {'code': 0, 'msg': str(e),"data":""}
return JsonResponse(data) # 返回json数据
else:
return JsonResponse({
"code":50000,
"data":"",
"msg":'this is a get request'
}) # 返回json数据
# 发送邮箱
def sendEmail(title,email,content):# 发送
ret = True
my_sender = '****' # 发件人邮箱账号
my_pass = '******' # 授权码
my_user = '***' # 收件人邮箱账号，我这边发送给自己
try:
msg = MIMEText(content, 'html', 'utf-8')
msg['From'] = formataddr([email, my_sender]) # 括号里的对应发件人邮箱昵称、发件人邮箱账号
msg['To'] = formataddr(["网站邮箱", my_user]) # 括号里的对应收件人邮箱昵称、收件人邮箱账号
msg['Subject'] = Header(title, 'utf-8') # 邮件的主题，也可以说是标题
server = smtplib.SMTP_SSL("smtp.qq.com", 465) # 发件人邮箱中的SMTP服务器，端口是25
server.login(my_sender, my_pass) # 括号中对应的是发件人邮箱账号、授权码
server.sendmail(my_sender, [my_user, ], msg.as_string()) # 括号中对应的是发件人邮箱账号、收件人邮箱账号、发送邮件
server.quit() # 关闭连接
except Exception as e: # catch
print(e)
ret = False
return ret仓库
前端：https://gitcode.net/qq_38870145/myblogvue_django
后端：https://gitcode.net/qq_38870145/myblog_back_django
结尾
感谢阅读
