利用Form组件和ajax实现的注册
一、注册相关的知识点
1、Form组件
我们一般写Form的时候都是把它写在views视图里面，那么他和我们的视图函数也不影响，我们可以吧它单另拿出来，在应用下面建一个forms.py的文件来存放
2、局部钩子函数
def clean_username(self): username = self.cleaned_data.get("username") valid = models.UserInfo.objects.filter(username = username).first() if valid: raise ValidationError("用户名已存在") return username
3、全局钩子函数
#自定义全局钩子：验证两次密码是否一致 def clean(self): if self.cleaned_data.get("password") == self.cleaned_data.get("password_again"): return self.cleaned_data else: raise ValidationError("两次密码不一致")
4、 jQuery的属性操作相关的
attr：
一个参数是获取属性的值，两个参数是设置属性值
removeAttr(属性名)：
删除属性值
prop：
适应于属性的返回值是布尔类型的（单选，反选，取消的例子）
removePorp:
删除属性的值
5、循环的两种方式：
$.each(数组/对象,function(i,v){})
$("div").each(function(i,v){})
6、css中的三种隐藏：
1、display:none 隐藏所有内容
2、visibility:hidden 隐藏内容 3、overflow:hidden 隐藏溢出内容 三者都是用来隐藏的： 区别在于： visibility虽然隐藏了，但是被隐藏的内容依然占据这空间，这段隐藏了的内容却保留空间的位置会在网页中显示空白
而display:隐藏了不占用空间 我们在注册的时候不用display：none，不然选择文件的那个功能就没有了，我们可以吧透明度
7、提交二进制数据用FormData
var formData=new FormData(); formData.append("username",$("#id_username").val());
formData.append("email",$("#id_email").val()); formData.append("tel",$("#id_tel").val());
formData.append("password",$("#id_password").val()); formData.append("password_again",$("#id_password_again").val()); formData.append("avatar_img",$("#avatar")[0].files[0]);
记得要加上
contentType:false processData:false
8、可以用下面的方法判断是什么请求
if request.ajax(): #如果ajax请求 if request,method=="POST": #如果是POST请求
9、上传文件有一个固定的配置参数media，和static相似 但又不同
步骤如下：
- 首先在settings中配置：
# ============media配置=============== MEDIA_URL="/media/" #别名 MEDIA_ROOT=os.path.join(BASE_DIR,"app01","media","uploads") #具体路径
- 在url中配置
url(r'^media/(?P<path>.*)$', serve, {'document_root': settings.MEDIA_ROOT}),
用处：
用处一：
----- avatar = models.FileField(verbose_name='头像', upload_to='avatar', default="/avatar/default.png") 会把接收的文件放在media指代的路径与upload_to的拼接：BASE_DIR+blog+media+uploads+avatar/a.png avatar字段在数据库中保存的是：avatar/a.png
用处二：
------ <img src="/media/avatar/a.png">
如果上传成功会把图片自动保存在这里
10、头像图片预览
//头像预览 $(".avatar_file").change(function () { var ele_file = $(this)[0].files[0]; //当前选中的文件 var reader = new FileReader(); reader.readAsDataURL(ele_file); //对应找到打开的url reader.onload=function () { {# 方式一#} $(".avatar_img").attr("src",this.result) ; //this.result是上面找到的url {# 方式二#} {# $(".avatar_img")[0].src=this.result; //设置图片属性#} } })
11、form自动生成的错误信息
当你定义了全局钩子的时候，而且正好出现你的那个全局钩子函数中的错（比如两次密码输入不一致），这样你打印错误信息的时候
会有一个__all__对象，这个就是你设置的全局钩子生成的。
所以还要单独判断一下，现在全局钩子只有一个，你可以这样判断，但是，当全局钩子多的时候就得一个一个分开来判断
if (i=="__all__"){ $("#id_password_again").after($span) }
二、具体实现注册操作
urls.py
1 from django.conf.urls import url 2 from django.contrib import admin 3 from app01 import views 4 from django.conf import settings 5 from django.views.static import serve 6 urlpatterns = [ 7 url(r'^admin/', admin.site.urls), 8 url(r'^login/$', views.login), 9 url(r'^index/$', views.index), 10 url(r'^get_vaildCode_img/$', views.get_vaildCode_img), 11 url(r'^log_out/$', views.log_out), 12 13 url(r'^register/$', views.register), 14 url(r'^media/(?P<path>.*)$', serve, {'document_root': settings.MEDIA_ROOT}), 15 ]
views.py
from django.shortcuts import render,HttpResponse # Create your views here. from blog import models import json def login(reqeust): if reqeust.is_ajax(): res={"user":None,"msg":None} user=reqeust.POST.get("user") pwd=reqeust.POST.get("pwd") valid=reqeust.POST.get("valid") print(reqeust.POST) random_str=reqeust.session.get("random_str") if valid.upper()==random_str.upper(): from django.contrib import auth user=auth.authenticate(username=user,password=pwd) if user: res["user"]=user.username else: res["msg"]="用户名或者密码错误" else: res["msg"]="验证码失败" return HttpResponse(json.dumps(res)) return render(reqeust,"login.html") def valid_img(request): # 方式1： # with open("egon.jpg","rb") as f: # data=f.read() # 方式2： import random def get_random_color(): return (random.randint(0,255),random.randint(0,255),random.randint(0,255)) # from PIL import Image # image=Image.new("RGB",(250,36),color=get_random_color()) # f=open("validcode.png","wb") # image.save(f,"png") # # with open("validcode.png","rb") as f: # data=f.read() # 方式3： # from PIL import Image # from io import BytesIO # image=Image.new("RGB",(250,36),color=get_random_color()) # f=BytesIO() # image.save(f,"png") # data=f.getvalue() # 方式4： from PIL import Image from PIL import ImageDraw,ImageFont from io import BytesIO image=Image.new("RGB",(250,36),color=get_random_color()) draw=ImageDraw.Draw(image) font = ImageFont.truetype("blog/static/font/kumo.ttf", size=32) random_str="" for i in range(5): random_num=str(random.randint(0,9)) random_low_alpha=chr(random.randint(97,122)) random_up_alpha=chr(random.randint(65,90)) random_char=random.choice([random_num,random_low_alpha,random_up_alpha]) draw.text((20+i*40,0),random_char,get_random_color(),font=font) random_str+=random_char print(random_str) request.session["random_str"]=random_str # 噪点噪线 # width=250 # height=36 # for i in range(10): # x1=random.randint(0,width) # x2=random.randint(0,width) # y1=random.randint(0,height) # y2=random.randint(0,height) # draw.line((x1,y1,x2,y2),fill=get_random_color()) # # for i in range(100): # draw.point([random.randint(0, width), random.randint(0, height)], fill=get_random_color()) # x = random.randint(0, width) # y = random.randint(0, height) # draw.arc((x, y, x + 4, y + 4), 0, 90, fill=get_random_color()) f=BytesIO() image.save(f,"png") data=f.getvalue() return HttpResponse(data) from django import forms class UserForm(forms.Form): user=forms.CharField(min_length=3) pwd=forms.CharField() repeat_pwd=forms.CharField() email=forms.EmailField() def clean_user(self): users=self.cleaned_data.get("user") user_info=models.UserInfo.objects.filter(username=users).first() if user_info: raise forms.ValidationError("用户已存在") else: return users def clean(self): print("clean",self.cleaned_data) if self.cleaned_data.get("pwd")!=self.cleaned_data.get("repeat_pwd"): raise forms.ValidationError("两次输入密码不一致，请重新输入") else: return self.cleaned_data.get("pwd") def reg(request): if request.method=="POST": form=UserForm(request.POST) res={"user":None,"msg":None} if form.is_valid(): user=form.cleaned_data.get("user") pwd=form.cleaned_data.get("pwd") email=form.cleaned_data.get("email") avatar_img=request.FILES.get("avatar_img") cre_user=models.UserInfo.objects.create_user(username=user,password=pwd,email=email,avatar=avatar_img) res["user"]=form.cleaned_data.get("user") else: res["msg"]=form.errors return HttpResponse(json.dumps(res)) return render(request,"reg.html")
template
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Blog</title> <link rel="stylesheet" href="/static/bs/css/bootstrap.min.css"> <script src="/static/js/jquery-3.2.1.min.js"></script> <style> .error{ color: red; margin-left: 20px; } </style> </head> <body> <h3>登录页面</h3> <div class="container"> <div class="row"> <div class="col-md-6 col-md-offset-3"> <form enctype="application/x-www-form-urlencoded"> {% csrf_token %} <div class="form-group"> <label for="">用户名</label> <input type="text" id="user" class="form-control"> </div> <div class="form-group"> <label for="">密码</label> <input type="password" id="pwd" class="form-control"> </div> <div class="form-group"> <label for="">验证码</label> <div class="row"> <div class="col-md-6"> <input type="text"id="valid" class="form-control"> </div> <div class="col-md-6"> <img width="250" height="36" src="/valid_img/" alt="" class="valid_img"> </div> </div> </div> <input type="button" value="登陆" class="login_btn btn btn-primary"> <a href="/reg/" class="pull-right">注册</a> <span class="error"></span> </form> </div> </div> </div> <script> // 登录验证 $(".login_btn").click(function () { $.ajax({ url:"", data:{ user:$("#user").val(), pwd:$("#pwd").val(), valid:$("#valid").val(), csrfmiddlewaretoken:$("[name='csrfmiddlewaretoken']").val() }, type:"post", success:function (data) { console.log(data); var data=JSON.parse(data); if(data.user){ }else{ $(".error").html(data.msg) } } }) }); // 验证码局部刷新 $(".valid_img").click(function () { $(this)[0].src+="?" }) </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Blog</title> <link rel="stylesheet" href="/static/bs/css/bootstrap.min.css"> <script src="/static/js/jquery-3.2.1.min.js"></script> <style> .error{ color: red; margin-left: 20px; } </style> </head> <body> <h3>登录页面</h3> <div class="container"> <div class="row"> <div class="col-md-6 col-md-offset-3"> <form enctype="application/x-www-form-urlencoded"> {% csrf_token %} <div class="form-group"> <label for="">用户名</label> <input type="text" id="user" class="form-control"> </div> <div class="form-group"> <label for="">密码</label> <input type="password" id="pwd" class="form-control"> </div> <div class="form-group"> <label for="">验证码</label> <div class="row"> <div class="col-md-6"> <input type="text"id="valid" class="form-control"> </div> <div class="col-md-6"> <img width="250" height="36" src="/valid_img/" alt="" class="valid_img"> </div> </div> </div> <input type="button" value="登陆" class="login_btn btn btn-primary"> <a href="/reg/" class="pull-right">注册</a> <span class="error"></span> </form> </div> </div> </div> <script> // 登录验证 $(".login_btn").click(function () { $.ajax({ url:"", data:{ user:$("#user").val(), pwd:$("#pwd").val(), valid:$("#valid").val(), csrfmiddlewaretoken:$("[name='csrfmiddlewaretoken']").val() }, type:"post", success:function (data) { console.log(data); var data=JSON.parse(data); if(data.user){ }else{ $(".error").html(data.msg) } } }) }); // 验证码局部刷新 $(".valid_img").click(function () { $(this)[0].src+="?" }) </script> </body> </html>
效果截图
