要编写登录页面，我们需要完成以下步骤：
template文件夹中创建 login.html 模板文件，输入以下 HTML 代码：
{% extends 'base.html' %}
{% block title %}Login{% endblock %}
{% block content %}
<h2>Login</h2>
<form method="post">
{% csrf_token %}
<div>
<label for="username">Username:</label>
<input type="text" name="username" required>
</div>
<div>
<label for="password">Password:</label>
<input type="password" name="password" required>
</div>
<button type="submit">Login</button>
</form>
{% endblock %}
在上面的模板中，我们使用了 {% extends 'base.html' %} 继承了基础模板 base.html，并覆盖了 block 中的内容来实现登录页面的具体功能。
或者独立创建，因为登录窗口要优先于主页显示。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Login Window</title>
<!-- 引入 Bootstrap 和 jQuery -->
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.2/css/bootstrap.min.css">
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.2/js/bootstrap.min.js"></script>
<style>
/* 将登录窗口置于页面中心位置 */
.login-wrapper {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
} /* 登录窗口样式 */
.login {
width: 300px;
padding: 20px;
border: 1px solid #ccc;
border-radius: 5px;
} .form-group {
margin-bottom: 10px;
} label {
display: block;
margin-bottom: 5px;
} input[type="text"],
input[type="password"] {
width: 100%;
padding: 5px;
border: 1px solid #ccc;
border-radius: 3px;
} button {
display: block;
width: 100%;
padding: 5px;
margin-top: 10px;
background-color: #007bff;
color: #fff;
border: none;
border-radius: 3px;
cursor: pointer;
} button:hover {
background-color: #0069d9;
}
</style>
</head>
<body>
<div class="login-wrapper">
<div class="login">
<h2>登录</h2>
<hr>
{% if error_message %}
<div class="alert alert-danger">{{ error_message }}</div>
{% endif %}
<form method="post" action="{% url 'login' %}">
{% csrf_token %}
<div class="form-group">
<label for="username">用户名</label>
<input type="text" id="username" name="username" placeholder="Enter your username">
</div>
<div class="form-group">
<label for="password">密码</label>
<input type="password" id="password" name="password" placeholder="Enter your password">
</div>
<button type="submit">确认</button>
</form>
</div>
</div>
</body>
</html>
在 views.py 文件中编写登录视图函数 login_view：
def login_view(request):
if request.method == 'POST':
username = request.POST.get('username')
password = request.POST.get('password')
user = authenticate(request, username=username, password=password)
if user is not None:
login(request, user)
return redirect('home')
else:
error_message = 'Invalid username or password'
return render(request, 'login.html', {'error_message': error_message})
else:
return render(request, 'login.html')
在上面的视图函数中，我们首先判断请求的方法是否为 POST，如果是则获取请求中的用户名和密码，并使用 authenticate() 函数进行身份验证。如果身份验证成功，则使用 login() 函数登录用户，并重定向到首页；否则，将错误消息传递给模板，并重新渲染登录页面。
在 urls.py 文件中设置登录页面的 URL，将其映射到 login_view 视图函数：
主路由：
urlpatterns = [
# ... 其他 URL 模式 ...
path('myapp/', include('MyApp.urls')),
]
子路由：
from django.urls import path
from .views import login_view urlpatterns = [
path('login/', login_view, name='login'),
# ... 其他 URL 模式 ...
]
或者
from django.urls import path from . import views urlpatterns = [
path('login/', views.login_view, name='login'),
# ... 其他 URL 模式 ...
]
效果：
