使用Django框架自带的Form表单完成简单的用户登录注册

news2024/11/17 13:52:52

如果不知道怎么配置Django环境以及如何连接数据库请点击我的上一篇博客:
使用pycharm初始化Django框架并连接Sql Server

文章目录

  • 1.Django默认生成的数据表
  • 2.用户登录
    • 2.1创建登录页面
    • 2.2视图处理登录请求
    • 2.3配置访问路径
  • 3.用户注册
    • 3.1创建用户表单
    • 3.2创建注册模版页面
    • 3.3创建视图注册处理函数
    • 3.4配置 URL
  • 4.效果演示
    • 4.1注册
    • 4.2登录

1.Django默认生成的数据表

  • auth_user: 存储用户的基本信息,包括用户名、密码(加密后)、电子邮件、姓名等。这个表用于支持用户身份验证系统。
  • auth_group: 存储用户组的信息,用于对用户进行分组管理。
  • auth_permission: 存储权限信息,用于管理用户和用户组的权限。
  • auth_user_groups: 用户和用户组的关联表,用于表示用户属于哪些用户组。
  • auth_user_user_permissions: 用户和权限的关联表,用于表示用户具有哪些权限。
  • django_session: 用于存储用户会话信息,包括用户的会话密钥和会话数据。
  • django_migrations: 记录了数据库迁移的历史信息,包括迁移文件的名称、应用程序名称、迁移状态等。
  • django_content_type: 用于存储模型的元数据信息,包括模型的应用程序名称、模型名称等。
  • django_admin_log: 用于记录管理员操作日志的表,包括了对数据的增删改查等操作记录。
    这些默认数据表是 Django 框架提供的核心组件,用于支持其内置功能,如身份验证、权限管理、会话管理等。它们可以根据需要进行扩展和定制,也可以通过 Django 的 ORM(对象关系映射)来进行操作和查询。本次登录注册可以使用auth_user这张数据表来完成。

2.用户登录

2.1创建登录页面

在Django项目中template目录创建user_login.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Login</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f4;
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }
        .login-container {
            background-color: #fff;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
             width: 400px; /* 修改宽度 */
            height: 400px;
            margin: 20px; /* 添加外边距 */
        }
        .login-container h2 {
            text-align: center;
        }
        .login-container form {
            display: flex;
            flex-direction: column;
        }
        .login-container form input[type="text"],
        .login-container form input[type="password"] {
            margin-bottom: 15px;
            padding: 10px;
              margin-top: 10%;
            border-radius: 4px;
            border: 1px solid #ccc;
            font-size: 16px;
        }
        .login-container form input[type="submit"] {
              margin-top: 20%;
            background-color: #007bff;
            color: #fff;
            border: none;
            padding: 10px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
            transition: background-color 0.3s ease;
        }
        .login-container form input[type="submit"]:hover {
            background-color: #0056b3;
        }
    </style>
</head>
<body>
    <div class="login-container">
        <h2>用户登录</h2>
        <form  method="post">
              {% csrf_token %}
            <input type="text" name="username" placeholder="Username" required>
            <input type="password" name="password" placeholder="Password" required>
            <input type="submit" value="Login">
        </form>
    </div>
</body>
</html>

2.2视图处理登录请求

在项目目录中新建 reader_controller.py(一般命名为views.py 笔者写SpringBoot项目习惯了 以controller为结尾命名了)

def reader_login(request):
    if request.method == 'POST':
        username = request.POST.get('username')
        password = request.POST.get('password')
        if username and password:
            # 进行身份验证
            user = authenticate(username=username, password=password)
            if user is not None:
                # 读者验证成功,执行逻辑或重定向到其他页面
                return HttpResponse('登录成功')
            else:
                return HttpResponse('无效的凭据')
        else:
            return HttpResponseBadRequest('请提供用户名和密码')
    return render(request, 'user_login.html')  # 渲染 user_login.html 模板

