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

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. flask orm 操作方法

    数据库操作 常用的查询过滤器 过滤器 说明 filter() 把过滤器添加到原查询上,返回一个新查询 filter_by() 把等值过滤器添加到原查询上,返回一个新查询 limit() 使用指定的值限 ...

  2. docker学习3

    docker的启动流程 docker run -t -i <name:tag> /bin/bash -t 把1个伪终端绑定到容器的标准输入 -i 保持容器的标准输入始终打开不关闭 启动流程 ...

  3. maven 多模块项目的测试覆盖率分析 - jacoco 聚合分析

    前言 对于大多数 maven 多模块化工程,可以使用 Jacoco 这款工具,关于 Jacoco 这款工具,ChatGPT 对它的描述是这样的: JaCoCo(Java Code Coverage)是 ...

  4. 学会规则引擎Drools，让你早点下班

    前言 现在有这么个需求,网上购物,需要根据不同的规则计算商品折扣,比如VIP客户增加5%的折扣,购买金额超过1000元的增加10%的折扣等,而且这些规则可能随时发生变化,甚至增加新的规则.面对这个需求 ...

  5. 关于如何在IDEA里面配置好Git和Github的相关步骤详解

    配置Git 1.File->settings 然后选择其中的Version Control: 接着选择其中的Git选项: 2.将文本框内容定位到本地下载git路径下面 然后点击右边的Test测试 ...

  6. 使用 SpeechT5 进行语音合成、识别和更多功能

    我们很高兴地宣布,SpeechT5 现在可用于 Transformers (一个开源库,提供最前沿的机器学习模型实现的开源库). SpeechT5 最初见于微软亚洲研究院的这篇论文 SpeechT5: ...

  7. 【手搓模型】亲手实现 Vision Transformer

    前言 博客主页:睡晚不猿序程 首发时间:2023.3.17,首发于博客园 最近更新时间:2023.3.17 本文由 睡晚不猿序程 原创 作者是蒻蒟本蒟,如果文章里有任何错误或者表述不清,请 tt 我, ...

  8. Java面试——专业技能

    目录 一.简单讲下 Java 的跨平台原理 二.装箱与拆箱 三.实现一个拷贝文件的工具类使用字节流还是字符流 四.介绍下线程池 五.JSP和 Servlet 有哪些相同点和不同点 六.简单介绍一下关系 ...

  9. JsonCpp JSON格式处理库的介绍和使用（面向业务编程-文件格式处理）

    JsonCpp JSON格式处理库的介绍和使用(面向业务编程-文件格式处理) 介绍 JSON是一种轻量级的数据交换格式,它是一种键值对的集合.它的值可以是数字.字符串.布尔值.序列. 想知道更多有关J ...

  10. R语言文本数据挖掘（二）

    tm文本挖掘示例 文本挖掘是从非结构化的文本信息中抽取潜在的.用户感兴趣的重要模式或知识的过程,可以把它看作数据挖掘或数据库中知识发现的延伸.对文本信息的挖掘主要是以数理统计学和计算语言学为理论基础, ...