搭建一个登录界面能够实现从后台拿到数据并验证的一个demo,要求要有前端界面和后端程序的代码
时间: 2024-03-23 10:36:17 浏览: 14
好的,我可以为你提供一个基于 Flask 和 MySQL 的登录界面 Demo。请按照以下步骤操作:
1. 安装必要的库
在终端输入以下命令安装需要的库:
```
pip install flask flask-mysqldb
```
2. 创建数据库
在 MySQL 中创建一个名为 `login_demo` 的数据库,然后创建一个名为 `users` 的表,表结构如下:
```sql
CREATE TABLE users (
id INT(11) AUTO_INCREMENT PRIMARY KEY,
name VARCHAR(100),
email VARCHAR(100),
username VARCHAR(30),
password VARCHAR(100)
);
```
3. 编写后端程序
在项目根目录下创建一个名为 `app.py` 的 Python 文件,内容如下:
```python
from flask import Flask, render_template, request, redirect, url_for, session
from flask_mysqldb import MySQL
app = Flask(__name__)
# 配置 MySQL 连接信息
app.config['MYSQL_HOST'] = 'localhost'
app.config['MYSQL_USER'] = 'root'
app.config['MYSQL_PASSWORD'] = '123456' # 修改为你的 MySQL 密码
app.config['MYSQL_DB'] = 'login_demo'
# 初始化 MySQL 实例
mysql = MySQL(app)
# 配置 session 密钥
app.secret_key = 'secret_key'
# 登录页面
@app.route('/')
def index():
return render_template('login.html')
# 处理登录请求
@app.route('/login', methods=['POST'])
def login():
# 获取表单数据
username = request.form['username']
password = request.form['password']
# 查询用户信息
cur = mysql.connection.cursor()
cur.execute('SELECT * FROM users WHERE username = %s AND password = %s', (username, password))
user = cur.fetchone()
cur.close()
# 验证用户信息
if user:
session['user_id'] = user[0]
session['username'] = user[3]
return redirect(url_for('dashboard'))
else:
return render_template('login.html', error='Invalid username or password')
# 退出登录
@app.route('/logout')
def logout():
session.clear()
return redirect(url_for('index'))
# 用户仪表盘
@app.route('/dashboard')
def dashboard():
if 'user_id' in session:
return render_template('dashboard.html', username=session['username'])
else:
return redirect(url_for('index'))
if __name__ == '__main__':
app.run(debug=True)
```
4. 创建前端页面
在项目根目录下创建一个名为 `templates` 的目录,然后在该目录下创建两个 HTML 文件:`login.html` 和 `dashboard.html`。
`login.html` 内容如下:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Login</title>
</head>
<body>
{% if error %}
<p style="color: red;">{{ error }}</p>
{% endif %}
<form method="post" action="{{ url_for('login') }}">
<div>
<label>Username:</label>
<input type="text" name="username" required>
</div>
<div>
<label>Password:</label>
<input type="password" name="password" required>
</div>
<div>
<input type="submit" value="Login">
</div>
</form>
</body>
</html>
```
`dashboard.html` 内容如下:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Dashboard</title>
</head>
<body>
<h1>Welcome, {{ username }}!</h1>
<p><a href="{{ url_for('logout') }}">Logout</a></p>
</body>
</html>
```
5. 运行程序
在终端中运行以下命令启动程序:
```
python app.py
```
然后在浏览器中访问 `http://localhost:5000` 即可看到登录界面。
注意:本 Demo 只是一个简单的示例,实际使用中需要对密码进行加密处理等安全措施。