Django 博客系统------登录注册功能
一、登录：
urls配置：注册中需要图片,
url(r'^media/(?P.*)$' , 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=(120, 40), color=(random.randint(200,255),random.randint(200,255),random.randint(200,255)))
draw=ImageDraw.Draw(img,"RGB")
font=ImageFont.truetype("blog/static/font/kumo.ttf",25)
valid_list=[]
for i in range(5):
#生成验证码
random_num=str(random.randint(0,9))
random_lower=chr(random.randint(65,90))
random_upper=chr(random.randint(97,122))
random_char=random.choice([random_num,random_lower,random_upper])
draw.text([5+i*24,10],random_char,(random.randint(0,200),random.randint(0,200),random.randint(0,200)),font=font)
valid_list.append(random_char)
for i in range(100):
#生成噪点
draw.point([random.randint(0,120),random.randint(0,40)], fill=(random.randint(0,255),random.randint(0,255),random.randint(0,255)))
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">
![]()
class="validCode_img" src="/get_validCode_img/" alt="" width="170px" height="40px">
div>验证码刷新：
$(".validCode_img").click(function () {
$(this)[0].src += "?"
})
在url后面加？重新发送一次请求即可刷新验证码参考：http://www.cnblogs.com/yuanchenqi/articles/7468816.html
二、注册
注册使用form表单来进行数据验证：
forms:
class RegForm(forms.Form):
username = forms.CharField(max_length=12, min_length=5, required=True, error_messages={"required": "不能为空", },
widget=widgets.TextInput(attrs={"class": "form-control", "placeholder": "用户名长度不能小于5大于15"}))
password = forms.CharField(min_length=6, error_messages={"required": "不能为空", },
widget=widgets.PasswordInput(attrs={"class": "form-control", "placeholder": "密码不能为纯数字或字母且长度大于6"}))
repeat_pwd = forms.CharField(min_length=6, 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
<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>Titletitle>
<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)[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.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>