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文件
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> <div> <div> <h1>登陆</h1> <form action=""> <div> <label for="id_name">用户名</label> <input type="text"> </div> <div> <label for="pwd">密码</label> <input type="password"> </div> <div> <label for="id_code">验证码</label> <div> <div> <input type="text"> </div> <div> <img src="http://www.likecs.com/get_code/"> </div> </div> </div> <input type="submit" value="提交"> </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> 二.账号信息进行验证