博客系统 之 注册

注册

 

之前我们学过的form组件为我们书写form表单带来了很大的便捷，给我们节省了代码，下面我们用form组件来做这个注册页面。

form组件设置标签。

forms.py

from django import forms
from django.forms import widgets
from .models import UserInfo
from django.core.exceptions import NON_FIELD_ERRORS, ValidationError


# 创建form组件
class RegisterForm(forms.Form):
    user = forms.CharField(max_length=10, label="用户名",
                           widget=widgets.TextInput(attrs={"class": "form-control"}))
    pwd = forms.CharField(min_length=4, label="密码",
                          widget=widgets.PasswordInput(attrs={"class": "form-control"}))
    repeat_pwd = forms.CharField(min_length=4, label="确认密码",
                                 widget=widgets.PasswordInput(attrs={"class": "form-control"}))
    email = forms.EmailField(label="邮箱",
                             widget=widgets.EmailInput(attrs={"class": "form-control"}))
    
    '''校验文本框中输入的值是否与form组件设置的样式相匹配'''
    def clean_user(self):  # 局部钩子
        val = self.cleaned_data.get("user")

        ret = UserInfo.objects.filter(username=val)
        if not ret:    #数据库中不存在此用户，则可以注册
            return val
        else:   #此用户已注册
            raise ValidationError("该用户已存在")

    def clean(self):  # 全局钩子
        if self.cleaned_data.get("pwd") == self.cleaned_data.get("repeat_pwd"):  #判断密码是否一致
            return self.cleaned_data
        else:
            raise ValidationError("两次密码不一致，请重新输入！")　

注册页面需要的文本框已设置完毕，现在我们让它在html页面展现出来。

注册页面HTML：

register.html

<div class="container">
    <div class="row">
        <div class="col-md-6 col-md-offset-3">
            <form action="">
              {% for field in form %}
                <div class="form-group">
                    <label for="{{ field.id_for_label }}">{{ field.label }}</label>
                    {{ field }} <span class="error pull-right"></span>
                </div>
                 {% endfor %}
                <div class="form-group">
                    <label for="avatar">头像<img  class="avatar" src="/static/img/default.png" alt=""></label>
                    <input type="file" id="avatar">
                </div>
                <input type="button" class="btn btn-primary register_btn pull-right" value="提交">
　　　　　　　　　　　　　　　　　　　　　　　　　　　　<span class="error" style="color: red;margin-left: 20px"></span>
            </form>

        </div>
    </div>
</div>　

为html页面添加css样式，来装饰它的页面样式。

<style>
        {# 全局样式#}
        .container{
            margin-top: 100px;
        }
        {#头像#}
        #avatar{
            display:none;
        }
        .avatar{
            width: 60px;
            height: 60px;
            margin-left: 20px;
        }
    </style>

页面中有个注册按钮和头像选择需要，我们为它们设置事件。

注意：中间件

{% csrf_token %}

　　

<script>
    //图像预览效果
{#    $("#avatar").on("change",function () {#}
        {# alert(123)#}
{#        var choose_file=$(this)[0].files[0];  //选择的文件#}
{#        var reader=new FileReader();    #}
{#        reader.readAsDataURL(choose_file);  //读选文件的URL#}
{#        $(".avatar").attr("src",reader.result)   //url赋给头像#}
{#    })#}
     //图像预览效果
    $("#avatar").on("change",function () {
        {# alert(123)#}
        var choose_file=$(this)[0].files[0];  //选择的文件
        var reader=new FileReader();
        reader.readAsDataURL(choose_file);  //读选文件的URL
        reader.onload=function () {   //等读取路径执行完才执行赋值
          $(".avatar").attr("src",reader.result)   //url赋给头像
        }

    });

{#    注册事件#}
    $(".register_btn").on("click",function () {
        var formdata=new FormData();  //实例化对象
        formdata.append("user",$("#id_user").val());
        formdata.append("pwd",$("#id_pwd").val());
        formdata.append("repeat_pwd",$("#id_repeat_pwd").val());
        formdata.append("email",$("#id_email").val());
        formdata.append("avatar",$("#avatar")[0].files[0]);
        formdata.append("csrfmiddlewaretoken",$("[name='csrfmiddlewaretoken']").val());

        $.ajax({
            url:"",
            type:"post",
            processData:false,
            contentType:false,
            data:formdata,
            success:function (data) {
                if(data.user){
                    {# 注册成功#}
                    location.href="/login/"  //跳转到登录页面
                }else{ //注册失败
                    console.log(data.error_dict);
                    //清空错误信息
                    $("form span").html("");//所有span标签内容清空
                    $("form .form-group").removeClass("has-error"); //清空边框颜色
                    //加载错误信息
                    $.each(data.error_dict,function (field,error_list) {   //循环错误信息

                        if(field=="__all__"){ //全局错误信息
                            $("#id_repeat_pwd").next().html(error_list[0]).css("color","red");   //span标签添加内容字体变红
                            $("#id_repeat_pwd").parent().addClass("has-error")  //边框变红
                        }
                        $("#id_"+field).next().html(error_list[0]).css("color","red");   //span标签添加内容字体变红
                        $("#id_"+field).parent().addClass("has-error")  //边框变红
                    })
                    }
            }

        })
    })
</script> 

前端页面就这样吧，我们与后端做连接。

urls.py

 # 注册页面
    url(r'^register/', views.register),　　

根据url在views视图中找到对应的函数。

views.py

# 注册
def register(request):
    if request.method == "POST":
        res = {"user": None, "error_dict": None}  # 设置初始值
        form = RegisterForm(request.POST)  # 接收前端传过来的数据
        if form.is_valid():  # 验证通过
            print(form.cleaned_data)
            print(request.FILES)  # 头像文件
            # 取到前端输入的值
            user = form.cleaned_data.get("user")
            pwd = form.cleaned_data.get("pwd")
            email = form.cleaned_data.get("email")
            avatar = request.FILES.get("avatar")
            if avatar:  # 上传了头像
                user = UserInfo.objects.create_user(username=user, password=pwd, email=email, avatar=avatar)
            else:  # 没有上传头像，则使用默认头像
                user = UserInfo.objects.create_user(username=user, password=pwd, email=email)
            res["user"] = user.username
        else:  # 验证不通过
            print(form.errors)
            print(form.cleaned_data)
            res["error_dict"] = form.errors  # 返回错误信息
        return JsonResponse(res)
    form = RegisterForm()  # form对象  ,渲染input标签，传一个字典
    return render(request, "register.html", locals())  # locals:form=form　　

好了，注册就这样吧。

注意：注册页面涉及到了头像文件上传功能。

详见Django框架中文件上传，请前往：http://www.cnblogs.com/gaoya666/articles/8854919.html