图形验证码

Posted 2021-09-04 小董懊恼

图形验证码

在settings中配置连接reids

CACHES = {
    "default": {
        "BACKEND": "django_redis.cache.RedisCache",
        "LOCATION": "redis://127.0.0.1:6379/1",
        "OPTIONS": {
            "CLIENT_CLASS": "django_redis.client.DefaultClient",
        }
    }
}

先新建一个文件夹 utils 在文件夹建一个comm.py 文件

在comm.py 文件中 封装 一个连接redis的方法

from django_redis import get_redis_connection
def get_redis_conn():
    conn = get_redis_connection()
    return conn

在utils文件夹中放入captcha包

在views中 写图形验证码接口

from utils.captcha.captcha import captcha
class ImageCode(APIView):
    # 图像验证
    def get(self,request):
        uuid = request.GET.get('uuid')
        name,text,imagecode = captcha.generate_captcha()
        conn = get_redis_conn()
        # 图形验证码存储在redis里面 设置过期时间为1分钟
        conn.setex(uuid,60,text)
        # 以图片形式输入
        return HttpResponse(imagecode,content_type='image/jpg')

在vue中调用接口展示图形验证码

<template>
	<div>
        <input type="text" name="pic_code" id="pic_code" class="msg_input">
        <img :src="changeimage" alt="图形验证码" class="pic_code" @click="getImage">
    </div>
</template>
<script>
import axios from 'axios'
import {v4 as uuid4} from 'uuid'
export default{
    data(){
        return {
            image:'',
            changeimage:'',
        }
    },
    methods:{
        getImage(){
            this.image = uuid4()
            this.changeimage = 'http://127.0.0.1:8000/user/imagecode/?uuid='+this.image
        },
    },
    created(){
        this.getImage()
    }
}
</script>
<style>

</style>

captcha包下载地址
提取码是：mp9p