当前位置：首页 > news >正文

Django实现登录注册

news 2025/7/13 5:16:25

Django实现登录注册

配置路由

首先分发路由[User,Blog,Article]

from django.contrib import admin
from django.urls import path
from Blog import views
from django.conf.urls import includeurlpatterns = [path('admin/', admin.site.urls),path('', views.home, name='home'),path('User/', include('User.urls', namespace='User')),path('Blog/', include('Blog.urls', namespace='Blog')),path('Article/', include('Article.urls', namespace='Article')),
]

配置路由

urlpatterns = [path('register/', views.register, name='register'),path('login/', views.login, name='login'),# 返回图片路由path('get_verify_img/', views.get_verify_img, name='get_verify_img'),path('blog/', views.blog, name='blog'),
]

首页

def home(request):if request.session.get('user'):online_user = request.session.get('user')else:online_user = '登录'return render(request, 'home.html', locals())

{% load static %}
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><!--    引入jQuery--><script src="{% static 'js/jquery.js' %}"></script><!--    引入Bootstrap的CSS文件--><link href="{% static 'css/bootstrap.min.css' %}" rel="stylesheet"><!--    引入Bootstrap的JavaScript文件--><script src="{% static 'js/bootstrap.js' %}"></script><!-- 引入 layui.css --><link rel="stylesheet" href="{% static 'layui/css/layui.css' %}"><!-- 引入 layui.js --><script src="{% static 'layui/layui.js' %}"></script>
</head>
<body>

注册

前端：

