flask_mail将html表单发送到邮箱
程序员文章站
2022-07-08 14:43:55
...
前言：这篇博客以163邮箱为例，介绍怎么将html表单发送到163邮箱！这里先给大家展示实现结果:
接下来，我们就来讲实现啦！
文章目录
（一）配置：
1. flask_mail包安装配置
pip install flask_mail
2. 163邮箱配置
（1）选择并开启 POP3/IMAP/SMTP/Exchange/CardDAV/CalDAV服务
（2）设置客户端授权密码
注：这里大家要记起来，这是用于登录第三方邮件客户端的专用密码，后面程序也会用到
⭐接下来我们就要来写前后端啦，我的文件结构是这样子的:
|- templates
|- mail.html
|- config.py
|- runserver.py
（二）前端页面
1.mail.html
（1）代码
<!DOCTYPE html>
<head>
<title>mail</title>
<style>
.mail {
width: 100%;
height: 580px;
background-color: rgba(57, 179, 255, 0.8);
font-family: 'Arial', Courier, monospace;
font-size: 28px;
color: white;
text-align: center;
overflow: hidden;
}
.mail-item {
margin-top: 50px;
}
.info {
display: flex;
flex-direction: row;
margin-top: 20px;
}
.info_left {
width: 500px;
height: 300px;
margin-left: 120px;
}
.info_right {
text-align: left;
width: 670px;
height: 300px;
margin-left: 50px;
}
.message {
font-size: 26px;
margin-top: 20px;
margin-left: 30px;
padding: 5px;
font-family: Arial, Helvetica, sans-serif;
}
.para {
height: 70px;
}
.para>input {
padding-left: 5px;
}
.send {
color: #39B3FF;
background-color: white;
border: thin;
font-size: 26px;
width: 100px;
height: 45px;
margin-left: 980px;
}
.input {
width: 230px;
height: 28px;
font-size: 24px;
}
.feedback {
width: 100%;
height: 80px;
font-family: 'Arial', Courier, monospace;
font-size: 35px;
font-weight: 900;
text-align: center;
background-color: white;
color: #39B3FF;
}
</style>
</head>
<body>
<div class="mail" id="info">
<form id="form">
<div class="mail-item">
<div class="text">
<p><br style="line-height: 30px" />You can also email us at: aaa@qq.com or fill in our contact form:</p>
</div>
<div class="info">
<div class="info_left">
<p class="para">NAME
<input type="text" class="input" name="user_name" id="user_name" placeholder="NAME">
</p>
<p class="para">EMAIL
<input type="text" class="input" name="user_email" id="user_email" placeholder="EMAIL">
</p>
<p class="para">SUBJECT
<input type="text" class="input" name="user_subject" id="user_subject" placeholder="SUBJECT">
</p>
</div>
<div class="info_right ">
<textarea class="message" name="user_message" id="user_message" cols="45" rows="8" placeholder="MESSAGE"></textarea>
</div>
</div>
<button class="send" id="send" onclick="sendVal()">Send</button>
</div>
</form>
</div>
<div class="feedback" id="feedback">
<p>Looking forward to your feedback!</p>
</div>
</body>
<script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript">
function sendVal() {
console.log("hi")
let sendData = new FormData($("#form")[0])
$.ajax({
url: 'http://127.0.0.1:5000/email',
type: 'POST',
data: sendData,
async: false,
cache: false,
contentType: false,
processData: false,
success: function(returndata) {
alert(returndata);
},
error: function(error) {
alert(error);
}
})
}
</script>
（2）页面
（三）后端处理
1.condig.py
该文件配置了使用的协议信息和发送方和接收方的邮箱信息
# 邮箱信息
# 这是你的邮箱服务器，例如163："smtp.163.com"；QQ："smtp.qq.com"
MAIL_SERVER = "smtp.163.com"
'''
下面是协议使用的端口号
mail_use_tls是994
mail_use_ssl是465
我选择的mail_use_ssl协议，所以MAIL_USE_SSL设置为True,端口号465
'''
MAIL_PORT = "465"
MAIL_USE_SSL = True
# 默认接受方邮箱
MAIL_USERNAME = "aaa@qq.com"
# 客户端授权密码
MAIL_PASSWORD = "yourPassword"
# 默认发送方邮箱，可以是自己，同样也要开启POP3/IMAP/SMTP/Exchange/CardDAV/CalDAV服务
MAIL_DEFAULT_SENDER = "aaa@qq.com"
2.runserver.py
该文件处理前端发送的请求，并实现发送邮件的功能。(具体信息根据功能修改)
from flask_mail import Mail, Message
from flask import Flask,render_template,request
import config
app = Flask(__name__)
app.config.from_object(config)
mail = Mail(app)
TEMPLATES_AUTO_RELOAD = True
SEND_FILE_MAX_AGE_DEFAULT = 0
@app.route('/', methods=['GET','POST'])
def send_mail():
return render_template('mail.html')
#用户发送邮件
@app.route('/email',methods=['POST'])
def email():
body_text="from: "+request.form["user_name"]+" "+request.form["user_email"]+"\n"+request.form["user_message"]
message = Message(subject=request.form["user_subject"],recipients=['aaa@qq.com'],body=body_text)
try:
mail.send(message)
return "亲爱的 "+request.form["user_name"]+" 用户：\n 你的反馈已经送达我们的官方邮箱啦~"
except Exception as e:
print(e)
return "抱歉，网络出错啦！ 请重试！"
else:
return "success"
if __name__ == '__main__':
app.run(debug=True)
3.运行结果
（1）前端提交表单成功
（2）发送邮件成功
（3）查看邮件详情
下一篇： flask_mail发送邮件