flask入门-4.项目实战

4. 项目实战1

1. 问答平台项目结构搭建

项目结构

config.py

hostname = "127.0.0.1"
port = 3306
username = "root"
password = "root"database = "flask_qa"# 在 app.config 中设置连接数据库的信息
SQLALCHEMY_DATABASE_URI = f"mysql+pymysql://{username}:{password}@{hostname}:{port}/{database}?charset=utf8mb4"

exts.py

扩展文件，先预定义db

from flask_sqlalchemy import SQLAlchemy
# 扩展文件，先预定义db
# 避免出现循环引用, 比如将db=db = SQLAlchemy(app)放入app.py中, modules 实体类中需要引用 db, 而app.py中需要导入实体类, 出现了循环引用
# 如果在此处定义 db=db = SQLAlchemy(app) , 则会引用 app.py文件, 而 modules 实体类中需要引用 db, 也相当于引用了 app.py , app.py中需要导入实体类, 又会出现循环引用
# 因此此处预定义, 从而 实体类中引用该文件, app.py 中引用实体类 , 并在app.py中初始化db的配置
db = SQLAlchemy()

实体类定义（modules包下：）：

User.py

from exts import db
from datetime import datetimeclass UserModel(db.Model):__tablename__ = 'user'id = db.Column(db.Integer, primary_key=True, autoincrement=True)username = db.Column(db.String(100), nullable=False)password = db.Column(db.String(100), nullable=False)email = db.Column(db.String(100), nullable=False, unique=True)join_time = db.Column(db.DateTime, default=datetime.now)

视图定义（blueprints包下）：

autho.py

from flask import Blueprint# 初始化, 定义该视图名称和访问前缀
bp = Blueprint('auth', __name__, url_prefix='/auth')# 相当于访问 /auth/login
@bp.route('/login')
def login():pass

qa.py

from flask import Blueprint# 初始化, 定义该视图名称和访问前缀
bp = Blueprint('qa', __name__, url_prefix='/qa')

最后在app.py中进行整合：

from flask import Flask
import config
from exts import db# 导入自定义的视图
from buleprints.autho import bp as auth_bp
from buleprints.qa import bp as qa_bp# 导入定义的实体类
from modules.User import UserModel
from flask_migrate import Migrateapp = Flask(__name__)# 绑定数据库的配置文件，自动读取配置信息
app.config.from_object(config)
# 初始化db的配置
db.init_app(app)# 绑定自定义的视图
app.register_blueprint(auth_bp)
app.register_blueprint(qa_bp)# 将定义的实体类模型映射到数据库中
migrate = Migrate(app, db)
# 然后在控制台 flask db init, flask db migrate, flask db [e-mail]('/')
def hello_world():  # put application's code herereturn 'Hello World!'if __name__ == '__main__':app.run()

2. 模板渲染

注册登录页面模板渲染

3. flask 发送邮箱验证码

3.1 邮箱设置

qq邮箱:

设置->账户->POP3/IMAP/SMTP/Exchange/CardDAV/CalDAV服务

开启 POP3/SMTP服务

3.2 项目文件配置-发送验证码到邮箱

第一步，下载 flask_mail 包

pip install flask-mail

config.py

# 发送邮件的相关配置
MAIL_SERVER = "smtp.qq.com"
MAIL_USE_SSL = True
MAIL_PORT = 465
MAIL_USERNAME = "[e-mail]"
MAIL_PASSWORD = "vbjpvdzrzzlhdfca"
MAIL_DEFAULT_SENDER = "[e-mail]"

exts.py 中 预定义（作用和db的预定义一样）

from flask_sqlalchemy import SQLAlchemy
# 扩展文件，先预定义db
# 避免出现循环引用, 比如将db=db = SQLAlchemy(app)放入app.py中, modules 实体类中需要引用 db, 而app.py中需要导入实体类, 出现了循环引用
# 如果在此处定义 db=db = SQLAlchemy(app) , 则会引用 app.py文件, 而 modules 实体类中需要引用 db, 也相当于引用了 app.py , app.py中需要导入实体类, 又会出现循环引用
# 因此此处预定义, 从而 实体类中引用该文件, app.py 中引用实体类 , 并在app.py中初始化db的配置
db = SQLAlchemy()from flask_mail import Mailmail = Mail()

