先在dev.py中注册app:
INSTALLED_APPS = [
'verify.apps.VerifyConfig'
]
配置redis数据库:
'default': {
'BACKEND': 'django_redis.cache.RedisCache',
'LOCATION': 'redis://127.0.0.1:6379/5',
"OPTIONS": {
"CLIENT_CLASS": "django_redis.client.DefaultClient",
},
},
'session': {
'BACKEND': 'django_redis.cache.RedisCache',
'LOCATION': 'redis://127.0.0.1:6379/6',
"OPTIONS": {
"CLIENT_CLASS": "django_redis.client.DefaultClient",
},
},
}
from django.conf.urls import url,include
from django.contrib import admin
urlpatterns = [
url(r'^admin/', admin.site.urls),
url(r'',include('verify.urls'))
]
在终端中导入verify app:
python ../../manage.py startapp verify
成功后配置verify/urls.py
from django.conf.urls import url
from .import views
urlpatterns = [
url(r'^pic_code/(.+)/',views.ImgCodeView.as_view())
] ----拼接验证码图片
配置verify/app.py
from django.apps import AppConfig
class VerifyConfig(AppConfig):
name = 'verify'
修改register.html:
<p>
<div class="fl res-text">验证码:</div>
<div class="fl"><input type="password" class="loginuser2"></div>
<div class="fl same-code">获取验证码</div>
<img src="http://127.0.0.1:8000/pic_code/uuid" id="img_code" onclick="getImgCode()">
<!--<div class="fl same-code2">60秒后重新获取</div>-->
</p>
在js下新建一个register.js,写入:
function uuid() {
var s = [];
var hexDigits = "0123456789abcdef";
for (var i = 0; i < 36; i++) {
s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1);
}
s[14] = "4"; // bits 12-15 of the time_hi_and_version field to 0010
s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1); // bits 6-7 of the clock_seq_hi_and_reserved to 01
s[8] = s[13] = s[18] = s[23] = "-";
var uuid = s.join("");
console.log(uuid);
return uuid;
}
function getImgCode(){
current_uuid = uuid()
new_url = "http://127.0.0.1:8000/pic_code/"+ current_uuid
$('#img_code').attr('src',new_url)
}
$(document).ready(function(){
getImgCode()
})
修改verify/views.py:
from django.shortcuts import render,HttpResponse
from django.views import View
from django.http import HttpResponse
from PIL import Image, ImageDraw, ImageFont
from django.utils.six import BytesIO
from django_redis import get_redis_connection
from rest_framework.views import APIView
...
class ImgCodeView( View):
def get(self,request,uuid):
print(uuid)
import random
# 定义变量,用于画面的背景色、宽、高
bgcolor = (random.randrange(20, 100), random.randrange(
20, 100), 255)
width = 100
height = 25
# 创建画面对象
im = Image.new('RGB', (width, height), bgcolor)
# 创建画笔对象
draw = ImageDraw.Draw(im)
# 调用画笔的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)
# 定义验证码的备选值
str1 = 'ABCD123EFGHIJK456LMNOPQRS789TUVWXYZ0'
# 随机选取4个值作为验证码
rand_str = ''
for i in range(0, 4):
rand_str += str1[random.randrange(0, len(str1))]
# 构造字体对象,ubuntu的字体路径为“/usr/share/fonts/truetype/freefont”
font = ImageFont.truetype('FreeMono.ttf', 23)
# 构造字体颜色
fontcolor = (255, random.randrange(0, 255), random.randrange(0, 255))
# 绘制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)
# 释放画笔
del draw
# 存入session,用于做进一步验证
request.session['verifycode'] = rand_str
# 内存文件操作
buf = BytesIO()
# 将图片保存在内存中,文件类型为png
im.save(buf, 'png')
# 将内存中的图片数据返回给客户端,MIME类型为图片png
con = get_redis_connection()
con.setex(name=uuid, time=300, value=rand_str)
return HttpResponse(buf.getvalue(), 'image/png')
# 引入随机函数模块
终端中启动前端服务器:
(huanjing1) python@ubuntu:~/Desktop/new_project/shanghui$ live-server