python 有背景的登录页面源码
时间: 2023-12-05 10:11:28 浏览: 32
以下是一个示例的 Python Flask 代码,实现了一个有背景的登录页面:
```python
from flask import Flask, render_template, request, redirect
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 == '123456':
# 登录成功,跳转到首页
return redirect('/home')
else:
# 登录失败,重新显示登录页面
return render_template('login.html', error='用户名或密码错误')
else:
# 显示登录页面
return render_template('login.html')
@app.route('/home')
def home():
# 显示首页
return render_template('home.html')
if __name__ == '__main__':
app.run(debug=True)
```
其中,`login()` 函数处理登录页面的逻辑,如果是 GET 请求则渲染登录页面模板,如果是 POST 请求则处理表单提交逻辑,验证用户名和密码是否正确。如果验证成功,则使用 Flask 的 `redirect()` 函数跳转到首页,如果验证失败,则重新渲染登录页面模板,并在页面上提示错误信息。
登录页面的 HTML 模板可以使用以下代码编写,其中包含了背景图片和一个带有样式的登录表单:
```html
<!DOCTYPE html>
<html>
<head>
<title>Login Page</title>
<style>
body {
background-image: url('background.jpg');
background-repeat: no-repeat;
background-size: cover;
}
form {
background-color: white;
padding: 20px;
width: 300px;
margin: 100px auto;
}
input[type="text"], input[type="password"] {
display: block;
margin-bottom: 20px;
padding: 10px;
border: 1px solid #ccc;
width: 100%;
}
input[type="submit"] {
background-color: #4CAF50;
color: white;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
float: right;
}
.error {
color: red;
font-size: 12px;
margin-top: 10px;
text-align: center;
}
</style>
</head>
<body>
<form method="post">
<h2>Login</h2>
{% if error %}
<p class="error">{{ error }}</p>
{% endif %}
<label>Username:</label>
<input type="text" name="username">
<label>Password:</label>
<input type="password" name="password">
<input type="submit" value="Login">
</form>
</body>
</html>
```
在 Flask 中使用模板引擎渲染 HTML 模板,可以使用 `render_template()` 函数。在 HTML 模板中,使用 Flask 的模板语言,可以方便地插入动态内容和控制结构。例如,在上述的 HTML 模板中,使用了 Flask 的模板语言 `{{ error }}` 插入了错误信息。