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

BBS项目--登录

news 2025/10/31 0:17:33

BBS阶段性测试总要求

django登录报错

Error: [WinError 10013] 以一种访问权限不允许的方式做了一个访问套接字的尝试。

原因分析：出现这种情况在Windows中很常见，就是端口被占用

解决措施：这时我们只需改一下端口便可以了

登录前端页面(HTML)

# 这次页面采用的是bookstrip5：Bootstrap 入门 · Bootstrap v5 中文文档 v5.3 | Bootstrap 中文网 (bootcss.com)

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>

<style>html,body {height: 100%;}body {display: flex;align-items: center;padding-top: 40px;padding-bottom: 40px;background-color: #f5f5f5;}.form-signin {max-width: 330px;padding: 15px;}.form-, .form-floating:focus-within {z-index: 2;}.form-signin input[type="email"] {margin-bottom: -1px;border-bottom-right-radius: 0;border-bottom-left-radius: 0;}.form-signin input[type="password"] {margin-bottom: 10px;border-top-left-radius: 0;border-top-right-radius: 0;a {color: rgba(1, 4, 12, 0.92);ext-decoration: none;}}
</style>
# body部分：
<body>
<main class="form-signin w-100 m-auto"><div class="text-center"><div class="form-group"><label for="id_avatar"><img class="mb-4 "src="https://tse3-mm.cn.bing.net/th/id/OIP-C.VeJFhbdc95msPtA2RFHHbwAAAA?rs=1&pid=ImgDetMain"alt="" height="80px" width="80px" id="id_img1"style="margin-left: 20px"></label><input type="file" id="id_avatar" class="form-control" accept="image/*" style="display: none"><h1 class="h3 mb-3 fw-normal">糖果爱上我</h1></label></div></div><form id="login_form">{% csrf_token %}<div class="form-floating"><div class="group-group"><label for="id_username">用户名</label><input type="text" name="username" class="form-control"id="id_username"><span class="pull-right error" style="color: red"> </span></div><div class="form-group"><label for="floatingInput">密码</label><input type="password" name="password" class="form-control"id="id_password"><span class="pull-right error" style="color: red"> </span></div><div class="form-group"><label for="floatingInput">验证码</label><div class="row"><div class="col-md-6"><input type="text" name="code" class="form-control" id="id_code"></div><img src="/get_valid_code/" alt="" class="col-md-6" height="35" id="id_img"></div></div></div></form><div class="w-100 btn btn-lg btn-primary" id="id_submit" style="margin-top: 20px">登录</div><span class="error" style="color: darkred;margin-left: 10px" id="id_error"></span><p style="color: #888888">您还没账号吗?那我们先注册一个吧~ <a href="/register/">滴滴</a></p><p class="mt-5 mb-3 text-muted">* 佳祺今天也要加油鸭</p>
</main>
</body>

验证码功能

# 能够显示验证码图片，随机改变验证码，点击图片就会自己刷新验证码

# 视图层后端，自定义验证码，验证码用session进行保存，方便后面验证是否正确：

from django.shortcuts import render, HttpResponse, redirect
from PIL import Image, ImageDraw, ImageFont
from .utills import get_random_code, get_random_rgb
from django.contrib.auth import authenticate, login as auth_login, logout as auth_logout
import random, json
from io import BytesIOdef get_valid_code(request):height = 38width = 300image_tmp = Image.new('RGB', (300, 38), (255, 255, 255))# 把空图片放在了画板上，就可以写字了draw = ImageDraw.Draw(image_tmp)# 加入字体img_font = ImageFont.truetype('./static/font/ss.TTF', 23)# 验证码code_str = get_random_code()print(code_str)# 重要，要保存request.session['code'] = code_strfor i, item in enumerate(code_str):draw.text((30 + i * 50, 3), item, fill=get_random_rgb(), font=img_font)  # (x轴,y轴)，字，字颜色，字体# 增加难度--->在图片上画点for i in range(30):draw.point([random.randint(0, width), random.randint(0, height)], fill=get_random_rgb())# 画弧形x = random.randint(0, width)y = random.randint(0, height)draw.arc((x, y, x + 4, y + 4), 0, 90, fill=get_random_rgb())# 在图片上划线for i in range(3):x1 = random.randint(0, width)x2 = random.randint(0, height)y1 = random.randint(0, width)y2 = random.randint(0, height)draw.line((x1, y1, x2, y2), fill=get_random_rgb())# 放在内存中,一旦不用，自动清理内存my_io = BytesIO()image_tmp.save(my_io, 'png')return HttpResponse(my_io.getvalue())

# 讲图片渲染在前端html页面：

<div class="form-group"><label for="floatingInput">验证码</label><div class="row"><div class="col-md-6"><input type="text" name="code" class="form-control" id="id_code"></div><img src="/get_valid_code/" alt="" class="col-md-6" height="35" id="id_img"></div>
</div>

# 设置验证码id，设置点击事件，使点击验证码图片会自己刷新验证码：

<script>$('#id_img').click(function () {// img标签有个特性：只要src变了，就会重新src地址请求拿数据var url = $(this).attr('src') + '?'  // /get_valid_code/???console.log(url)$(this).attr('src', url)})
</script>

图片渲染在前端配置

# 在django中，有两个额外自己建立的文件包:

media：一般存入其他用户上传的图片等等

static： 一般用于自身写入的引入样式，图片等等       

# 因此，存入的图片，我们想要渲染在前端页面，也需配置成静态文件

# settings.py
STATIC_URL = '/static/'
STATICFILES_DIRS = [os.path.join(BASE_DIR, 'static')]
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
MEDIA_URL = '/media/'# 路由
path('media/<path:path>', serve, {'document_root': settings.MEDIA_ROOT}),

ajax提交登录

# 前端把用户提交的数据发送到后端，设置button点击事件，用ajax提交数据：

<script>
$('#id_submit').click(function () {var serialize_data = $('#login_form').serializeArray()console.log(serialize_data)var data = {}var username = $('[name="username"]').val()var password = $('[name="password"]').val()var code = $('[name="code"]').val()var csrfmiddlewaretoken = $('[name="csrfmiddlewaretoken"]').val()data['username'] = usernamedata['password'] = passworddata['code'] = codedata['csrfmiddlewaretoken'] = csrfmiddlewaretokenconsole.log(data)$.ajax({url: '',method: 'post',data: data,success: function (data) {console.log(data)if (data.code == 100) {location.href = data.url} else {$("#id_error").html(data.msg)}}})})
</script>

# 后端拿到前端数据，先对验证码进行对比，然后使用auth模块直接讲用户名和密码与数据库中的进行比较，返回给前端信息，成功便直接跳转到主页面：

def login(request):if request.method == 'GET':return render(request, 'login.html')else:username = request.POST.get('username')password = request.POST.get('password')net_code = request.POST.get('code').lower()#code = request.POST.get('code').lower()  # 会存在bug# 1 校验验证码,取出老验证码，忽略大小写old_code = request.session.get('code').lower()if code == old_code:# 2 去验证用户了---》user = authenticate(username=username, password=password)if user:# 登录成功--->内部写session了auth_login(request, user)return JsonResponse({'code': 100, 'msg': '登录成功', 'url': '/'})else:return JsonResponse({'code': 101, 'msg': '用户名或密码错误'})else:return JsonResponse({'code': 102, 'msg': '验证码错误'})

今日思维导图：

相关文章：

BBS项目--登录

BBS阶段性测试总要求 django登录报错 Error: [WinError 10013] 以一种访问权限不允许的方式做了一个访问套接字的尝试。 原因分析&#xff1a;出现这种情况在Windows中很常见&#xff0c;就是端口被占用 解决措施&#xff1a;这时我们只需改一下端口便可以了 登录前端页面(HTML…...

编程日记 2023/12/21 23:34:16

Python---TCP服务端程序开发

1. 开发 TCP 服务端程序开发步骤回顾 创建服务端端套接字对象绑定端口号设置监听等待接受客户端的连接请求接收数据发送数据关闭套接字 2. socket 类的介绍 导入 socket 模块import socket 创建服务端 socket 对象socket.socket(AddressFamily, Type) 参数说明: AddressF…...

编程日记 2023/12/21 23:32:15

回归预测 | MATLAB实现GWO-DHKELM基于灰狼算法优化深度混合核极限学习机的数据回归预测 （多指标，多图）

回归预测 | MATLAB实现GWO-DHKELM基于灰狼算法优化深度混合核极限学习机的数据回归预测 &#xff08;多指标&#xff0c;多图&#xff09; 目录 回归预测 | MATLAB实现GWO-DHKELM基于灰狼算法优化深度混合核极限学习机的数据回归预测 &#xff08;多指标&#xff0c;多图&#…...

编程日记 2023/12/21 23:31:14

听GPT 讲Rust源代码--src/tools(15)

File: rust/src/tools/rust-analyzer/crates/mbe/src/token_map.rs 在Rust源代码中&#xff0c;rust/src/tools/rust-analyzer/crates/mbe/src/token_map.rs文件的作用是实现了一个能够将输入的文本映射为标记的结构。具体来说&#xff0c;它定义和实现了几个结构体&#xff08…...

编程日记 2023/12/21 23:29:12

python可以做小程序研发嘛,python能做微信小程序吗

大家好&#xff0c;给大家分享一下python可以做微信小程序开发吗&#xff0c;很多人还不知道这一点。下面详细解释一下。现在让我们来看看&#xff01; 大家好&#xff0c;给大家分享一下用python编写一个小程序&#xff0c;很多人还不知道这一点。下面详细解释一下用python代码…...

编程日记 2023/12/21 23:27:10

创建型模式 | 单例模式

一、单例模式 单例模式(Singleton Pattern)&#xff0c;使用最广泛的设计模式之一。其意图是保证一个类仅有一个实例被构造&#xff0c;并提供一个访问它的全局访问接口&#xff0c;该实例被程序的所有模块共享。 1、饿汉式 1.1、基础版本 在程序启动后立刻构造单例&#xff0…...

编程日记 2023/12/21 23:26:09

【无标题】欢迎使用Markdown编辑器

这里写自定义目录标题 欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题&#xff0c;有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants 创建一个自定义列表如何创建一个…...

编程日记 2023/12/21 23:24:08

Postgresql中PL/pgSQL的游标、自定义函数、存储过程的使用

场景 Postgresql中PL/pgSQL代码块的语法与使用-声明与赋值、IF语句、CASE语句、循环语句&#xff1a; Postgresql中PL/pgSQL代码块的语法与使用-声明与赋值、IF语句、CASE语句、循环语句-CSDN博客 上面讲了基本语法&#xff0c;下面记录游标、自定义函数、存储过程的使用。 …...

编程日记 2023/12/21 23:20:04

【IDEA】Intellij IDEA相关配置

IDEA 全称 IntelliJ IDEA&#xff0c;是java编程语言的集成开发环境。IntelliJ在业界被公认为最好的Java开发工具&#xff0c;尤其在智能代码助手、代码自动提示、重构、JavaEE支持、各类版本工具(git、svn等)、JUnit、CVS整合、代码分析、 创新的GUI设计等方面的功能可以说是超…...

编程日记 2023/12/21 23:19:03

GD32移植STM32工程（因为懒，所以移植）

文章目录 一、前言二、差异性三、软件移植部分1.前期准备1.1 安装GD32固件库1.2 选择所用芯片 2.修改程序2.1 启动时间&#xff08;内部时钟可不改&#xff09;2.2 主频2.2.1 系统时钟配置2.2.2 108MHz宏定义第一处第二处第三处第四处第五处 2.2.3 串口2.2.4 FLASH 四、总结 一…...

编程日记 2023/12/21 23:17:01

mt5和mt4交易软件有什么区别？

MetaTrader 4&#xff08;MT4&#xff09;和MetaTrader 5&#xff08;MT5&#xff09;是两种广泛使用的外汇和金融市场交易平台&#xff0c;由MetaQuotes公司开发。尽管它们都是外汇交易的常见选择&#xff0c;但在功能和特性上存在一些区别。以下是MT4和MT5之间的主要区别&…...

编程日记 2023/12/21 23:15:00

零刻EQ12 N100 双2.5G网口 All In One新手教程

零刻EQ12 N100 双2.5G网口 All In One新手教程 前言1.硬件配置2.准备工作2.1. ESXI8.0U2镜像2.2. Rufus磁盘工具下载2.3. ikuai镜像下载2.4. StarWindConverter虚拟磁盘格式转换工具下载2.5. OpenWrt镜像下载2.6. 黑群晖RR引导镜像下载(DSM7.2)2.7. 需要准备的硬件2.8. 格式化需…...

编程日记 2023/12/21 23:13:59

竞赛保研 基于Django与深度学习的股票预测系统

文章目录 0 前言1 课题背景2 实现效果3 Django框架4 数据整理5 模型准备和训练6 最后 0 前言 &#x1f525; 优质竞赛项目系列&#xff0c;今天要分享的是 &#x1f6a9; **基于Django与深度学习的股票预测系统 ** 该项目较为新颖&#xff0c;适合作为竞赛课题方向&#xff…...

编程日记 2023/12/21 23:10:56

听GPT 讲Rust源代码--src/tools(16)

File: rust/src/tools/rust-analyzer/crates/ide-completion/src/completions/use_.rs rust-analyzer是一个基于Rust语言的IntelliSense引擎&#xff0c;用于提供IDE自动补全、代码导航和其他代码编辑功能。在rust-analyzer的源代码中&#xff0c;rust/src/tools/rust-analyzer…...

编程日记 2023/12/21 23:04:51

Leetcoed 双指针

三数之和 给你一个整数数组 nums &#xff0c;判断是否存在三元组 [nums[i], nums[j], nums[k]] 满足 i ! j、i ! k 且 j ! k &#xff0c;同时还满足 nums[i] nums[j] nums[k] 0 。 请你返回所有和为 0 且不重复的三元组。 注意&#xff1a;答案中不可以包含重复的三元组…...

编程日记 2023/12/21 23:03:51

关于“Python”的核心知识点整理大全31

目录 12.4.2 在屏幕上绘制飞船 alien_invasion.py ​编辑12.5 重构&#xff1a;模块 game_functions 12.5.1 函数 check_events() game_functions.py alien_invasion.py 12.5.2 函数 update_screen() game_functions.py alien_invasion.py 12.6 驾驶飞船 12.6.1 响应…...

编程日记 2023/12/21 23:01:49

第1章 SpringBoot开发入门

学习目标 了解SpringBoot的优点 掌握SpringBoot项目的构建 掌握SpringBoot的单元测试和热部署 熟悉SpringBoot的自动化配置原理 熟悉SpringBoot的执行流程 随着互联网的兴起&#xff0c;Spring势如破竹地占据了Java领域轻量级开发的王者之位。随着Java语言的发展以及市场…...

编程日记 2023/12/21 23:00:48

利用prometheus+grafana进行Linux主机监控

文章目录 一.架构说明与资源准备二.部署prometheus1.上传软件包2.解压软件包并移动到指定位置3.修改配置文件4.编写启动脚本5.启动prometheus服务 三.部署node-exporter1.上传和解压软件包2.设置systemctl启动3.启动服务 四.部署grafana1.安装和启动grafana2.设置prometheus数据…...

编程日记 2023/12/21 22:57:46

单词反转（字符串）

题目名字 单词反转 题目链接 题意 输入倒序的字符串&#xff0c;要求输出正序的字符串 思路 用while输入&#xff0c;这样当出现输入是空格时自动划分上一个为一个单词然后再次反输出 while循环的条件是当不再输入的时候&#xff0c;因为是字符串&#xff0c;不用getline输入…...

编程日记 2023/12/21 22:55:44

【Java 集合】LinkedBlockingDeque

在开始介绍 LinkedBlockingDeque 之前, 我们先看一下 LinkedBlockingDeque 的类图: 从其中可以看出他直接实现了 BlockingDeque 接口, 而 BlockingDeque 又实现了 BlockingQueue 的接口, 所以它本身具备了队列的特性。 而实现 BlockingDeque 使其在 BlockingQueue 的基础上多了…...

编程日记 2023/12/21 22:53:42

Docker 运行 Kafka 带 SASL 认证教程

Docker 运行 Kafka 带 SASL 认证教程 Docker 运行 Kafka 带 SASL 认证教程一、说明二、环境准备三、编写 Docker Compose 和 jaas文件docker-compose.yml代码说明&#xff1a;server_jaas.conf 四、启动服务五、验证服务六、连接kafka服务七、总结 Docker 运行 Kafka 带 SASL 认…...

编程新知 2025/10/27 17:04:10

论文解读：交大港大上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化学习框架（一）

宇树机器人多姿态起立控制强化学习框架论文解析 论文解读&#xff1a;交大&港大&上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化学习框架&#xff08;一&#xff09; 论文解读&#xff1a;交大&港大&上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化…...

编程新知 2025/8/27 0:58:09

OPenCV CUDA模块图像处理-----对图像执行 均值漂移滤波（Mean Shift Filtering）函数meanShiftFiltering()

操作系统&#xff1a;ubuntu22.04 OpenCV版本&#xff1a;OpenCV4.9 IDE:Visual Studio Code 编程语言&#xff1a;C11 算法描述 在 GPU 上对图像执行 均值漂移滤波&#xff08;Mean Shift Filtering&#xff09;&#xff0c;用于图像分割或平滑处理。 该函数将输入图像中的…...

编程新知 2025/10/27 0:27:44

论文笔记——相干体技术在裂缝预测中的应用研究

目录 相关地震知识补充地震数据的认识地震几何属性 相干体算法定义基本原理第一代相干体技术&#xff1a;基于互相关的相干体技术&#xff08;Correlation&#xff09;第二代相干体技术&#xff1a;基于相似的相干体技术&#xff08;Semblance&#xff09;基于多道相似的相干体…...

编程新知 2025/10/26 1:27:31

NXP S32K146 T-Box 携手 SD NAND（贴片式TF卡）：驱动汽车智能革新的黄金组合

在汽车智能化的汹涌浪潮中&#xff0c;车辆不再仅仅是传统的交通工具&#xff0c;而是逐步演变为高度智能的移动终端。这一转变的核心支撑&#xff0c;来自于车内关键技术的深度融合与协同创新。车载远程信息处理盒&#xff08;T-Box&#xff09;方案&#xff1a;NXP S32K146 与…...

编程新知 2025/10/25 13:34:22

IP如何挑？2025年海外专线IP如何购买？

你花了时间和预算买了IP&#xff0c;结果IP质量不佳&#xff0c;项目效率低下不说&#xff0c;还可能带来莫名的网络问题&#xff0c;是不是太闹心了&#xff1f;尤其是在面对海外专线IP时&#xff0c;到底怎么才能买到适合自己的呢&#xff1f;所以&#xff0c;挑IP绝对是个技…...

编程新知 2025/10/19 9:49:56

C++：多态机制详解

目录 一. 多态的概念 1.静态多态&#xff08;编译时多态&#xff09; 二.动态多态的定义及实现 1.多态的构成条件 2.虚函数 3.虚函数的重写/覆盖 4.虚函数重写的一些其他问题 1&#xff09;.协变 2&#xff09;.析构函数的重写 5.override 和 final关键字 1&#…...

编程新知 2025/10/27 8:07:15

A2A JS SDK 完整教程：快速入门指南

目录 什么是 A2A JS SDK?A2A JS 安装与设置A2A JS 核心概念创建你的第一个 A2A JS 代理A2A JS 服务端开发A2A JS 客户端使用A2A JS 高级特性A2A JS 最佳实践A2A JS 故障排除 什么是 A2A JS SDK? A2A JS SDK 是一个专为 JavaScript/TypeScript 开发者设计的强大库&#xff…...

编程新知 2025/9/29 5:00:25

【SSH疑难排查】轻松解决新版OpenSSH连接旧服务器的“no matching...“系列算法协商失败问题

【SSH疑难排查】轻松解决新版OpenSSH连接旧服务器的"no matching..."系列算法协商失败问题 摘要&#xff1a; 近期&#xff0c;在使用较新版本的OpenSSH客户端连接老旧SSH服务器时&#xff0c;会遇到 "no matching key exchange method found"​, "n…...

编程新知 2025/9/29 4:00:38

并发编程 - go版

1.并发编程基础概念 进程和线程 A. 进程是程序在操作系统中的一次执行过程&#xff0c;系统进行资源分配和调度的一个独立单位。B. 线程是进程的一个执行实体,是CPU调度和分派的基本单位,它是比进程更小的能独立运行的基本单位。C.一个进程可以创建和撤销多个线程;同一个进程中…...

编程新知 2025/10/30 0:38:38