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

 效果：

 

posted @   侬侬发  阅读(177)  评论(0)  编辑  收藏  举报
相关博文：
·  Django4全栈进阶之路17 项目实战（用户管理）：user_add.html用户新增画面设计
·  Django4全栈进阶之路16 项目实战（用户管理）：user_list.html用户列表画面设计
·  Django渲染页面以及登录的操作
·  django练手（ 十二）：实现网站的登录功能
·  登录案例的需求分析以及代码实现
阅读排行：
· 25岁的心里话
· 闲置电脑爆改个人服务器（超详细） #公网映射 #Vmware虚拟网络编辑器
· 基于 Docker 搭建 FRP 内网穿透开源项目（很简单哒）
· 零经验选手，Compose 一天开发一款小游戏！
· 一起来玩mcp_server_sqlite，让AI帮你做增删改查！！
点击右上角即可分享
微信分享提示