博客系统_注册页面流程
一、在新建的forms文件中新建类：
说明：给标签添加前端的类，有多少框就需要多少组对应的代码。
1 class Register(forms.Form): 2 username=forms.CharField(max_length=12,min_length=6,required=True,error_messages={ 3 "required":"用户名不能为空", 4 },widget=widgets.TextInput( 5 attrs={"class":"form-control","placeholder":"username"}))
二、在bootstrap网站找到面板区域，选取对应的区域代码拷贝到自己的文件中，改改之后就能为我所用了。啦啦啦！
三、分配路由，其次在views内写视图函数
1、 实例化foms组件的类，将forms文件中的前端标签拿到视图函数，准备返回给前端。
1 form_obj=forms.Register()
2、第一次用户使用的一定是get请求，所以只需要实例化forms文件中的类，然后然后渲染input输入框，给用户填数据。
1 def register(request): 2 form_obj=forms.Register() # 实例化foms组件的类 3 4 return render(request,"register.html",{"form_obj":form_obj})
四、用户填完数据后需要给submit绑定事件，然后以ajax的方式提交数据至后台，并且返回结果。
ajax参数 1
1 <script> 2 {# 给提交按钮绑定事件，首先找到该按钮#} 3 4 $("#d1").click(function () { 5 {# 以字典的形式取出用户提交的数据，赋值给formdata#} 6 var formdata=new FormData(); 7 {# 将所有的值添加到formdata中,方便后端提取#} 8 formdata.append("username",$("#id_username").val()); 9 formdata.append("password",$("#id_password").val()); 10 formdata.append("repeat_pwd",$("#id_repeat_pwd").val()); 11 formdata.append("email",$("#id_email").val()); 12 formdata.append("avatar_img",$(".avatar_file")[0].files[0]); 13 14 $.ajax({ 15 url:"/register/", 16 type:"POST", 17 data:formdata, {# 取出用户提交的数据发给后端#} 18 contentType:false, {#发送数据到服务器时所使用的内容类型。#} 19 processData:false, {# 布尔值，规定通过请求发送的数据是否转换为查询字符串。默认是 true。#} 20 headers:{"X-CSRFToken":$.cookie('csrftoken')}, 21 success:function (data) { 22 console.log(data); 23 var data=JSON.parse(data); {#将数据转换为 JavaScript 对象。#} 24 {# 如果用户已经存在，代表已经登录，直接跳转至login页面#} 25 if (data.user){ 26 location.href="/login/" 27 } 28 else{ 29 console.log(data.ErrorList); 30 31 $(".pull-right").html(""); {# 每一次循环完毕都清空报警信息#} 32 33 $.each(data.ErrorList,function (i,j) { {# jQuery循环语法#} 34 console.log(i,j); 35 $span=$("<span>"); 36 $span.addClass("pull-right").css("color","red"); 37 $span.html(j[0]); 38 $("#id_"+i).after($span).parent().addClass("has-error"); 39 if (i==="__all__"){ 40 $("#id_repeat_pwd").after($span) 41 } 42 }) 43 } 44 } 45 }) 46 }) 47 </script>
五、后端在视图函数处理数据
1、判断请求方式
2、将数据以字典的形式传入后端
3、新建一个空字典，里面包含用户名和错误清单，主要用途就是判断用户是否被注册，已经返回、清空错误信息）
1 dict1 = {"user": None, "ErrorList": None} #自定义一个字典，用户名和错误信心都为空
4、如果验证通过表示为符合要求的数据，否则返回错误信息
1 if form_obj.is_valid(): 2 username=form_obj.cleaned_data.get("username") #cleaned_data为语法 3 password=form_obj.cleaned_data.get("password") 4 email=form_obj.cleaned_data.get("email") 5 avatar_img=request.FILES.get("avatar_img")
5、头像上传
1 # 如果用户有上传头像就使用该图像，没有则使用默认头像 2 if avatar_img: 3 user_obj = models.UserInfo.objects.create_user(username=username, password=password, email=email,avatar_img=avatar_img) 4 else: 5 user_obj = models.UserInfo.objects.create_user(username=username, password=password, email=email) 6 dict1["user"]=user_obj.username
6、头像预览
备忘：给上传文件绑定一个change事件，达到预览的功能。
1 $("#avatar_file").change(function () { 2 var ele_file=$(this)[0].files[0]; //this.files 3 var reader=new FileReader(); 4 reader.readAsDataURL(ele_file); 5 reader.onload=function () { 6 $("#avatar_img")[0].src=this.result 7 } 8 });
六、完整的register文件和views文件
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <script src="/static/dist/js/jquery-3.1.1.js"></script> 7 <script src="/static/dist/js/bootstrap.js"></script> 8 <link rel="stylesheet" href="/static/dist/css/bootstrap.css"> 9 <script src="/static/js/jquery.cookie.js"></script> 10 <link rel="stylesheet" href="/static/css/register.css"> 11 <style> 12 .container { 13 margin-top: 150px; 14 } 15 16 </style> 17 </head> 18 <body> 19 {#背景图片#} 20 <div style="position:absolute;z-index:-1;height:100%;width:100%;top:0px;left:0px;"> 21 {# <img src="http://pic1.win4000.com/wallpaper/9/5481482b9a599.jpg?tupianxiaozhan.jpg" height="100%" width="100%"/>#} 22 <img src="/static/img/背景图片.jpg" 23 height="100%" width="100%"/> 24 </div> 25 <div class="container"> 26 <form class="form-horizontal"> 27 <div class="form-group"> 28 <label for="inputEmail3" class="col-sm-3 control-label">Username</label> 29 <div class="col-sm-3"> 30 {{ form_obj.username }} {# 接收后端传回的html标签#} 31 </div> 32 </div> 33 <div class="form-group"> 34 <label for="inputPassword3" class="col-sm-3 control-label">Password</label> 35 <div class="col-sm-3"> 36 {{ form_obj.password }} 37 </div> 38 </div> 39 <div class="form-group"> 40 <label for="inputPassword3" class="col-sm-3 control-label">Repeat_pwd</label> 41 <div class="col-sm-3"> 42 {{ form_obj.repeat_pwd }} 43 </div> 44 </div> 45 <div class="form-group"> 46 <label for="inputEmail3" class="col-sm-3 control-label">Email</label> 47 <div class="col-sm-3"> 48 {{ form_obj.email }} 49 </div> 50 </div> 51 <div class="form-group avatar"> 52 <label for="exampleInputFile" class="col-sm-3 control-label" >ImgageFile input</label> 53 <img src="/static/img/default.png" alt="" class="avatar_img"> 54 <input type="file" id="exampleInputFile" class="avatar_file"> 55 56 </div> 57 <div class="form-group"> 58 <div class="col-sm-offset-3 col-sm-10"> 59 <button type="button" class="btn btn-info " id="d1">Sign in</button> 60 </div> 61 </div> 62 </form> 63 </div> 64 <script> 65 // 头像预览 66 $("#avatar_file").change(function () { 67 var ele_file=$(this)[0].files[0]; //this.files 68 var reader=new FileReader(); 69 reader.readAsDataURL(ele_file); 70 reader.onload=function () { 71 $("#avatar_img")[0].src=this.result 72 } 73 }); 74 {# 给提交按钮绑定事件，首先找到该按钮#} 75 76 $("#d1").click(function () { 77 {# 以字典的形式取出用户提交的数据，赋值给formdata#} 78 var formdata=new FormData(); 79 {# 将所有的值添加到formdata中,方便后端提取#} 80 formdata.append("username",$("#id_username").val()); 81 formdata.append("password",$("#id_password").val()); 82 formdata.append("repeat_pwd",$("#id_repeat_pwd").val()); 83 formdata.append("email",$("#id_email").val()); 84 formdata.append("avatar_img",$(".avatar_file")[0].files[0]); 85 86 $.ajax({ 87 url:"/register/", 88 type:"POST", 89 data:formdata, {# 取出用户提交的数据发给后端#} 90 contentType:false, {#发送数据到服务器时所使用的内容类型。#} 91 processData:false, {# 布尔值，规定通过请求发送的数据是否转换为查询字符串。默认是 true。#} 92 headers:{"X-CSRFToken":$.cookie('csrftoken')}, 93 success:function (data) { 94 console.log(data); 95 var data=JSON.parse(data); {#将数据转换为 JavaScript 对象。#} 96 {# 如果用户已经存在，代表已经登录，直接跳转至login页面#} 97 if (data.user){ 98 location.href="/login/" 99 } 100 else{ 101 console.log(data.ErrorList); 102 103 $(".pull-right").html(""); {# 每一次循环完毕都清空报警信息#} 104 105 $.each(data.ErrorList,function (i,j) { {# jQuery循环语法#} 106 console.log(i,j); 107 $span=$("<span>"); 108 $span.addClass("pull-right").css("color","red"); 109 $span.html(j[0]); 110 $("#id_"+i).after($span).parent().addClass("has-error"); 111 if (i==="__all__"){ 112 $("#id_repeat_pwd").after($span) 113 } 114 }) 115 } 116 } 117 }) 118 }) 119 </script> 120 </body> 121 </html>
1 from django.shortcuts import render,HttpResponse 2 from app01 import forms 3 from app01 import models 4 import json 5 # Create your views here. 6 # user:bing 7 # password:bing!234 8 9 def register(request): 10 form_obj=forms.Register() # 实例化foms组件的类 11 if request.method=="POST": # 判断请求方式 12 form_obj = forms.Register(request.POST) # 前端的数据以字典的形式传入后端，Register为forms中的类 13 dict1 = {"user": None, "ErrorList": None} #自定义一个字典，用户名和错误信心都为空 14 15 # 如果都验证通过，表示数据都为干净的数据(符合要求的)，否则返回错误信息 16 if form_obj.is_valid(): 17 username=form_obj.cleaned_data.get("username") #cleaned_data为语法 18 password=form_obj.cleaned_data.get("password") 19 email=form_obj.cleaned_data.get("email") 20 avatar_img=request.FILES.get("avatar_img") 21 22 # 如果用户有上传头像就使用该图像，没有则使用默认头像 23 if avatar_img: 24 user_obj = models.UserInfo.objects.create_user(username=username, password=password, email=email,avatar_img=avatar_img) 25 else: 26 user_obj = models.UserInfo.objects.create_user(username=username, password=password, email=email) 27 dict1["user"]=user_obj.username 28 else: 29 dict1["ErrorList"]=form_obj.errors 30 return HttpResponse(json.dumps(dict1)) # 将 Python 对象编码成 JSON 字符串 31 return render(request,"register.html",{"form_obj":form_obj}) 32 33 def login(request): 34 35 return render(request,"login.html")
1 from django import forms 2 from django.forms import widgets 3 from django.forms import ValidationError 4 from app01 import models 5 6 7 class Register(forms.Form): 8 username=forms.CharField(max_length=12,min_length=6,required=True,error_messages={ 9 "required":"用户名不能为空", 10 },widget=widgets.TextInput( 11 attrs={"class":"form-control","placeholder":"username"})) 12 password = forms.CharField(max_length=12, min_length=6, required=True, error_messages={ 13 "required": "密码不能为空", 14 }, widget=widgets.PasswordInput( 15 attrs={"class": "form-control", "placeholder": "password"})) 16 repeat_pwd = forms.CharField(max_length=12, min_length=6, required=True, error_messages={ 17 "required": "密码不能为空", 18 }, widget=widgets.PasswordInput( 19 attrs={"class": "form-control", "placeholder": "repeat_password"})) 20 email = forms.EmailField(widget=widgets.EmailInput( 21 attrs={"class": "form-control", "placeholder": "email"} 22 )) 23 24 # 提取用户提交的数据和数据库的做比较，看是否被注册 25 def clean_username(self): 26 ret = models.UserInfo.objects.filter(username=self.cleaned_data.get("username")).first() # cleand_data清洗满足条件的数据 27 if not ret: 28 return self.cleaned_data.get("username") # 返回和数据库的比对结果 29 else: 30 raise ValidationError("该用户已被注册") 31 32 def clean_password(self): 33 data = self.cleaned_data.get("password") 34 35 if not data.isdigit(): 36 return self.cleaned_data.get("password") 37 else: 38 raise ValidationError("密码不能全是数字") 39 40 def clean(self): 41 """密码比较是否一致""" 42 pwd=self.cleaned_data.get("password") 43 r_pwd=self.cleaned_data.get("repeat_pwd") 44 if pwd==r_pwd: 45 return self.cleaned_data 46 else: 47 raise ValidationError("两次密码不一致")
Django中的form备忘：参考博客
login页面待补。。。
浙公网安备 33010602011771号