Flask邮箱功能的实现
1.先安装flask-mail的第三方库
- 在pycharm的terminal中输入下面命令就可以完场安装flask-mail第三方库的安装
pip install flask-mail
2.邮箱配置
先开启个人邮箱使其可以作为发送短信的乙方
接下来就是配置邮箱信息
uahzhvnmcphnbbbd
#邮箱配置信息
MAIL_SERVER = 'smtp.qq.com'
MAIL_USE_SSL = True
MAIL_PROT = 465
MAIL_USERNAME = "990637259@qq.com"
MAIL_PASSWORD = "uahzhvnmcphnbbbd"
MAIL_DEFAULT_SENDER = "990637259@qq.com"
端口 账号，密码 其中密码就是我们从qq邮箱获取的，还有默认发送者 其中MAIL_USE_SSL = True这个意思就是表明在加密发送
我们可以在blueprint中的auth写一个示图函数来验证一下
最后就可以发送成功
注意事项：
首先在config.py文件中配置发送邮箱的信息
# uahzhvnmcphnbbbd
#邮箱配置信息
MAIL_SERVER = 'smtp.qq.com'
MAIL_USE_SSL = True
MAIL_PORT = 465
MAIL_USERNAME = "990637259@qq.com"
MAIL_PASSWORD = "uahzhvnmcphnbbbd"
MAIL_DEFAULT_SENDER = "990637259@qq.com"
然后在exts.py中先导入Mail对象，然后创建Mail对象
from flask_mail import Mail
mail = Mail()
最后在app.py文件中导入mail对象
from exts import mail
mail.init_app(app)
这样配置才算完成，就可以进行视图函数的测试了
发送邮箱验证码
根据图片，我们知道我们的需求是，根据用户提供的邮箱号，我们来给这个邮箱号发送验证码，我们做的就是把邮箱发给服务器
string.digit表示“0123456789”的一个字符串
可以借此来构建伪随机四位验证码
**
**
这里采用了第二种方式来确定发送对象
# 1. /captcha/email/ 根据路径传参 用<>来传递参数
#2. /captcha/email?email = 2036801580@qq.com
其中第二种就是在传参以？方式传参，但是因为是get方法，所以下面等式左边的email就是2036801580@qq.com
等式右边的email为uri？后面的email
http://127.0.0.1:5000/auth/captcha/email?email=2036801580@qq.com
email = request.args.get(“email”)
我们获取到验证码后我们需要确保验证码和邮箱账号一样，这样才可以成功注册那么我们需要把验证码和邮箱展示存起来一般有memcached或者redis。其中memcached是直接缓存在内存处，就是断电了，这个验证码和用户邮箱就没有了，redis就相当强大，redis会每过一段时间就会将内存数据备份到硬盘上，但我们这个使用数据库存储
用数据库存储的话，首先得先在数据库里面建一个验含有验证码和用户邮箱一一对应的表，那么分为几部分
第一部分
在Model.py文件中编写建立表catpch_emai
class EmailCaptchaModel(db.Model):
__tablename__ = 'email_captcha'
id = db.Column(db.Integer, primary_key=True, autoincrement=True)
email = db.Column(db.String(100), nullable=False)
captcha = db.Column(db.String(100),nullable=False)
#模型创建好后，要迁移到数据库中 那就三个步骤
# db.init()
# flask db.init()
# flask db migrate
# flask db upgrate
#完成三部曲后导入数据库模型
*** 第二部分***
在接受验证码的代码中把验证码有邮箱放进数据库中
这里得导入EmailCaptchaModel对象
@bp.route("/captcha/email")
def get_email_captcha():#发送验证码 随机的四位
####生成验证码
# 我们有两种传参方式
# /captcha/email/<email> 根据路径传参 用<>来传递参数
#/captcha/email?email=2036801580@qq.com
email = request.args.get("email")
source = 4*string.digits#'0123456789012345678901234567890123456789'
captcha = random.sample(source,4)#随机四位验证码长度
captcha = ''.join(captcha)#把列表变成字符串 就是列表袁术拼接
###发送验证码
message = Message(subject='验证码查收！',recipients = [email],body = f"您的验证码为：{captcha}")
mail.send(message)
# 把邮箱和验证码传入到数据库中
#memcached/redis 缓存 验证码在服务器也得存储一份
#用数据库中存储验证码，偏慢一点
email_catpcha = EmailCaptchaModel(email=email,captcha=captcha)
db.session.add(email_catpcha)
db.session.commit()
#restful api 返回数据统一一个格式
# {code :200/400/500,message:"“，data：{}}
return jsonify({'code':200,"messzge":"",'data':None})
# return f"验证码为{captcha}"
最终会完成验证码和邮箱号的数据库存储
到这里我们完成了登陆页面后端的编写
接下来我们完成前端的处理（点击获取验证码按钮获取邮箱）
获取元素 获取按钮 发送ajasx请求 都需要jquery库
用jquery来绑定邮箱和
在head的blcok里面来写子页面的需要的css，js文件
然后我们可以创建一个js文件然后加载到register.html中的head中然后我们可以用alert来确保加载到register.html中通
1.首先要找到按钮并绑定点击事件，我们可以通过id来查找发送验证码的按钮
$代表jquery对象 可以通过 $(‘#exampleInputEmail1’)来找到id为exampleInputEmail1的标签从而可以获取标签里面的元素
{% extends 'base.html' %}
{% block head %}
<script src = "{{ url_for('static',filename='jquery/jquery.3.6.min.js') }}"></script>
<script src = '{{ url_for('static',filename = 'js/register_new.js') }}'></script>
{% endblock %}
{% block title %}知了传课学习版{% endblock %}
{% block body %}
<div class="container">
<div class="row mt-4">
<div class="col"></div>
<div class="col">
<form method="POST" action="#">
<div class="form-group">
<label for="exampleInputEmail1">邮箱</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" name="email">
<small id="emailHelp" class="form-text text-muted">我们不会把邮箱用于其他用户</small>
</div>
<div class="form-group">
<label for="exampleInputEmail1">验证码</label>
<div class="input-group">
<input type="text" class="form-control" name="captcha">
<div class="input-group-append">
<button class="btn btn-outline-secondary" type="button" id="captcha-btn">获取验证码</button>
</div>
</div>
</div>
<div class="form-group">
<label for="exampleInputEmail1">用户名</label>
<input type="text" class="form-control" name="username">
</div>
<div class="form-group">
<label for="exampleInputPassword1">密码</label>
<input type="password" class="form-control" id="exampleInputPassword1" name="password">
</div>
<div class="form-group">
<label for="exampleInputPassword1">确认密码</label>
<input type="password" class="form-control" name="password_confirm">
</div>
<button type="submit" class="btn btn-primary btn-block">立即注册</button>
</form>
</div>
<div class="col"></div>
</div>
</div>
{% endblock %
由于我们的代码的scripts导向的register_new.js在很上面，在js文件中我们又要需要下面文件的id号，又因为html文件是按照从上到下开始运行的所以如果这样写或报错，我们得在js加上一哥类似于函数的东西，这样可以确保在整个html代码允许完后，再来执行register_new.js
代码
$(function (){})//整个网页加载完成后才执行这个函数
2.js代码中我们要将按钮和click事件绑定起来，绑定我们还是可以用jquery即$来确定按钮标签，具体实现，可以看下面代码
$(function ()//整个网页加载完成后才执行这个函数
{
// $("#captcha-btn")//#代表id 所以表示为找到id = captcha-btn的标签，再给这个标签绑定一个点击事件click 点击时会执行click里面的函数
$("#captcha-btn").click(function (event)//点击是个事件event，事件发生的位置，针对什么元素等等信息全部放在event事件中
{
alert('1111');
event.preventDefault();//阻止 点击发送验证码就提交表单数据
// var email = $('#exampleInputEmail1').val() //通过id获取
var email= $("input[name='email']").val();//获取到了邮箱的input的标签 然后val就可以获取input标签的值
alert(email)
});
});
最后可以看一下运行结果，确实取到了表单袁术
扫一扫
1255
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
