一、注册页面渲染
1、获取页面样式渲染模块
链接：https://pan.baidu.com/s/1C06F1EiFjQB_bBXKgk-qDg?pwd=fbds
提取码：fbds
在static文件夹中导入css、js、jQuery等静态资源
在templates文件夹中导入HTML样式
2、在蓝图用户auth.py新建路由，渲染模板
from flask import Blueprint, render_template
@bp.route("/login") #登录
def login():
pass
@bp.route("/register") #注册
def register():
return render_template("register.html")
3、 用户注册页面样式
app.pp运行访问 http://127.0.0.1:5000/auth/register
二、邮箱配置
1、使用Flask-Mail发送邮箱验证码
终端$ pip install flask-mail
2、邮箱配置（QQ邮箱）
# 邮箱配置 MAIL_SERVER = "smtp.qq.com" MAIL_USE_SSL = True MAIL_PORT = 465 MAIL_USERNAME = "你的qq邮箱账号@qq.com" MAIL_PASSWORD = "你的QQ邮箱授权码" #见QQ邮箱官网 MAIL_DEFAULT_SENDER = "你的qq邮箱账号@qq.com"
步骤：在QQ邮箱官网登录邮箱--> 邮箱设置--->常规 ---> 第三方服务(IMAP/SMTP服务) --->生成授权码 ---> 手机短信验证 --->获取授权码进行邮箱配置
exts.py
from flask_mail import Mail mail = Mail()
app.py
from exts import db, mail mail.init_app(app)
3、邮箱测试
auth.py
from exts import mail, db
from flask_mail import Message
@bp.route("/mail/test")
def mail_test():
message = Message(subject="邮箱测试", recipients=["这是收件人邮箱@qq.com"], body="这是一条测试邮件")
mail.send(message)
return "邮件发送成功！" #http://127.0.0.1:5000/mail/test
三、发送验证码
1、获取验证码并校验
auth.py
# bp.route：如果没有指定methods参数，默认就是GET请求
@bp.route("/captcha/email")
def get_email_captcha():
# /captcha/email/<email> 路径传参
# /captcha/[email protected] 字符串传参
email = request.args.get("email")
# 4/6：随机数组、字母、数组和字母的组合
source = string.digits*4
captcha = random.sample(source, 4)
captcha = "".join(captcha)
# I/O：Input/Output
message = Message(subject="问答平台注册验证码", recipients=[email], body=f"您的验证码是:{captcha}")
mail.send(message)
# memcached/redis
# 用数据库表的方式存储
email_captcha = EmailCaptchaModel(email=email,captcha=captcha)
db.session.add(email_captcha)
db.session.commit()
# RESTful API
# {code: 200/400/500, message: "", data: {}}
return jsonify({"code": 200, "message": "", "data": None})
2、创建验证码存储模型
models.py创建模型
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)
#更新数据库模型
# flask db migrate：将orm模型生成迁移脚本
# flask db upgrade：将迁移脚本映射到数据库中
auth.py导入EmailCaptchaModel，db， jsonify
from flask import Blueprint, render_template, jsonify from models import EmailCaptchaModel from exts import mail, db
3、前端点击获取验证码发送请求给后端
获取验证码按钮点击事件（通过id）
<div class="input-group-append">
<button class="btn btn-outline-secondary" type="button" id="captcha-btn">获取验证码</button>
</div>
register.html(引入自定义register.js)
{% block head %}
<script src="{
{ url_for('static', filename='jquery/jquery.3.6.min.js') }}"></script>
<script src="{
{ url_for('static', filename='js/register.js') }}"></script>
{% endblock %}
register.js
function bindEmailCaptchaClick(){
$("#captcha-btn").click(function (event){
// $this：代表的是当前按钮的jquery对象
var $this = $(this);
// 阻止默认的事件
event.preventDefault();
//通过name获取邮箱输入框内容
var email = $("input[name='email']").val();
$.ajax({
// http://127.0.0.1:500
// /auth/captcha/[email protected]
url: "/auth/captcha/email?email="+email,
method: "GET",
success: function (result){
var code = result['code'];
if(code == 200){
var countdown = 5;
// 开始倒计时之前，就取消按钮的点击事件
$this.off("click");
var timer = setInterval(function (){
$this.text(countdown);
countdown -= 1;
// 倒计时结束的时候执行
if(countdown <= 0){
// 清掉定时器
clearInterval(timer);
// 将按钮的文字重新修改回来
$this.text("获取验证码");
// 重新绑定点击事件
bindEmailCaptchaClick();
}
}, 1000);
// alert("邮箱验证码发送成功！");
}else{
alert(result['message']);
}
},
fail: function (error){
console.log(error);
}
})
});
}
// 整个网页都加载完毕后再执行的
$(function (){
bindEmailCaptchaClick();
});
上一篇章：Flask实战开发——问答平台（三）数据库模型-CSDN博客
扫描二维码关注公众号，回复：
17530621 查看本文章
下一篇章：Flask实战开发——问答平台（五）用户注册与登录-CSDN博客