authenticate函数详解: Django 中用于进行用户身份验证的函数。它用于验证用户提供的凭据(例如用户名和密码)是否有效,并返回相应的用户对象。

  1. 接收用户凭据: authenticate() 函数接收用户提供的凭据,通常是用户名和密码。
  2. 验证凭据: 它在数据库中查找具有提供的用户名的用户对象,然后尝试使用提供的密码对该用户进行验证。默认查询框架自带的auth_user数据表,可以在settings.py修改,改为自己的用户模型,这里以auth_user数据表举例,不过多赘述。
  3. 返回用户对象: 如果提供的凭据有效并且验证通过,authenticate() 将返回相应的用户对象。否则,它将返回 None。

2.3配置访问路径

将路径与视图处理函数进行绑定,以便进行访问页面
 path('login/', reader_controller.reader_login, name='reader_login'),

3.用户注册

3.1创建用户表单

Django 框架提供了表单组件,可以用于对页面进行初始化,生成 HTML 标签,此外还可以对用户提交的数据进行校验(显示错误信息)。在项目目录下新建forms.py文件

from django import forms
from django.contrib.auth.forms import UserCreationForm
from django.contrib.auth.models import User


class SignUpForm(UserCreationForm):
    email = forms.EmailField(max_length=254, help_text='必填字段')
    password1 = forms.CharField(
        label="密码",
        strip=False,
        widget=forms.PasswordInput(attrs={'autocomplete': 'new-password'}),
        help_text="至少8个字符"
    )
    password2 = forms.CharField(
        label="重复输入密码",
        widget=forms.PasswordInput(attrs={'autocomplete': 'new-password'}),
        strip=False,
        help_text="再次输入密码"
    )

    username = forms.CharField(
        label="用户名",
        help_text="必填字段"
    )

    class Meta:
        model = User
        fields = ('username', 'password1', 'password2', 'email')

这里定义了表单四个字段,并对提示进行了重载, 可以只定义 class Meta,那样显示的是默认效果。

3.2创建注册模版页面

在目录下的templates文件夹下新建signup.html

<!DOCTYPE html>
<html>
<head>
    <title>注册</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <!-- 引入 Bootstrap 样式表 -->
    <style>
        /* 自定义额外样式 */
        .form-signup {
            max-width: 400px;
            margin: 0 auto;
            padding: 15px;
            border: 1px solid #ccc;
            border-radius: 5px;
            background-color: #f9f9f9;
        }

        .form-signup h2 {
            margin-bottom: 20px;
        }

        .form-signup label {
            font-weight: bold;
            display: block;
            margin-bottom: 5px; /* 调整标签和输入框之间的间距 */
        }

        .form-signup input[type="text"],
        .form-signup input[type="password"],
        .form-signup input[type="email"] {
            width: 100%;
            padding: 8px;
            margin-bottom: 10px;
            border: 1px solid #ccc;
            border-radius: 4px;
            box-sizing: border-box;
        }

        .form-signup .btn-primary {
            margin-top: 20px;
        }
    </style>
</head>
<body>

<div class="container mt-5">
    <h2 class="text-center mb-4">用户注册</h2>
    <form method="post" class="form-signup">
        {% csrf_token %}
        {{ form.as_p }}
        <button type="submit" class="btn btn-primary btn-block">注册</button>
    </form>
</div>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<!-- 引入 Bootstrap JavaScript -->
</body>
</html>

其中 {{ form.as_p }} 代表了引用了Django的form表单,并以p标签的形式显示。同时页面使用bootstrap框架进行了稍微了美化

3.3创建视图注册处理函数

在视图中处理用户提交的注册表单。

def signup(request):
    if request.method == 'POST':
        form = SignUpForm(request.POST)
        if form.is_valid():
            form.save()
            return redirect('/login')  # 注册成功后重定向到登录页面或其他页面
        print(form.errors)        # 打印错误信息
    else:
        form = SignUpForm()
    return render(request, 'signup.html', {'form': form})

如果使用了Django的form组件,可以直接获取form表单,并对字段进行校验,创建新用户并保存到数据库中。如果校验不通过,将继续返回注册页面重新注册

3.4配置 URL

from django.contrib import admin
from django.urls import path
from . import reader_controller
urlpatterns = [
    path('admin/', admin.site.urls),
    path('login/', reader_controller.reader_login, name='reader_login'),
    path('signup/', reader_controller.signup, name='reader_signup'),
]

4.效果演示

4.1注册

