我们都知道验证码是一张图片，这样程序自动识别的难度大，安全性高。
设计到图片，先来看一下img标签里的src属性，也是实现验证码的一个小原理
我们都知道src属性可以直接把图片拿过来：
比如说拿到本地的图片
就在直接可以显示在页面上
那它是怎么实现的呢？
其实src属性同样像服务端发送了一个请求，Django服务端接收到之后，自动把本地文件读取并返回给了客户端，就实现了上面的效果
下面来自己实现一下：
html:
#src属性是一个url，
对应处理函数：
def
tu2
(
request
)
:
f
=
open
(
"static/timg.jpg"
,
"rb"
)
data
=
f
.
read
(
)
f
.
close
(
)
return
HttpResponse
(
data
)
如此就能发现两者效果相同。
下面开始讲验证码：
先贴上借鉴的博客，内含需要的文件：
https://blog.csdn.net/weixin_42100915/article/details/80851474
先生成验证码效果：
后台处理函数：
def
yanzhengma
(
request
)
:
f
=
BytesIO
(
)
#创建生成一个内存地址
img
,
code
=
create_validate_code
(
)
#生成验证码， code是验证码文字内容，img是验证码对象
print
(
code
)
img
.
save
(
f
,
"PNG"
)
#把验证码写入内存地址
return
HttpResponse
(
f
.
getvalue
(
)
)
#把验证码从内存中读出来并返回给客户端
def
register
(
request
)
:
return
render
(
request
,
"register.html"
)
HTML
<
body
>
<
form
action
=
"
"
>
form
>
<
p
>
用户名
<
input
type
=
"
text
"
placeholder
=
"
请输入用户名
"
>
p
>
<
p
>
密码
<
input
type
=
"
text
"
placeholder
=
"
请输入密码
"
>
p
>
<
p
>
确认密码
<
input
type
=
"
text
"
placeholder
=
"
请确认密码
"
>
p
>
<
p
>
验证码
<
input
type
=
"
text
"
placeholder
=
"
请输入验证码
"
>
<
img
src
=
"
/yanzhengma
"
alt
=
"
"
>
p
>
body
>
下面上完整代码：带验证功能和点击刷新功能
处理函数：
def
yanzhengma
(
request
)
:
'''生成验证码'''
f
=
BytesIO
(
)
#创建生成一个内存地址
img
,
code
=
create_validate_code
(
)
#生成验证码， code是验证码文字内容，img是验证码对象
print
(
code
)
img
.
save
(
f
,
"PNG"
)
#把验证码写入内存地址
request
.
session
[
"check_code"
]
=
code
#对应验证用的
return
HttpResponse
(
f
.
getvalue
(
)
)
#把验证码从内存中读出来并返回给客户端
def
register
(
request
)
:
"""业务函数"""
if
request
.
method
==
"GET"
:
return
render
(
request
,
"register.html"
)
else
:
check
=
request
.
POST
.
get
(
"check"
,
None
)
check_code
=
request
.
session
[
"check_code"
]
if
check
==
check_code
:
return
HttpResponse
(
"注册成功"
)
HTML
<
html
lang
=
"
en
"
>
<
head
>
<
meta
charset
=
"
UTF-8
"
>
<
title
>
Title
title
>
head
>
<
body
>
<
form
action
=
"
/register/
"
method
=
"
post
"
>
{% csrf_token %}
<
p
>
用户名
<
input
type
=
"
text
"
placeholder
=
"
请输入用户名
"
>
p
>
<
p
>
密码
<
input
type
=
"
text
"
placeholder
=
"
请输入密码
"
>
p
>
<
p
>
确认密码
<
input
type
=
"
text
"
placeholder
=
"
请确认密码
"
>
p
>
<
p
>
验证码
<
input
type
=
"
text
"
placeholder
=
"
请输入验证码
"
name
=
"
check
"
>
<
img
src
=
"
/yanzhengma/
"
alt
=
"
"
id
=
"
check
"
>
p
>
<
input
type
=
"
submit
"
value
=
"
注册
"
>
form
>
<
script
>
document
.
getElementById
(
"check"
)
.
onclick
=
function
(
)
{
this
.
src
=
this
.
src
+
"?"
//点一次就加一个问号，会重新发送一次请求
}
script
>
body
>
html
>
效果图：
