图片验证码登录

生成验证码，https://blog.csdn.net/ding_312/article/details/82258442（感觉博主写的很好，多多支持）
在此基础上添加自己的需求，除了全局变量自己定义(存session导不出来)

import random
import io
from PIL import ImageDraw
from PIL import ImageFont
from django.shortcuts import render
from django.http import HttpResponse
from PIL import Image
from django.http import HttpResponse
import redis
# Create your views here.
 
#定义一个变量，方便下面引用全局变量 
#img = ''

def get_verify_img(request):
    # 把全局变量引入
    #global img
    # 画布大小
    img_size = (130, 70)
    # 定义画布 img_size后面可以加背景颜色，如：image = Image.new("RGB", img_size，white)
    image = Image.new("RGB", img_size)
    # 定义画笔
    draw = ImageDraw.Draw(image, "RGB")
    # 创建字体（字体的路径，服务器路径）(我这个是把路径放到static下)
    font_path = 'static\Fonts\ARIALN.TTF'
    # 实例化字体，设置大小是30
    font = ImageFont.truetype(font_path,30)
    # 准备画布上的字符集
    source = "0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ"
    # 保存每次随机出来的字符
    code_str = ""
    code_str.lower()==code_str.upper()
    for i in range(4):
        # 获取数字随机颜色
        text_color = get_random_color()
        # 获取随机数字 len
        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,font)
    # 给全局变量赋值
    #img = code_str
    
    #或者直接把验证码存入redis
    #连接redis
    rcode = redis.Redis('localhost')
    #存入redis
    rcode.set('mycode',code_src)
    
    
    # 获得一个缓存区
    buf = io.BytesIO()
   
    # # 将图片保存到缓存区
    image.save(buf, 'png')
    
    
    # # 将缓存区的内容返回给前端 .getvalue 是把缓存区的所有数据读取
    return HttpResponse(buf.getvalue(), 'image/png')


import random
 
# 获取随机颜色
def get_random_color():
    R = random.randrange(255)
    G = random.randrange(255)
    B = random.randrange(255)
    return (R, G, B)

# 登录接口
class Login(APIView):
    
    def post(self,request):
        #引用全局变量，在生成验证码赋值了
        #global img
        #获取redis验证码
        #连接redis
        rcode = redis.Redis('localhost')
        #获取
        mycode = recode.get('mycode')
        #转码
        mycode = mycode.decode('utf-8')
        
        username = request.POST.get('username')
        password = request.POST.get('password')
        image = request.POST.get('img','未收到验证码')

        #图片文字转换一样的（大小写可以自己定义）
        if mycode.lower()==image.lower():
        #查询数据
            user = User.objects.filter(username=username,password=make_password(password)).first()
            
            if user:
                res={}
                res['code'] = 200
                res['message'] = '登录成功'
                res['username'] = user.username
                return Response(res)
            else:
                res={}
                res['code'] = 405
                res['message'] = '您的用户或密码错误'
                return Response(res)
        else:
            return Response({
                'code':10010,
                'message':'验证码不正确'
            })

刷新验证码借用（https://www.jb51.net/article/172303.htm）

```python
<template>
    <div>

        <Header></Header>

        <main class="" id="main-collapse">
            <div>


                登录页面
                <!--声明表单  绑定错误提示  绑定规则  绑定数据 -->
                <Form ref='form' :showErrorTip='showErrorTip' :rules='rules' :model='model'>

                    <FormItem label='用户名' prop='name'>
                        <template v-slot:label>
                            用户名
                        </template>
                        <input type="text" v-model='model.name'>
                    </FormItem>
                    <FormItem label='密码' prop='password'>
                        <template v-slot:label>
                            密码
                        </template>
                        <input type="password" v-model='model.password'>
                    </FormItem>
                    <FormItem label='验证码' prop='img'>
                        <template v-slot:label>
                            验证码
                        </template>
                        <input type="text" value="img" v-model='model.img'>
                        <!-- <button @click='dian'><img src='http://127.0.0.1:8000/img/'></button> -->
                    </FormItem>
                    <FormItem>


                        <img src="http://127.0.0.1:8000/img/" id="imgIdentifyingCode" alt="点击更换" title="点击更换"
                            @click="getIdentifyingCode" />


                    </FormItem>
                    <Button color='primary' :loading='isLoading' @click='submit'>提交</Button>
                    &nbsp;&nbsp;
                    <Button @click='reset'>重置</Button>
                    </FormItem>

                </Form>


            </div>

        </main>





    </div>
</template>



<script>


    import Header from './Header'

    export default {
        data() {
            return {
                msg: "这是一个变量",
                //进度条
                isLoading: false,
                //用户数据
                model: {
                    name: '',
                    password: '',
                    img: ''
                },
                //规则
                rules: {
                    //非空验证
                    required: ['name', 'password', 'img']
                },
                //错误提示
                showErrorTip: true

            }
        },
        components: {
            'Header': Header
        },
        mounted: function () {


        },
        methods: {
            //提交
            //     submit() {
            //     this.isLoading = true;
            //     let re = this.$refs.form.valid();
            //     if (re.result) {



            //       this.$Message('验证成功');

            //       setTimeout(() => {
            //         this.isLoading = false;
            //       }, 1000);

            //     } else {
            //       this.isLoading = false;
            //     }
            //   },
            submit() {
                //取值
                let username = this.model.name;
                let password = this.model.password;
                let img = this.model.img;


                //请求后台接口
                //定义一个传递变量
                var _this = this
                this.axios.post('http://localhost:8000/login/', this.qs.stringify({
                    //设置参数

                    username: username,
                    password: password,
                    img: img

                })).then(function (result) {
                    //判断密码


                    //判断是否登录成功
                    if (result.data.code == 200) {
                        //将用户名存储在webstorage
                        localStorage.setItem('username', result.data.username)
                        _this.$router.push('/')

                    } else {
                        _this.$Message(result.data.message)
                    }
                    //组件式提醒
                    // _this.$Notice(result.data.message)

                })
            },
            //重置
            reset() {

                //将内容置空
                this.model.name = '';
                this.model.password = '';

            },

            /**
           * 窗口代码
           * @param {Boolean} bRefresh 是否刷新
           */
        //    借用别人的点击刷新验证码 
            getIdentifyingCode() {
                // 路径是后台的生成验证码接口定义的路由
                let identifyCodeSrc = "http://127.0.0.1:8000/img/";

                identifyCodeSrc = "http://127.0.0.1:8000/img/?" + Math.random();

                let objs = document.getElementById("imgIdentifyingCode");
                objs.src = identifyCodeSrc;
            },
        }

    }


</script>

<style>



</style>