在浏览器输入http://127.0.0.1:8000/signup/
在这里插入图片描述
注册成功之后,将跳转到登录页面。查看数据库进行验证,可以发现,django 自动帮我们进行了密码加密,并且添加了其他的字段,非常的方便
在这里插入图片描述

4.2登录

当注册成功后自动跳转到登录页面,也可以在浏览器直接通过地址访问
在这里插入图片描述
当数据库数据匹配成功后,将会跳转到登录成功页面。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1371987.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

VScode代码格式化

Vscode代码格式化 有时候总是想,为什么我的代码格式化完后为什么这么挤,而且不想让代码在格式化后换行,他总是自动换行,所以我去网上查了相关资料 第一步,搜索插件ESLint并安装,安装完成后你就可以进行格式化了 第二步,设置中选择settings,搜索Tab size,根据一下图片更改 第…

全志T113开发板Qt远程调试

1引言 通常情况下工程师在调试Qt程序时&#xff0c;需要频繁制作镜像烧录到核心板来测试Qt程序是否完善&#xff0c;这样的操作既费时又费力。这时我们可以通过QtCreator设备功能&#xff0c;定义设备后&#xff0c;在x86_64虚拟机上交叉编译qt程序&#xff0c;将程序远程部署到…

ubuntu 18.04网络问题

ubuntu 18.04网络问题汇总 准备工作一、有线网卡不可用二、无法访问外网 准备工作 安装好系统之后&#xff0c;检查gcc和make是否已经安装 $ which gcc /usr/bin/gcc $ which make /usr/bin/make如果未安装&#xff0c;则安装gcc和make $ apt install gcc $ apt install mak…

Golang协程池ants库的学习、使用及源码阅读,协程池与GMP模型关系的理解

前言 在工作时遇到了一个需要使用ants协程池的地方&#xff0c;因此顺带来学习一下他的原理。 协程池 Golang的资源还是偏少一些…因此先简单的参考学习了一下线程池。 类似于Java中的线程池&#xff0c;协程池也是为了减少协程频繁创建、销毁所带来资源消耗的问题。按默认每…

【我想开发一个小程序,大概需要多少钱?】

小程序开发为什么报价差距很大&#xff1f;主要是因为小程序的实现方法和功能模型不同。 小程序的实现方法&#xff1a; 实现方法主要分为SAAS小程序、定制小程序和第三方平台小程序。不同的实现方法价格都是不一样的&#xff0c;大概的区间如下&#xff1a; SAAS小程序和第三…

ChatGPT+Python近红外光谱数据分析及机器学习与深度学习建模进阶应用

目录 第一章 ChatGPT4入门基础 第二章 ChatGPT4 提示词使用方法与技巧 第三章 ChatGPT4助力信息检索与总结分析 第四章 ChatGPT4助力论文写作与投稿 第五章 ChatGPT4助力Python入门基础 第六章 ChatGPT4助力近红外光谱数据预处理 第七章 ChatGPT4助力多元线性回归近红外…

leetcode经典【双指针】例题

删除有序数组中的重复项&#xff1a; https://leetcode.cn/problems/remove-duplicates-from-sorted-array/ 解题思路&#xff1a; 首先注意数组是有序的&#xff0c;那么重复的元素一定会相邻。 注: 要求删除重复元素&#xff0c;实际上就是将不重复的元素移到数组的左侧。 考…

ubuntu20.04安装cuda11.4以及cudnn

系统&#xff1a;ubuntu20.04硬件配置&#xff1a;GPU3080、CPU未知通过《软件和更新》在附加驱动选项中添加了驱动&#xff1a; 1.检查自己电脑支持的cuda nvidia-smi4. 下载cuda11.4.2 wget https://developer.download.nvidia.com/compute/cuda/11.4.2/local_installers/c…

典型的无人机打击技术

无人机打击技术主要指的是用于中和、摧毁或干扰无人机&#xff08;UAV&#xff09;的各种技术手段。 这些技术随着无人机的广泛使用而迅速发展&#xff0c;特别是在军事和安全领域。下面是一些主要的无人机打击技术及其原理&#xff1a; 射频干扰&#xff08;RF Jamming&#x…

算法通关村番外篇-LeetCode编程从0到1系列六

