Flask 是一个轻量级的 Python Web 框架,非常适合用来快速开发 web 应用。本文将介绍如何使用 Flask 实现一个简单的用户登录功能,前端与后端整合,供读者参考和学习。

准备工作

在开始之前,请确保你已经安装了 Flask。如果没有安装,可以通过以下命令进行安装:

pip install Flask

接下来,我们将会创建一个包含用户登录功能的简单示例。

项目结构

首先,我们创建一个项目文件夹,结构如下:

flask_login_demo/
│
├── app.py
└── templates/
    ├── login.html
    └── home.html

后端实现

接下来,我们编写 app.py 文件,代码如下:

from flask import Flask, render_template, request, redirect, url_for, session, flash

app = Flask(__name__)
app.secret_key = 'your_secret_key'  # 必须设置,确保 session 的安全性

# 模拟用户数据库
users = {
    "user1": "password1",
    "user2": "password2"
}

@app.route('/')
def home():
    return render_template('home.html')

@app.route('/login', methods=['GET', 'POST'])
def login():
    if request.method == 'POST':
        username = request.form['username']
        password = request.form['password']

        # 检查用户名和密码
        if username in users and users[username] == password:
            session['username'] = username
            flash('登录成功!', 'success')
            return redirect(url_for('home'))
        else:
            flash('用户名或密码错误!', 'danger')

    return render_template('login.html')

@app.route('/logout')
def logout():
    session.pop('username', None)
    flash('你已成功退出!', 'info')
    return redirect(url_for('home'))

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

前端实现

接下来,我们在 templates 文件夹中创建两个 HTML 文件:login.htmlhome.html

login.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>登录</title>
</head>
<body>
    <h1>用户登录</h1>
    <form method="POST" action="{{ url_for('login') }}">
        <div>
            <label for="username">用户名:</label>
            <input type="text" name="username" required>
        </div>
        <div>
            <label for="password">密码:</label>
            <input type="password" name="password" required>
        </div>
        <div>
            <button type="submit">登录</button>
        </div>
    </form>
    {{ get_flashed_messages() }}
</body>
</html>

home.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>主页</title>
</head>
<body>
    <h1>欢迎来到主页</h1>
    {% if session.username %}
        <p>你好, {{ session.username }}!</p>
        <a href="{{ url_for('logout') }}">退出</a>
    {% else %}
        <a href="{{ url_for('login') }}">登录</a>
    {% endif %}
    {{ get_flashed_messages() }}
</body>
</html>

运行应用

确保已完成以上代码编写后,在终端运行以下命令启动 Flask 应用:

python app.py

打开浏览器访问 http://127.0.0.1:5000/,你将看到欢迎页面。点击“登录”链接进入登录页面,输入用户名和密码(比如 user1password1),成功登录后,会跳转回主页并显示欢迎信息。

结尾

通过以上步骤,我们创建了一个简单的用户登录功能,前后端实现了基本的交互。在实际开发中,你可能还会需要进一步强化安全性,比如使用密码哈希存储、添加验证码等。但这个示例为你打下了基础。希望本文对你有帮助,欢迎大家进行更多的探索和实践!

点赞(0) 打赏

微信小程序

微信扫一扫体验

微信公众账号

微信扫一扫加关注

发表
评论
返回
顶部