app.py 中 初始化

# 绑定数据库的配置文件，自动读取配置信息
app.config.from_object(config)
# 初始化db的配置
db.init_app(app)
# 初始化邮箱相关配置
mail.init_app(app)

autho.py 中测试

from flask import Blueprint
from flask_mail import Message
from exts import mail# 初始化, 定义该视图名称和访问前缀
bp = Blueprint('auth', __name__, url_prefix='/auth')# 相当于访问 /auth/login
@bp.route('/login')
def login():[e-mail]('/mail/test')
def mail_test():message = Message(subject='发送邮件测试', recipients=["[e-mail]"], body="测试邮件")mail.send(message)return "success"

3.3 验证码的生成与存储

因为需要将验证码存储到数据库中，因此需要先创建实体类 EmailCaptch.py

from exts import dbclass 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)

在 autho.py 中 请求 /autho/captch/email 会执行下面的方法，生成验证码并发送到对应的邮件中，并将生成的验证码存储到数据库中

# 获取验证码
@bp.route('/captch/email')
def get_email_captch():# 请求方式 captch/email/<email># captch/email?email=[e-mail]# 通过request获取请求的参数email = request.args.get('email')# 生成验证码# 验证码为4个随机数字的组合source = string.digits*4captch = random.sample(source, 4)   # 此时captch为列表captch = "".join(captch)# 发送验证码message = Message(subject='发送邮件测试', recipients=[email], body=f"验证码是:{captch}")mail.send(message)# 将验证码存储到数据库中email_captch = EmailCaptchaModel(email=email, captcha=captch)db.session.add(email_captch)db.session.commit()# 统一对前端请求的返回信息，采用 RESTFUL 的形式# {"code":200, "message":"", "data":None}return jsonify({"code":200, "message": "", "data":None})

进行测试：访问 127.0.0.1:5000/auth/captch/email?email=[e-mail]

3.4 前端请求验证码

register.html页面

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="{{ url_for('static', filename='js/jquery-3.6.3.js') }}"></script><script src="{{ url_for('static', filename='js/register.js') }}"></script>
</head>
<body>
<form><div><input type="text" name="email"></div><button name="captcha-btn" id="captcha-btn">获取验证码</button>
</form></body>
</html>

register.js 页面

