登录及注册简化：图形验证码

 模型类：

from django.db import models


# Create your models here.

class User(models.Model):
    username = models.CharField('用户名', max_length=20)
    password = models.CharField('密码', max_length=300)
    mobile = models.CharField('手机号', max_length=11)
    email = models.CharField('邮箱', max_length=50)

    class Meta:
        db_table = 'tb_user'
        verbose_name_plural = '用户表'

    def __str__(self):
        return self.username

pip install redis
pip install captcha

 视图功能：

import random
import re
import string

import redis
from captcha.image import ImageCaptcha
from django.contrib.auth.hashers import make_password, check_password
from django.http import HttpResponse
from django.shortcuts import render

# Create your views here.
from rest_framework.response import Response
from rest_framework.views import APIView

from user.models import User


# 登录及注册
class Login(APIView):
    def post(self, request):
        username = request.data.get('username')

        password = request.data.get('password')

        code_id = request.data.get('codeID')

        code = request.data.get('code')
        if not all([username, password, code]):
            return Response({'code': 400, 'msg': '信息不完整'})
        if not re.search(r'^[a-zA-Z]\w{5,16}$', username) or not re.search(r'^[a-zA-Z]\w{5,16}$', password):
            return Response({'code': 400, 'msg': '账号或密码格式不正确'})
        red = redis.Redis()
        red_code = red.get(code_id)
        print(red_code, '>>>>>>>>>>>>>red_code')
        if not red_code or code != red_code.decode():
            return Response({'code': 400, 'msg': '验证码错误或已过期'})
        try:
            user = User.objects.get(username=username)
        except:
            new_pwd = make_password(password)
            print(new_pwd, '>>>>>>>>>>>new_pwd')
            User.objects.create(username=username, password=new_pwd)
            return Response({'code': 201, 'msg': '欢迎新用户%s登录' % username})
        if not check_password(password, user.password):
            return Response({'code': 400, 'msg': '用户名或密码不正确'})
        return Response({'code': 200, 'msg': '欢迎用户%s登录' % username})


# 生成图形验证码
class ImageCode(APIView):
    def get(self, request, uuid):
        code = random.randint(1000, 9999)
        cap = ImageCaptcha()
        img_code = cap.generate(str(code))
        red = redis.Redis(host='127.0.0.1', port=6379)
        red.set(str(uuid), code, ex=60 * 3)
        red.close()
        return HttpResponse(img_code, content_type='image/png')


# # 注意：
        # new_pwd = make_password(password)  
                            #加密后的密码数据会变长至100多 模型类字段设置300

        # code = random.randint(1000, 9999)
        # cap = ImageCaptcha()
        # img_code = cap.generate(str(code))
                            # 整形code 要想生成图形验证码 要转成str格式

路由：

from django.contrib import admin
from django.urls import path

from user import views

urlpatterns = [
    path('imagecode/<str:uuid>/', views.ImageCode.as_view()),
    path('login/', views.Login.as_view()),
]

vue前端页面：

<template>
    <div>
        <div>欢迎登录</div>
        <div>
            <el-form ref="form" :model="form" label-width="80px" class="aa">
                <el-form-item label="">
                    <el-input v-model="form.username" placeholder="请输入账户">
                        <template slot="prepend"><i class="el-icon-user-solid"></i></template>
                    </el-input>
                </el-form-item>
                <el-form-item label="">
                    <el-input v-model="form.password" show-password placeholder="请输入密码">
                        <template slot="prepend"><i class="el-icon-lock"></i></template>
                    </el-input>
                </el-form-item>
                <el-form-item label="">
                    <el-input v-model="form.code" placeholder="请输入验证码">
                        <template slot="prepend"><i class="el-icon-chat-dot-round"></i></template>
                    </el-input>
                    <img :src="imagecodeurl" alt="图形验证码" @click="genImagecode" class="imagecode">
                </el-form-item>
                <el-button @click="login">登 录</el-button>
            </el-form>
        </div>
    </div>
</template>

<script>
import axios from 'axios';
import { v4 as uuid4 } from 'uuid'
export default {
    name: 'Index',
    data() {
        return {
            form: {
                username: '',
                password: '',
                code: '',
            },
            codeID: '',
            imagecodeurl: '',
        };
    },
    props: {},

    components: {},

    created() { },

    mounted() {
        this.genImagecode()
    },

    methods: {
        genImagecode() {
            this.codeID = uuid4()
            this.imagecodeurl = 'http://localhost:8000/users/imagecode/' + this.codeID + '/'
        },
        login() {
            axios.post('/users/login/', {
                username: this.form.username, password: this.form.password,
                code: this.form.code, codeID: this.codeID
            })
                .then((resp) => {
                    console.log(resp)
                    this.$message(resp.data.msg)
                }).catch((err) => {
                    console.log(err)
                });
        }
    },

    computed: {},

    watch: {},

    directives: {},

    filters: {}
};
</script>

<style>
.aa {
    margin: 0 auto;
    width: 40%;
}
</style>