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.html
和 home.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/
,你将看到欢迎页面。点击“登录”链接进入登录页面,输入用户名和密码(比如 user1
和 password1
),成功登录后,会跳转回主页并显示欢迎信息。
结尾
通过以上步骤,我们创建了一个简单的用户登录功能,前后端实现了基本的交互。在实际开发中,你可能还会需要进一步强化安全性,比如使用密码哈希存储、添加验证码等。但这个示例为你打下了基础。希望本文对你有帮助,欢迎大家进行更多的探索和实践!