Django之登录注册

最近在准备上线一个网站(基于django的编程技术学习与外包服务网站),所以会将自己的在做这个项目的过程中遇到的模块业务以及所涉及到的部分技术记录在CSDN平台里,一是希望可以帮到有需要的同学,二十以供自己后续回顾学习。

今天要分享的是django的登录和注册页面功能,其实做网页登录和注册基本上都是必要的一步啦,那么今天我们就来了解一下。

登录注册前端Html以及Css我就不细说啦,毕竟我主要是负责后端业务的,再说即使你我不会前端的内容,网上一大堆的登录注册的模板,直接拿来下载就好了,我这个登陆注册的前端模板就是直接在网站上Copy的,另外说到这个登录注册一般有两种情况(1:登录为一个页面,注册为一个页面,2:登录注册同是在一个页面)。

我先说一下在django框架里我们实现登录注册的一个大概流程:

拿到前端的模板,我们更据需要建立对应的数据库里的字段,然后回来前端来看,比如说我们点击注册,那么我们把注册的按钮的类型设置为submit,给每一个注册页面的输入框设置一个name属性,然后回到后端来看,在后端里,我们在函数中需要写入判断函数,如果是GET方法则返回注册页面,如果是POST方法(submit即提交表单),我们则会获取我们输入框的信息,然后我们将其存放在数据库里即可,同时回到登录页面,然后输入框输入对应的信息,如果输入的信息(账号和密码)存在在数据库里,则信息正确进入我们的首页(指定页面)。

前端页面如下:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>DjangoText</title><link href="https://fonts.googleapis.com/css?family=Comfortaa|Spartan&display=swap" rel="stylesheet"><script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/js/all.min.js"></script><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css"/><script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script><meta charset="utf-8"><meta name="viewport"content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui, viewport-fit=cover"><meta name="apple-mobile-web-app-capable" content="yes"><link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"><link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.12.0/css/all.css"><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script><link rel="stylesheet" href="/static/css/loginstyle.css">
</head>
<body>
<!-- partial:index.partial.html -->
<body><div class="container"><div class="content"><div class="login-container animated fadeInDown" style="animation-delay:.3ms;"><!--   Login   --><div class="login justify-content-center" id="login-form"><h1 class="form-title"><i class="fas fa-user" style="color:#55a0ff;"></i> <br> LOGIN<hr></h1><div class="form-container animated fadeIn" style="animation-delay:.7ms;"><form method="POST">{% csrf_token %}<label for=""><i class="fas fa-at"></i> Email </label><input type="text" name="account" placeholder="Account"><label for=""><i class="fab fa-slack-hash"></i> Password </label><input type="password" name="password" placeholder="Password"><div class="submit-buttons"><input type="submit" value="登录" name="loginsubmit"><input type="button" value="注册" class="btn-register"></div></form></div></div><!--   Login   --><!--    Register    --><div class="register justify-content-cente animatedr" style="animation-delay:.3s"><h1 class="form-title "><i class="fas fa-user-plus" style="color:#57efc4;"></i> <br> REGISTER<hr></h1><div class="form-container animated fadeIn" style="animation-delay:.3s;"><form method="POST" action="/login/" >{% csrf_token %}<label for=""><i class="fab fa-amilia"></i> Name </label><input type="text" name="name" placeholder="Name"><label for=""><i class="fas fa-at"></i> Account </label><input type="text" name="account" placeholder="Account"><label for=""><i class="fab fa-slack-hash"></i> Password </label><input type="password" name="password" placeholder="Password"><label for=""><i class="fab fa-slack-hash"></i> Confirm Password </label><input type="password" name="password_confirmation" placeholder="Password"><div class="submit-buttons"><input type="submit" name="registersubmit" value="注册" style="background:#55efc4;"><input type="button" value="登录" class="btn-login"></div></form></div></div><!--    Register    --><div class="login animated fadeIn" style="animation-delay:.7s;animation-duration:4s;" id="login-bg"></div></div></div>
</div></body>
<!-- partial -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/fontawesome-iconpicker/3.2.0/js/fontawesome-iconpicker.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css'></script>
<script src="/static/js/loginscript.js"></script></body>
</html>

自定义404报错页面:

<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>404 Page</title><link rel="stylesheet" href="/static/css/style_error.css"></head>
<body>
<section class="wrapper"><div class="container"><div id="scene" class="scene" data-hover-only="false"><div class="circle" data-depth="1.2"></div><div class="one" data-depth="0.9"><div class="content"><span class="piece"></span><span class="piece"></span><span class="piece"></span></div></div><div class="two" data-depth="0.60"><div class="content"><span class="piece"></span><span class="piece"></span><span class="piece"></span></div></div><div class="three" data-depth="0.40"><div class="content"><span class="piece"></span><span class="piece"></span><span class="piece"></span></div></div><p class="p404" data-depth="0.50">Error</p><p class="p404" data-depth="0.10">Error</p></div><div class="text"><article><p>{{ errorMsg }}</p><button id="back">返回首页</button></article></div></div>
</section><script src='/static/js/parallax.min.js'></script>
<script src='/static/js/jquery.min.js'></script>
<script src="/static/js/script.js"></script>
<script>var back = document.getElementById('back');back.onclick = function(e){history.back()}
</script>
</body>
</html>

