使用python开发实现一个前后端交互的登录功能。(登录后跳转,登录失败弹信息,直接访问跳转页面无法访问或者被请回登录页面)
时间: 2024-03-02 22:48:46 浏览: 28
好的,这是一个比较常见的功能,一般会使用 Flask 作为后端框架,使用 HTML、CSS、JavaScript 或者 Vue.js 作为前端。
以下是一个简单的实现步骤:
1. 安装 Flask:在命令行中输入 `pip install flask`,安装 Flask 框架。
2. 创建 Flask 应用:在项目根目录下创建一个名为 `app.py` 的 Python 文件,编写以下代码:
```python
from flask import Flask, render_template, request, redirect, url_for, session
app = Flask(__name__)
app.secret_key = 'your-secret-key'
@app.route('/', methods=['GET', 'POST'])
def login():
if request.method == 'POST':
username = request.form['username']
password = request.form['password']
# 这里省略验证逻辑,假设验证成功
session['username'] = username
return redirect(url_for('index'))
return render_template('login.html')
@app.route('/index')
def index():
if 'username' in session:
return render_template('index.html')
return redirect(url_for('login'))
@app.route('/logout')
def logout():
session.pop('username', None)
return redirect(url_for('login'))
if __name__ == '__main__':
app.run()
```
这里定义了三个路由:`/` 用于登录页面的渲染和验证;`/index` 用于登录后的跳转页面;`/logout` 用于退出登录。
3. 创建模板文件:在项目根目录下创建一个名为 `templates` 的文件夹,用于存放 HTML 模板文件。在 `templates` 文件夹下创建一个名为 `login.html` 的文件,编写以下代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>Login</title>
</head>
<body>
{% with messages = get_flashed_messages() %}
{% if messages %}
<ul class="flashes">
{% for message in messages %}
<li>{{ message }}</li>
{% endfor %}
</ul>
{% endif %}
{% endwith %}
<form action="" method="post">
<label>Username:</label>
<input type="text" name="username" required><br>
<label>Password:</label>
<input type="password" name="password" required><br>
<input type="submit" value="Login">
</form>
</body>
</html>
```
这里使用了 Flask 的模板引擎,可以在 HTML 中使用 Python 代码。
4. 创建跳转页面模板:在 `templates` 文件夹下创建一个名为 `index.html` 的文件,编写以下代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>Index</title>
</head>
<body>
<h1>Welcome {{ session['username'] }}!</h1>
<a href="{{ url_for('logout') }}">Logout</a>
</body>
</html>
```
这里使用了 Flask 的 `session` 功能,可以在不同的请求之间存储数据。
5. 运行程序:在命令行中输入 `python app.py`,启动 Flask 应用,然后在浏览器中访问 `http://localhost:5000`,即可看到登录页面。
以上是一个简单的前后端交互的登录功能实现步骤,你可以根据自己的需求进行修改和完善。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)