Django+Jquery+Ajax+驗證碼登入案例
阿新 • • 發佈：2018-11-04
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'urlpatterns = [
url(r'^admin/', include(admin.site.urls)),
url(r'^',include('booktest.urls'))
]from django.conf.urls import url from booktest import views urlpatterns = [ # 登入成功url url(r'^success/$', views.success), # ajax登入url url(r'^login_ajax/$', views.login_ajax), # ajax登入校驗url url(r'^login_ajax_check/$', views.login_ajax_check), # 生產驗證碼圖片url url(r'^verify_code/$', views.verify_code), # 發帖頁面url url(r'^post_article/$', views.post_article), ] --------------------- 作者：ITxiaoke 來源：CSDN 原文：https://blog.csdn.net/u014745194/article/details/73997737?utm_source=copy 版權宣告：本文為博主原創文章，轉載請附上博文連結！
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']=True request.session['uname']=uname request.session['password']=password return 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 = 100 height = 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，將圖片儲存在記憶體中，檔案型別為png im.save(buf, 'png') # 13，將記憶體中的圖片資料返回給客戶端，MIME型別為圖片png return 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/>
密 碼：<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
版權宣告：本文為博主原創文章，轉載請附上博文連結！<!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，開始登入測試
這是登入成功後的頁面，進行發帖
這是發帖頁面
- 輸入使用者名稱、密碼和驗證碼
轉載自https://blog.csdn.net/u014745194/article/details/73997737