04 用户注册

编辑本目录

基于forms组件创建表单

创建forms

from django import forms
from django.forms import widgets
class UserInfo(forms.Form):
    user=forms.CharField(max_length=32,label="用户名",widget=widgets.TextInput(attrs={"class":'form-control'}))
    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="邮箱地址",widget=widgets.EmailInput(attrs={"class":'form-control'}))

View Code

html中渲染forms组件

<form>
    {% csrf_token %}
    {% for field in form %}
        <div class="form-group">
            <label for="{{ field.id_for_label }}">{{ field.label }}:</label>{{ field }}
        </div>
    {% endfor %}
    <input type="button" class="button form-control btn-success" value="提交">
</form>

View Code

添加用户头像

添加用户图像图标

添加一个img标签，连接到static下的一个default.png文件

技巧：

• 利用label的for属性，让点击图片等同于点击input标签
• 将input[type='file']的标签隐藏掉，设置display属性为none

<div class="container">
    <div class="row">
        <div class="col-md-4 col-lg-offset-4">
            <form>
                {% csrf_token %}
                {% for field in form %}
                    <div class="form-group">
                        <label for="{{ field.id_for_label }}">{{ field.label }}:</label>{{ field }}
                    </div>
                {% endfor %}
                <div class="form-group">
                    <label for="avatar">头像
                        <img class="avatar_img" src="/static/app/img/default.png" style="width: 60px;height: 60px;display: inline">
                    </label>
                    <input type="file" id="avatar" style="display: none;">
                </div>
                <input type="button" class="button form-control btn-success" value="提交">
            </form>
        </div>
    </div>
</div>

View Code

用户头像预览功能

• 获取用户选中的文件对象，通过input标签的change事件来触发
• 获取文件对象的本地路径，一定要等图片加载完成之后再来获取文件路径
• 修改img的src属性值

<script>
    $('#avatar').change(function () {
        //获取用户选中的文件对象
       var file_obj=$(this)[0].files[0];
        //获取当前文件对象路径
        var reader=new FileReader();//实例化一个reader
        reader.readAsDataURL(file_obj);//读取文件对象路径，读取完成后放在reader自己内部
        //待读取完后，获取url和修改imgsrc属性
        reader.onload=function () {
            var file_url=reader.result;//获取文件路径url
            //修改img标签的src属性
            $('#avatar_img').attr('src',file_url);
        };
    })
</script>

View Code

 

用ajax提交formdata数据

ajax数据提交

• 上传的data为formdata，需要new一个
• contentType为false
• processData为false

ajax代码

<script>
    //提交formdata数据
    $('input[type="button"]').click(function () {
        var formdata=new FormData();
        formdata.append("user",$("#id_user").val());
        formdata.append("pwd",$("#id_pwd").val());
        formdata.append("re_pwd",$("#id_re_user").val());
        formdata.append("email",$("#id_email").val());
        formdata.append("avatar",$("#avatar")[0].files[0]);
        formdata.append("csrfmiddlewaretoken",$("input[name='csrfmiddlewaretoken']").val());
        $.ajax({
            url:'',
            data:formdata,
            type:'post',
            contentType:false,
            processData:false,
            success:function (data) {
                console.log(data)
            },
            error:function (err) {
                console.log(err)
            }
        })
    })
</script>

View Code

 views代码，可通过is_ajax()验证，也可以通过request.POST验证

def register(request):
    # if request.method=='POST':
    if request.is_ajax():
        response={"user":None,"msg":None}
        form=UserInfoForm(request.POST)
        if form.is_valid():
            response['user']=form.cleaned_data.get('user');
        else:
            print(form.cleaned_data)
            print(form.errors)
            response['msg']=form.errors
        return JsonResponse(response)

View Code