一、登入:
urls配置:注冊中需要圖檔,
url(r'^media/(?P<path>.*)$', serve, {'document_root': settings.MEDIA_ROOT}),
登入login隻需用auth驗證一下即可,加了個驗證碼,沒啥難度。
驗證碼代碼需要使用PIL子產品.
pip3 install pillow
驗證碼的引用原理:在HTML中img标簽請求一個url指向URL生成函數擷取驗證碼圖檔。
url(r'^get_validCode_img/',views.get_validCode_img),
Python代碼
def get_validCode_img(request):
'''生成驗證碼圖檔'''
img = Image.new(mode="RGB", size=(, ), color=(random.randint(,),random.randint(,),random.randint(,)))
draw=ImageDraw.Draw(img,"RGB")
font=ImageFont.truetype("blog/static/font/kumo.ttf",)
valid_list=[]
for i in range():
#生成驗證碼
random_num=str(random.randint(,))
random_lower=chr(random.randint(,))
random_upper=chr(random.randint(,))
random_char=random.choice([random_num,random_lower,random_upper])
draw.text([+i*,],random_char,(random.randint(,),random.randint(,),random.randint(,)),font=font)
valid_list.append(random_char)
for i in range():
#生成噪點
draw.point([random.randint(,),random.randint(,)], fill=(random.randint(,),random.randint(,),random.randint(,)))
f=BytesIO()
img.save(f,"png")
data=f.getvalue()
valid_str="".join(valid_list)
print(valid_str)
request.session["keepValidCode"]=valid_str
return HttpResponse(data)
網頁中
<div class="col-md-6">
<img class="validCode_img" src="/get_validCode_img/" alt="" width="170px" height="40px">
</div>
驗證碼重新整理:
$(".validCode_img").click(function () {
$(this)[].src += "?"
})
在url後面加?重新發送一次請求即可重新整理驗證碼
參考:http://www.cnblogs.com/yuanchenqi/articles/7468816.html
二、注冊
注冊使用form表單來進行資料驗證:
forms:
class RegForm(forms.Form):
username = forms.CharField(max_length=, min_length=, required=True, error_messages={"required": "不能為空", },
widget=widgets.TextInput(attrs={"class": "form-control", "placeholder": "使用者名長度不能小于5大于15"}))
password = forms.CharField(min_length=, error_messages={"required": "不能為空", },
widget=widgets.PasswordInput(attrs={"class": "form-control", "placeholder": "密碼不能為純數字或字母且長度大于6"}))
repeat_pwd = forms.CharField(min_length=, error_messages={"required": "不能為空", },
widget=widgets.PasswordInput(attrs={"class": "form-control", "placeholder": "再次輸入密碼"}))
email = forms.EmailField(error_messages={"required": "不能為空", },
widget=widgets.EmailInput(attrs={"class": "form-control", "placeholder": "郵箱"}))
def clean_username(self):
ret = models.UserInfo.objects.filter(username=self.cleaned_data.get("username"))
if not ret:
return self.cleaned_data.get("username")
else:
raise ValidationError("使用者名已注冊")
def clean_password(self):
data = self.cleaned_data.get("password")
if not data.isdigit():
return self.cleaned_data.get("password")
else:
raise ValidationError("密碼不能全是數字")
def clean(self):
if self.cleaned_data.get("password") == self.cleaned_data.get("repeat_pwd"):
return self.cleaned_data
else:
raise ValidationError("兩次密碼不一緻")
Views:
def reg(request):
if request.method == "GET":
form_obj = forms.RegForm(request)
return render(request, "reg.html", {"form_obj": form_obj})
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)
regResponse["user"]=user_obj.username
else:
regResponse["errorsList"]=form_obj.errors
return HttpResponse(json.dumps(regResponse))
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/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">
<h2 class="text-center">歡迎注冊</h2>
<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 col-lg-3" id="subBtn"><span class="error"></span>
</form>
</div>
</div>
</div>
<script>
// 頭像預覽
$("#avatar_file").change(function () {
var ele_file=$(this)[].files[]; //this.files
var reader=new FileReader();
reader.readAsDataURL(ele_file);
reader.onload=function () {
$("#avatar_img")[].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")[].files[]);
$.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[]);
$("#id_"+i).after($span).parent().addClass("has-error");
if (i=="__all__"){
$("#id_repeat_pwd").after($span)
}
})
}
}
})
})
</script>
</body>
</html>