// 定义绑定 发送验证码按钮 的函数
function bindEmailCaptchaClick(){$("#captcha-btn").click(function (event) {//    $this, 代表的是当前按钮的 jquery 对象var $this = $(this)//    阻止默认事件event.preventDefault()console.log("1111")//    获取输入的邮箱let email = $("input[name='email']").val()//    点击发送验证码按钮后，发送ajax请求$.ajax({// 根目录 : http:127.0.0.1:5000// 请求路径为 : /auth/captcha/email?email=[e-mail]: "/auth/captch/email?email="+email,method: "GET",// 如果请求成功, 服务器会返回结果success: function(result){var code = result['code']if (code == 200){// 说明请求成功// 开始倒计时// 进行倒计时之前, 需要先取消按钮的点击事件$this.off("click")var countdown = 60 // 倒计时60s// 使用 setInterval 定义计时器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)}})})
}//先加载完整个页面文档后, 再加载js函数
$(function () {bindEmailCaptchaClick()
})

3.5 前端提交数据验证和保存

首先下载 flask-wtf 包, 该包包含对表单 form 的相关处理

pip install -i https://pypi.tuna.tsinghua.edu.cn/simple flask-wtf

其次在配置文件中配置 密钥

config.py

# flask_wtf 进行对前端传递到服务器的数据验证
# 需要在配置文件中设定 关键字
SECRET_KEY = "qwoehavnOEJVIN "

然后定义对应的表单验证类

注册表单对应 RegisterForm 类

form.py 中

import wtforms
from wtforms.validators import Email, Length, EqualTo
from modules.User import UserModel
from modules.EmailCaptch import EmailCaptchaModel
# 用来验证前端提交的表单数据是否符合要求
class RegisterForm(wtforms.Form):email = wtforms.StringField(validators=[Email(message="邮箱格式错误")])captcha = wtforms.StringField(Length(min=4, max=4, message="验证码格式错误"))username = wtforms.StringField(Length(min=3, max=20, message="用户名格式错误"))password = wtforms.StringField(Length(min=3, max=20, message="密码格式错误"))password_confirm = wtforms.StringField(validators=[EqualTo("password")])# 自定义验证# 判断邮箱是否被注册def validate_email(self, field):email = field.datauser = UserModel.query.filter_by(email=email).first()if user:raise wtforms.ValidationError(message="该邮箱已被注册")# 验证验证码是否正确def validate_captcha(self, field):captcha = field.dataemail = self.email.datacaptcha_model = EmailCaptchaModel.query.filter_by(email=email, captcha=captcha).first()if not captcha_model:raise wtforms.ValidationError(message="邮箱或验证码错误")

最后服务器对前端提交的数据进行处理, 并保存到数据库中

autho.py

@bp.route('/register', methods=['GET', 'POST'])
def register():# 默认是get请求if request.method == 'GET':return render_template('register.html')else:# 验证用户提交的邮箱和验证码是否正确# 使用flask-wtf: wtforms 进行表单验证form = RegisterForm(request.form)if form.validate():# 验证成功, 将提交的数据存储到数据库中email = form.email.datausername = form.username.datapassword = form.password.datauser = UserModel(email=email, username=username, password=generate_password_hash(password))db.session.add(user)db.session.commit()return redirect('/auth/login')else:# 验证失败print(form.errors)return "fail"

4. 登录

首先定义一个和登录表单对应的验证类 loginForm

form.py 中

class loginForm(wtforms.Form):email = wtforms.StringField(validators=[Email(message="邮箱格式错误")])password = wtforms.StringField(Length(min=3, max=20, message="密码格式错误"))

在 autho.py 中对登录请求进行处理

# 相当于访问 /auth/login
@bp.route('/login', methods=['GET', 'POST'])
def login():if request.method == 'GET':return render_template("login.html")else:form = LoginForm(request.form)if form.validate():# 验证成功, 将提交的数据存储到数据库中email = form.email.datapassword = form.password.data# 数据库查找user = UserModel.query.filter_by(email=email).first()if not user:print("该用户不存在")return redirect(url_for('auth.login'))# 如果用户存在, 判断密码是否正确# check_password_hash(arg1, arg2) 第一个参数是加密后的密码, 第二个参数是用户通过前端传递过来的密码if check_password_hash(user.password, password):# 如果密码正确, 通过cookie存储用户的id, 下一次用户访问服务器时会顺带着携带cookie, 从而可以通过cookie识别用户的身份# flask 中的session, 是经过加密后存储在cookie中的session['user_id'] = user.idreturn redirect("/")    # 跳转到首页else:print("密码错误")return redirect(url_for("auth.login"))else:# 验证失败print(form.errors)return redirect(url_for("auth.login"))

5. 钩子函数

app.py

# 钩子函数
# before_request/before_first_request/after_request# 在调用视图函数处理请求前先执行该方法
# 在视图函数之前，将一些后面需要用到的数据先处理好，方便视图函数使用
@app.before_request
def my_before_request():user_id = session.get("user_id")if user_id: # 判断是否授权user = UserModel.query.filter_by(user_id)# 保存到全局变量中setattr(g, "user", user)else:setattr(g, "user", None)# 上下文处理器
# 使用这个钩子函数，必须返回一个字典。
# 这个字典中的值在所有模版中都可以使用。
# 如果一些在很多模版中都要用到的变量，那么就可以使用这个钩子函数来返回，而不用在每个视图函数中的render_template中去写，从而让代码更加简洁和好维护。
@app.context_processor
def my_context_processor():return {"user", g.user}

钩子函数可以用来在执行视图函数之前, 判断用户是否授权

6. 切换登录状态

首先钩子函数判断用户是否授权, 并且在上下文处理器中返回了用户信息

然后在 base.html 中

<ul class="navbar-nav">{% if user %}<li class="nav-item"><a class="nav-link" href="#">{{user.username}}</a></li><li class="nav-item"><a class="nav-link" href="{{ url_for('auth.logout') }}">退出登录</a></li>{% else %}<li class="nav-item"><a class="nav-link" href="{{url_for('auth.login')}}">登录</a></li><li class="nav-item"><a class="nav-link" href="{{url_for('auth.register')}}">注册</a></li>{% endif %}</ul>

在 autho.py 中，定义退出登录的视图函数

@bp.route('logout')
def logout():# 清楚cookiesession.clear()return redirect("/")

7. 实现发布问题功能

7.1 创建问题的实体类

QuestionModel.py

from exts import db
from datetime import datetime
from User import UserModelclass QuestionModel(db.Model):__tablename__ = 'question'id = db.Column(db.Integer, primary_key=True, autoincrement=True)title = db.Column(db.String(100), nullable=False)content = db.Column(db.Text, nullable=False)create_time = db.Column(db.DateTime, default=datetime.now)# 每一个问题都对应一个用户, 一个用户可以发布多个问题, 因此需要外键author_id = db.Column(db.Integer, db.ForeignKey("user.id"))# 关联 question 和 user 表, 从而可以通过 QuestionModel 的对象 questionModel的 questionModel.author的形式访问该问题属于的用户author = db.relationship(UserModel, backref="questions")

7.2 对前端提交的问题表单进行验证

对应的表单验证类 QuestionForm

form.py

class QuestionForm(wtforms.Form):title = wtforms.StringField(validators=[Length(min=3, max=20, message="标题格式错误")])content = wtforms.StringField(validators=[Length(min=3,  message="内容格式错误")])

7.3 后端对应的视图函数对请求进行处理

qa.py

@bp.route('/qa/publish_question', methods=['GET', 'POST'])
def publish_question():if request.method == 'GET':return render_template("publish_question.html")else:form = QuestionForm(request.form)# 进行表单验证if form.validate():title = form.title.datacontent = form.content.data# 保存到数据库中question = QuestionModel(title=title, content=content, author = g.user)db.session.add(question)db.session.commit()# 应该跳转到详情页面return redirect("/")else:print(form.errors)return redirect(url_for("qa.publish_question"))

8. 实现登录装饰器

登录装饰器的作用：

• 没有登录的用户无法通过像 http://127.0.0.1:5000/qa/publish_question 这样链接 直接发布问题, 而是会重定向到登录页面;
• 将装饰器写在哪个视图函数上, 那么该视图函数处理对应的请求前, 都会在装饰器中进行验证, 验证通过后对请求进行正常处理; 验证不通过, 会在装饰器中直接定向到对应页面

创建一个装饰器类 decorators.py

登录装饰器函数如下：

# 需要进行登录验证的装饰器函数
def login_require(func):# 保存func信息@wraps(func)# 内函数的参数是函数 func的参数def inner(*args, **kwargs):if g.user:return func(*args, **kwargs)else:return redirect(url_for("auth.login"))return inner

在 /qa/publish_question 请求中应用登录装饰器函数

@bp.route('/qa/publish_question', methods=['GET', 'POST'])
@login_require
def publish_question():if request.method == 'GET':return render_template("publish_question.html")else:form = QuestionForm(request.form)# 进行表单验证if form.validate():title = form.title.datacontent = form.content.data# 保存到数据库中question = QuestionModel(title=title, content=content, author = g.user)db.session.add(question)db.session.commit()# 应该跳转到详情页面return redirect("/")else:print(form.errors)return redirect(url_for("qa.publish_question"))

9. 实现首页展示所有问题

在 qa.py 对首页请求返回 定向到首页的同时携带所有问题

@bp.route('/')
def index():questions = QuestionModel.query.order_by(QuestionModel.create_time.desc()).all()return render_template("index.html", questions=questions)

前端页面 index.html

 <ul class="question-ul">{% for question in questions %}<li><div class="side-question"><img class="side-question-avatar" src="{{url_for('static', filename='/images/11.jpg')}}" alt=""></div><div class="question-main"><div class="question-title"><a href="#">{{ question.title }}</a></div><div class="question-content">{{question.content}}</div><div class="question-detail"><span class="question-author">{{question.author.username}}</span><span class="question-time">{{ question.create_time}}</span></div></div></li>{% endfor %}</ul>

10. 实现问题详情页面

首先定义一个视图函数处理访问 问题详情页的请求

qa.py中

@bp.route('/qa/question_detail/<question_id>')
@login_require
def question_detail(question_id):question = QuestionModel.query.get(question_id)return render_template("detail.html", question = question)

index.html 中, 点击问题标题进入详情页

 <div class="question-title"><a href="{{url_for('qa.question_detail', question_id = question.id)}}">{{ question.title }}</a></div>

detail.html 中

<h3 class="page-title">{{question.title}}</h3><p class="question-info"><span>{{ question.author.username }}</span><span>{{question.create_time}}</span></p><hr><p class="question-content">{{ question.content }}</p>

11. 实现评论功能

11.1 创建评论实体类

Comment.py

class CommentModel(db.Model):__tablename__ = 'comment'id = db.Column(db.Integer, primary_key=True, autoincrement=True)content = db.Column(db.Text, nullable=False)create_time = db.Column(db.DateTime, default=datetime.now)# 一个评论对应一个用户, 一个用户可以有多个评论author_id = db.Column(db.Integer, db.ForeignKey("user.id"))author = db.relationship(UserModel, backref="comments")# 一个评论对应一个问题, 一个问题可以有多个评论question_id = db.Column(db.Integer, db.ForeignKey("question.id"))question = db.relationship(QuestionModel, backref=db.backref("comments", order_by=create_time.desc()))

11.2 评论表单验证

form.py 中

class CommentForm(wtforms.Form):content = wtforms.StringField(validators=[Length(min=3, message="内容格式错误")])# 验证前端传递的评论是否带有该评论属于的问题idquestion_id = wtforms.IntegerField(validators=[InputRequired(message="必须传入对应问题")])

11.3 添加评论请求的视图函数

qa.py 中

# 添加评论请求
# @bp.route('/qa/add_comment', methods=["POST"])
@bp.post('/qa/add_comment')
@login_require
def add_comment():form = CommentForm(request.form)if form.validate():# 验证成功content = form.content.dataquestion_id = form.question_id.data# 保存到数据库中comment = CommentModel(content=content, question_id=question_id, author_id=g.user.id)db.session.add(comment)db.session.commit()return redirect(url_for("qa.question_detail", question_id=question_id))else:# 未验证成功print(form.errors)# 通过 request 获取 question_idreturn redirect(url_for("qa.question_detail", question_id=request.form.get("question_id")))

11.4 前端页面

detail.html

<form action="{{url_for("qa.add_comment")}}" method="post"><div class="form-group"><input type="text" placeholder="请填写评论" name="content" class="form-control"></div><input type="hidden" name="question_id" value="{{ question.id }}"><div class="form-group" style="text-align: right;"><button class="btn btn-primary">评论</button></div></form><ul class="comment-group">{% for comment in question.comments %}<li><div class="user-info"><img class="side-question-avatar" src="{{url_for('static', filename='images/11.jpg')}}" alt=""><span class="username">{{comment.author.username}}</span><span class="create-time">{{ comment.create_time}}</span></div><p class="comment-content">{{comment.content}}</p></li>{% endfor %}</ul>

12. 实现搜索问题功能

处理搜索请求的视图函数：

qa.py

@bp.route("/search")
def search_qa():# search?q=XXXq = request.args.get("q")questions = QuestionModel.query.filter(QuestionModel.title.contains(q)).all()return render_template("index.html", questions=questions)

前端页面

base.html

<li class="nav-item ml-2"><form class="form-inline my-2 my-lg-0" method="GET" action="{{url_for("qa.search_qa")}}"><input class="form-control mr-sm-2" type="search" placeholder="关键字" aria-label="Search" name="q"><button class="btn btn-outline-success my-2 my-sm-0" type="submit">搜索</button></form></li>