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

BBS项目--登录

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…...

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

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

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

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

听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…...

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

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

创建型模式 | 单例模式

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

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

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

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

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

【IDEA】Intellij IDEA相关配置

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

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 四、总结 一…...

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

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

零刻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. 格式化需…...

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

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

听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…...

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;答案中不可以包含重复的三元组…...

关于“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 响应…...

第1章 SpringBoot开发入门

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

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

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

单词反转(字符串)

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

【Java 集合】LinkedBlockingDeque

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

【hacker送书第3期】OpenCV轻松入门:面向Python(第2版)

第3期图书推荐 内容简介作者简介图书目录专家推荐参与方式 内容简介 本书基于面向 Python 的 OpenCV(OpenCV for Python)&#xff0c;介绍了图像处理的方方面面。本书以 OpenCV 官方文档的知识脉络为主线&#xff0c;并对细节进行补充和说明。书中不仅介绍了 OpenCV 函数的使用…...

手把手教你isPalindrome 方法在密码验证中的应用

在信息安全领域中&#xff0c;密码验证是一个极为重要的组成部分。一个强密码应具备足够的复杂性&#xff0c;以免遭到破解。而回文密码是一种具备特殊性质的密码&#xff0c;其正序和倒序相同&#xff0c;因此具有极高的安全性&#xff0c;并能发挥重要作用。在实际密码策略中…...

drf入门规范(二)

四 RESTful API规范 REST全称是Representational State Transfer&#xff0c;中文意思是表述&#xff08;编者注&#xff1a;通常译为表征性状态转移&#xff09;。 它首次出现在2000年Roy Fielding的博士论文中。 RESTful是一种定义Web API接口的设计风格&#xff0c;尤其适用…...

使用Redis和Nginx分别实现限制接口请求频率

前言 为啥需要限制接口请求频率&#xff1f;这个是因为防止接口一直被刷&#xff0c;比如发送手机验证码的接口&#xff0c;一直被刷的话&#xff0c;费钱费资源的&#xff0c;至少做点基本的防护工作。以下分别使用Redis和Nginx实现限制接口请求频率方案。 一、基于Redis实现…...

ansible模块 (7-13)

模块 7、hostname模块&#xff1a; 远程主机名管理模块 ansible 192.168.10.202 -m hostname -a nameliu 8、copy模块&#xff1a; 用于复制指定的主机文件到远程主机的模块 常用参数&#xff1a; dest: 指出要复制的文件在哪&#xff0c;必须使用绝对路径。如果源目标是…...

MySQL概括与SQL分类

文章目录 一、计算机语言二、SQL语言三、数据库系统四、MySQL简介 一、计算机语言 二、SQL语言 三、数据库系统 四、MySQL简介...

微信小程序:wx:for 获取view点击的元素currentTarget.dataset为空

遍历数组渲染一组view通过bindtap事件获取点击的元素 解决办法&#xff1a; 在遍历时&#xff0c;设置data-item即可。 示例&#xff1a; <view wx:for"{{types}}" data-item"{{item}}"wx:key"key" bindtap"syntheActiveItem"c…...

Word的兼容性问题很常见,禁用兼容模式虽步不是最有效的,但可以解决兼容性问题

当你在较新版本的Word应用程序中打开用较旧版本的Word创建的文档时&#xff0c;会出现兼容性问题。错误通常发生在文件名附近&#xff08;兼容模式&#xff09;。兼容性模式问题&#xff08;暂时&#xff09;禁用Word功能&#xff0c;从而限制使用较新版本Word的用户编辑文档。…...

环境搭建及源码运行_java环境搭建_idea版本下载及安装

1、介绍 Idea是一款被广泛使用的Java集成开发环境&#xff0c;它提供了丰富的功能和工具来帮助开发人员更高效地编写和调试代码。作为一款开源软件&#xff0c;Idea不仅提供了基本的代码编辑、自动完成和调试功能&#xff0c;还支持大量的插件和扩展&#xff0c;可为开发人员提…...

jvm相关命令操作

查看jvm使用情况 jmap -heap PID 查看线程使用情况 jstack pid 查看当前线程数 jstack 21294 |grep -E (#[0-9]) -o -c 查看系统线程数 top -H top -Hp pid #查看具体的进程中的线程信息 使用 jps 命令查看配置了JVM的服务 查看某个进程JVM的GC使用情况 jstat -gc 进程…...

微信知彼网络网站建设/dw友情链接怎么设置

最近几年&#xff0c;在DDD的领域&#xff0c;我们经常会看到CQRS架构的概念。我个人也写了一个ENode框架&#xff0c;专门用来实现这个架构。CQRS架构本身的思想其实非常简单&#xff0c;就是读写分离。是一个很好理解的思想。就像我们用MySQL数据库的主备&#xff0c;数据写到…...

flash网站整站源码免费下载/建设网站制作

搜索热词工具介绍redis-port 是一组开源工具集合&#xff0c;主要用于 Redis 节点间的数据库同步、数据导入、数据导出&#xff0c;支持 Redis 的跨版本数据迁移&#xff0c;工具集中包括以下工具&#xff1a;redis-sync&#xff1a;支持在 Redis 实例之间进行数据迁移。redis-…...

临朐网站建设/香港疫情最新消息

原文&#xff1a; http://www.cnitblog.com/aliyiyi08/archive/2008/09/09/48878.html这列很重要,显示了连接使用了哪种连接类别,有无使用索引. 从最好到最差的连接类型为const、eq_reg、ref、range、indexhe和ALL (1).system这是const联接类型的一个特例。表仅有一行满足条件.…...

苏州网站建设哪个比较牛/爱站网

互斥量和信号量的区别 1. 互斥量用于线程的互斥&#xff0c;信号量用于线程的同步。 这是互斥量和信号量的根本区别&#xff0c;也就是互斥和同步之间的区别。 互斥&#xff1a;是指某一资源同时只允许一个访问者对其进行访问&#xff0c;具有唯一性和排它性。但互斥无法限制访…...

如何查看网站用什么代码做的/深圳市企业网站seo

今天早上还是和往常一样&#xff0c;一杯豆奶&#xff0c;可不知怎么地&#xff0c;感觉今天的豆奶有点儿甜呀&#xff01;难道这就是传说中的甘尽苦来&#xff1f;我这好几斤的小心脏。还是说一下最近的想法吧。虽然有点儿过分&#xff0c;但还是值得记录一下&#xff0c;毕竟…...

wordpress主题中文主题下载/百度手机助手下载正版

一、什么是Set 1&#xff09;Set是一种叫做集合的数据结构。这句话的重点在于集合&#xff0c;那么什么是集合的&#xff1f;它又有什么特点呢&#xff1f;集合是由一组无序且唯一的项组成的&#xff0c;即是一个没有重复元素也没有顺序概念的数组 2&#xff09;Set本身是一个…...