第一节：前期准备
1、在虚拟环境中创建工程
2、创建子应用
创建子应用
注册子应用
3、分发路由
把主工程路由分发给子应用
创建子应用的路由文件
创建子路由的所有需要的路由
4、创建主页
创建工程的路由函数文件
创建主页路由
在工程下定义主页路由函数
创建并注册templates
在template下创建一个主页页面文件
最后运行服务器
第二节：验证码的生成（固定版）
了解验证码
在用户登录，注册以及一些敏感操作的时候，我们为了防止服务器被暴力请求，或爬虫爬取，我们可以使用验证码进行过滤，减轻服务器的压力。
验证码需要使用绘图库 Pillow
# 安装绘图工具库pillow
pip3 install Pillow
创建登录页面（实现验证码基础）
1、创建‘register.html’,定义注册单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>用户注册</title>
</head>
<body>
<form method="post" action="{%url 'myapp:register'%}" >
{% csrf_token %}
<input type="text" placeholder="请输入用户名" name="uname"><br>
<input type="password" placeholder="请输入密码" name="upwd"><br>
<img src="/myapp/getvcode"><br>
<input type="text" placeholder="请输 验证码" name="vcode"><br>
<input type="submit" value="注册"><br>
</form>
</body>
</html>
2、创建数据模型并数据迁移
# 数据迁移
python manage.py makemigrations
python manage.py migrate
3、定义路由函数
4、创建图片路由（让图片动态显示）
4、创建字体文件位置（绘制文件时可用）
在工程下创建fonts文件夹，并把字体文件放入工程，static需要先在settings注册好。
1、准备：在settings注册static
2.在工程下创建fonts文件夹并复制字体文件
window系统的话，可以在下面路径找，如果想要其他字体，可自行网络下载
完成：
5、定义图片的路由函数
# 位置 子应用/views.py
import os
import io
from PIL import ImageDraw
from PIL import ImageFont
from django.http import HttpResponse
from django.shortcuts import render
from PIL import Image
from MidUpVcode.settings import BASE_DIR
# Create your views here.
def register(request):...
...
def fuckoff():...
def getvcode(request):
# 绘制验证码
# 创建画布
image = Image.new('RGB', (150, 50), color=(0, 0, 0))
# 创建画笔
draw = ImageDraw.Draw(image)
# 绘制文字
# 指定路径
path = os.path.join(BASE_DIR, 'static', 'fonts', 'AdobeHeitiStd-Regular.otf')
ImageFont.truetype(font=path, size=30)
draw.text((10, 10), 'fuck', fill=(255, 255, 255), font=None)
# 返回验证码字节数据
# 创建字节容器
buff = io.BytesIO()
# 将画布内容丢入容器
image.save(buff, 'png')
# 返回容器内的字节
return HttpResponse(buff.getvalue(), 'image/png')
6、定义注册页的路由函数
运行服务器测试结果：
第三节：验证码的生成（完整版）
随机验证码的生成
1、使用随机数完善验证码并储存到session
import os
import io
import random
import string
from PIL import ImageDraw
from PIL import ImageFont
from django.http import HttpResponse
from django.shortcuts import render
from PIL import Image
from MidUpVcode.settings import BASE_DIR
# Create your views here.
def register(request):...
...
...
def getvcode(request):
###########################生成随机验证码###########################
# 随机生成验证码(大小写+数字)
population = string.ascii_letters + string.digits
#随机取样(取4个)
letterlist = random.sample(population,4)
#把4个样本进行拼装，ps:‘.join’是字符串方法
vcode = ''.join(letterlist)
#保存该用户的验证码（使用session）
request.session['vcode'] = vcode
# 注：把下面的“fuck” 改成 vcode
###########################生成随机验证码###########################
# 绘制验证码
# 创建画布
image = Image.new('RGB', (150, 50), color=(0, 0, 0))
# 创建画笔
draw = ImageDraw.Draw(image)
# 绘制文字
# 指定路径
path = os.path.join(BASE_DIR, 'static', 'fonts', 'AdobeHeitiStd-Regular.otf')
ImageFont.truetype(font=path, size=30)
draw.text((10, 10), vcode, fill=(255, 255, 255), font=None)
# 返回验证码字节数据
# 创建字节容器
buff = io.BytesIO()
# 将画布内容丢入容器
image.save(buff, 'png')
# 返回容器内的字节
return HttpResponse(buff.getvalue(), 'image/png')
2、注册时校验验证码（获取验证码的session,并忽略大小写）
import os
import io
import random
import string
from PIL import ImageDraw
from PIL import ImageFont
from django.http import HttpResponse
from django.shortcuts import render
from PIL import Image
from MidUpVcode.settings import BASE_DIR
from Myapp.models import Euser
# Create your views here.
def register(request):
if request.method == 'GET':
return render(request,'register.html')
else:
username = request.POST.get('username',None)
password = request.POST.get('password',None)
vcode = request.POST.get('vcode',None)
###########################校验验证码###########################
#获取session中的验证码
sessVcode = request.session.get('vcode',None)
if vcode and sessVcode and vcode.lower()==sessVcode.lower():
user = Euser()
user.username = username
user.upsw = password
user.save()
return HttpResponse('注册成功')
else:
return HttpResponse('注册失败')
运行服务器测试结果：
点击网页时切换验证码
1、优化验证码颜色、背景、宽高
运行服务器测试结果：
2、添加噪声
# 位置：子应用/views.py
import ...
def getvcode(request):
# 随机生成验证码(大小写+数字)
population = string.ascii_letters + string.digits
... ...
... ...
... ...
for i in range(len(vcode)):
draw.text((20+30*i, 5), vcode[i], fill=getRandomColor(), font=font)
############################# 添加噪声 ###############################
# 添加噪声（增加500个点）
for i in range(500):
#点的宽高随机
position = (random.randint(0,175),random.randint(0,50))
#画点
draw.point(position,fill=getRandomColor())
############################# 添加噪声 ###############################
# 返回验证码字节数据
# 创建字节容器
buff = io.BytesIO()
# 将画布内容丢入容器
image.save(buff, 'png')
# 返回容器内的字节
return HttpResponse(buff.getvalue(), 'image/png')
#定义随机颜色
def getRandomColor(): ...
3、添加点击事件
运行服务器测试结果：
第四节：文件（头像）上传
HTML添加上传控件
下面以原有注册表单为例，添加表单、上传头像
1、定义上传表单
2、添加交互方式
文件配置
1、在static文件夹下创建uploads文件夹
在static文件夹下创建uploadefiles用于存储接收上传的文件,文件夹名字可任取，注册时使用相应名称便可
2、注册上传位置
创建数据模型
1、添加头像字段
2、执行数据迁移
python manage.py makemigrations
python manage.py migrate
定义路由函数（jdango内置储存）
694
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
