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

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. v2即时通讯的应用

    1.建立webscoket.js: import Vue from 'vue' import { Message } from 'element-ui' let v = new Vue() v.$me ...

  2. 三天吃透MySQL面试八股文

    本文已经收录到Github仓库,该仓库包含计算机基础.Java基础.多线程.JVM.数据库.Redis.Spring.Mybatis.SpringMVC.SpringBoot.分布式.微服务.设计模式 ...

  3. 微软NewBing真是Niubility

    这是本人2012年的拙作:           晨兮,闻风雨,后而雷鸣电闪.迟不可再三,若故无食.然何如耶?雨大风狂,单车奈何?公交卡空,恐时不予我也.不免叹也,天亦不予我!         而后出, ...

  4. 关于Android开发工具的下载之SDK篇

    SDK的下载 需要注意的是,如果我们使用的是Eciplise工具的话,那我们需要下载版本较低的android SDK tools, 在这里把下载链接放在这里啦:https://link.csdn.ne ...

  5. Qt 学习笔记 - 第五章 - Qt 时间编程 - Qt 时钟

    原文地址:Qt 学习笔记 - 第五章 - Qt 时间编程 - Qt 时钟 Qt 学习笔记全系列传送门: Qt 学习笔记 - 第一章 - 快速开始.信号与槽 Qt 学习笔记 - 第二章 - 添加图片.布 ...

  6. 最新 umi4-max 如何使用 webpack5 联邦模块

    新项目用 umi4-max 搭建,部分功能想要使用其他项目的功能,不想重新开发,想到了使用 webpack5 的联邦模块,可以直接引用其他项目代码来实现共享代码. 理想很美好,现实很残酷.直接按照 w ...

  7. Xenomai 再探

    一.Xenomai API 接口使用总结 Alarm-操作: 在使用实时任务过程中,采用看门狗定时器进行延时操作时,会产生实时域到非实时域的上下文切换操作,从而导致实时线程实时性受到影响,具体如下: ...

  8. python进程之进程池、线程池与异步回调机制

    进程线程不可以无限制的创建,因为有硬件的限制.为了避免资源被程序消耗过度,可以使用进程池或线程池的技术. 池     降低程序的执行效率,但是保证了计算机硬件的安全 进程池     提前创建好固定数量 ...

  9. pandas之面属行统计

    描述统计学(descriptive statistics)是一门统计学领域的学科,主要研究如何取得反映客观现象的数据,并以图表形式对所搜集的数据进行处理和显示,最终对数据的规律.特征做出综合性的描述分 ...

  10. window远程桌面

    此文档概述如何开启win8.win8.1系统的远程桌面连接服务,可以让我们从一台电脑远程连接的其他电脑! 同时按"win键+R键",再打开的运行对话框中输入"contro ...