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

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. ajax缓存和fiddler——http协议调试代理工具

    1.在ie9下,ajax请求可能会有缓存,需要在请求上一个随机数 如:Math.random(); 2.fiddler2 打开以后可以查看所有的http请求情况,也可以使用本地脚本代替要请求的js文件 ...

  2. NTP同步时间

    什么是NTPNTP:Network Time Protocol(网络时间协议) ️ NTP 是用于同步网络中计算机时间的协议.它的用途是把计算机的时钟同步到世界协调时UTC. UTC:Universa ...

  3. Linux系统解压zip包出现中文乱码问题

    1. 使用指定GBK编码格式进行解压可以使用如下指定编码格式进行解压. unzip -O GBK 资料.zip 或者使用CP936也是可以指定GBK编码格式进行解压 unzip -O CP936 资料 ...

  4. MySQL学习（十一）为什么不推荐使用uuid和雪花id

    参考博客:https://www.cnblogs.com/wyq178/p/12548864.html 自增的主键的值是顺序的,所以Innodb把每一条记录都存储在一条记录的后面.当达到页面的最大填充 ...

  5. TypeScript 学习总结

    TypeScript JavaScript 语言 面向对象编程语言 面向脚本编程 是否支持可选参数 支持 不支持 是否支持静态类型 支持 不支持 是否支持接口 支持 不支持 TS:是JS的超集,即对J ...

  6. react中自定义函数、生命周期钩子函数、修改状态、组件、组件传值

    1.回顾 2.自定义函数 事件的首字母大小 onclick ==> onClick onchange ==> onChange 普通的点击事件 ---- 调用事件不加(),加了立即执行 i ...

  7. STM32F407 学习 （0） 各种外设功能 （上）

      本文对正点原子STM32F4探索者的基本功能及外设作最基本的介绍,随笔者本人的学习进程(基本按照正点原子)而不定时更新,起到总结的作用. 一.HAL库编写程序的运行逻辑   HAL库函数(如stm ...

  8. 企业实践 | 国产操作系统之光? 银河麒麟KylinOS-V10(SP3)高级服务器操作系统基础安装篇

    [点击 关注「 全栈工程师修炼指南」公众号 ] 设为「️ 星标」带你从基础入门 到 全栈实践 再到 放弃学习! 涉及 网络安全运维.应用开发.物联网IOT.学习路径 .个人感悟 等知识分享. 希望各位 ...

  9. [CTF]upload-lab靶场day1

    Pass-01 前端js绕过 拿到题目看hint提示判定在前端,用burp代理,将1.php后缀名更改为.png格式即可通过前端检测,而后在burp中对修改包内容,将1.png改为1.php即可绕过前 ...

  10. python之PySimpleGUI（三）dome

    dome1第一个程序其实会了第一个程序后面基本就都通了,就这么简单,后面只需要注意一下细节就可以import PySimpleGUI as sgsg.theme('Dark Blue 3') # pl ...