基于ajax和form组件实现的注册、登录功能

一、视图函数

导入相关模块和数据表

from django.shortcuts import render,HttpResponse,redirect

# Create your views here.
import random

from django.http import JsonResponse

from django.contrib import auth
from django import forms

from django.core.exceptions import ValidationError
import re
from app01.models import UserInfo,Customer
from app01.form import UserForm

这里将forms组件单独写在form.py文件里

from django.forms import widgets

from app01.models import UserInfo
from django.core.exceptions import ValidationError
import re
from django import forms
class UserForm(forms.Form):
    user=forms.CharField(min_length=2,label="用户名")
    gender=forms.ChoiceField(choices=((1,"男"),(2,"女")))
    pwd=forms.CharField(min_length=5,widget=widgets.PasswordInput(),label="密码")
    r_pwd=forms.CharField(min_length=5,widget=widgets.PasswordInput(),label="确认密码")
    email=forms.EmailField(min_length=5,label="邮箱")

    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)
        for filed in self.fields.values():
            filed.widget.attrs.update({'class': 'form-control'})


    def clean_user(self):
        val=self.cleaned_data.get("user")
        user=UserInfo.objects.filter(username=val).first()
        if user:
            raise ValidationError("用户已存在！")
        else:
            return val

    def clean_pwd(self):
        val=self.cleaned_data.get("pwd")
        if val.isdigit():
            raise ValidationError("密码不能是纯数字！")
        else:
            return val

    def clean_email(self):
        val=self.cleaned_data.get("email")
        if re.search("w+@163.com$",val):
            return val
        else:
            raise ValidationError("邮箱必须是163邮箱！")

    def clean(self):
        pwd=self.cleaned_data.get("pwd")
        r_pwd=self.cleaned_data.get("r_pwd")

        if pwd and r_pwd and r_pwd!=pwd:
            self.add_error("r_pwd", ValidationError("两次密码不一致！"))
        else:
            return self.cleaned_data

注册视图函数

def reg(request):
    '''
    基于ajax和forms实现的注册功能
    :param request:
    :return:
    '''
    if request.method=="POST":
        print(request.POST)
        form=UserForm(request.POST)
        res={"user":None,"err_msg":""}
        if form.is_valid():
            res["user"]=form.cleaned_data.get("user")
            print("cleaned_data",form.cleaned_data)
            user=form.cleaned_data.get("user")
            pwd=form.cleaned_data.get("pwd")
            email=form.cleaned_data.get("email")

            user=UserInfo.objects.create_user(username=user,password=pwd,email=email)


        else:
            print(form.errors)
            print(form.cleaned_data)
            res["err_msg"] =form.errors

        return JsonResponse(res)


    else:
        form=UserForm()
        return  render(request,"reg.html",locals())

登录视图函数

def login(request):
    '''
    基于ajax和用户认证组件实现的登录功能
    :param request:
    :return:
    '''
    # if request.method=="POST":
    if request.is_ajax():
        user=request.POST.get("user")
        pwd=request.POST.get("pwd")
        validcode=request.POST.get("validcode")

        #Ajax请求返回一个字典
        response={"user":None,"err_msg":""}
        if validcode.upper() == request.session.get("keep_str").upper():
            user_obj=auth.authenticate(username=user,password=pwd)
            if user_obj:
                auth.login(request,user_obj) # request.session["user_id"]=user_obj.pk
                response["user"]=user
            else:
                response['err_msg']="用户名或者密码错误！"
        else:
            response["err_msg"]="验证码错误！"

        return JsonResponse(response)
    else:
        return render(request, "login.html")

退出登录

def logout(request):
    auth.logout(request)
    return redirect("/login/")

二、生成验证码

def get_random_color():
    return (random.randint(0,255),random.randint(0,255),random.randint(0,255))


def getcode(request):
    # if request.method=="GET":
    #     return render(request,'login.html')
    #设置验证码图片的背景色
    img=Image.new("RGB",(350,38),get_random_color())
    draw=ImageDraw.Draw(img)
    #引入字体
    font=ImageFont.truetype('static/font/kumo.ttf',32)
    code_str=''
    for i in range(6):
        random_num=str(random.randint(0,9))
        random_low=chr(random.randint(97,122))
        random_up=chr(random.randint(65,90))
        random_chr=random.choice([random_num,random_low,random_up])

        #保存每次的验证码
        code_str+=random_chr
        #设置每一个验证码的字体颜色和大小
        draw.text((i*30+50,0),random_chr,get_random_color(),font=font)

    f=BytesIO()
    img.save(f,'png')
    data=f.getvalue()

    #将每次生成的验证码保存在session里
    request.session['code_str']=code_str
    return HttpResponse(data)

三、HTML

<body>
<div class="container">
    <div class="row">
        <div class="col-md-8 col-md-offset-2">
            <form action="" method="post">
                {% csrf_token %}
                <div class="form-group">
                    <label for="">用户名</label>
                    <input type="text" class="form-control" id="user">
                </div>
                <div class="form-group">
                    <label for="">密码</label>
                    <input type="password" class="form-control" id="pwd">
                </div>
                <div class="form-group">
                    <label for="">验证码</label>
                    <div class="row">
                        <div class="col-md-6">
                            <input type="text" class="form-control" id="vailcode">
                        </div>
                        <div class="col-md-6">
                            <img width="350",heigth="38" src="/getcode/" alt="" id="img">  # 这里调用了后端的getcode方法
                        </div>
                    </div>
                </div>
                <span class="error"></span>
                <input type="button" class="btn-warning log_btn" value="登录">
            </form>
        </div>
    </div>
</div>
<script>
    $(function () {
        $('.log_btn').click(function () {
            $.ajax({
                url:'/login/',
                type:'post',
                data:{
                    user:$('#user').val(),
                    pwd:$('#pwd').val(),
                    vailcode:$('#vailcode').val(),
                    csrfmiddlewaretoken:$("[name='csrfmiddlewaretoken']").val()
                },
                success:function (response) {
                    if (response['user']){
                        location.href='http://www.baidu.com'
                    }
                    else{
                        $('.error').css('color','red').html(response['error'])
                    }

                }
            })
        });
        //验证码刷新
        $('#img').click(function () {
            this.src+='?'
        })
    })
</script>
</body>