效果展示：
登录
注册
主页面
项目结构
项目结构如下：
项目采用蓝图进行视图函数的管理，每个功能被放在一个小的app中。登录和注册功能放在了app_login文件夹中。
后端Python代码
app/login中的__init__.py创建了一个蓝图，内容如下：
# coding: utf-8# 作者(@Author): Messimeimei# 创建时间(@Created_time): 2023/1/8 23:19"""登录视图的蓝图"""from flask import Blueprintlogin = Blueprint("login", __name__)from . import viewmodels.py创建了一个数据模型User，对应数据库中的用户表，内容如下：
# coding: utf-8# 作者(@Author): Messimeimei# 创建时间(@Created_time): 2023/1/4 20:00"""登录需要的数据库模型（用户表）"""from werkzeug.security import generate_password_hash, check_password_hashfrom flask_login import UserMixinfrom app import dbclass User(UserMixin, db.Model): # 第一个参数指定字段类型，后面设置属性 __tablename__ = 'users' id = db.Column(db.Integer, primary_key=True, autoincrement=True) count = db.Column(db.String(128), nullable=False) password = db.Column(db.String(128), nullable=False) def __init__(self, count, password): self.count = count self.password = password def set_password(self, password): self.password = generate_password_hash(password) def check_password(self, password): return check_password_hash(self.password, password)if __name__ == '__main__': user = User(count='0101', password=2021) db.session.add(user) db.session.commit()viesw.py存放登录、注册的视图函数，内容如下：
# coding: utf-8# 作者(@Author): Messimeimei# 创建时间(@Created_time): 2023/1/6 11:39"""登录的视图函数"""from flask import request, render_template, redirect, url_for, flashfrom flask_login import login_required, login_userfrom . import loginfrom .models import Userfrom app import login_manager@login_manager.user_loaderdef load_user(user_id): # 创建用户加载回调函数，接受用户 ID 作为参数 user = User.query.get(int(user_id)) # 用 ID 作为 User 模型的主键查询对应的用户 return user # 返回用户对象@login.route('/index', methods=['GET', 'POST'])@login_requireddef index(): if request.method == "GET": return render_template('index.html')@login.route('/register', methods=['GET', 'POST'])def register(): # 如果请求为post if request.method == 'POST': count = request.form.get('count') password = request.form.get('password') repassword = request.form.get('repassword') print(count, password) from app import db if password == repassword: user = User(count, password) user.set_password(password) db.session.add(user) db.session.commit() return '注册成功' else: return '两次密码不一致' # 请求为get return render_template('register.html')@login.route('/', methods=['GET', 'POST'])@login.route('/login', methods=['GET', 'POST'])def login(): if request.method == 'POST': count = request.form['count'] password = request.form['password'] print(password) if not count or not password: flash('Invalid input.') return redirect(url_for('login')) user = User.query.filter_by(count=count).first() if not user: flash("用户不存在") return redirect(url_for('login.login')) if count == user.count and user.check_password(password): login_user(user) # 登入用户 flash('Login success.') print("登录成功") return redirect(url_for('login.index')) # 重定向到主页 flash('Invalid username or password.') # 如果验证失败，显示错误消息 return redirect(url_for('templates.login')) # 重定向回登录页面 return render_template('login.html')配置文件config.py
# coding: utf-8# 作者(@Author): Messimeimei# 创建时间(@Created_time): 2023/1/3 15:08"""各种配置类"""class BaseConfig(object): """所有配置类的基类""" SECRET_KEY = "LOVE" DEBUG = True TESTING = False VISIT_TIME = 0 # 网站访问次数 # 数据库配置 SQLALCHEMY_DATABASE_URI = "mysql+pymysql://root:自己的MySql密码@localhost/personalwebsite" SQLALCHEMY_TRACK_MODIFICATIONS = False # 是否追踪数据库的修改class ProductionConfig(BaseConfig): """生产环境下的配置类""" DEBUG = Falseclass DevelopmentConfig(BaseConfig): """开发模式下的配置类""" DEBUG = True TESTING = Trueapp/__init__.py
# coding: utf-8# 作者(@Author): Messimeimei# 创建时间(@Created_time): 2023/1/3 1:54"""构建app，注册蓝图"""from flask import Flaskfrom config import BaseConfigfrom flask_login import LoginManagerfrom flask_sqlalchemy import SQLAlchemylogin_manager = LoginManager()login_manager.session_protection = 'strong'login_manager.login_view = 'login'db = SQLAlchemy()def register_bp(app): """ 注册蓝图 :param app: :return: """ from .app_login import login as login_blueprint app.register_blueprint(login_blueprint)def database(app, db): """ 初始化数据库 :param app: :return: """ db.init_app(app) db.create_all() db.session.commit()def create_app(): my_app = Flask(__name__) with my_app.app_context(): # app注册蓝图 register_bp(my_app) # app加载配置 my_app.config.from_object(BaseConfig) # 数据库管理对象 database(my_app, db) # 用于登录验证 login_manager.init_app(my_app) login_manager.login_view = 'login.login' return my_app启动文件manager.py
# coding: utf-8# 作者(@Author): Messimeimei# 创建时间(@Created_time): 2023/1/3 13:50"""启动文件"""from app import create_appfrom flask import render_template, sessionapp = create_app()if __name__ == '__main__': app.run(debug=True)前端代码（没有使用bootstrap）
html部分
登录login.html页面
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>登录页面</title> <link rel="stylesheet" type="text/css" href="../static/css/login.css"/> <script src="../static/js/register.js" type="text/javascript"></script></head><body><div class="login-box"> <h2>入口</h2> <form action="/login" method="post"> <div class="login-field"> <span style="color: aqua; size: 12px">账号</span> <input type="text" name="count" required=""/> </div> <div class="login-field"> <spqn style="color: aqua; size: 12px">密码</spqn> <input type="password" name="password" required=""/> </div> <input type="submit" value="点击进入" id="myloginlabel"> <p style="color: #101113">没有账号？<a href="./register" style="color: rgba(22,180,166,0.58)" onclick="topggleForm();">注册</a></p> </form></div></body></html>注册register.html页面
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" type="text/css" href="../static/css/login.css"/> <script src="../static/js/register.js" type="text/javascript"></script></head><body><div class="login-box"> <h2>注册</h2> <form action="/register" method="post"> <div class="login-field"> <span style="color: aqua; size: 12px">账号</span> <input type="text" name="count" required=""/> </div> <div class="login-field"> <spqn style="color: aqua; size: 12px">密码</spqn> <input type="password" name="password" required=""/> </div> <div class="login-field"> <spqn style="color: aqua; size: 12px">确认密码</spqn> <input type="password" name="repassword" required=""/> </div> <input type="submit" value="提交" id="myloginlabel"> <p style="color: #101113">已有账号？<a href="./login" style="color: rgba(22,180,166,0.58)" onclick="topggleForm();">登录</a></p> </form></div></body></html>主页面index.html
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>登录页面</title> <link rel="stylesheet" type="text/css" href="../static/css/index.css"/></head><body></body></html>css部分
login.css
body { margin: 0; padding: 0; font-family: sans-serif; background-size: cover; background: url(../images/bg.jpg) no-repeat fixed center 0; -webkit-background-size: cover; -o-background-size: cover; -moz-background-size: cover; -ms-background-size: cover;}.login-box { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 400px; padding: 40px; background: rgba(16, 17, 19, 0.58); box-sizing: border-box; box-shadow: 0 10px 25px rgb(16, 17, 19); border-radius: 10px;}.login-box h2 { margin: 0 0 30px; padding: 0; text-align: center; color: #ffffff;}.login-box .login-field { position: relative;}.login-box .login-field input { width: 100%; padding: 10px 0; font-size: 16px; color: #ffffff; margin-bottom: 30px; border: none; border-bottom: 1px solid #ffffff; outline: none; background: transparent;}.login-box .login-field label { position: absolute; top: 0; left: 0; letter-spacing: 1px; padding: 10px 0; font-size: 16px; color: #ffffff; pointer-events: none; transition: .5s;}.login-box .login-field input:focus ~ label,.login-box .login-field input:valid ~ label { top: -23px; left: 0; color: aqua; font-size: 12px;}.login-box button { border: none; outline: none; color: #fff; background: #03a9f4; padding: 10px 20px; cursor: pointer; border-radius: 5px;}#myloginlabel{ position: relative; background-color: rgb(3, 168, 243); border: 1px solid rgb(190, 225, 255); width: 100px; height: 30px; font-size: 12px; color: rgb(255, 255, 255); font-weight: 200; margin-top: 10px; text-align: center; border-radius: 20px; padding: 10px;}index.css
body { margin: 0; padding: 0; font-family: sans-serif; background-size: cover; background: url(../images/index.jpg) no-repeat fixed center 0; -webkit-background-size: cover; -o-background-size: cover; -moz-background-size: cover; -ms-background-size: cover;}js部分
register.js
function topggleForm() { var container = document.querySelector('.container'); container.classList.toggle('active');}两张背景图片（有需求自取，当然也可以换自己喜欢的，推荐一个网站https://pixabay.com/zh/）