后端业务处理代码如下:

def login(request):if request.method == "GET":return render(request,'login.html')elif request.POST.get('registersubmit'):print('nihao 注册')name = request.POST.get('name')account = request.POST.get('account')password = request.POST.get('password')checkpassword = request.POST.get('password_confirmation')try:User.objects.get(account=account)except:if not name or not account or not password or not checkpassword:return errorResponse(request, '定义技术:昵称or账号or密码存在空值')if password != checkpassword:return errorResponse(request, '定义技术:两次密码不吻合')User.objects.create(name=name, account=account, password=password, checkpassword=checkpassword)return render(request,"login.html")elif request.POST.get('loginsubmit'):print('nihao 登录')account1 = request.POST.get('account')password1 = request.POST.get('password')try:User.objects.get(account=account1,password=password1)except:return errorResponse(request,'定义技术:输入信息有误')

数据库:

from django.db import models
class User(models.Model):name=models.CharField(verbose_name='昵称',max_length=30)account=models.CharField(verbose_name='账号',max_length=30)password=models.CharField(verbose_name='密码',max_length=30)checkpassword=models.CharField(verbose_name='确认密码',max_length=30)

效果图:

自定义404报错页面:

另外说一下,我这个前端的登陆注册页面是在一个外网Copy下载的,且登陆注册的右侧的那个图片是你每次登录注册都会随机生成不同的图片,所以加载的时候可能会出现慢的情况。

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

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

相关文章

RabbitMQ生产者的可靠性

目录 MQ使用时会出现的问题 生产者的可靠性 1、生产者重连 2、生产者确认 3、数据持久化 交换机持久化 队列持久化 消息持久化 LazyQueue懒加载 MQ使用时会出现的问题 发送消息时丢失&#xff1a; 生产者发送消息时连接MQ失败生产者发送消息到达MQ后未找到Exchange生…

Jetson Xavier NX FFmpeg支持硬件编解码

最近在用Jetson Xavier NX板子做视频处理&#xff0c;但是CPU进行视频编解码&#xff0c;效率比较地下。 于是便考虑用硬解码来对视频进行处理。 通过jtop查看&#xff0c;发现板子是支持 NVENC硬件编解码的。 1、下载源码 因为需要对ffmpeg进行打补丁修改&#xff0c;因此需…

【c++|opencv】一、基础操作---2.图像信息获取

every blog every motto: You can do more than you think. https://blog.csdn.net/weixin_39190382?typeblog 0. 前言 图像信息获取&#xff0c;roi 1. 图像信息获取 // 获取图像信息#include <iostream> #include <opencv2/opencv.hpp>using namespace cv; …

JVM与Java体系结构

目录 一、Java虚拟机整体架构祥图 二、Java代码执行过程详图 三、汇编语言、机器语言、高级语言关系 四、JVM的架构模型 五、JVM的生命周期 &#xff08;一&#xff09;虚拟机的启动 &#xff08;二&#xff09;虚拟机的执行 &#xff08;三&#xff09;虚拟机的退出 …

使用示例和应用程序全面了解高效数据管理的Golang MySQL数据库

Golang&#xff0c;也被称为Go&#xff0c;已经成为构建强大高性能应用程序的首选语言。在处理MySQL数据库时&#xff0c;Golang提供了一系列强大的库&#xff0c;简化了数据库交互并提高了效率。在本文中&#xff0c;我们将深入探讨一些最流行的Golang MySQL数据库库&#xff…

数据库管理-第113期 Oracle Exadata 04-硬件选择(20231020)

数据库管理-第113期 Oracle Exadata 04-硬件选择&#xff08;2023010290&#xff09; 本周没写文章&#xff0c;主要是因为到上海参加了Oracle CAB/PAB会议&#xff0c;这个放在后面再讲&#xff0c;本期讲一讲Exadata&#xff0c;尤其是存储节点的硬件选择及其对应的一些通用…

mac安装并使用wireshark

mac安装并使用wireshark 1 介绍 我们在日常开发过程中&#xff0c;遇到了棘手的问题时&#xff0c;免不了查看具体网络请求情况&#xff0c;这个时候就需要用到抓包工具。比较著名的抓包工具就属&#xff1a;wireshark、fildder。我这里主要介绍wireshark。 2 安装 以mac安装为…

C#,数值计算——分类与推理Svmpolykernel的计算方法与源程序

