验证码

定义验证码

1.在django项目下创建redis_test.py 与redis建立连接

# 导包
import redis

# 定义ip和端口
host = "localhost"
port = 6379

# 建立链接
r = redis.Redis(host=host,port=port)

# 赋值
r.set('test','test')

# 取值
code = r.get('test')

# 转码
code = code.decode("utf-8")

print(code)

在试图中定义验证码

from myapp.models import User

import redis

#定义ip和端口
host = "localhost"
port = 6379

#建立链接
r = redis.Redis(host=host,port=port)

class MyCode(View):
    # 定义rgb随机颜色
    def get_random_color(self):
        R = random.randrange(255)
        G = random.randrange(255)
        B = random.randrange(255)

        return (R,G,B)

    def get(self,request):
        # 画布
        img_size = (120,50)
        # 定义图片对象
        image = Image.new('RGB',img_size,'white')
        # 定义画笔
        draw = ImageDraw.Draw(image,'RGB')
        source = '0123456789abcdefghijlkmnopqrstuvwsvz'
        # 接收容器
        code_str = ''
        for i in range(4):
            #获取字母颜色
            text_color = self.get_random_color()
            #获取随机下标
            tmp_num = random.randrange(len(source))
            #随机字符串
            random_str = source[tmp_num]
            #装入容器
            code_str += random_str
            #绘制字符串
            draw.text((10+30*i,20),random_str,text_color)
        # 获取缓存区
        buf = io.BytesIO()
        #将临时图片保存到缓冲区
        image.save(buf,'png')
        #保存随机码
        r.set('code',code_str)
        print(r.get('code'))

        return HttpResponse(buf.getvalue(),'image/png')

前端代码

<tr>
    <td>
        验证码：
    </td>
    <td>
        <input type="text" v-model="code" placeholder="请输入验证码" >
        <img :src="src" @click="gitcodeimg" alt="验证码">
    </td>
</tr>

<script>
//导入组件
import myheader from './myheader.vue'

export default {
data () {
    return {
    code:'',
    src: 'http://127.0.0.1:8000/code/',
    }
},

methods:{
    //获取验证码
    gitcodeimg(){
        var codenum = Math.random()
        this.src = 'http://127.0.0.1:8000/code/?code=' + codenum
    }

}