Django-利用Form组件和ajax实现的注册

利用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

 from django.conf.urls import url
 from django.contrib import admin
 from app01 import views
 from django.conf import settings
 from django.views.static import serve
 urlpatterns = [
     url(r'^admin/', admin.site.urls),
     url(r'^login/$', views.login),
     url(r'^index/$', views.index),
     url(r'^get_vaildCode_img/$', views.get_vaildCode_img),
     url(r'^log_out/$', views.log_out),

     url(r'^register/$', views.register),
     url(r'^media/(?P<path>.*)$', serve, {'document_root': settings.MEDIA_ROOT}),
 ]

urls.py

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")

views

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>

login

<!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>

reg

 

效果截图