博客系统 之 注册
注册
之前我们学过的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
