基于ajax和form组件实现的注册、登录功能
一、视图函数
导入相关模块和数据表
1 from django.shortcuts import render,HttpResponse,redirect 2 3 # Create your views here. 4 import random 5 6 from django.http import JsonResponse 7 8 from django.contrib import auth 9 from django import forms 10 11 from django.core.exceptions import ValidationError 12 import re 13 from app01.models import UserInfo,Customer 14 from app01.form import UserForm
这里将forms组件单独写在form.py文件里
1 from django.forms import widgets 2 3 from app01.models import UserInfo 4 from django.core.exceptions import ValidationError 5 import re 6 from django import forms 7 class UserForm(forms.Form): 8 user=forms.CharField(min_length=2,label="用户名") 9 gender=forms.ChoiceField(choices=((1,"男"),(2,"女"))) 10 pwd=forms.CharField(min_length=5,widget=widgets.PasswordInput(),label="密码") 11 r_pwd=forms.CharField(min_length=5,widget=widgets.PasswordInput(),label="确认密码") 12 email=forms.EmailField(min_length=5,label="邮箱") 13 14 def __init__(self, *args, **kwargs): 15 super().__init__(*args, **kwargs) 16 for filed in self.fields.values(): 17 filed.widget.attrs.update({'class': 'form-control'}) 18 19 20 def clean_user(self): 21 val=self.cleaned_data.get("user") 22 user=UserInfo.objects.filter(username=val).first() 23 if user: 24 raise ValidationError("用户已存在！") 25 else: 26 return val 27 28 def clean_pwd(self): 29 val=self.cleaned_data.get("pwd") 30 if val.isdigit(): 31 raise ValidationError("密码不能是纯数字！") 32 else: 33 return val 34 35 def clean_email(self): 36 val=self.cleaned_data.get("email") 37 if re.search("\w+@163.com$",val): 38 return val 39 else: 40 raise ValidationError("邮箱必须是163邮箱！") 41 42 def clean(self): 43 pwd=self.cleaned_data.get("pwd") 44 r_pwd=self.cleaned_data.get("r_pwd") 45 46 if pwd and r_pwd and r_pwd!=pwd: 47 self.add_error("r_pwd", ValidationError("两次密码不一致！")) 48 else: 49 return self.cleaned_data
注册视图函数
1 def reg(request): 2 ''' 3 基于ajax和forms实现的注册功能 4 :param request: 5 :return: 6 ''' 7 if request.method=="POST": 8 print(request.POST) 9 form=UserForm(request.POST) 10 res={"user":None,"err_msg":""} 11 if form.is_valid(): 12 res["user"]=form.cleaned_data.get("user") 13 print("cleaned_data",form.cleaned_data) 14 user=form.cleaned_data.get("user") 15 pwd=form.cleaned_data.get("pwd") 16 email=form.cleaned_data.get("email") 17 18 user=UserInfo.objects.create_user(username=user,password=pwd,email=email) 19 20 21 else: 22 print(form.errors) 23 print(form.cleaned_data) 24 res["err_msg"] =form.errors 25 26 return JsonResponse(res) 27 28 29 else: 30 form=UserForm() 31 return render(request,"reg.html",locals())
登录视图函数
1 def login(request): 2 ''' 3 基于ajax和用户认证组件实现的登录功能 4 :param request: 5 :return: 6 ''' 7 # if request.method=="POST": 8 if request.is_ajax(): 9 user=request.POST.get("user") 10 pwd=request.POST.get("pwd") 11 validcode=request.POST.get("validcode") 12 13 #Ajax请求返回一个字典 14 response={"user":None,"err_msg":""} 15 if validcode.upper() == request.session.get("keep_str").upper(): 16 user_obj=auth.authenticate(username=user,password=pwd) 17 if user_obj: 18 auth.login(request,user_obj) # request.session["user_id"]=user_obj.pk 19 response["user"]=user 20 else: 21 response['err_msg']="用户名或者密码错误！" 22 else: 23 response["err_msg"]="验证码错误！" 24 25 return JsonResponse(response) 26 else: 27 return render(request, "login.html")
退出登录
1 def logout(request): 2 auth.logout(request) 3 return redirect("/login/")
二、生成验证码
1 def get_random_color(): 2 return (random.randint(0,255),random.randint(0,255),random.randint(0,255)) 3 4 5 def getcode(request): 6 # if request.method=="GET": 7 # return render(request,'login.html') 8 #设置验证码图片的背景色 9 img=Image.new("RGB",(350,38),get_random_color()) 10 draw=ImageDraw.Draw(img) 11 #引入字体 12 font=ImageFont.truetype('static/font/kumo.ttf',32) 13 code_str='' 14 for i in range(6): 15 random_num=str(random.randint(0,9)) 16 random_low=chr(random.randint(97,122)) 17 random_up=chr(random.randint(65,90)) 18 random_chr=random.choice([random_num,random_low,random_up]) 19 20 #保存每次的验证码 21 code_str+=random_chr 22 #设置每一个验证码的字体颜色和大小 23 draw.text((i*30+50,0),random_chr,get_random_color(),font=font) 24 25 f=BytesIO() 26 img.save(f,'png') 27 data=f.getvalue() 28 29 #将每次生成的验证码保存在session里 30 request.session['code_str']=code_str 31 return HttpResponse(data)
三、HTML
1 <body> 2 <div class="container"> 3 <div class="row"> 4 <div class="col-md-8 col-md-offset-2"> 5 <form action="" method="post"> 6 {% csrf_token %} 7 <div class="form-group"> 8 <label for="">用户名</label> 9 <input type="text" class="form-control" id="user"> 10 </div> 11 <div class="form-group"> 12 <label for="">密码</label> 13 <input type="password" class="form-control" id="pwd"> 14 </div> 15 <div class="form-group"> 16 <label for="">验证码</label> 17 <div class="row"> 18 <div class="col-md-6"> 19 <input type="text" class="form-control" id="vailcode"> 20 </div> 21 <div class="col-md-6"> 22 <img width="350",heigth="38" src="/getcode/" alt="" id="img"> # 这里调用了后端的getcode方法 23 </div> 24 </div> 25 </div> 26 <span class="error"></span> 27 <input type="button" class="btn-warning log_btn" value="登录"> 28 </form> 29 </div> 30 </div> 31 </div> 32 <script> 33 $(function () { 34 $('.log_btn').click(function () { 35 $.ajax({ 36 url:'/login/', 37 type:'post', 38 data:{ 39 user:$('#user').val(), 40 pwd:$('#pwd').val(), 41 vailcode:$('#vailcode').val(), 42 csrfmiddlewaretoken:$("[name='csrfmiddlewaretoken']").val() 43 }, 44 success:function (response) { 45 if (response['user']){ 46 location.href='http://www.baidu.com' 47 } 48 else{ 49 $('.error').css('color','red').html(response['error']) 50 } 51 52 } 53 }) 54 }); 55 //验证码刷新 56 $('#img').click(function () { 57 this.src+='?' 58 }) 59 }) 60 </script> 61 </body>
