HTML+mysql+flask登录进入首页显示用户名
时间: 2023-09-10 14:07:16 浏览: 77
好的,这个任务涉及到前端、后端和数据库。具体的实现步骤如下:
1. 前端部分:创建一个登录页面,包括用户名和密码输入框以及提交按钮。当用户点击提交按钮时,将输入框中的数据通过 POST 请求发送给后端。
2. 后端部分:使用 Flask 框架创建一个接口,接收前端发送的用户名和密码数据,并在数据库中查询是否存在该用户。如果存在,则将用户名存储在 session 中,并重定向到首页;否则返回登录页面。
3. 数据库部分:使用 MySQL 存储用户信息,包括用户名和密码。
4. 首页部分:在首页中使用 Jinja2 模板引擎获取 session 中的用户名,如果存在则显示欢迎信息;否则显示登录链接。
具体的代码实现可以参考以下示例:
1. HTML 登录页面
```html
<!DOCTYPE html>
<html>
<head>
<title>登录</title>
</head>
<body>
<h2>用户登录</h2>
<form method="post" action="/login">
<label>用户名:</label>
<input type="text" name="username"><br><br>
<label>密码:</label>
<input type="password" name="password"><br><br>
<input type="submit" value="登录">
</form>
</body>
</html>
```
2. Flask 后端接口
```python
from flask import Flask, render_template, request, session, redirect, url_for
import pymysql
app = Flask(__name__)
app.secret_key = 'secret_key'
# 数据库连接配置
db_config = {
'host': 'localhost',
'port': 3306,
'user': 'root',
'password': 'password',
'database': 'test'
}
# 登录接口
@app.route('/login', methods=['POST'])
def login():
username = request.form['username']
password = request.form['password']
conn = pymysql.connect(**db_config)
cursor = conn.cursor()
sql = "SELECT * FROM users WHERE username=%s AND password=%s"
cursor.execute(sql, (username, password))
user = cursor.fetchone()
cursor.close()
conn.close()
if user:
session['username'] = user[1]
return redirect(url_for('index'))
else:
return render_template('login.html')
# 首页
@app.route('/')
def index():
username = session.get('username')
if username:
return render_template('index.html', username=username)
else:
return redirect(url_for('login'))
if __name__ == '__main__':
app.run(debug=True)
```
3. MySQL 数据库表设计
```sql
CREATE TABLE users (
id INT(11) NOT NULL AUTO_INCREMENT,
username VARCHAR(50) NOT NULL,
password VARCHAR(50) NOT NULL,
PRIMARY KEY (id)
);
```
4. Jinja2 模板引擎首页
```html
<!DOCTYPE html>
<html>
<head>
<title>首页</title>
</head>
<body>
{% if username %}
<h2>欢迎 {{ username }} 登录!</h2>
{% else %}
<a href="/login">登录</a>
{% endif %}
</body>
</html>
```
这样,在用户登录成功之后,即可在首页上显示用户的用户名。