django搭建一个个人博客（Python全栈开发日记）第四天：登录注册后端的实现

1.视图函数的实现

from django.contrib import auth
from django.views import View
from django.http import JsonResponse
from django import forms
from app01.models import UserInfo
class LoginForms(forms.Form):
    name =forms.CharField(error_messages={'required':'请输入用户名'})
    pwd = forms.CharField(error_messages={'required': '请输密码'})
    code = forms.CharField(error_messages={'required': '请输入验证码'})

    def __init__(self,*args,**kwargs):
        self.request=kwargs.pop('request')
        super().__init__(*args,**kwargs)

    def clean_name(self):
        name=self.cleaned_data.get('name')
        user=UserInfo.objects.filter(username=name).first()
        if not user:
            self.add_error('name','用户不存在')
        return name

    def clean_code(self):
        request=self.request
        code:str=self.cleaned_data.get('code')
        vaild_code:str=request.session.get('vaild_code')
        if vaild_code.upper()!=code.upper():
            self.add_error('code','验证码错误')
        return code

    def clean(self):
        name=self.cleaned_data.get('name')
        pwd=self.cleaned_data.get('pwd')
        user = auth.authenticate(username=name,password=pwd)
        if not user:
            self.add_error('name','用户名或密码错误')
        self.cleaned_data['user']=user
        return self.cleaned_data

def clean_form(form):
    error_dict: dict = form.errors
    error_valid = list(error_dict.keys())[0]
    error_message = error_dict[error_valid][0]
    return error_valid,error_message

class LoginView(View):

    def post(self,request):
        res={
            'code':364,
            'msg':'登录成功',
            'self':None

        }
        data=request.data
        form=LoginForms(data,request=request)
        if not form.is_valid():
            res['self'],res['msg']=clean_form(form)
            return JsonResponse(res)
        auth.login(request,form.cleaned_data['user'])
        res['code']=0
        return  JsonResponse(res)

class SignForms(forms.Form):
    name =forms.CharField(error_messages={'required':'请输入用户名'})
    pwd = forms.CharField(error_messages={'required': '请输密码'})
    re_pwd = forms.CharField(error_messages={'required': '请输确认密码'})
    code = forms.CharField(error_messages={'required': '请输入验证码'})

    def __init__(self,*args,**kwargs):
        self.request=kwargs.pop('request')
        super().__init__(*args,**kwargs)

    def clean_name(self):
        name=self.cleaned_data.get('name')
        user=UserInfo.objects.filter(username=name).first()
        if  user:
            self.add_error('name','用户已存在')
        return name

    def clean_code(self):
        request=self.request
        code:str=self.cleaned_data.get('code')
        vaild_code:str=request.session.get('vaild_code')
        if vaild_code.upper()!=code.upper():
            self.add_error('code','验证码错误')
        return code

    def clean(self):
        re_pwd=self.cleaned_data.get('re_pwd')
        pwd=self.cleaned_data.get('pwd')
        if re_pwd != pwd:
            self.add_error('pwd','密码不一致')
        return self.cleaned_data


class SignView(View):

    def post(self,request):
        res={
            'code':425,
            'msg':'注册成功',
            'self':None

        }
        data=request.data
        form=SignForms(data,request=request)
        if not form.is_valid():
            res['self'],res['msg']=clean_form(form)
            return JsonResponse(res)
        user=UserInfo.objects.create_user(
            username=data['name'],
            password=data['pwd'],
            nick_name=data['name']
        )
        auth.login(request, user)
        res['code']=0
        return  JsonResponse(res)

2.前端JS的实现

   var vue = new Vue({
        el:'#app',
        data:{
            login_form:{
                name:'',
                pwd:'',
                re_pwd:'',
                code:'',
            }
        },
        methods:{
            login(name){
                axios.post(`/api/${name}/`,this.login_form).then(res=>{
                    if(res.code){
                        this.$message.error(res.msg)
                        document.getElementById(`login_${res.self}`).focus()
                        return
                    }
                    this.$message.success(res.msg)
                    setTimeout(()=>{
                        location.href = '/'
                    },1000)
                })
            },

        }
    })

将其绑定到按钮上即可完成