from .user import bp as user_bp
import wtforms
from wtforms.validators import length, email, EqualTo
from models import EmailCaptchaModel, UserModel
class LoginForm(wtforms.Form):
email = wtforms.StringField(validators=[email()])
password = wtforms.StringField(validators=[length(min=6, max=20)])
class RegisterForm(wtforms.Form):
username = wtforms.StringField(validators=[length(min=3, max=20)])
email = wtforms.StringField(validators=[email()])
captcha = wtforms.StringField(validators=[length(min=4, max=4)])
password = wtforms.StringField(validators=[length(min=6, max=20)])
password_confirm = wtforms.StringField(validators=[EqualTo("password")])
def validate_captcha(self, field):
captcha = field.data
email = self.email.data
captcha_model = EmailCaptchaModel.query.filter_by(email=email).first()
if captcha_model.captcha.lower() != captcha.lower():
raise wtforms.ValidationError("郵箱驗證碼錯誤！")
def validate_email(self, field):
email = field.data
user_model = UserModel.query.filter_by(email=email).first()
if user_model:
raise wtforms.ValidationError("郵箱已經存在！")
from flask import Blueprint, render_template, request, redirect, url_for, jsonify, session, flash
from exts import mail, db
from flask_mail import Message
from models import EmailCaptchaModel, UserModel
from datetime import datetime
from .forms import RegisterForm, LoginForm
from werkzeug.security import generate_password_hash, check_password_hash
import random
import string
bp = Blueprint("user", __name__)
@bp.route("/")
def index():
return render_template("index.html")
@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.data
password = form.password.data
user = UserModel.query.filter_by(email=email).first()
if user and check_password_hash(user.password, password):
session['user_id'] = user.id
return redirect("/")
else:
flash("郵箱和密碼不匹配！！！")
return redirect(url_for("user.login"))
else:
flash("郵箱或密碼錯誤！！！")
return redirect(url_for("user.login"))
@bp.route("/register", methods=['GET', 'POST'])
def register():
if request.method == 'GET':
return render_template("register.html")
else:
form = RegisterForm(request.form)
if form.validate():
email = form.email.data
username = form.username.data
password = form.password.data
# md5
hash_password = generate_password_hash(password)
user = UserModel(email=email, username=username, password=hash_password)
db.session.add(user)
db.session.commit()
return redirect(url_for("user.login"))
else:
return redirect(url_for("user.register"))
@bp.route("/logout")
def logout():
session.clear()
return redirect(url_for('user.login'))
@bp.route("/captcha", methods=['POST'])
def get_captcha():
# GET，POST
email = request.form.get("email")
letters = string.ascii_letters + string.digits
captcha = "".join(random.sample(letters, 4))
if email:
message = Message(
subject='【驗證碼】',
recipients=[email],
body=f"【驗證碼】您的注冊驗證碼是{
captcha}，請不要告訴任何人哦！"
)
mail.send(message)
captcha_model = EmailCaptchaModel.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 = EmailCaptchaModel(email=email, captcha=captcha)
db.session.add(captcha_model)
db.session.commit()
print("captcha:", captcha)
return jsonify({
"code": 200})
else:
return jsonify({
"code": 400, "message": "請先傳遞郵箱！"})
點擊下載css代碼
點擊下載jquery代碼
function bindCaptchaBtnClick(){
$("#captcha-btn").on("click",function (event){
var $this = $(this);
var email = $("input[name='email']").val()
if(!email){
alert("請先輸入郵箱");
return;
}
$.ajax({
url: "/user/captcha",
method: "POST",
data: {
"email": email
},
success: function (res){
var code = res['code'];
if (code == 200){
$this.off("click")
var countDown = 60;
var timer = setInterval(function (){
countDown -= 1;
if (countDown > 0){
$this.text(countDown+"秒後重新發送");
}else {
$this.text("獲取驗證碼");
bindCaptchaBtnClick();
clearInterval(timer);
}
},1000)
alert("驗證碼發送成功！");
}else{
alert(res['message']);
}
}
})
});
}
$(function (){
bindCaptchaBtnClick();
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>{
% block title %}{
% endblock %}</title>
<link rel="stylesheet" href="{
{ url_for('static',filename='bootstrap/[email protected]css') }}">
<link rel="stylesheet" href="{
{ url_for('static',filename='css/css.css') }}">
{
% block head %}{
% endblock %}
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container">
<a class="navbar-brand" href="/">
<svg t="1659145665644" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6166" width="50" height="50"><path d="M512 512m-405.333333 0a405.333333 405.333333 0 1 0 810.666666 0 405.333333 405.333333 0 1 0-810.666666 0Z" fill="#4CAF50" p-id="6167"></path><path d="M640 426.666667c47.061333 0 85.333333 38.272 85.333333 85.333333s-38.272 85.333333-85.333333 85.333333-85.333333-38.272-85.333333-85.333333 38.272-85.333333 85.333333-85.333333m0-85.333334a170.666667 170.666667 0 1 0 0 341.333334 170.666667 170.666667 0 0 0 0-341.333334z" fill="#FFFFFF" p-id="6168"></path><path d="M384 426.666667c47.061333 0 85.333333 38.272 85.333333 85.333333s-38.272 85.333333-85.333333 85.333333-85.333333-38.272-85.333333-85.333333 38.272-85.333333 85.333333-85.333333m0-85.333334a170.666667 170.666667 0 1 0 0 341.333334 170.666667 170.666667 0 0 0 0-341.333334z" fill="#FFFFFF" p-id="6169"></path></svg>
</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>
</ul>
<ul class="navbar-nav">
{
% if user %}
<li class="nav-item">
<span class="nav-link">{
{
user.username }}</span>
</li>
<li class="nav-item">
<a class="nav-link" href="{
{ url_for('user.logout') }}">退出登錄</a>
</li>
{
% else %}
<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>
{
% endif %}
</ul>
</div>
</div>
</nav>
<div class="container">{
% block body %}{
% endblock %}</div>
</body>
</html>
{
% extends "base.html" %}
{
% block title %}首頁{
% endblock %}
{
% block head %}
{
% endblock %}
{
% block body %}
<h1>文章首頁</h1>
{
% 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 action="{
{ url_for("user.login") }}" method="post">
<div class="form-group">
<label for="exampleInputEmail1">郵箱</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" name="email">
</div>
<div class="form-group">
<label for="exampleInputPassword1">密碼</label>
<input type="password" name="password" class="form-control" id="exampleInputPassword1">
</div>
{
% for message in get_flashed_messages() %}
<div class="from-group">
<div class="text-danger">{
{
message }}</div>
</div>
{
% endfor %}
<div class="from-group">
<button type="submit" class="btn btn-primary btn-block">立即登錄</button>
</div>
</form>
</div>
<div class="col"></div>
</div>
{
% endblock %}
{
% extends "base.html" %}
{
% block title %}注冊{
% endblock %}
{
% 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 %}
{
% block body %}
<div class="row mt-4">
<div class="col"></div>
<div class="col">
<form action="{
{ url_for("user.register") }}" method="post">
<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>
{
% endblock %}
from flask import Flask, session, g
import config
from exts import db, mail
from blueprints import user_bp
from flask_migrate import Migrate
from models import UserModel
app = Flask(__name__)
app.config.from_object(config)
db.init_app(app)
mail.init_app(app)
migrate = Migrate(app, db)
app.register_blueprint(user_bp)
@app.before_request
def before_request():
user_id = session.get("user_id")
if user_id:
try:
user = UserModel.query.get(user_id)
g.user = user
except:
g.user = None
@app.context_processor
def context_processor():
if hasattr(g, "user"):
return {
"user": g.user}
else:
return {
}
if __name__ == '__main__':
app.run()
# 數據庫配置信息
HOSTNAME = '127.0.0.1' # 數據庫地址
PORT = '3306' # 端口默認：3306
DATABASE = '數據庫名'
USERNAME = '數據庫賬號'
PASSWORD = '數據庫密碼'
DB_URI = 'mysql+pymysql://{}:{}@{}:{}/{}?charset=utf8'.format(USERNAME, PASSWORD, HOSTNAME, PORT, DATABASE)
SQLALCHEMY_DATABASE_URI = DB_URI
SQLALCHEMY_TRACK_MODIFICATIONS = True
SECRET_KEY = "sdasd54as56d4a65s4"
# 郵箱配置
MAIL_SERVER = "smtp.qq.com"
MAIL_PORT = 465
MAIL_USE_TLS = False
MAIL_USE_SSL = True
MAIL_DEBUG = True
MAIL_USERNAME = "發件郵箱"
MAIL_PASSWORD = "授權碼"
MAIL_DEFAULT_SENDER = "默認發件郵箱"
from flask import g, redirect, url_for
from functools import wraps
def login_required(func):
@wraps(func)
def wrapper(*args,**kwargs):
if hasattr(g,'user'):
return func(*args,**kwargs)
else:
return redirect(url_for("user.login"))
return wrapper
from flask_sqlalchemy import SQLAlchemy
from flask_mail import Mail
db = SQLAlchemy()
mail = Mail()
from exts import db
from datetime import datetime
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, unique=True)
captcha = db.Column(db.String(10), nullable=False)
creat_time = db.Column(db.DateTime, default=datetime.now)
class UserModel(db.Model):
__tablename__ = "user"
id = db.Column(db.Integer, primary_key=True, autoincrement=True)
username = db.Column(db.String(200), nullable=False, unique=True)
email = db.Column(db.String(100), nullable=False, unique=True)
password = db.Column(db.String(200), nullable=False)
join_time = db.Column(db.DateTime, default=datetime.now)
