一、导航条的实现
导航条的实现需要借助Bootstrap.
代码：（这只是实现导航条的相关代码，不包括主体代码）
继承：
{% extends "base.html" %}
{% block title %}问答-首页{% endblock %}
{% block head %}
{% endblock %}
父类：
<!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.min.css')}}">
{% block head %} {% endblock %}
</head>
<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-2">
<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">搜索</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>
</nav>
</div>
<div class="container">{% block body %}{% endblock %}</div>
</nav>
</body>
</html>运行结果：
二、登录和注册页面的实现
base页面：
背景颜色：
body{
background-color: #f3f3f3; #在static中设置
}
<!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.min.css')}}">
<link rel="stylesheet" href="{{url_for('static',filename='css/init.css')}}"> #背景颜色
{% block head %} {% endblock %}
</head>
<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-2">
<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">搜索</button>
</form>
</li>
</ul>
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="{{url_for('user.login')}}">登录 </a>
</li>
<li class="nav-item">
<a class="nav-link" href="{{url_for('user.register')}}">注册</a>
</li>
</ul>
</div>
</nav>
</div>
<div class="container">{% block body %}{% endblock %}</div>
</nav>
</body>
</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">我们不会把邮箱用于其他用户</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 %}注册：
{% 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">我们不会把邮箱用于其他用户</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 %}成果：
三、Flask发送邮件
#邮箱配置
#qq邮箱
MAIL_SERVER="smtp.qq.com"
MAIL_PORT=465
MAIL_USE_TLS=False
MAIL_USE_SSL=True
MAIL_DEBUG=True
MAIL_USERNAME="2780038443@qq.com"
MAIL_PASSWORD="mbycogecyswzdhff"
MAIL_DEFAULT_SENDER="2780038443@qq.com"
#exts.py：
from flask_sqlalchemy import SQLAlchemy
from flask_mail import Mail
db=SQLAlchemy()
mail=Mail()
#main.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
app = Flask(__name__)
app.config.from_object(config)
db.init_app(app)
mail.init_app(app)
app.register_blueprint(qa_bp)
app.register_blueprint(user_bp)
if __name__ =='__main__':
app.run(debug=True)邮箱验证码存储：
#model.py：
from exts import db
from datetime import datetime
class EmailCpatchaModel(db.Model):
__tablename__="email_captcha"
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)
#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=['2780038443@qq.com'],
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 "没有传递邮箱"
1049
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
