基本的登录注册

后端

1. 用户模型类

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

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

    def __str__(self):
        return self.username

2. 视图的两个验证码

from django.shortcuts import render
# 导入模型类
from .models import *
from rest_framework.views import APIView
from rest_framework.response import Response
# 正则判断 redis数据库 声称随机生成方法
import re,redis,random,string
# 数据转图片
from captcha.image import ImageCaptcha
from django.http import HttpResponse
# Create your views here.


# 图形验证码
class Tu(APIView):
    def get(self,request,uuid):
        img_code = ''.join(random.sample(string.digits,4))# 生成随机四个字符
        img = ImageCaptcha().generate(img_code)# 将四个字符转图片
        r = redis.Redis(host='localhost',port=6379, db=1)# 调用数据库
        r.set(uuid,img_code,ex=150)# 把随机的四个字符保存到redis数据库，有效120秒
        r.close()
        return HttpResponse(img,content_type='image/png')# 以图片形式展示

    def post(self,request,uuid):
        c1 = request.data.get('img_code')# 接收前端输入的验证码
        r = redis.Redis(host='localhost',port=6379, db=1)# 调用数据库
        c2 = r.get(uuid)# 提取之前存到数据库的验证码
        if c2:# 判断是否还存在
            c2=c2.decode()# 存在就解码
        else:
            return Response({'code':400,'msg':'图片验证码过期'})
        if c1.lower()==c2.lower():# 判断数据库的验证码与前端输入的验证码是否一致
            return Response({'code':200,'msg':'图片验证码成功'})
        else:
            return Response({'code': 401, 'msg': '图片验证码错误'})


# 手机号验证码
class Sms(APIView):
    def get(self,request,mobile):
        if not re.findall(r"^1[3-9]\d{9}$",mobile):# 正则判断手机号是否符合规则
            return Response({'code':400,'msg':'手机号错误'})
        sms_code = ''.join(random.sample(string.digits,4))# 生成随机四个数字
        r = redis.Redis(host='localhost',port=6379, db=1)
        r.set(mobile,sms_code,ex=150)
        r.close()
        return Response({'code':200,'msg': '获取成功','sms':sms_code})# 生成之后返回给前端

    def post(self,request,mobile):
        c1 = request.data.get('sms_code')# 接收前端输入的手机号验证码
        r = redis.Redis(host='localhost',port=6379, db=1)
        c2 = r.get(mobile)
        if c2:
            c2=c2.decode()# 能获取到手机号验证码的话解码
        else:
            return Response({'code':400,'msg':'验证码过期'})
        if str(c1) == str(c2):
            return Response({'code':200,'msg':'验证码正确'})
        else:
            return Response({'code': 401, 'msg': '验证码错误'})

3. 注册登录视图

# 注册
class RegisterView(APIView):
    def post(self,request):
        username = request.data.get('username')
        password = request.data.get('password')
        mobile = request.data.get('mobile')
        if not all([username, password, mobile]):
            return Response({'code': '400', 'msg': '未获取全部数据'})
        if User.objects.filter(username=username):
            return Response({'code': '401', 'msg': '用户已存在'})
        if User.objects.filter(mobile=mobile):
            return Response({'code': '402', 'msg': '手机号已被注册'})
        User.objects.create(username=username,password=password,mobile=mobile)
        return Response({'code': '200', 'msg': '注册成功'})


import jwt
from day91 import settings


def generate_jwt(user):
    payload = {
        'user_id': user.id,
        'user': user.username,
    }
    token = jwt.encode(payload=payload,key=settings.SECRET_KEY,algorithm='HS256')
    return token


class LoginView(APIView):
    def post(self,request):
        username = request.data.get('username')
        password = request.data.get('password')
        if User.objects.filter(username=username).count()==0:
            return Response({'code': '400', 'msg': '用户不存在'})
        user = User.objects.get(username=username)
        if user.password != password:
            return Response({'code': '401', 'msg': '密码不正确'})
        token = generate_jwt(user)
        return Response({
            'code': '200',
            'msg': '登陆成功',
            'token': token,
            'user': {'user_id': user.id, 'username': user.username},
        })

前端

<template>
    <div>
        <p>用户名：<input type="text" v-model="obj.username"></p>
        <p>密码： <input type="text" v-model="obj.password"></p>
        <p>确认密码：<input type="text" v-model="obj.passwordd"></p>
        <p>手机号：<input type="text" v-model="obj.mobile"></p>
        <p>图片验证码：<input type="text" v-model="obj.img_code" @blur="yantu"> <img @click="tu" :src="url" ></p>
        <p>短信验证码：<input type="text" v-model="obj.sms_code" @blur="yansms"> <button @click="sms">获取短信验证码</button></p>
        <p><button  @click="register">注册</button></p><br><br>

    </div>
 

</template>

<script>
import {v4 as uuid4} from 'uuid'
import { get, post } from '../../utils/reuqest'
export default {
    data(){
        return{
            url:'',
            uuid:'',
            obj:{
                username:'',
                password:'',
                passwordd:'',  //确认密码
                mobile:'',
                img_code:'',
                sms_code:'',
            },
        }
    },
    mounted(){
        this.tu();
    },
    methods:{
        register(){
            post('user/register/',{username:this.obj.username,password:this.obj.password,mobile:this.obj.mobile})
            .then(resp=>{
                if(resp.data.code==200){
                    // alert('注册成功')
                    alert(resp.data.msg)
                    
                }else{
                    alert(resp.data.msg)
                }
            }).catch(err=>{
                console.log(err)
            })
        },
        tu(){
            this.uuid=uuid4()
            this.url='user/tu/'+this.uuid+'/'
        },
        sms(){
            get('user/sms/'+this.obj.mobile+'/').then(resp=>{
                if(resp.data.code==200){
                    alert('获取验证码成功')
                    alert(resp.data.sms)
                }else{
                    alert('获取验证码失败')
                    alert(resp.data.msg)
                }
            }).catch(err=>{
                console.log(err);
            })
        },
        yantu(){
            post('user/tu/' + this.uuid + '/', {img_code: this.obj.img_code})
            .then(resp=>{
                if(resp.data.code==200){
                    alert('图形验证码正确')
                }else{
                    alert('图形验证码错误')
                    alert(resp.data.msg)
                }
            }).catch(err=>{
                console.log(err);
            })
        },
        yansms(){
            post('user/sms/' + this.obj.mobile + '/', {sms_code: this.obj.sms_code})
            .then(resp=>{
                if(resp.data.code==200){
                    alert('短信验证码正确')
                }else{
                    alert(resp.data.msg)
                }
            }).catch(err=>{
                console.log(err);
            })
        },
    }
}
</script>

<style>
img{
    height: 400;
    width: 10%;
}
</style>