1 文本格式 using System; namespace Legalsoft.Truffer { public class Svmpolykernel : Svmgenkernel { public int n { get; set; } public double a { get; set; } public double b { get; set; } public double d { get; set; …

多线程---synchronized特性+原理

文章目录 synchronized特性synchronized原理锁升级/锁膨胀锁消除锁粗化 synchronized特性 互斥 当某个线程执行到某个对象的synchronized中时&#xff0c;其他线程如果也执行到同一个对象的synchronized就会阻塞等待。 进入synchronized修饰的代码块相当于加锁 退出synchronize…

IDEA MyBatisX插件介绍

一、前言 前几年写代码的时候&#xff0c;要一键生成DAO、XML、Entity基础代码会采用第三方工具&#xff0c;比如mybatis-generator-gui等&#xff0c;现在IDEA或Eclipse都有对应的插件&#xff0c;像IDEA中MyBatisX就是一个比较好用的插件。 二、MyBatisX安装配置使用 MyBa…

GO学习之 通道(nil Channel妙用)

GO系列 1、GO学习之Hello World 2、GO学习之入门语法 3、GO学习之切片操作 4、GO学习之 Map 操作 5、GO学习之 结构体 操作 6、GO学习之 通道(Channel) 7、GO学习之 多线程(goroutine) 8、GO学习之 函数(Function) 9、GO学习之 接口(Interface) 10、GO学习之 网络通信(Net/Htt…

Mac电脑Android Studio和VS Code配置Flutter开发环境(图文超详细)

一、安装Android Studio 官网地址&#xff1a; https://developer.android.google.cn/ 历史版本下载地址&#xff1a; https://developer.android.com/studio/archive?hlzh-cn 二、安装Xcode 到App Store下载安装最新版本&#xff0c;如果MacOS更新不到13.0以上就无法安装…

Go-Python-Java-C-LeetCode高分解法-第十二周合集

前言 本题解Go语言部分基于 LeetCode-Go 其他部分基于本人实践学习 个人题解GitHub连接&#xff1a;LeetCode-Go-Python-Java-C 欢迎订阅CSDN专栏&#xff0c;每日一题&#xff0c;和博主一起进步 LeetCode专栏 我搜集到了50道精选题&#xff0c;适合速成概览大部分常用算法 突…

消息中间件——RabbitMQ(一)Windows/Linux环境搭建(完整版)

前言 最近在学习消息中间件——RabbitMQ&#xff0c;打算把这个学习过程记录下来。此章主要介绍环境搭建。此次主要是单机搭建&#xff08;条件有限&#xff09;&#xff0c;包括在Windows、Linux环境下的搭建&#xff0c;以及RabbitMQ的监控平台搭建。 环境准备 在搭建Rabb…

机器人的触发条件有什么区别,如何巧妙的使用

简介​ 维格机器人触发条件,分为3个,分别是: 有新表单提交时、有记录满足条件时、有新的记录创建时 。 看似3个,其实是能够满足我们非常多的使用场景。 本篇将先介绍3个条件的触发条件,然后再列举一些复杂的触发条件如何用现有的触发条件来满足 注意: 维格机器人所有的…

Linux(Centos7)防火墙端口操作记录

1、nginx -t #Nginx配置文件检查 上述截图代表检查没问题 上述截图检查配置文件配置错误&#xff0c;并提示错误文件位置 2、systemctl restart nginx #重启Nginx 重启Nginx失败 3、systemctl status nginx.service #查看Nginx服务状态 80端口被占导致服务启动失败 4、n…

除自身以外数组的乘积

给你一个整数数组 nums&#xff0c;返回 数组 answer &#xff0c;其中 answer[i] 等于 nums 中除 nums[i] 之外其余各元素的乘积 。 题目数据 保证 数组 nums之中任意元素的全部前缀元素和后缀的乘积都在 32 位 整数范围内。 请 不要使用除法&#xff0c;且在 O(n) 时间复杂…

代码随想录打卡第五十五天|● 300.最长递增子序列 ● 674. 最长连续递增序列 ● 718. 最长重复子数组

300.最长递增子序列 **题目&#xff1a;**给你一个整数数组 nums &#xff0c;找到其中最长严格递增子序列的长度。子序列 是由数组派生而来的序列&#xff0c;删除&#xff08;或不删除&#xff09;数组中的元素而不改变其余元素的顺序。例如&#xff0c;[3,6,2,7] 是数组 [0…

深度学习| U-Net网络

U-Net网络 基础知识和CNN的关系反卷积ReLU激活函数 U-Net入门U-Net网络结构图为什么需要跳跃连接U-Net的输入U-Net的应用 基础知识 理解U-Net网络结构需要相关知识点。 和CNN的关系 U-Net也是CNN&#xff08;Convolutional Neural Network&#xff0c;卷积神经网络&#xff…

Flutter PopupMenuButton下拉菜单

下拉菜单是移动应用交互中一种常见的交互方式,可以使用下拉列表来展示多个内容标签,实现页面引导的作用。在Flutter开发中,实现下拉弹框主要有两种方式,一种是继承Dialog组件使用自定义布局的方式实现,另一种则是使用官方的PopupMenuButton组件进行实现。 如果没有特殊的…