Django+Jquery+Ajax+验证码登录案例

1&＃xff0c;创建项目test04

2&＃xff0c;创建应用app为booktest

3&＃xff0c;注册应用booktest

作用让创建的应用运行起来

4&＃xff0c;在项目根目录下创建模板templates目录

• 作用就是存放html文件

• 在项目的settings.py文件中配置模板&＃xff0c;如下图&＃xff1a;

5&＃xff0c;在项目根目录下创建static目录

• 作用就是存放css/图片/js等文件

• 在项目的settings.py文件中配置static文件&＃xff0c;如下图

6&＃xff0c;数据库的创建与配置

手动的在mysql数据库中创建test04数据库&＃xff0c;如下图

7&＃xff0c;DEBUG开关设置

8&＃xff0c;设置编码和时间

LANGUAGE_CODE &＃61; &＃39;zh-Hans&＃39;TIME_ZONE &＃61; &＃39;Asia/Shanghai&＃39;

9&＃xff0c;项目的urls文件中配置如下&＃xff1a;

urlpatterns &＃61; [url(r&＃39;^admin/&＃39;, include(admin.site.urls)),url(r&＃39;^&＃39;,include(&＃39;booktest.urls&＃39;))
]

10&＃xff0c;在booktest应用下创建urls目录并配置

from django.conf.urls import url
from booktest import viewsurlpatterns &＃61; [# 登录成功urlurl(r&＃39;^success/$&＃39;, views.success),# ajax登录urlurl(r&＃39;^login_ajax/$&＃39;, views.login_ajax),# ajax登录校验urlurl(r&＃39;^login_ajax_check/$&＃39;, views.login_ajax_check),# 生产验证码图片urlurl(r&＃39;^verify_code/$&＃39;, views.verify_code),# 发帖页面urlurl(r&＃39;^post_article/$&＃39;, views.post_article),
]
---------------------
作者&＃xff1a;ITxiaoke
来源&＃xff1a;CSDN
原文&＃xff1a;https://blog.csdn.net/u014745194/article/details/73997737?utm_source&＃61;copy
版权声明&＃xff1a;本文为博主原创文章&＃xff0c;转载请附上博文链接&＃xff01;

11&＃xff0c;在booktest应用views中创建各个视图函数

