简介
用户输入用户名和密码，此时系统进行核对，如果输入错误，则进行提示；否则登录系统功能界面。
前端界面设计，登录界面的示例如下：
1）实现前端设计，命名为login.html，前端代码如下所示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Login</title>
<style>
body {
font-family: Arial, sans-serif;
background-image: url('../static/login.png');
background-size: cover; /* 保证背景图片覆盖整个屏幕 */
background-position: center; /* 将背景图片居中显示 */
background-repeat: no-repeat; /* 防止背景图片重复 */
height: 100vh; /* 设置高度为视口高度，确保背景图片可以填充整个屏幕 */
margin: 0; /* 清除默认的body边距 */
display: flex; /* 使用Flex布局来居中内容 */
justify-content: center; /* 水平居中 */
align-items: center; /* 垂直居中 */
}
.login-box {
width: 500px;
height: 50%;
margin: 100px auto;
padding: 20px;
background-color: transparent;
border: 1px solid #ccc;
border-radius: 5px;
border: none;
}
.login-box h1 {
text-align: center;
margin-bottom: 20px;
color: white;
font-weight: bold;
}
.form-group {
margin-bottom: 20px;
}
.form-group label {
display: block;
font-weight: bold;
margin-bottom: 5px;
}
.form-group input {
width: calc(100% - 22px);
padding: 10px;
font-size: 16px;
}
.form-group .btn {
width: 100%;
background-color: #007bff;
border: none;
color: #fff;
padding: 10px;
cursor: pointer;
font-size: 16px;
text-align: center;
}
.form-group .btn:hover {
background-color: #0056b3;
}
.error-message {
color: red;
font-size: 20px;
text-align: center;
}
</style>
</head>
<body>
<div class="login-box">
<h1>风险评估系统</h1> <br><br>
<form method="post">
<div class="form-group">
<label for="username">用户名：</label>
<input type="text" id="username" name="username" required>
</div> <br>
<div class="form-group">
<label for="password">密码：</label>
<input type="password" id="password" name="password" required>
</div> <br>
<div class="form-group">
<button type="submit" class="btn">登录</button>
</div> <br>
{% if error %}
<p class="error-message">{{ error }}</p>
{% endif %}
</form>
</div>
</body>
</html>
2）后端代码部分：
# 这里简单设置一个用户名和密码，实际应用中应使用数据库进行验证
VALID_USERNAME = 'admin'
VALID_PASSWORD = '12345'
# 登录界面
@app.route('/', methods=['GET', 'POST'])
def login():
error = None
if request.method == 'POST':
username = request.form['username']
password = request.form['password']
if username == VALID_USERNAME and password == VALID_PASSWORD:
# 登录成功，跳转到主界面
return redirect(url_for('main'))
else:
error = '用户名或密码错误，请重新输入！'
return render_template('login.html', error=error)
if __name__ == '__main__':
app.run(debug=True)3）测试界面如下：
登录失败的提示：
后续在登录界面，添加注册功能，并结合mysql数据库操作。
标签：界面,form,python,flask,background,error,login,font,color From： https://blog.csdn.net/weixin_45710581/article/details/141937211