1，創建項目test04

2，創建應用app為booktest

3，注冊應用booktest

作用讓創建的應用運行起來

4，在項目根目錄下創建模板templates目錄

• 作用就是存放html文件

• 在項目的settings.py文件中配置模板，如下圖：

?

5，在項目根目錄下創建static目錄

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

• 在項目的settings.py文件中配置static文件，如下圖

6，數據庫的創建與配置

手動的在mysql數據庫中創建test04數據庫，如下圖

7，DEBUG開關設置

8，設置編碼和時間

LANGUAGE_CODE = 'zh-Hans'TIME_ZONE = 'Asia/Shanghai'

9，項目的urls文件中配置如下：

urlpatterns = [url(r'^admin/', include(admin.site.urls)),url(r'^',include('booktest.urls')) ]

10，在booktest應用下創建urls目錄并配置

from django.conf.urls import url from booktest import viewsurlpatterns = [# 登錄成功urlurl(r'^success/$', views.success),# ajax登錄urlurl(r'^login_ajax/$', views.login_ajax),# ajax登錄校驗urlurl(r'^login_ajax_check/$', views.login_ajax_check),# 生產驗證碼圖片urlurl(r'^verify_code/$', views.verify_code),# 發帖頁面urlurl(r'^post_article/$', views.post_article), ] --------------------- 作者：ITxiaoke 來源：CSDN 原文：https://blog.csdn.net/u014745194/article/details/73997737?utm_source=copy 版權聲明：本文為博主原創文章，轉載請附上博文鏈接！

11，在booktest應用views中創建各個視圖函數

from django.shortcuts import render from django.http import JsonResponse # PIL是python2版本的圖像處理庫，不過現在用Pillow比PIL強大，是python3的處理庫 from PIL import Image, ImageDraw, ImageFont from django.http import HttpResponse from django.shortcuts import render, redirect import random # 在python2.x中導入模塊方法： # from StringIO import String # 在python2.x中它還有個孿生兄弟，運行速度比它快，用c實現的 # from cStringIO import StringIO# 在python3.x中，StringIO已經在io模塊中了，導入方法 from io import BytesIO# ajax登錄視圖函數 def login_ajax(request):return render(request, 'booktest/login_ajax.html')# ajax登錄校驗回調視圖函數 def login_ajax_check(request):# 1，獲取用戶輸入的用戶名和密碼uname = request.POST.get('uname')password = request.POST.get('password')# 獲取用戶輸入的驗證碼vcode = request.POST.get('vcode')# 獲取session中的驗證碼vcode_session = request.session.get('verifycode')# 2,用戶名和密碼校驗if uname == 'xiaoke' and password == '123456' and vcode == vcode_session:# 保存用戶的登錄狀態request.session['isLogin']=Truerequest.session['uname']=unamerequest.session['password']=passwordreturn JsonResponse({'msg': 'ok'})elif uname != 'xiaoke' or password != '123456':return JsonResponse({'msg': 'fail_user'})elif vcode != vcode_session:return JsonResponse({'msg': 'fail_verify'})def verify_code(request):# 1，定義變量，用于畫面的背景色、寬、高# random.randrange(20, 100)意思是在20到100之間隨機找一個數bgcolor = (random.randrange(20, 100), random.randrange(20, 100), 255)width = 100height = 25# 2，創建畫面對象im = Image.new('RGB', (width, height), bgcolor)# 3，創建畫筆對象draw = ImageDraw.Draw(im)# 4，調用畫筆的point()函數繪制噪點，防止攻擊for i in range(0, 100):# 噪點繪制的范圍xy = (random.randrange(0, width), random.randrange(0, height))# 噪點的隨機顏色fill = (random.randrange(0, 255), 255, random.randrange(0, 255))# 繪制出噪點draw.point(xy, fill=fill)# 5，定義驗證碼的備選值str1 = 'ABCD123EFGHIJK456LMNOPQRS789TUVWXYZ0'# 6，隨機選取4個值作為驗證碼rand_str = ''for i in range(0, 4):rand_str += str1[random.randrange(0, len(str1))]# 7，構造字體對象，ubuntu的字體路徑為“/usr/share/fonts/truetype/freefont”font = ImageFont.truetype('FreeMono.ttf', 23)# 8，構造字體顏色fontcolor = (255, random.randrange(0, 255), random.randrange(0, 255))# 9，繪制4個字draw.text((5, 2), rand_str[0], font=font, fill=fontcolor)draw.text((25, 2), rand_str[1], font=font, fill=fontcolor)draw.text((50, 2), rand_str[2], font=font, fill=fontcolor)draw.text((75, 2), rand_str[3], font=font, fill=fontcolor)# 9，用完畫筆，釋放畫筆del draw# 10，存入session，用于做進一步驗證request.session['verifycode'] = rand_str# 11，內存文件操作buf = BytesIO()# 12，將圖片保存在內存中，文件類型為pngim.save(buf, 'png')# 13，將內存中的圖片數據返回給客戶端，MIME類型為圖片pngreturn HttpResponse(buf.getvalue(), 'image/png')# ajax登錄成功視圖函數 def success(request):# 用戶已經登錄if request.session.get('isLogin'):return render(request, 'booktest/success.html')else:return redirect('/login_ajax/')# 發帖操作視圖函數 def post_article(request):# 獲取登錄的用戶名uname = request.session.get('uname')# 獲取帖子的標題title = request.POST.get('title')content = request.POST.get('content')return HttpResponse('%s發了一篇名為%s的帖子：%s' % (uname.encode('utf-8').decode('utf-8'),title.encode('utf-8').decode('utf-8'),content.encode('utf-8').decode('utf-8'))) --------------------- 作者：ITxiaoke 來源：CSDN 原文：https://blog.csdn.net/u014745194/article/details/73997737?utm_source=copy 版權聲明：本文為博主原創文章，轉載請附上博文鏈接！

12，ajax登錄頁面布局代碼如下：

以下是csrf攻擊的原理圖：

csrf_token 的目地是為了防止csrf公積，django默認打開csrf：如下代碼
‘django.middleware.csrf.CsrfViewMiddleware’,
查看網頁源代碼可知，csrf的鍵和值，所以請求的時候要攜帶，否則django直接禁止：

?ajax登錄頁面具體布局如下：

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>登錄頁面</title><script src="/static/js/jquery-1.12.4.min.js"></script><style>#errorMsg {display: none;color: red;}</style><script>$(function () {$('#btnLogin').click(function () {$('uname').reset;csrf = $('input').val();uname = $('#uname').val();password = $('#password').val();vcode = $('#vcode').val();//發起ajax請求，注意csrf攻擊$.post('/login_ajax_check/', {'csrfmiddlewaretoken': csrf,'uname': uname,'password': password,'vcode': vcode,}, function (data) {//獲取返回的數據并進行操作if (data.msg === 'ok') {//登錄成功location.href = '/success/' //跳轉到成功頁面} else if (data.msg === 'fail_user') {$('#errorMsg').show().text('親！用戶名或密碼錯誤！')} else if (data.msg === 'fail_verify') {//驗證碼錯誤$('#errorMsg').show().text('親！驗證碼錯誤！')}})});});</script> </head><body><div>{% csrf_token %}用戶名：<input type="text" id="uname"><br/>密&nbsp;&nbsp;碼：<input type="password" id="password"><br/>驗證碼：<input type="text" id="vcode"/><br/><!--直接調用生產圖片驗證碼的視圖函數，生產驗證碼--><img src="/verify_code/" id="imgvcode"/><br/><input type="button" value="登錄" id="btnLogin"><br/><div id="errorMsg"></div> </div></body> </html> --------------------- 作者：ITxiaoke 來源：CSDN 原文：https://blog.csdn.net/u014745194/article/details/73997737?utm_source=copy 版權聲明：本文為博主原創文章，轉載請附上博文鏈接！

13，登錄成功頁面，進行發帖布局代碼如下：

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>登錄成功，發帖頁面</title> </head> <body><h2>親！你登錄成功了，歡迎你！！！</h2> <form method="post" action="/post_article/">{% csrf_token %}標題:<input type="text" name="title"/><br/>內容:<textarea name="content"></textarea><br/><input type="submit" value="發帖"/> </form> </body> </html> --------------------- 作者：ITxiaoke 來源：CSDN 原文：https://blog.csdn.net/u014745194/article/details/73997737?utm_source=copy 版權聲明：本文為博主原創文章，轉載請附上博文鏈接！

14，執行遷移，生成session表

?

• session表示需要執行遷移后，才會在mysql數據庫中生成

15，查看mysql數據庫

?

?

• show tables;查看數據庫test04中的表
• django_session就是session表

16，開始登錄測試

這是登錄成功后的頁面，進行發帖

?

這是發帖頁面

?

?

• 輸入用戶名、密碼和驗證碼

17，查看數據庫中session表

?查看Cookie中的sessionid值為“hzlqkmdkn6461kfwfm2oj7p5889o2fo1”，數據表中session的鍵為“hzlqkmdkn6461kfwfm2oj7p5889o2fo1”，是一樣的，這樣，服務器就可以在眾多的請求者中找到對應的Session數據。

轉載自https://blog.csdn.net/u014745194/article/details/73997737?

總結

以上是生活随笔為你收集整理的Django+Jquery+Ajax+验证码登录案例的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。