前端代码 写一个登录的页面。用户名:输入框、密码:输入框居中对齐,布局合理。包括记住密码勾选框,登录按钮为浅蓝色。同时点击登陆时后端代码用django写出来,查询数据库。匹配成功后返回首页
时间: 2023-06-12 22:08:12 浏览: 50
HTML代码:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>登录页面</title>
<style>
body {
background-color: #f6f6f6;
font-family: Arial, sans-serif;
}
.form-wrapper {
margin: 80px auto;
width: 400px;
background-color: #fff;
padding: 40px;
border-radius: 10px;
box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.2);
}
.form-wrapper h1 {
font-size: 24px;
margin-top: 0px;
margin-bottom: 20px;
text-align: center;
}
.form-group {
margin-bottom: 15px;
}
.form-group label {
display: block;
font-size: 16px;
margin-bottom: 5px;
}
.form-group input[type="text"],
.form-group input[type="password"] {
width: 100%;
padding: 10px 15px;
font-size: 16px;
border: 1px solid #ccc;
border-radius: 5px;
outline: none;
}
.form-group input[type="checkbox"] {
margin-right: 5px;
vertical-align: middle;
}
.form-group .remember-me {
font-size: 14px;
display: inline-block;
vertical-align: middle;
}
.btn-login {
display: block;
width: 100%;
padding: 10px 15px;
background-color: #28a745;
color: #fff;
font-size: 16px;
text-align: center;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s ease-in-out;
}
.btn-login:hover {
background-color: #218838;
}
</style>
</head>
<body>
<div class="form-wrapper">
<h1>登录</h1>
<form action="{% url 'login' %}" method="POST">
{% csrf_token %}
<div class="form-group">
<label for="id_username">用户名:</label>
<input type="text" name="username" id="id_username" required>
</div>
<div class="form-group">
<label for="id_password">密码:</label>
<input type="password" name="password" id="id_password" required>
</div>
<div class="form-group">
<input type="checkbox" name="remember_me" id="id_remember_me">
<label for="id_remember_me" class="remember-me">记住密码</label>
</div>
<button type="submit" class="btn-login">登录</button>
</form>
</div>
</body>
</html>
```
后端代码(使用Django):
```python
from django.shortcuts import render
from django.contrib.auth import authenticate, login
from django.http import HttpResponseRedirect
def login_view(request):
if request.method == 'POST':
username = request.POST.get('username')
password = request.POST.get('password')
remember_me = request.POST.get('remember_me')
user = authenticate(request, username=username, password=password)
if user is not None:
login(request, user)
if not remember_me:
request.session.set_expiry(0)
return HttpResponseRedirect('/')
else:
error_message = '用户名或密码错误,请重新输入'
return render(request, 'login.html', {'error_message': error_message})
else:
return render(request, 'login.html')
```
其中,`login.html`是前端页面的文件名,`login_view`是Django中的视图函数,表示登录页面的访问路径。在POST请求中,获取用户输入的用户名、密码和是否勾选“记住密码”复选框的值,通过`authenticate`方法验证用户名和密码是否匹配,如果匹配则调用`login`方法进行登录,并根据是否勾选“记住密码”复选框设置session过期时间。如果验证失败,则返回错误信息并重新渲染登录页面。在GET请求中,直接渲染登录页面。