blog流程总结

1.登录:http://www.cnblogs.com/shaojiafeng/p/7868195.html
2.注册
	- urls

	-前端页面中写 username ,password,password,email,头像
	
	
	-form组件创建注册页面
		-widget的作用是，如果不加widget生成的前端标签是原生的input框，加上之后会变成渲染之后的
		-eg：username,password,repeat_pwd,email
			class RegForm(forms.Form):
				email = forms.EmailField(widget=widgets.EmailInput(
					attrs={"class": "form-control", "placeholder": "email"}
				))
			....还有username，password，repeat_pwd
			如果form中有这些字段，则可以在前端页面中{{form_obj.username}}，{{form_obj.password}}这样的方式取到值
			
		-验证每个字段
			- clean_username(self):(用到了局部钩子)
				cleaned_data它代表的是一个字典
				-ret=models.UserInfo.objects.filter(username=self.cleaned_data.get("username"))
				
					if not ret:  #校验字段
						return self.cleaned_data.get("username")
					else:
						raise ValidationError("用户名已注册")
					-检查数据库中是否有username
					-如果没有，验证的那个字段，如果有这个username，则返回cleaned_data取到的值，如果已经存在该用户，就走ValidationError，显示error信息
					
								
			- clean_password(self):(用到了局部钩子)
			
				-同上方法验证，但需要注意，这个判断密码不能全是数字
				
			def clean_validCode(self):(用到全局钩子)

			
	-前端注册页面
		-上一步在后端上传的form对象渲染了username,password,email
		
		-生成头像
			-<img src="/static/img/default.png"  id="avatar_img">
            -<input type="file" class="form-control" id="avatar_file">
			(生成一个默认的灰色框头像，如用户点击上传头像，此时应该吧图片遮到上传的文件上面，
			这里还有让parent设置成相对定位，children设置绝对定位，还有一点，应该不让灰色框隐藏，
			而是让他的透明度为0)
		
		-头像预览
			-找到头像标签，用到change事件，用一个变量去接受当前拿到的文件,然后对去到该文件的路径，让他付给this.result
		
				$("#avatar_file").change(function () {

				var ele_file=$(this)[0].files[0];  //拿到当前点击的文件
				var reader=new FileReader();      //创建一个新对象
				reader.readAsDataURL(ele_file);   
				reader.onload=function (){
					$("#avatar_img")[0].src=this.result
				}
				});

		
		- Ajax提交数据
			-使用formdata是因为里面有二进制文件
			- 上传二进制文件引入 FormData()
			- FormData()对象追加键值对
				-$("#avatar_file")[0].files[0]) # jquery转DOM对象,取files对象最近一次上传的文件
				
				$.ajax({
				url:"/reg/",
				type:"POST",
				data:formdata,
				contentType:false,
				processData:false,
				headers:{"X-CSRFToken":$.cookie(‘csrftoken‘)},  //为了避免Forbedent禁止
				success:function (data) {
					console.log(data);
					var data=JSON.parse(data);

					//能拿到user代表注册成功，跳转到登录页面
					if (data.user){
						location.href="/login/"
					}
					
					//反之
					
					else{
                    console.log(data.errorsList);


                    $.each(data.errorsList,function (i,j) {
                        console.log(i,j);

                        $span=$("<span>");
                        $span.addClass("pull-right").css("color","red");
                        $span.html(j[0]);
                        $("#id_"+i).after($span).parent().addClass("has-error");

                        if (i=="__all__"){
                            $("#id_repeat_pwd").after($span)
                        }
                    })
                }
				
					注释：i为出错form组件字段、j为报错
						each循环报错信息、新建span标签，给其增加样式（右漂浮，红色）
						span的内容为报错信息
						给出错的input标签后边添加span标签,并使其父级标签has-error
						如果i使__all__：将报错添加到重新输入密码后边的span中
	
				
				
			
	-后端注册(views中)	
		-判断是否是is_ajax请求
		-接收从前端提交过来的数据
		-form验证
			实例化对象，然后进行校验，将校验的结果和数据库进行匹配验证，获取校验结果，cleaned_data是一个字典的形式，
			如果校验失败，则走errors错误信息的列表
		
			
			 form_obj=forms.RegForm(request.POST)  #接收从前端提交来的数据，规则和数据放在一起
			
			if form_obj.is_valid():(开始校验，并获取校验结果)
				username = form_obj.cleaned_data["username"]
				password = form_obj.cleaned_data["password"]
				email = form_obj.cleaned_data.get("email")
				avatar_img = request.FILES.get("avatar_img")
				................

		-setting.py 如果只在这里设置 不在前端设置 用户接收不到文件
                MEDIA_ROOT=os.path.join(BASE_DIR,"app01","media")
                MEDIA_URL="/media/"


		-urls.py
                # media 配置
                from django.views.static import serve
                from blog import  settings
                url(r‘^media/(?P<path>.*)$‘, serve, {‘document_root‘: settings.MEDIA_ROOT}),