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

Django实现登录注册

news 2025/12/19 3:51:45

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

【Python】 -- 趣味代码 - 小恐龙游戏

文章目录文章目录 00 小恐龙游戏程序设计框架代码结构和功能游戏流程总结01 小恐龙游戏程序设计02 百度网盘地址00 小恐龙游戏程序设计框架这段代码是一个基于 Pygame 的简易跑酷游戏的完整实现，玩家控制一个角色（龙）躲避障碍物（仙人掌和乌鸦）。以下是代码的详细介绍：…...

编程新知 2025/12/7 13:42:04

day52 ResNet18 CBAM

在深度学习的旅程中，我们不断探索如何提升模型的性能。今天，我将分享我在 ResNet18 模型中插入 CBAM（Convolutional Block Attention Module）模块，并采用分阶段微调策略的实践过程。通过这个过程，我不仅提升…...

编程新知 2025/11/9 1:27:18

【Redis技术进阶之路】「原理分析系列开篇」分析客户端和服务端网络诵信交互实现（服务端执行命令请求的过程 - 初始化服务器）

服务端执行命令请求的过程【专栏简介】【技术大纲】【专栏目标】【目标人群】1. Redis爱好者与社区成员2. 后端开发和系统架构师3. 计算机专业的本科生及研究生初始化服务器1. 初始化服务器状态结构初始化RedisServer变量 2. 加载相关系统配置和用户配置参数定制化配置参数案…...

编程新知 2025/12/13 23:14:16

抖音增长新引擎：品融电商，一站式全案代运营领跑者

抖音增长新引擎：品融电商，一站式全案代运营领跑者在抖音这个日活超7亿的流量汪洋中，品牌如何破浪前行？自建团队成本高、效果难控；碎片化运营又难成合力——这正是许多企业面临的增长困局。品融电商以「抖音全案代运营…...

编程新知 2025/12/15 1:12:09

电脑插入多块移动硬盘后经常出现卡顿和蓝屏

当电脑在插入多块移动硬盘后频繁出现卡顿和蓝屏问题时，可能涉及硬件资源冲突、驱动兼容性、供电不足或系统设置等多方面原因。以下是逐步排查和解决方案： 1. 检查电源供电问题问题原因：多块移动硬盘同时运行可能导致USB接口供电不足&#x…...

编程新知 2025/10/28 15:02:57

对WWDC 2025 Keynote 内容的预测

借助我们以往对苹果公司发展路径的深入研究经验，以及大语言模型的分析能力，我们系统梳理了多年来苹果 WWDC 主题演讲的规律。在 WWDC 2025 即将揭幕之际，我们让 ChatGPT 对今年的 Keynote 内容进行了一个初步预测，聊作存档。等到明…...

编程新知 2025/12/15 20:41:41

oracle与MySQL数据库之间数据同步的技术要点

Oracle与MySQL数据库之间的数据同步是一个涉及多个技术要点的复杂任务。由于Oracle和MySQL的架构差异，它们的数据同步要求既要保持数据的准确性和一致性，又要处理好性能问题。以下是一些主要的技术要点： 数据结构差异数据类型差异&#xff…...

编程新知 2025/8/12 3:03:43

华为OD机试-食堂供餐-二分法

import java.util.Arrays; import java.util.Scanner;public class DemoTest3 {public static void main(String[] args) {Scanner in new Scanner(System.in);// 注意 hasNext 和 hasNextLine 的区别while (in.hasNextLine()) { // 注意 while 处理多个 caseint a in.nextIn…...

编程新知 2025/12/12 18:29:04

12.找到字符串中所有字母异位词

🧠 题目解析题目描述： 给定两个字符串 s 和 p，找出 s 中所有 p 的字母异位词的起始索引。返回的答案以数组形式表示。字母异位词定义： 若两个字符串包含的字符种类和出现次数完全相同，顺序无所谓，则互为…...

编程新知 2025/12/10 10:10:30

CMake 从 GitHub 下载第三方库并使用

有时我们希望直接使用 GitHub 上的开源库，而不想手动下载、编译和安装。可以利用 CMake 提供的 FetchContent 模块来实现自动下载、构建和链接第三方库。 FetchContent 命令官方文档✅ 示例代码我们将以 fmt 这个流行的格式化库为例，演示如何：使用 FetchContent 从 GitH…...

编程新知 2025/12/11 5:12:21

Django实现登录注册

目录

配置路由

首页

注册

前端：

后端：

登录

前端：

后端：

验证码部分逻辑

相关文章：