Django4全栈进阶之路15 项目实战（用户管理）：login.html登录画面设计
要编写登录页面，我们需要完成以下步骤：
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 模式 ... ]
效果：
