django搭建BBS-登入&验证码的生成
基于注册完成后
文件结构
- app 接口
- migrations
- __inint__.py
- admin.py
管理员页面注册表单用 - apps.py
- bbsform.py
form组件相关设置 - models.py
模型存放 - tests.py
- views.py
业务逻辑
- avatar
图片文件存储 - BBS
项目名称以及路由存放- __inint__.py
- settings.py
- urls.py
- wsgi.py
- static
- bootstrap-3.3.7-dist
bootstrap文件网上下载的 - jquery-3.4.1.min.js
jq文件
- bootstrap-3.3.7-dist
- templates
页面文件存放
一.创建图片验证
1.路由
urls.py
from django.conf.urls import url
from django.contrib import admin
#主路由导入视图内函数
from app import views
urlpatterns = [
url(r'^admin/', admin.site.urls),
url(r'^register/', views.register),
url(r'^login/', views.login),
url(r'^get_code/', views.get_code),
]
2.逻辑业务
views.py
from django.shortcuts import render,HttpResponse,redirect
from django.http import JsonResponse
#Image导入
#ImageDraw在图片上写字
#ImageFont 写字的格式
from PIL import Image,ImageDraw,ImageFont
import random
# 相当于把文件以byte格式存到内存中
from io import BytesIO
from django.contrib import auth
from app.bbsforms import Register
from app import models
from django.db.models import Count
from django.db.models.functions import TruncMonth
from django.db.models import F
# Create your views here.
def register(request):
if request.method=='GET':
form=Register()
return render(request,'register.html',{'form':form})
elif request.is_ajax():
response={'code':100,'msg':None}
form = Register(request.POST)
if form.is_valid():
#校验通过的数据
clean_data=form.cleaned_data
#把re_pwd剔除
clean_data.pop('re_pwd')
#取出头像
avatar=request.FILES.get('avatar')
if avatar:
#因为用的是FileField，只需要把文件对象赋值给avatar字段，自动做保存
clean_data['avatar']=avatar
user=models.UserInfo.objects.create_user(**clean_data)
if user:
response['msg'] = '创建成功'
else:
response['code'] = 103
# 把校验不通过的数据返回
response['msg'] = '创建失败'
else:
response['code']=101
#把校验不通过的数据返回
response['msg']=form.errors
print(type(form.errors))
return JsonResponse(response,safe=False)
def login(request):
if request.method=='GET':
return render(request,'login.html')
def get_code(request):
if request.method == 'GET':
img = Image.new('RGB', (350, 40), (random.randint(0, 255), random.randint(0, 255), random.randint(0, 255)))
# 写文字
# 生成一个字体对象
font = ImageFont.truetype('/static/Gabriola.ttf', 34)
# 调用方法，返回一个画板对象
draw = ImageDraw.Draw(img)
new_text =''
# 生成随机8位数字
for x_index in range(1, 8):
num = chr(random.randint(48, 57))
word = chr(random.randint(65, 90))
word_1 = chr(random.randint(97, 122))
text =random.choice((num, word, word_1))
draw.text((x_index * 32, 0),text, font=font)
new_text +=text
# 加点线
width = 320
height = 35
for i in range(5):
x1 = random.randint(0, width)
x2 = random.randint(0, width)
y1 = random.randint(0, height)
y2 = random.randint(0, height)
# 在图片上画线
draw.line((x1, y1, x2, y2), fill=(random.randint(0, 255), random.randint(0, 255), random.randint(0, 255)))
for i in range(33):
# 画点
draw.point([random.randint(0, width), random.randint(0, height)], fill=(random.randint(0, 255), random.randint(0, 255), random.randint(0, 255)))
x = random.randint(0, width)
y = random.randint(0, height)
# 画弧形
draw.arc((x, y, x + 4, y + 4), 0, 90, fill=(random.randint(0, 255), random.randint(0, 255), random.randint(0, 255)))
print(new_text)
#存在session中
request.session['code']=new_text
#存内存
f = BytesIO()
img.save(f, 'png')
return HttpResponse(f.getvalue())
3.网页
login.html
<!DOCTYPE html>
<html lang="en">
<head>
{% include 'bootstrap.html' %}<--载入bootstrap-->
<meta charset="UTF-8">
<title>登入</title>
</head>
<body>
<div class="container-fluid center-block">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<h1>登陆</h1>
<form action="">
<div class="form-group">
<label for="id_name">用户名</label>
<input type="text" name="name" id="id_name" class="form-control">
</div>
<div class="form-group">
<label for="pwd">密码</label>
<input type="password" name="pwd" id="pwd" class="form-control">
</div>
<div class="form-group">
<label for="id_code">验证码</label>
<div class="row">
<div class="col-md-6">
<input type="text" name="code" id="id_code" class="form-control">
</div>
<div class="col-md-6" id="img">
<img src="/get_code/" height="40" width="350" class="img-code">
</div>
</div>
</div>
<input type="submit" value="提交" class="btn-success">
</form>
</div>
</div>
</div>
</body>
{% include 'jq.html' %} <--载入jq-->
<script> <--利用img标标签属性src发送改变后会自己去找-->
$('.img-code').click(function () {
var img_code_src = $(this).attr('src');
img_code_src += '1';
console.log(img_code_src);
$(this).attr('src',img_code_src)
})
</script>
</html>
二.账号信息进行验证
login.html
<!DOCTYPE html>
<html lang="en">
<head>
{% include 'bootstrap.html' %}
<meta charset="UTF-8">
<title>登入</title>
</head>
<body>
<div class="container-fluid center-block">
<div class="row">
<div class="col-md-6 col-md-offset-3">
{% csrf_token %}
<h1>登陆</h1>
<form action="">
<div class="form-group">
<label for="id_name">用户名</label>
<input type="text" name="name" id="id_name" class="form-control">
</div>
<div class="form-group">
<label for="pwd">密码</label>
<input type="password" name="pwd" id="pwd" class="form-control">
</div>
<div class="form-group">
<label for="id_code">验证码</label>
<div class="row">
<div class="col-md-6">
<input type="text" name="code" id="id_code" class="form-control">
</div>
<div class="col-md-6" id="img">
<img src="/get_code/" height="40" width="350" class="img-code">
</div>
</div>
</div>
<input type="button" value="提交" class="btn-success" id="up_data">
<span style="color: red" id="msg"></span>
</form>
</div>
</div>
</div>
</body>
{% include 'jq.html' %}
<script>
$('.img-code').click(function () {
var img_code_src = $(this).attr('src');
img_code_src += '1';
console.log(img_code_src);
$(this).attr('src',img_code_src)
})
</script>
<script>
$('#up_data').click(function () {
$.ajax({
type:'post',
url:'/login/',
data:{'name':$('#id_name').val(),
'pwd':$('#pwd').val(),
'code':$('#id_code').val(),
'csrfmiddlewaretoken':'{{csrf_token}}'
},
success:function (msg) {
console.log(msg);
$('#msg').text(msg);
if (msg =='登入成功'){
console.log('sb');
window.location.replace('http://www.baidu.com');<--暂时先放百度-->
}
}
})
})
</script>
</html>
views.py
from django.shortcuts import render,HttpResponse,redirect
from django.http import JsonResponse
#Image导入
#ImageDraw在图片上写字
#ImageFont 写字的格式
from PIL import Image,ImageDraw,ImageFont
import random
# 相当于把文件以byte格式存到内存中
from io import BytesIO
from django.contrib import auth
from app.bbsforms import Register
from app import models
from django.db.models import Count
from django.db.models.functions import TruncMonth
from django.db.models import F
# Create your views here.
def register(request):
if request.method=='GET':
form=Register()
return render(request,'register.html',{'form':form})
elif request.is_ajax():
response={'code':100,'msg':None}
form = Register(request.POST)
if form.is_valid():
#校验通过的数据
clean_data=form.cleaned_data
#把re_pwd剔除
clean_data.pop('re_pwd')
#取出头像
avatar=request.FILES.get('avatar')
if avatar:
#因为用的是FileField，只需要把文件对象赋值给avatar字段，自动做保存
clean_data['avatar']=avatar
user=models.UserInfo.objects.create_user(**clean_data)
if user:
response['msg'] = '创建成功'
else:
response['code'] = 103
# 把校验不通过的数据返回
response['msg'] = '创建失败'
else:
response['code']=101
#把校验不通过的数据返回
response['msg']=form.errors
print(type(form.errors))
return JsonResponse(response,safe=False)
def login(request):
if request.method=='GET':
return render(request,'login.html')
else:
print(request.POST)
user_name=request.POST.get('name')
pwd=request.POST.get('pwd')
code=request.POST.get('code')
user=auth.authenticate(username=user_name,password=pwd)
print(user)
if request.session.get('code').upper() !=code.upper(): #忽略大小写
return HttpResponse('验证码错误')
elif not user:
return HttpResponse('账号密码错误')
else:
return HttpResponse('登入成功')
def get_code(request):
if request.method == 'GET':
img = Image.new('RGB', (350, 40), (random.randint(0, 255), random.randint(0, 255), random.randint(0, 255)))
# 写文字
# 生成一个字体对象
font = ImageFont.truetype('/static/Gabriola.ttf', 34)
# 调用方法，返回一个画板对象
draw = ImageDraw.Draw(img)
new_text =''
# 生成随机8位数字
for x_index in range(1, 8):
num = chr(random.randint(48, 57))
word = chr(random.randint(65, 90))
word_1 = chr(random.randint(97, 122))
text =random.choice((num, word, word_1))
draw.text((x_index * 32, 0),text, font=font)
new_text +=text
# 加点线
width = 320
height = 35
for i in range(5):
x1 = random.randint(0, width)
x2 = random.randint(0, width)
y1 = random.randint(0, height)
y2 = random.randint(0, height)
# 在图片上画线
draw.line((x1, y1, x2, y2), fill=(random.randint(0, 255), random.randint(0, 255), random.randint(0, 255)))
for i in range(33):
# 画点
draw.point([random.randint(0, width), random.randint(0, height)], fill=(random.randint(0, 255), random.randint(0, 255), random.randint(0, 255)))
x = random.randint(0, width)
y = random.randint(0, height)
# 画弧形
draw.arc((x, y, x + 4, y + 4), 0, 90, fill=(random.randint(0, 255), random.randint(0, 255), random.randint(0, 255)))
print(new_text)
#存在session中
request.session['code']=new_text
#存内存
f = BytesIO()
img.save(f, 'png')
return HttpResponse(f.getvalue())