一、项目结构搭建
所有结构用到的文件：
app.py跑起来的主程序
from flask import Flask, Response, request, session, render_template
import config
from exts import db
from blueprints import qa_bp
from blueprints import user_bp
app = Flask(__name__)
app.config.from_object(config)
db.init_app(app)
app.register_blueprint(qa_bp)
app.register_blueprint(user_bp)
if __name__ == '__main__':
app.run(debug=True)
config.py用于配置数据库信息
#coding=utf-8
# 数据库的配置信息
HOSTNAME = '127.0.0.1'
PORT = '3306'
DATABASE = 'sslppl'
USERNAME = 'root'
PASSWORD =
DB_URI = 'mysql+pymysql://{}:{}@{}:{}/{}?charset=utf8'.format(USERNAME,PASSWORD,HOSTNAME,PORT,DATABASE)
SQLALCHEMY_DATABASE_URI = DB_URI
SQLALCHEMY_TRACK_MODIFICATIONS = True
SECRET_KEY = "asdff1321adfdf154d"
exts.py用于设置db
from flask_sqlalchemy import SQLAlchemy
db = SQLAlchemy()
在蓝图blueprints中，创建一个问答板块和一个用户板块
init.py 用于快速导入qa和user中的可视化模块
#coding=utf-8
from .qa import bp as qa_bp
from .user import bp as user_bp
qa.py和user.py两个蓝图板块
from flask import Blueprint
bp = Blueprint("qa", __name__, url_prefix="/")
@bp.route("/")
def index():
return "首页"
from flask import Blueprint
bp = Blueprint("user", __name__, url_prefix="/user")
@bp.route("/login")
def login():
return "登录"
二、导航条实现
Bootstrap
效果图：
主要步骤，去https://www.bootcss.com/下载css结构，设置一个base.html和index.html。base.html用于布局主页，index.html用户在网页中渲染。
目前为止的所有文件：
base.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>{% block title %}{% endblock %}</title>
<link rel="stylesheet" href="{{ url_for('static',filename='bootstrap/bootstrap.4.6.css') }}">
</head>
{% block head %}{% endblock %}
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container">
<a class="navbar-brand" href="#">❤表白墙</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">首页 <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">树洞</a>
</li>
<li class="nav-item ml-3">
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="关键字" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</li>
</ul>
<ul class="navbar-nav ">
<li class="nav-item ">
<a class="nav-link" href="#">登录 </a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">注册</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="container">
{% block body %}
{% endblock %}
</div>
</body>
</html>
index.html
{% extends "base.html" %}
{% block title %}❤表白墙-首页{% endblock %}
{% block head %}
{% endblock %}
{% block body %}
<h1>首页</h1>
{% endblock %}
三、登录和注册页面
本次主要前端布局login.html和registr.html,并未实现功能.
所有文件如下
login.html
{% extends "base.html" %}
{% block title %}❤表白墙-登录{% endblock %}
{% block head %}
{% endblock %}
{% block body %}
<div class="row mt-4">
<div class="col"></div>
<div class="col">
<form>
<div class="form-group">
<label for="exampleInputEmail1">邮箱</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
<small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
</div>
<div class="form-group">
<label for="exampleInputPassword1">密码</label>
<input type="password" class="form-control" id="exampleInputPassword1">
</div>
<button type="submit" class="btn btn-primary btn-block">立即登录</button>
</form>
</div>
<div class="col"></div>
</div>
{% endblock %}
register.html
{% extends "base.html" %}
{% block title %}问答-注册{% endblock %}
{% block head %}
{% endblock %}
{% block body %}
<div class="row mt-4">
<div class="col"></div>
<div class="col">
<form>
<div class="form-group">
<label for="exampleInputEmail1">邮箱</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
<small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else</small>
</div>
<div class="form-group">
<label for="exampleInputEmail1">验证码</label>
<div class="input-group">
<input type="text" class="form-control">
<div class="input-group-append">
<button class="btn btn-outline-secondary" type="button">获取验证码</button>
</div>
</div>
</div>
<div class="form-group">
<label for="exampleInputPassword1">密码</label>
<input type="password" class="form-control" id="exampleInputPassword1">
</div>
<div class="form-group">
<label for="exampleInputPassword1">确认密码</label>
<input type="password" class="form-control">
</div>
<button type="submit" class="btn btn-primary btn-block">立即登录</button>
</form>
</div>
<div class="col"></div>
</div>
{% endblock %}
四、发送邮件功能
主要功能利用QQ邮箱给需要注册的邮箱发送验证码
在config.py中添加邮箱配置
#coding=utf-8
# 数据库的配置信息
HOSTNAME = '127.0.0.1'
PORT = '3306'
DATABASE = 'sslppl'
USERNAME = 'root'
PASSWORD =
DB_URI = 'mysql+pymysql://{}:{}@{}:{}/{}?charset=utf8'.format(USERNAME,PASSWORD,HOSTNAME,PORT,DATABASE)
SQLALCHEMY_DATABASE_URI = DB_URI
SQLALCHEMY_TRACK_MODIFICATIONS = True
SECRET_KEY = "fasdfewfstwef186f132f5d"
# 邮箱配置
# 我们项目中用的是QQ邮箱
MAIL_SERVER = "smtp.qq.com"#固定格式，QQ邮箱必填
MAIL_PORT = 465#固定格式，QQ邮箱必填
MAIL_USE_TLS = False#固定格式，QQ邮箱必填
MAIL_USE_SSL = True#固定格式，QQ邮箱必填
MAIL_DEBUG = True#开发时建议填True
MAIL_USERNAME = #用来发邮件的邮箱
MAIL_PASSWORD = #在QQ邮箱设置-账户-POP3服务开启的密码
MAIL_DEFAULT_SENDER = #用于发送邮件的邮箱
因为该功能是给用户的，故修改user.py文件即可
from flask import Blueprint,render_template
from exts import mail
from flask_mail import Message
bp = Blueprint("user", __name__, url_prefix="/user")
@bp.route("/login")
def login():
return render_template("login.html")
@bp.route("/register")
def register():
return render_template("register.html")
@bp.route('/mail')
def my_main():
message=Message(
subject="邮箱测试",#发送的邮箱主题
recipients=['收件人的邮箱'],
body="这是一篇测试邮件"#发送的邮箱内容
)
mail.send(message)
return "success"
注意另外在app.py,user.py导入相应的flask_mail包
五、验证码的存储
在数据库中创建eamil_cpaptcha表，主要是id，email，cpatcha，create_time四个值
思路，随机生成一条验证码存储到数据库中，利用邮箱给注册的用户发送这条验证码。用到的所有文件：
主要代码：
#__init__.py
#coding=utf-8
from .qa import bp as qa_bp
from .user import bp as user_bp
#qa.py
from flask import Blueprint,render_template
bp = Blueprint("qa", __name__, url_prefix="/")
@bp.route("/")
def index():
return render_template("index.html")
# user.py
import random
import string
from flask import Blueprint, render_template, request
from exts import mail, db
from flask_mail import Message
from models import EmailCpatchaModel
from datetime import datetime
bp = Blueprint("user", __name__, url_prefix="/user")
@bp.route("/login")
def login():
return render_template("login.html")
@bp.route("/register")
def register():
return render_template("register.html")
@bp.route("/captcha")
def get_captcha():
email = request.args.get("email")
letter = string.ascii_letters + string.digits
captcha = "".join(random.sample(letter, 4))
if email:
message = Message(
subject='邮箱测试',
recipients=['注册的邮箱'],
body=f"您的注册验证码是：{captcha},请不要告诉任何人哦！"
)
mail.send(message)
#判断邮箱是否存在，诺存在，更新数据库中得验证码
captcha_model = EmailCpatchaModel.query.filter_by(email=email).first()
if captcha_model:
captcha_model.captcha = captcha
captcha_model.create_time = datetime.now()
db.session.commit()
else:
captcha_model = EmailCpatchaModel(email=email, captcha=captcha)
db.session.add(captcha_model)
db.session.commit()
return "success"
else:
return "没有传递邮箱"
#app.py
from flask import Flask, Response, request, session, render_template
import config
from exts import db,mail
from blueprints import qa_bp
from blueprints import user_bp
from flask_migrate import Migrate
app = Flask(__name__)
app.config.from_object(config)
db.init_app(app)
mail.init_app(app)
migrate=Migrate(app,db)
app.register_blueprint(qa_bp)
app.register_blueprint(user_bp)
if __name__ == '__main__':
app.run()
#config.py
#coding=utf-8
# 数据库的配置信息
HOSTNAME = '127.0.0.1'
PORT = '3306'
DATABASE = 'zl_flask'
USERNAME = 'root'
PASSWORD =
DB_URI = 'mysql+pymysql://{}:{}@{}:{}/{}?charset=utf8'.format(USERNAME,PASSWORD,HOSTNAME,PORT,DATABASE)
SQLALCHEMY_DATABASE_URI = DB_URI
SQLALCHEMY_TRACK_MODIFICATIONS = True
SECRET_KEY = "asdff1321adfdf154d"
# 邮箱配置
# 我们项目中用的是QQ邮箱
MAIL_SERVER = "smtp.qq.com"#邮箱服务器地址
MAIL_PORT = 465#端口号
MAIL_USE_TLS = False
MAIL_USE_SSL = True
MAIL_DEBUG = True
MAIL_USERNAME = "自己的邮箱"
MAIL_PASSWORD = "自己设置的POP3邮箱码"
MAIL_DEFAULT_SENDER = "自己的邮箱"
#exts.py
from flask_sqlalchemy import SQLAlchemy
from flask_mail import Mail
db = SQLAlchemy()
mail=Mail()
#models.py
from exts import db
from datetime import datetime
class EmailCpatchaModel(db.Model):
__tablename__="email_cpaptcha"
id=db.Column(db.Integer,primary_key=True,autoincrement=True)
email=db.Column(db.String(100),nullable=False,unique=True)
captcha=db.Column(db.String(10),nullable=False)
create_time=db.Column(db.DateTime,default=datetime.now)
在浏览器中输入
http://127.0.0.1:5000/user/captcha?email=需要发送的邮箱
即可给相应邮箱发送验证码。
418
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
