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>

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

效果截图

巴特西