from django.shortcuts import render
from django.http import JsonResponse
# PIL是python2版本的图像处理库&＃xff0c;不过现在用Pillow比PIL强大&＃xff0c;是python3的处理库
from PIL import Image, ImageDraw, ImageFont
from django.http import HttpResponse
from django.shortcuts import render, redirect
import random
# 在python2.x中导入模块方法&＃xff1a;
# from StringIO import String
# 在python2.x中它还有个孪生兄弟&＃xff0c;运行速度比它快&＃xff0c;用c实现的
# from cStringIO import StringIO# 在python3.x中&＃xff0c;StringIO已经在io模块中了&＃xff0c;导入方法
from io import BytesIO# ajax登录视图函数
def login_ajax(request):return render(request, &＃39;booktest/login_ajax.html&＃39;)# ajax登录校验回调视图函数
def login_ajax_check(request):# 1&＃xff0c;获取用户输入的用户名和密码uname &＃61; request.POST.get(&＃39;uname&＃39;)password &＃61; request.POST.get(&＃39;password&＃39;)# 获取用户输入的验证码vcode &＃61; request.POST.get(&＃39;vcode&＃39;)# 获取session中的验证码vcode_session &＃61; request.session.get(&＃39;verifycode&＃39;)# 2,用户名和密码校验if uname &＃61;&＃61; &＃39;xiaoke&＃39; and password &＃61;&＃61; &＃39;123456&＃39; and vcode &＃61;&＃61; vcode_session:# 保存用户的登录状态request.session[&＃39;isLogin&＃39;]&＃61;Truerequest.session[&＃39;uname&＃39;]&＃61;unamerequest.session[&＃39;password&＃39;]&＃61;passwordreturn JsonResponse({&＃39;msg&＃39;: &＃39;ok&＃39;})elif uname !&＃61; &＃39;xiaoke&＃39; or password !&＃61; &＃39;123456&＃39;:return JsonResponse({&＃39;msg&＃39;: &＃39;fail_user&＃39;})elif vcode !&＃61; vcode_session:return JsonResponse({&＃39;msg&＃39;: &＃39;fail_verify&＃39;})def verify_code(request):# 1&＃xff0c;定义变量&＃xff0c;用于画面的背景色、宽、高# random.randrange(20, 100)意思是在20到100之间随机找一个数bgcolor &＃61; (random.randrange(20, 100), random.randrange(20, 100), 255)width &＃61; 100height &＃61; 25# 2&＃xff0c;创建画面对象im &＃61; Image.new(&＃39;RGB&＃39;, (width, height), bgcolor)# 3&＃xff0c;创建画笔对象draw &＃61; ImageDraw.Draw(im)# 4&＃xff0c;调用画笔的point()函数绘制噪点&＃xff0c;防止攻击for i in range(0, 100):# 噪点绘制的范围xy &＃61; (random.randrange(0, width), random.randrange(0, height))# 噪点的随机颜色fill &＃61; (random.randrange(0, 255), 255, random.randrange(0, 255))# 绘制出噪点draw.point(xy, fill&＃61;fill)# 5&＃xff0c;定义验证码的备选值str1 &＃61; &＃39;ABCD123EFGHIJK456LMNOPQRS789TUVWXYZ0&＃39;# 6&＃xff0c;随机选取4个值作为验证码rand_str &＃61; &＃39;&＃39;for i in range(0, 4):rand_str &＃43;&＃61; str1[random.randrange(0, len(str1))]# 7&＃xff0c;构造字体对象&＃xff0c;ubuntu的字体路径为“/usr/share/fonts/truetype/freefont”font &＃61; ImageFont.truetype(&＃39;FreeMono.ttf&＃39;, 23)# 8&＃xff0c;构造字体颜色fontcolor &＃61; (255, random.randrange(0, 255), random.randrange(0, 255))# 9&＃xff0c;绘制4个字draw.text((5, 2), rand_str[0], font&＃61;font, fill&＃61;fontcolor)draw.text((25, 2), rand_str[1], font&＃61;font, fill&＃61;fontcolor)draw.text((50, 2), rand_str[2], font&＃61;font, fill&＃61;fontcolor)draw.text((75, 2), rand_str[3], font&＃61;font, fill&＃61;fontcolor)# 9&＃xff0c;用完画笔&＃xff0c;释放画笔del draw# 10&＃xff0c;存入session&＃xff0c;用于做进一步验证request.session[&＃39;verifycode&＃39;] &＃61; rand_str# 11&＃xff0c;内存文件操作buf &＃61; BytesIO()# 12&＃xff0c;将图片保存在内存中&＃xff0c;文件类型为pngim.save(buf, &＃39;png&＃39;)# 13&＃xff0c;将内存中的图片数据返回给客户端&＃xff0c;MIME类型为图片pngreturn HttpResponse(buf.getvalue(), &＃39;image/png&＃39;)# ajax登录成功视图函数
def success(request):# 用户已经登录if request.session.get(&＃39;isLogin&＃39;):return render(request, &＃39;booktest/success.html&＃39;)else:return redirect(&＃39;/login_ajax/&＃39;)# 发帖操作视图函数
def post_article(request):# 获取登录的用户名uname &＃61; request.session.get(&＃39;uname&＃39;)# 获取帖子的标题title &＃61; request.POST.get(&＃39;title&＃39;)content &＃61; request.POST.get(&＃39;content&＃39;)return HttpResponse(&＃39;%s发了一篇名为%s的帖子&＃xff1a;%s&＃39; % (uname.encode(&＃39;utf-8&＃39;).decode(&＃39;utf-8&＃39;),title.encode(&＃39;utf-8&＃39;).decode(&＃39;utf-8&＃39;),content.encode(&＃39;utf-8&＃39;).decode(&＃39;utf-8&＃39;)))
---------------------
作者&＃xff1a;ITxiaoke
来源&＃xff1a;CSDN
原文&＃xff1a;https://blog.csdn.net/u014745194/article/details/73997737?utm_source&＃61;copy
版权声明&＃xff1a;本文为博主原创文章&＃xff0c;转载请附上博文链接&＃xff01;

12&＃xff0c;ajax登录页面布局代码如下&＃xff1a;

以下是csrf攻击的原理图&＃xff1a;

csrf_token 的目地是为了防止csrf公积&＃xff0c;django默认打开csrf&＃xff1a;如下代码
‘django.middleware.csrf.CsrfViewMiddleware’,
查看网页源代码可知&＃xff0c;csrf的键和值&＃xff0c;所以请求的时候要携带&＃xff0c;否则django直接禁止&＃xff1a;

 ajax登录页面具体布局如下&＃xff1a;

{% csrf_token %}用户名&＃xff1a;
密  码&＃xff1a;
验证码&＃xff1a;

13&＃xff0c;登录成功页面&＃xff0c;进行发帖布局代码如下&＃xff1a;

亲&＃xff01;你登录成功了&＃xff0c;欢迎你&＃xff01;&＃xff01;&＃xff01;

14&＃xff0c;执行迁移&＃xff0c;生成session表

• session表示需要执行迁移后&＃xff0c;才会在mysql数据库中生成
• 

15&＃xff0c;查看mysql数据库

• show tables;查看数据库test04中的表
• django_session就是session表
• 

16&＃xff0c;开始登录测试

这是登录成功后的页面&＃xff0c;进行发帖

这是发帖页面

• 输入用户名、密码和验证码
• 

17&＃xff0c;查看数据库中session表

 查看COOKIE中的sessionid值为“hzlqkmdkn6461kfwfm2oj7p5889o2fo1”&＃xff0c;数据表中session的键为“hzlqkmdkn6461kfwfm2oj7p5889o2fo1”&＃xff0c;是一样的&＃xff0c;这样&＃xff0c;服务器就可以在众多的请求者中找到对应的Session数据。

转载自https://blog.csdn.net/u014745194/article/details/73997737