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 模式 ... ]
效果: