效果展示：

登录

注册

主页面

项目结构

项目结构如下：

项目采用蓝图进行视图函数的管理，每个功能被放在一个小的app中。登录和注册功能放在了app_login文件夹中。

后端Python代码

app/login中的__init__.py创建了一个蓝图，内容如下：

# coding:   utf-8
# 作者(@Author):   Messimeimei
# 创建时间(@Created_time): 2023/1/8 23:19
"""登录视图的蓝图"""
from flask import Blueprint
login = Blueprint("login", __name__)
from . import view

models.py创建了一个数据模型User，对应数据库中的用户表，内容如下：

# coding:   utf-8
# 作者(@Author):   Messimeimei
# 创建时间(@Created_time): 2023/1/4 20:00
"""登录需要的数据库模型（用户表）"""
from werkzeug.security import generate_password_hash, check_password_hash
from flask_login import UserMixin
from app import db
class 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, flash
from flask_login import login_required, login_user
from . import login
from .models import User
from app import login_manager
@login_manager.user_loader
def load_user(user_id):  # 创建用户加载回调函数，接受用户 ID 作为参数
user = User.query.get(int(user_id))  # 用 ID 作为 User 模型的主键查询对应的用户
return user  # 返回用户对象
@login.route('/index', methods=['GET', 'POST'])
@login_required
def 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 = False
class DevelopmentConfig(BaseConfig):
"""开发模式下的配置类"""
DEBUG = True
TESTING = True

app/__init__.py

# coding:   utf-8
# 作者(@Author):   Messimeimei
# 创建时间(@Created_time): 2023/1/3 1:54
"""构建app，注册蓝图"""
from flask import Flask
from config import BaseConfig
from flask_login import LoginManager
from flask_sqlalchemy import SQLAlchemy
login_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_app
from flask import render_template, session
app = 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/）