要编写登录页面，我们需要完成以下步骤：

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

]

效果：

Django4全栈进阶之路15 项目实战（用户管理）：login.html登录画面设计的更多相关文章

  1. web前端全栈学习之路

    web前端全栈学习之路 --- 陆续更新中 一.HTML相关 1.HTML常用标签:http://www.cnblogs.com/wyb666/p/8733699.html 2.HTML5基础: 3. ...

  2. python 全栈开发之路 day1

    python 全栈开发之路 day1   本节内容 计算机发展介绍 计算机硬件组成 计算机基本原理 计算机 计算机(computer)俗称电脑,是一种用于高速计算的电子计算机器,可以进行数值计算,又可 ...

  3. 你的Node应用，对接分布式链路跟踪系统了吗？(一） 原创： 金炳 Node全栈进阶 4天前 戳蓝字「Node全栈进阶」关注我们哦

    你的Node应用,对接分布式链路跟踪系统了吗?(一) 原创: 金炳 Node全栈进阶 4天前 戳蓝字「Node全栈进阶」关注我们哦

  4. C#.Net全栈工程师之路-学习路径

    C#.Net全栈工程师之路-学习路径 按架构分: C/S架构: B/S架构: Mobile移动开发: 按技术点分: C#编程基础以及OOP面向对象编程: 数据库基础以及高级应用(MYSQL+MSSQL ...

  5. 战争热诚的python全栈开发之路

    从学习python开始,一直是自己摸索,但是时间不等人啊,所以自己为了节省时间,决定报个班系统学习,下面整理的文章都是自己学习后,认为重要的需要弄懂的知识点,做出链接,一方面是为了自己找的话方便,一方 ...

  6. Python全栈开发之路 【第四篇】：Python基础之函数

    本节内容 函数def: 1.位置参数,默认参数 2.位置参数,关键参数 3.如果参数中出现 *users,传递的参数就可以不再是固定的个数, 传过来的所有元素进行打包成元组 *args,**kwarg ...

  7. Python全栈开发之路 【第一篇】：Python 介绍

    本节内容 一.Python介绍 python的创始人为荷兰人——吉多·范罗苏姆(Guido van Rossum).1989年的圣诞节期间,吉多·范罗苏姆为了在阿姆斯特丹打发时间,决心开发一个新的脚本 ...

  8. python全栈开发之路

    一.Python基础 python简介 python数据类型(数字\字符串\列表) python数据类型(元组\字典) python数据类型(集合) python占位符%s,%d,%r,%f prin ...

  9. Python全栈开发之路 【第七篇】：面向对象编程设计与开发（1）

    本节内容 一.编程范式 编程指的是写程序.敲代码,就是指程序员用特定的语法.数据结构和算法编写的代码,目的是来告诉计算机如何执行任务的. 在编程的世界里最常见的两大流派是:面向过程与面向对象.“功夫的 ...

  10. 全网最全postman接口测试教程和接口项目实战~从入门到精通！！！

    Postman实现接口测试内容大纲一览: ​ 一.什么是接口?为什么需要接口? ​ 接口指的是实体或者软件提供给外界的一种服务. 因为接口能使我们的实体或者软件的内部数据能够被外部进行修改.从而使得内 ...

随机推荐

  1. c/c++指针从浅入深介绍——基于数据内存分配的理解（上）

    c/c++指针从浅入深介绍--基于数据内存分配的理解(上) 本文是对自我学习的一个总结以及回顾,文章内容主要是针对代码中的数据在内存中的存储情况以及存储中数值的变化来对指针进行介绍,是对指针以及数据在 ...

  2. 【打怪升级】【rocketMq】rocket的持久化

    rocket持久化保证的思想有两点:1是刷盘保证大部分数据不丢失:2是持久化文件的处理,零拷贝技术和内存页,NIO模型保证处理能力 文件持久化目录 ├──abort:rocket broker启动检查 ...

  3. 关于wx.panel中添加wx.button按钮无显示问题记录

    本次出现按钮不显示的原因为pos坐标理解出错: 1.按钮之所没有出现,是因为将全局坐标作为按钮pos的定位,导致在有限的panel布局内无法显示出按钮: 2.经过调试发现当pos=(-1,-1)时,按 ...

  4. 制作微软原版Windows11 PE(含Powershell)

    1.adksetup下载链接:https://download.microsoft.com/download/1/f/d/1fd2291e-c0e9-4ae0-beae-fbbe0fe41a5a/ad ...

  5. CSS 高阶小技巧 - 角向渐变的妙用！

    本文将介绍一个角向渐变的一个非常有意思的小技巧! 我们尝试使用 CSS 绘制如下图形: 在之前,类似的图案,其实我们有尝试过,在 单标签实现复杂的棋盘布局 一文中,我们用单标签实现了这样一个棋盘布局: ...

  6. Redis Cluster集群搭建及节点的添加、删除

    系统性学习,移步IT-BLOG 一.什么是 Redis Cluster Redis 是在内存中保存数据的,而我们的电脑一般内存都不大,这也意味着 Redis 不适合存储大数据,适合存储大数据的是 Ha ...

  7. 爬取JSON文件并且存储

    思路 1 先调用模块 2 定义一个函数 2.1 获取网址(点击评论 找到JSON的文件(分析评论preview)获取Request URL后面的地址) 2.2 添加用户的请求头 2.3 使用get方法 ...

  8. Flask快速入门day 01（flask介绍、快速使用、配置文件、路由系统）

    目录 Flask框架 前言: 一.flask介绍 1.介绍 2.使用两种协议编写web 二.flask快速使用 1.快速使用: 2.使用flask编写登录小案例 2.1 login.html 2.2 ...

  9. selenium验证码处理-打码平台操作

    1.进入打码平台(超人,斐斐) 斐斐-------官网: 超人-------官网: 2.选择对应的开发文档,下载对应的demo示例,并把demo的python脚本放到项目包管理地址去 参考: 超人的开 ...

  10. vue之数组的方法

    目录 简介 filter方法 简介 本文会把遇到的数组的方法慢慢补充进来 filter方法 filter()方法是一个过虑方法 以下面的为例:列表dataList会每次取一个值,把值给匿名函数,并执行 ...