Django 项目试炼blog（3）--基于Form组件ajax用户注册

1、利用form组件建立form组件

from app01.models import UserInfo
from django import forms
from django.forms import widgets
from django.core.exceptions import  ValidationError

class UserFrom(forms.Form):   #固定格式

    user = forms.CharField(max_length=32,label='用户名',  # 设置前端lable标签
                           error_messages={'required':'该字段不能为空'}, # 当用户未输入时报错信息
                           widget=widgets.TextInput(attrs={'class':'form-control'}))  # 设置input的type 添加类标签
    pwd = forms.CharField(max_length=32,label='密码',
                          widget=widgets.PasswordInput(attrs={'class': 'form-control'}))
    re_pwd = forms.CharField(max_length=32,label='确认密码',
                             widget=widgets.PasswordInput(attrs={'class': 'form-control'}))
    email = forms.EmailField(max_length=32,label='电子邮箱',
                             error_messages={'required': '格式错误'},
                             widget=widgets.EmailInput(attrs={'class': 'form-control'}))

    # 建立局部钩子
    def clean_user(self):
        user = self.cleaned_data.get('user')  # 已经过校验
        user_obj = UserInfo.objects.filter(username=user).first()
        if user_obj:
            #已被注册
            raise ValidationError('该用户已注册')
        else:
            return user

    # 建立全局钩子
    def clean(self):
        pwd = self.cleaned_data.get('pwd')
        re_pwd = self.cleaned_data.get('re_pwd')

        if pwd == re_pwd:
            return self.cleaned_data
        else:
            raise ValidationError('密码不一致')

---

2、views中注册验证

def register(request):
    form = UserFrom() # 生成form组件
    send_info = {'user':None,'msg':None}
    if request.method == 'POST':
        form_obj = UserFrom(request.POST)
        if form_obj.is_valid():   # form表单进行格式校验
            send_info['user'] = form_obj.cleaned_data.get('user')

            user = request.POST.get('user')
            pwd = request.POST.get('pwd')
            re_pwd = request.POST.get('re_pwd')
            email = request.POST.get('email')
            img = request.FILES.get('img')

            # 非明文存储
            UserInfo.objects.create_user(username=user,password=pwd,email=email,avatar=img)

        else:
            print(form_obj.cleaned_data) # 存放了所有正确信息
            print(form_obj.errors)  # 存放了所有错误信息
            send_info['msg'] = form_obj.errors # 全局变量信息K为__all__
        return JsonResponse(send_info)

    return render(request,'register.html',locals())

---

3、前端样式

<div class='container'>
    <div class="row">
        <div class="col-md-6 col-md-offset-3">
        <h1 class="text-center">用户注册</h1>
            <form >
                {% csrf_token %}

                {#form组件建立模型#}
                {% for filed in form %}
                <div class="form-group">
                    <label for="user">{{ filed.label }}</label>
                    {{ filed }}<span class="err_info pull-right"></span>
                </div>
                {% endfor %}

                <label for="img">头像
                    <div>
                        <img src="/static/img/timg.jpg" id="image">
                    </div>
                </label>
                <input id="img" type="file" style="display: none">

            <div>
                <input type="button" class="btn btn-info pull-right" value="提交" id="btn">
            </div>
            </form>
        </div>
    </div>
</div>

---

4、jquery

<script>
    $(function () {
        //头象预览
        $('#img').change(function () {
            // 获取文件对象
            var file = $('#img')[0].files[0];
            // 获得文件对象的路径（文件阅读器）
            var reader = new FileReader();
            reader.readAsDataURL(file);//阅读文件的路径，并把结果保存在reader.result
            //更改文件路径(与reader.readAsDateURL是异步操作，需要用onload加载完再执行)
            reader.onload = function(){
            $('#image').attr('src',reader.result)}
        })
        

　　　　　//ajax输入验证
        $('#btn').click(function () {
            var formdata = new FormData
            formdata.append('user',$('#id_user').val());  //从form传来组件，默认id=id_组件名
            formdata.append('pwd',$('#id_pwd').val());
            formdata.append('re_pwd',$('#id_re_pwd').val());
            formdata.append('email',$('#id_email').val());
            formdata.append('img',$('#img')[0].files[0]);
            formdata.append('csrfmiddlewaretoken',$('[name =csrfmiddlewaretoken]').val());

            $.ajax({
                url:'',
                type:'POST',
                contentType:false,
                processData:false,
                data:formdata,
                success:function (data) {

                    if(data.user){
                        location.href= '/login/'
                    }
                    else{
                        console.log(data['msg']);
                        {#清空错误信息#}
                        $('.err_info').text('');
                        $('.form-group').removeClass('has-error');
                        {#循环打印msg中的错误信息#}
                        $.each(data['msg'],function (msg_k,msg_v) {
                            {#判断是不是全局钩子#}
                            if(msg_k=='__all__'){
                                $('#id_re_pwd').next().text(msg_v)
                                $('#id_pwd,#id_re_pwd').parent().addClass('has-error')
                            }
                            $('#id_'+msg_k).next().text(msg_v);
                            $('#id_'+msg_k).parent().addClass('has-error')  // 添加错误边框样式
                        })
                    }
                }
            })
        })
    })

</script>

---

重点：

1、form组件创建form组件，需要在views中生成对象obj，obj.is_vaild()进行判断

　　局部钩子 clean_字段名称，用于验证字段验证，异常信息以{‘字段对象’：value}写入errors字典中；

　　全局钩子 clean（self）用于判断密码是否一致，异常信息以{'__all__' : [value,]}写入errors字典中；

　　所有正确信息存放在 clean_data 中；错误信息存入 errors 中

2、前端头象预览，

　　获得文件对象、获得文件路径（文件浏览器FileReader）、更换文件src（文件浏览器功能为异步操作，需利用onload）

3、from组件中errors信息，

　　循环打印之前判断，errors中是否有全局钩子报错

　　利用form组件在前端  id = id_组件字段名 进行拼接事件

　　每次请求时，需要对之前报错数据进行清空

4、在数据库存储文件

　　models中

　　class UserInfo

　　....

　　avatar = models.FileField(upload_to='avatars/',default='/avatars/default.png')

　　实例化时，avatar = avatar_obj （avatar只接收文件对象）

　　upload_to='avatars/' 文件会下载到项目的根目录中的avatars文件夹中（如果没有，自动生成）

---

 补充

在项目settings中加上

MEDIA = '/media/'
MEDIA_ROOT = os.path.join(BASE_DIR,'media')

 前端用户可以输入/media/...进行对media文件对象进行访问

路由urls文件中加上　　

from django.views.static import serve
re_path(r"media/(?P<path>.*)$", serve, {'document_root':settings.MEDIA_ROOT})

 (?P<path>)有名分组，views中默认参数名为path

Django会将所有用户上传的文件放在media/avatars的文件中，media文件需自建，avatars文件没有django会自动生成。（方便文件、头像等资料的归类）