{% load static %}
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><!--    引入jQuery--><script src="{% static 'js/jquery.js' %}"></script><!--    引入Bootstrap的CSS文件--><link href="{% static 'css/bootstrap.min.css' %}" rel="stylesheet"><!--    引入Bootstrap的JavaScript文件--><script src="{% static 'js/bootstrap.js' %}"></script><!-- 引入 layui.css --><link rel="stylesheet" href="{% static 'layui/css/layui.css' %}"><!-- 引入 layui.js --><script src="{% static 'layui/layui.js' %}"></script><style>.content {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);}</style></head>
<body>
<div class="content"><!-- 注册表单 --><form class="layui-form" method="post" onsubmit="return false;" id="lay_register">{% csrf_token %}<div class="demo-reg-container"><div class="layui-form-item"><div class="layui-row"><div class="layui-col-xs7"><div class="layui-input-wrap"><div class="layui-input-prefix"><i class="layui-icon layui-icon-cellphone"></i></div><input type="text" name="phone" value=""lay-verify="required|phone" placeholder="手机号"lay-reqtext="请填写手机号" autocomplete="off"class="layui-input" id="reg-cellphone"></div></div></div></div><div class="layui-form-item"><div class="layui-input-wrap"><div class="layui-input-prefix"><i class="layui-icon layui-icon-username"></i></div><input type="text" name="username" value="" lay-verify="required"placeholder="用户名"autocomplete="off"class="layui-input" lay-affix="clear"></div></div><div class="layui-form-item"><div class="layui-input-wrap"><div class="layui-input-prefix"><i class="layui-icon layui-icon-password"></i></div><input type="password" name="password" value=""lay-verify="required" placeholder="密码"autocomplete="off" class="layui-input" id="reg-password"lay-affix="eye"></div></div><div class="layui-form-item"><div class="layui-input-wrap"><div class="layui-input-prefix"><i class="layui-icon layui-icon-password"></i></div><input type="password" name="confirmPassword" value=""lay-verify="required|confirmPassword"placeholder="确认密码" autocomplete="off" class="layui-input"lay-affix="eye"></div></div><div class="layui-form-item"><button class="layui-btn layui-btn-fluid" lay-submitlay-filter="demo-reg" id="send_register">注册</button></div><div class="layui-form-item demo-reg-other"><a href="{% url 'Blog:login' %}">登录已有帐号</a></div></div></form>
</div>
<script>layui.use(function () {const $ = layui.$;const form = layui.form;const layer = layui.layer;const util = layui.util;util.on('lay-on', {msg: function () {{#layer.msg('登录成功');#}}})// 自定义验证规则form.verify({// 确认密码confirmPassword: function (value, item) {const passwordValue = $('#reg-password').val();if (value !== passwordValue) {return '两次密码输入不一致';}}});});{#注册事件#}const registerButton = document.getElementById('send_register');registerButton.addEventListener('click', function () {// 获取表单元素const form = document.getElementById('lay_register');// 创建 FormData 对象const formData = new FormData(form);formData.append('index', 'register_modal')$.ajax({url: '',type: 'POST',processData: false, // 设为false防止JQuery自动将formData转成字符串contentType: false, // 防止JQuery自动添加'Content-Type'请求头{#data: JSON.stringify(newData),#}data: formData,success: function (data) {if (data.err) {layui.layer.msg(data.err)}if (data.info) {layui.layer.msg('注册成功')$(document.getElementById('register')).modal('hide')window.open(data.info)}}})})
</script>
</body>
</html>

后端：

def register(request):print('注册页面')if request.method == 'POST' and request.is_ajax:data = request.POSTusername = data['username']password = data['password']phone = data['phone']if models.Userinfo.objects.filter(username=username):err_info = {'err': '用户名已存在'}return JsonResponse(err_info)else:models.Userinfo.objects._create_user(username=username, password=password, phone=phone, email='')back_info = {'info': 'http://127.0.0.1:8000/'}return JsonResponse(back_info)return render(request, 'register.html', locals())

{% load static %}
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><!--    引入jQuery--><script src="{% static 'js/jquery.js' %}"></script><!--    引入Bootstrap的CSS文件--><link href="{% static 'css/bootstrap.min.css' %}" rel="stylesheet"><!--    引入Bootstrap的JavaScript文件--><script src="{% static 'js/bootstrap.js' %}"></script><!-- 引入 layui.css --><link rel="stylesheet" href="{% static 'layui/css/layui.css' %}"><!-- 引入 layui.js --><script src="{% static 'layui/layui.js' %}"></script><style>.content {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);}</style></head>
<body>
<div class="content"><form class="layui-form" method="post" onsubmit="return false;" id="lay_login">{% csrf_token %}<div class="demo-reg-container"><div class="layui-form-item"><div class="layui-input-wrap"><div class="layui-input-prefix"><i class="layui-icon layui-icon-username"></i></div><input type="text" name="username" value="" lay-verify="required"placeholder="用户名"autocomplete="off"class="layui-input" lay-affix="clear"></div></div><div class="layui-form-item"><div class="layui-input-wrap"><div class="layui-input-prefix"><i class="layui-icon layui-icon-password"></i></div><input type="password" name="password" value=""lay-verify="required" placeholder="密码"autocomplete="off" class="layui-input" id="reg-password"lay-affix="eye"></div></div><div class="layui-col-xs7"><div class="layui-input-wrap"><div class="layui-input-prefix"><i class="layui-icon layui-icon-vercode"></i></div><input type="text" name="captcha" value="" lay-verify="required"placeholder="验证码" lay-reqtext="请填写验证码"autocomplete="off" class="layui-input" lay-affix="clear"></div></div><div class="layui-col-xs5"><div style="margin-left: 10px;"><img src="{% url 'Blog:get_verify_img' %}" width="100%"height="37px" id="img_verify" alt=""></div></div><div class="layui-form-item"><button class="layui-btn layui-btn-fluid" lay-submitlay-filter="demo-reg" id="send_login" lay-on="msg">登录</button></div><div class="layui-form-item demo-reg-other"><a href="#">没有账号？立即注册</a></div></div></form>
</div>
<script>{#刷新验证码#}const verify = document.getElementById('img_verify')verify.addEventListener('click', function () {// 获取原始的 src 属性值const verify_src = verify.src;// 检查原始 src 是否已经包含时间戳if (verify_src.includes('?')) {// 如果已经包含时间戳，只替换最后一个时间戳verify.src = verify_src.replace(/\?.*$/, '') + '?' + new Date().getTime();} else {// 如果原始 src 没有时间戳，直接添加时间戳verify.src = verify_src + '?' + new Date().getTime();}}){#登录事件#}const loginButton = document.getElementById('send_login');loginButton.addEventListener('click', function () {// 获取表单元素const form = document.getElementById('lay_login');// 创建 FormData 对象const formData = new FormData(form);formData.append('index', 'login_modal')$.ajax({url: '',type: 'POST',processData: false, // 设为false防止JQuery自动将formData转成字符串contentType: false, // 防止JQuery自动添加'Content-Type'请求头data: formData,success: function (data) {if (data.err) {layui.layer.msg(data.err)}if (data.url)window.open(data.url)},error: function (xhr, status, error) {console.log('error')}})})
</script>
</body>
</html>

后端：

def login(request):if request.method == 'POST' and request.is_ajax:data = request.POSTuser = models.Userinfo.objects.filter(username=data['username']).first()if not user:err_info = JsonResponse({'err': '用户不存在'})return err_infoif not check_password(data['password'], user.password):print('密码错误')err_info = JsonResponse({'err': '密码错误'})return err_infoelse:request.session['user'] = data['username']return JsonResponse({'url': 'http://127.0.0.1:8000/'})return render(request, 'login.html', locals())

验证码部分逻辑

def get_verify_img(request):data, words = verify()print(words)return HttpResponse(data)def random_rgb():return random.randint(0, 256), random.randint(0, 256), random.randint(0, 256)def random_word():# 0-9数字random_num = random.randint(0, 9)# a-zrandom_lower = chr(random.randint(97, 122))# A-Zrandom_upper = chr(random.randint(65, 90))word = random.choice([random_upper, random_lower, str(random_num)])return word

Django实现登录注册

Django实现登录注册目录 Django实现登录注册配置路由首页注册前端：后端： 登录前端：后端：验证码部分逻辑配置路由首先分发路由[User,Blog,Article] from django.contrib import admin from django.urls import path from Blog…...

编程日记 2024/3/17 23:06:33

Python实战：NumPy数组与矩阵操作入门

NumPy是Python数据科学领域中不可或缺的库之一，它提供了一个强大的N维数组对象和一系列用于操作这些数组的函数。本文将详细介绍NumPy数组与矩阵的基础知识，包括数组的创建、操作、切片、索引、以及矩阵的运算等。 1. 引言在Python数据科学领域&#…...

编程日记 2024/3/17 23:04:31

2024.2.26校招实习内推面经

绿*泡*泡VX： neituijunsir 交流*裙 ，内推/实习/校招汇总表格 1、校招&实习 |美团2024年春季校园招聘全球启动（内推） 校招&实习 |美团2024年春季校园招聘全球启动（内推） 2、校招 | 江淮汽车2024…...

编程日记 2024/3/17 23:03:30

cannot find -xml2: No such file or directory的解决方法

一，问题现象在编译库的时候出现如下图所示的报错：C:/msys64/mingw32/bin/…/lib/gcc/i686-w64-mingw32/13.2.0/…/…/…/…/i686-w64-mingw32/bin/ld.exe: ca nnot find -lxml2: No such file or directory collect2.exe: error: ld returned 1 exit s…...

编程日记 2024/3/17 23:02:29

linux下的进程间通信

转自http://blog.csdn.net/eroswang/article/details/1772350 详细的讲述进程间通信在这里绝对是不可能的事情，而且笔者很难有信心说自己对这一部分内容的认识达到了什么样的地步，所以在这一节的开头首先向大家推荐著名作者Richard Stevens的著名作品&a…...

编程日记 2024/3/17 23:00:27

基于单片机的IC 卡门禁系统设计

摘要：针对传统门锁钥匙易丢失、配置不便和忘记携带等问题，提出了一种基于STC89C52 的IC 卡门禁系统设计。该系统以STC89C52 单片机为核心来控制电子锁模块的开关。主要过程是由RFID 模块读取IC卡ID 并通过串口发送至STC89C52 单片机模块，STC89C52 单片机模块可以实现在线对I…...

编程日记 2024/3/17 22:59:25

【爬虫介绍】了解爬虫的魅力

爬虫爬虫（Spider）是一种自动化程序，通过模拟人的行为，在互联网上收集、抓取和提取信息。爬虫通常用于网站数据抓取、搜索引擎索引、数据分析和挖掘等领域。爬虫可以自动访问网页，按照预定的规则抓取网页上的文本、…...

编程日记 2024/3/17 22:58:24

Xcode 15.3 Archive失败

Xcode 15.3 Archive失败背景升级 Xcode 到 15.3，真机运行正常。打包的时候发现 Archive 失败。提示： Call parameter type does not match function signature! 仔细看报错里是和HandyJSON相关的提示。解决起初以为和 Pod 库有关系，…...

编程日记 2024/3/17 22:57:23

Hadoop学习3：问题解决

文章目录问题解决1. ERROR: but there is no HDFS_NAMENODE_USER defined2. JAVA_HOME is not set and could not be found.3. Hadoop-DFS页面访问不了4. namenode格式化失败，或者dfs页面打开失败5. ERROR: but there is no YARN_RESOURCEMANAGER_USER defined. Ab…...

编程日记 2024/3/17 22:56:22

HarmonyOS鸿蒙开发常用4种布局详细说明

介绍一下鸿蒙开发常用4种布局 1、线性布局 2、层叠布局 3、网格布局 4、列表布局 1. 线性布局（Column/Row） 线性布局（LinearLayout）是开发中最常用的布局，通过线性容器Row（行）和Column&…...

编程日记 2024/3/17 22:54:20

Python中的变量是什么类型？

一、 Python中的变量是什么类型？ 在Python中，变量本身是没有类型的，变量可以指向任何类型的数据对象。这意味着你可以将一个整数赋值给一个变量，稍后又可以将一个字符串赋值给同一个变量。Python是一种动态类型语言，它…...

编程日记 2024/3/17 22:49:16

数据结构之顺序表（C语言版）

顺序表是数据结构中最基本的一种线性表，它以一段连续的存储空间来存储数据元素，元素之间的顺序由它们在内存中的位置来决定。在C语言中，我们通常使用数组来实现顺序表。目录顺序表的结构定义顺序表的基本操作应用实例顺序表的结构定义…...

编程日记 2024/3/17 22:47:14

Java学习笔记（15）

JDK7前时间相关类 Date时间类 Simpledateformat Format 格式化 Parse 解析默认格式指定格式 EE：表示周几 Parse：把字符串时间转成date对象注意：创建对象的格式要和字符串的格式一样 Calendar日历类不能创建对象 Getinstance 获取当…...

编程日记 2024/3/17 22:46:13

js中怎样添加、移出、插入、复制、创建？

在 JavaScript 中，可以使用以下方法来添加、移除、插入、复制和创建元素： 添加元素： 使用 appendChild() 方法将一个子元素添加到指定父元素的末尾。使用 insertBefore() 方法将一个子元素插入到指定父元素的指定位置之前。移除元素&#xf…...

编程日记 2024/3/17 22:45:12

浅谈C/C++的常量const、指针和引用问题

今天我们来探讨C/C中const、指针和引用的相关问题。这些概念是编程中的重要组成部分，它们的正确使用对于代码的可读性和可维护性至关重要。通过深入了解const的不可变性、指针的灵活性以及引用的简洁性，我们能够更好地掌握编程的精髓，并写出更…...

编程日记 2024/3/17 22:39:07

React三大属性---state,props,ref

react的三大属性 react的三大属性分别是state props 和ref 是传递数据的重要内容 State state是组件对象最重要的属性包含多个key-value的组合呢存在于组件实例对象中基本使用此时demo是通过onClick的回调所以this是undefined 本来应该是window 但是局部开启了严格模…...

编程日记 2024/3/17 22:38:06

进程学习--02

在C语言中，一般使用fork函数开辟进程，这个函数开辟进程后会返回一个进程号，在子进程中会返回0，在父进程中会返回子进程的进程号。 int main(){int ret fork();if(ret<0){fprintf(stderr, "pid error");exit(-1);}e…...

编程日记 2024/3/17 22:36:04

简易版 RPC 框架实现 1.0 -http实现

RPC 是“远程过程调用（Remote Procedure Call）”的缩写形式，比较通俗的解释是：像本地方法调用一样调用远程的服务。虽然 RPC 的定义非常简单，但是相对完整的、通用的 RPC 框架涉及很多方面的内容，例如注册发…...

编程日记 2024/3/17 22:33:00

欧科云链做客Google Cloud与WhalerDAO专题论坛，畅谈Web3数据机遇

3月10日，由Google Cloud、WhalerDAO和baidao data主办，以Web3AI 2024 DATA POWER为主题的分享会在北京中关村举行。欧科云链高级研究员Jason Jiang受邀参加活动，带来“从链上数据发掘Web3时代的无限机遇”的主题分享。 Web3.0核心要素始终是链…...

编程日记 2024/3/17 22:28:55

计算机网络 TCP协议的流量控制

流量控制的功能就是让发送方的发送速率不要太快，以便让接收方来的及接受，因此可以说流量控制是一个速度匹配服务，匹配发送方的发送速率和接收方的读取速率。 TCP利用滑动窗口机制来实现流量控制，滑动窗口的基本原理是&#xff0c…...

编程日记 2024/3/17 22:26:53

工业安全零事故的智能守护者：一体化AI智能安防平台

前言： 通过AI视觉技术，为船厂提供全面的安全监控解决方案，涵盖交通违规检测、起重机轨道安全、非法入侵检测、盗窃防范、安全规范执行监控等多个方面，能够实现对应负责人反馈机制，并最终实现数据的统计报表。提升船厂…...

编程新知 2025/7/11 13:47:54

基于ASP.NET+ SQL Server实现（Web）医院信息管理系统

医院信息管理系统 1. 课程设计内容在 visual studio 2017 平台上，开发一个“医院信息管理系统”Web 程序。 2. 课程设计目的综合运用 c#.net 知识，在 vs 2017 平台上，进行 ASP.NET 应用程序和简易网站的开发；初步熟悉开发一…...

编程新知 2025/7/11 13:57:01

多场景 OkHttpClient 管理器 - Android 网络通信解决方案

下面是一个完整的 Android 实现，展示如何创建和管理多个 OkHttpClient 实例，分别用于长连接、普通 HTTP 请求和文件下载场景。 <?xml version"1.0" encoding"utf-8"?> <LinearLayout xmlns:android"http://schemas…...

编程新知 2025/6/20 19:09:22

屋顶变身“发电站” ，中天合创屋面分布式光伏发电项目顺利并网！

5月28日，中天合创屋面分布式光伏发电项目顺利并网发电，该项目位于内蒙古自治区鄂尔多斯市乌审旗，项目利用中天合创聚乙烯、聚丙烯仓库屋面作为场地建设光伏电站，总装机容量为9.96MWp。项目投运后，每年可节约标煤3670…...

编程新知 2025/7/12 10:13:03

在Ubuntu中设置开机自动运行（sudo）指令的指南

在Ubuntu系统中，有时需要在系统启动时自动执行某些命令，特别是需要 sudo权限的指令。为了实现这一功能，可以使用多种方法，包括编写Systemd服务、配置 rc.local文件或使用 cron任务计划。本文将详细介绍这些方法，并提供…...

编程新知 2025/6/18 4:00:59

Mac软件卸载指南，简单易懂！

刚和Adobe分手，它却总在Library里给你写"回忆录"？卸载的Final Cut Pro像电子幽灵般阴魂不散？总是会有残留文件，别慌！这份Mac软件卸载指南，将用最硬核的方式教你"数字分手术"&#xff0…...

编程新知 2025/7/12 12:50:10

【Zephyr 系列 10】实战项目：打造一个蓝牙传感器终端 + 网关系统（完整架构与全栈实现）

🧠关键词：Zephyr、BLE、终端、网关、广播、连接、传感器、数据采集、低功耗、系统集成 📌目标读者：希望基于 Zephyr 构建 BLE 系统架构、实现终端与网关协作、具备产品交付能力的开发者 📊篇幅字数：约 5200 字 ✨ 项目总览在物联网实际项目中，**“终端 + 网关”**是…...

编程新知 2025/7/10 6:15:52

unix/linux，sudo，其发展历程详细时间线、由来、历史背景

sudo 的诞生和演化，本身就是一部 Unix/Linux 系统管理哲学变迁的微缩史。来，让我们拨开时间的迷雾，一同探寻 sudo 那波澜壮阔（也颇为实用主义）的发展历程。历史背景：su的时代与困境 ( 20 世纪 70 年代 - 80 年代初) 在 sudo 出现之前，Unix 系统管理员和需要特权操作的…...

编程新知 2025/7/11 18:27:36