一流程
注册
- 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" alt="" 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}),
二 HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Title</title>
<script src="/static/dist/js/jquery-3.1.1.js"></script>
<script src="/static/dist/js/bootstrap.js"></script>
<link rel="stylesheet" href="/static/dist/css/bootstrap.css">
<link rel="stylesheet" href="/static/dist/css/reg.css">
<script src="/static/js/jquery.cookie.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-5 col-md-offset-3">
<h1>欢迎进入注册页面</h1>
<form>
{% csrf_token %}
<div class="form-group">
<label for="username">用户名</label>
{{ form_obj.username }}
</div>
<div class="form-group">
<label for="password">密码</label>
{{ form_obj.password }}
</div>
<div class="form-group">
<label for="password">确认密码</label>
{{ form_obj.repeat_pwd }}
</div>
<div class="form-group">
<label for="email">邮箱</label>
{{ form_obj.email }}
</div>
<div class="form-group avatar">
<label for="avatar">头像</label>
<img src="/static/img/default.png" alt="" id="avatar_img">
<input type="file" class="form-control" id="avatar_file" >
</div>
<input type="button" value="提交" class="btn btn-primary" id="subBtn"><span class="error"></span>
</form>
</div>
</div>
</div>
<script>
// 头像预览
$("#avatar_file").change(function () { //定位到图片文件
var ele_file=$(this)[0].files[0]; //this.files
var reader=new FileReader();
reader.readAsDataURL(ele_file);
reader.onload=function () {
$("#avatar_img")[0].src=this.result
}
});
$("#subBtn").click(function () {
var formdata=new FormData();
formdata.append("username",$("#id_username").val());
formdata.append("password",$("#id_password").val());
formdata.append("repeat_pwd",$("#id_repeat_pwd").val());
formdata.append("email",$("#id_email").val());
formdata.append("avatar_img",$("#avatar_file")[0].files[0]);
$.ajax({
url:"/reg/",
type:'POST',
data:formdata,
contentType:false,
processData:false,
headers:{"X-CSRFToken":$.cookie('csrftoken')},
success:function (data) {
console.log(data);
var data=JSON.parse(data);
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)
}
})
}
}
})
})
</script>
</body>
</html>
三视图函数
def reg(request):
if request.is_ajax():
form_obj = forms.RegForm(request, request.POST)
regResponse = {"user": None, "errorsList": None}
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")
user_obj = models.UserInfo.objects.create_user(username=username, password=password, email=email,
avatar=avatar_img, nickname=username)
print(user_obj.avatar, "......")
regResponse["user"] = user_obj.username
else:
regResponse["errorsList"] = form_obj.errors
import json
return HttpResponse(json.dumps(regResponse))
form_obj = forms.RegForm(request)
return render(request, "reg.html", {"form_obj": form_obj})