大家好我是苏麟 , 今天带来LeetCode编程从0到1系列六 . 链表相关的题目 , 也是面试热题 . 大纲 21. 合并两个有序链表206. 反转链表 21. 合并两个有序链表 描述 : 将两个升序链表合并为一个新的 升序 链表并返回。新链表是通过拼接给定的两个链表的所有节点组成的。 题目 : Le…

苹果手机设置静态IP教程,长效IP代理有什么帮助?

随着智能手机的普及&#xff0c;越来越多的人开始使用苹果手机。然而&#xff0c;有时候我们在使用苹果手机时&#xff0c;可能会遇到需要设置静态IP的情况。那么&#xff0c;如何在苹果手机上设置静态IP呢&#xff1f;下面就为大家详细介绍一下。 1、打开苹果手机&#xff0c;…

LINUX基础第十一章:文件系统与日志服务管理

目录 一.LINUX文件系统 1.inode表和block &#xff08;1&#xff09;inode &#xff08;2&#xff09;block 2.查看inode号命令 3.Linux系统文件三种主要时间属性 4.磁盘空间还剩余很多但无法继续创建文件 5.inode大小 二.日志 1.日志保存位置 2.日志文件的分类 &am…

关于java的稀疏数组

关于java的稀疏数组 我们在前面的文章中了解了冒泡排序和优化冒泡排序&#xff0c;在本篇文章中我们来介绍一下稀疏数组&#xff0c;我们学会了可以自己动手试一试&#x1f600; 稀疏数组 在介绍稀疏数组之前&#xff0c;我们先来了解一下五子棋。 我们这里有一个11 x 11的棋…

新手练习项目 4:简易2048游戏的实现(C++)

名人说&#xff1a;莫听穿林打叶声&#xff0c;何妨吟啸且徐行。—— 苏轼《定风波莫听穿林打叶声》 Code_流苏(CSDN)&#xff08;一个喜欢古诗词和编程的Coder&#xff09; 目录 一、效果图二、代码&#xff08;带注释&#xff09;三、说明 一、效果图 二、代码&#xff08;带…

深度学习|交叉熵

文章目录 什么是交叉熵如何构造信息量的函数关于 C 1 C_1 C1​参数的选择关于 C 2 C_2 C2​参数的选择 一个系统的熵如何比较两个系统的熵交叉熵在神经网络中的应用参考 什么是交叉熵 熵是用来衡量一个系统的混乱程度&#xff0c;混乱程度也其实代表着整个系统内部的不确定性。…

Redis缓存使用问题

数据一致性 只要使用到缓存,无论是本地内存做缓存还是使用 redis 做缓存,那么就会存在数据同步的问题。 以 Tomcat 向 MySQL 中写入和删改数据为例,来解释数据的增删改操作具体是如何进行的。 我们分析一下几种解决方案, 1、先更新缓存,再更新数据库 2、先更新数据库,…

搭建Docker私有镜像服务器

一、前言 1、本文主要内容 基于Decker Desktop&Docker Registry构建Docker私有镜像服务器测试在CentOS 7上基于Docker Registry搭建公共Docker镜像服务器修改Docker Engine配置以HTTP协议访问Docker Registry修改Docker Engine配置通过域名访问Docker Registry配置SSL证书…

1分钟速通Webservice服务端和客户端

服务端实现&#xff1a; 我们随便实现一个简单服务&#xff0c;客户请求我们的服务&#xff0c;我们给客户返回响应的信息 WebService public class HelloServiceImpl implements HelloService {Overridepublic String getString(String name) {return "hello," n…

使用numpy处理图片——基础操作

大纲 准备工作图片像素大小修改透明度 numpy是一款非常优秀的处理多维数组的Python基础包。在现实中&#xff0c;我们最经常接触的多维数组相关的场景就是图像处理。本系列将通过若干篇对图像处理相关的探讨&#xff0c;来介绍numpy的使用方法&#xff0c;以获得直观的体验。 本…

主食冻干哪款好?十大放心主食冻干名单推荐

作为养猫的人&#xff0c;我们都知道每天最担心的事情就是如何为心爱的猫咪选择一款高品质的猫粮。我们都希望为猫咪提供最好的营养&#xff0c;让它们健康快乐地成长。然而&#xff0c;近期的一些事件&#xff0c;如百利猫粮生虫和VE主食冻干掰开有虫&#xff0c;让我们不得不…