正文

轻松搭建Flask：一步步教你实现网站登录功能

/0 浏览量
0722

前言

Flask 是一个轻量级的 Web 应用框架，非常适合初学者和中小型项目。在这个教程中，我们将一步步教你如何使用 Flask 实现一个简单的网站登录功能。通过这个过程，你将了解 Flask 的基本用法，以及如何处理用户认证和数据存储。

准备工作

在开始之前，请确保你的计算机上已安装以下软件：

  • Python 3.x
  • Flask
  • Flask-Login（用于用户认证）

你可以使用以下命令来安装 Flask 和 Flask-Login：

pip install Flask Flask-Login

第一步：创建项目结构

首先，创建一个名为 flask_login_example 的目录，并在其中创建以下文件：

flask_login_example/
│
├── app.py
├── templates/
│   ├── base.html
│   └── login.html
└── static/
    └── css/

第二步：设置 Flask 应用

在 app.py 文件中，导入所需的模块并创建一个 Flask 应用实例：

from flask import Flask, render_template, request, redirect, url_for
from flask_login import LoginManager, UserMixin, login_user, login_required, logout_user

app = Flask(__name__)
app.secret_key = 'your_secret_key'

# 配置 Flask-Login
login_manager = LoginManager()
login_manager.init_app(app)
login_manager.login_view = 'login'

# 用户模型
class User(UserMixin):
    def __init__(self, username):
        self.id = username

# 用户加载函数
@login_manager.user_loader
def load_user(user_id):
    return User(user_id)

# 登录视图
@app.route('/login', methods=['GET', 'POST'])
def login():
    if request.method == 'POST':
        username = request.form['username']
        if username == 'admin':
            user = User(username)
            login_user(user)
            return redirect(url_for('home'))
        else:
            return 'Invalid username or password'
    return render_template('login.html')

# 登录后视图
@app.route('/home')
@login_required
def home():
    return 'Welcome to the home page!'

# 登出视图
@app.route('/logout')
@login_required
def logout():
    logout_user()
    return redirect(url_for('login'))

if __name__ == '__main__':
    app.run(debug=True)

第三步：创建模板

在 templates/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='css/style.css') }}">
</head>
<body>
    <div class="container">
        {% block content %}{% endblock %}
    </div>
</body>
</html>

在 templates/login.html 文件中，创建登录页面：

{% extends 'base.html' %}

{% block title %}Login{% endblock %}

{% block content %}
    <h1>Login</h1>
    <form method="post">
        <label for="username">Username:</label>
        <input type="text" id="username" name="username" required>
        <input type="submit" value="Login">
    </form>
{% endblock %}

第四步：创建静态资源

在 static/css/style.css 文件中，添加一些简单的 CSS 样式：

body {
    font-family: Arial, sans-serif;
}

.container {
    width: 300px;
    margin: 0 auto;
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

label {
    display: block;
    margin-bottom: 5px;
}

input[type="text"], input[type="submit"] {
    width: 100%;
    padding: 8px;
    margin-bottom: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

第五步：运行应用

现在，你可以运行 app.py 文件，并访问 http://127.0.0.1:5000/login 来测试登录功能。

当你输入正确的用户名（在这个例子中是 admin）和密码时，你应该会被重定向到首页。

总结

在这个教程中，我们学习了如何使用 Flask 和 Flask-Login 实现一个简单的网站登录功能。通过这个过程，你不仅了解了 Flask 的基本用法，还学会了如何处理用户认证和数据存储。希望这个教程能帮助你入门 Flask 开发！

-- 展开阅读全文 --