用python写一个登录页面,详细一点好看一点
时间: 2024-06-10 10:10:57 浏览: 10
以下是使用 Python Flask 框架编写的简单登录页面示例,使用 Bootstrap 4 进行样式设计:
```python
from flask import Flask, render_template, request
app = Flask(__name__)
@app.route('/', methods=['GET', 'POST'])
def login():
if request.method == 'POST':
username = request.form['username']
password = request.form['password']
if username == 'admin' and password == 'admin123':
return render_template('success.html', username=username)
else:
return render_template('login.html', error='Invalid username or password')
else:
return render_template('login.html')
if __name__ == '__main__':
app.run(debug=True)
```
login.html 文件:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Login</title>
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css">
<style>
.login-form {
margin-top: 100px;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-4 offset-md-4 login-form">
{% if error %}
<div class="alert alert-danger">{{ error }}</div>
{% endif %}
<form method="POST">
<div class="form-group">
<label for="username">Username:</label>
<input type="text" class="form-control" id="username" name="username" required>
</div>
<div class="form-group">
<label for="password">Password:</label>
<input type="password" class="form-control" id="password" name="password" required>
</div>
<button type="submit" class="btn btn-primary">Login</button>
</form>
</div>
</div>
</div>
</body>
</html>
```
success.html 文件:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Login Success</title>
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css">
<style>
.success-message {
margin-top: 100px;
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-4 offset-md-4 success-message">
<h3>Welcome, {{ username }}!</h3>
</div>
</div>
</div>
</body>
</html>
```
在运行该程序时,您需要在终端中键入以下命令:
```
$ export FLASK_APP=login.py
$ flask run
```
然后,您可以在浏览器中访问 `http://localhost:5000`,即可看到登录页面。
相关推荐
![](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)