一、基于forms组件的注册页面设计
1、运用forms组件的校验字段功能实现用户注册
views.py: (在钩子中代码解耦,将form放在cnblog/blog/Myforms.py中)
from django import forms
from django.forms import widgets
class UserForm(forms.Form):
user = forms.CharField(max_length=32,
label="用户名",
widget=widgets.TextInput(attrs={"class": "form-control"},)
)
pwd = forms.CharField(max_length=32,
label="密码",
widget=widgets.PasswordInput(attrs={"class": "form-control"}, )
)
re_pwd = forms.CharField(max_length=32,
label="确认密码",
widget=widgets.PasswordInput(attrs={"class": "form-control"},)
)
email = forms.EmailField(max_length=32,
label="邮箱",
widget=widgets.EmailInput(attrs={"class": "form-control"},)
)
def register(request):
form = UserForm() # 实例化form对象
return render(request, "register.html", {"form": form}) # 注意要传入的是一个字典
注意:
(1)在视图层引入widgets模块,配置修改forms类参数。在这里添加了class="form-control"的bootstrap样式。添加了label标签。
(2)这里register视图,实例化的form对象是未绑定数据的form表单。将这个form对象传入render中,注意传入的格式必须是字典的形式。
2、forms表单渲染标签生成注册页面
register.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>注册页面</title>
<link rel="stylesheet" href="/static/blog/bootstrap-3.3.7/css/bootstrap.css">
</head>
<body>
<h3>注册页面</h3>
<div class="container">
<div class="row">
<div class="col-md-6 col-lg-offset-3">
<form action="">
{% csrf_token %}
{% for field in form %}
{# 一个个获取字段对象 #}
<div class="form-group">
<label for="user">{{ field.label }}</label>
{{ field }}
</div>
{% endfor %}
<div class="form-group">
<label for="avator">头像</label>
<input type="file">
</div>
<input type="button" class="btn btn-default login-btn" value="提交"><span class="error"></span>
</form>
</div>
</div>
</div>
<script src="/static/js/jquery-3.3.1.js"></script>
</body>
</html>
显示效果如下所示:
二、博客注册页面头像
1、默认头像
register.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>注册页面</title>
<link rel="stylesheet" href="/static/blog/bootstrap-3.3.7/css/bootstrap.css">
<style>
#avator_img {
margin-left: 20px;
}
#avator {
display: none;
}
</style>
</head>
<body>
<h3>注册页面</h3>
<div class="container">
<div class="row">
<div class="col-md-6 col-lg-offset-3">
<form action="">
{% csrf_token %}
{% for field in form %}
{# 一个个获取字段对象 #}
<div class="form-group">
<label for="{{ field.auto_id }}">{{ field.label }}</label>
{{ field }}
</div>
{% endfor %}
<div class="form-group">
<label for="avatar">
头像
<img id="avatar_img" width="60" height="60" src="/static/blog/img/default.png" alt="">
</label>
<input type="file" id="avatar">
</div>
<input type="button" class="btn btn-default reg-btn" value="提交"><span class="error"></span>
</form>
</div>
</div>
</div>
<script src="/static/js/jquery-3.3.1.js"></script>
</body>
</html>
显示效果:
注意:
(1)添加头像上传和默认头像时,需要优化显示效果,点击默认头像,显示文件上传框图。这里应用的方法是巧妙使用label标签,将img标签嵌套在label标签中,设置<label for="">中的值与input标签的id相同。实现点击label标签就会默认点击到了input标签。设置完后,隐藏input标签的显示。
(2)<label for="{{ field.auto_id }}"></label>:如果在循环user,filed.auto_id,返回的就是user_id。
2、头像预览功能
首先需要了解jquery事件的change()方法:当元素的值发生改变时,会发生 change 事件;当用于 select 元素时,change 事件会在选择某个选项时发生。当用于 text field 或 text area 时,该事件会在元素失去焦点时发生。
<script>
$("#avatar").change(function () { // change方法,当输入域发生变化时改变其颜色(在这里是上传图片时触发)
alert(123);
})
</script>
上传图片:
获取input标签用户选中的文件对象:
(1)获取用户选中的文件对象
// 获取用户选中的文件对象
var file_obj = $(this)[0].files[0];
(2)获取文件对象的路径
<script>
// 头像预览
$("#avatar").change(function () {
// 获取用户选中的文件对象
var file_obj = $(this)[0].files[0];
// 获取文件对象路径
var reader = new FileReader();
reader.readAsDataURL(file_obj);
// reader.result; // 读url的结果保存在result中
</script>
注意:readerAsDataURL()阅读文件的路径。读完url的结果保存在reader.result中。
(3)修改img的src属性,src=文件对象的路径
<script>
// 头像预览
$("#avatar").change(function () { // change方法,当输入域发生变化时改变其颜色(在这里是上传图片时触发)
// 获取用户选中的文件对象
var file_obj = $(this)[0].files[0];
// 获取文件对象路径
var reader = new FileReader();
reader.readAsDataURL(file_obj);
// reader.result; // 读url的结果保存在result中
reader.οnlοad=function () { //
// 修改img的src属性,src=文件对象的路径
$("#avatar_img").attr("src", reader.result) // 等事件完成之后再执行
};
})
</script>
显示效果:
注意:
(1)window.onload()等DOM执行完后,再来执行内部的代码;
(2)reader.readAsDataURL();这个读取的时间比较长,同时,这个只是其中一个线程,如果直接执行
$("#avatar_img").attr("src", reader.result)
这个语句会与readAsDataURL方法并发执行,由于前面方法还没有完成,reader.result还只是一个空值。
(3)因此需要做一个load事件,等readAsDataURL读取完后再执行
$("#avatar_img").attr("src", reader.result)
三、错误信息展示——基于Ajax提交formdata数据
1、在register.html中编写注册提交事件(基于Ajax提交数据)
// 基于Ajax提交数据
$(".reg-btn").click(function () {
var formdata = new FormData();
formdata.append("user", $("#id_user").val());
formdata.append("pwd", $("#id_pwd").val());
formdata.append("re_pwd", $("#id_re_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",
contentType: false,
processData: false,
data: formdata, // 将formdata对象放在data里面发送
success:function (data) {
console.log(data)
}
})
注意:
1)给注册按钮绑定一个click事件;
2)由于上传的数据中包含一个图片文件,类型必须换为multipart/form-data格式,不再使用form-urlencoded 方式提交数据;
3)构建的formdata对象:
var formdata = new FormData();
4)给对象添加键值:
formdata.append("user", $("#id_user").val());
5)添加文件对象:
formdata.append("avatar", $("#avatar")[0].files[0]); // 拿到用户传递的文件对象
$("#avatar")[0]拿到的是DOM对象,$("#avatar")[0].files[0]得到用户选中的文件对象(jquery取上传文件固定语法 :$("#avatar")[0].files[0]);
6)基于Ajax文件上传,传formdata数据一定要写下面这两个参数:
contentType:false, // 在ajax这一层不做任何编码(不设置内容类型)
processData:false, // 在ajax这一层不做预处理(不处理数据)
7)要避免forbidden报错,需要添加csrf_token,查看模板中写入的{% csrf_token %}在页面中显示:
然后,添加csrf_token键值:
formdata.append("csrfmiddlewaretoken", $("[name='csrfmiddlewaretoken']").val());
2、在视图中处理Ajax请求
def register(request):
if request.is_ajax(): # 也可以使用 if request.method == "POST":
# 如果是一个Ajax请求
print(request.POST) # 所有提交的数据
form = UserForm(request.POST) # 创建UserForm对象,传入当前提交的字典
response = {"user": None, "msg": None}
if form.is_valid(): # form.is_valid是帮忙校验返回布尔值的,true或false(所有都通过才返回true)
# 类定义的字段全符合要求,返回true
response["user"] = form.cleaned_data.get("user")
else:
# 包含错误信息返回false
print(form.cleaned_data) # 字段值符合要求的放在cleaned_data
print(form.errors) # 字段不符合要求的对应的键作为键,错误信息作为值
response["msg"] = form.errors
return JsonResponse(response)
form = UserForm() # 实例化form对象
return render(request, "register.html", {"form": form}) # 注入要传入的是一个字典
在视图函数register中处理Ajax提交的请求需要注意的是:
1)formdata提交给register处理,即是post请求,又是ajax请求,因此可以用两种方式来获取;
2)form.is_valid是帮忙校验返回布尔值的,true或false(所有都通过才返回true);
展示效果如下所示:
3、基于Ajax提交formdata数据的优化
// 基于Ajax提交数据
$(".reg-btn").click(function () {
var formdata = new FormData();
var request_data = $("#form").serializeArray();
$.each(request_data, function (index, data) {
// 依次循环,每次的操作
formdata.append(data.name, data.value)
});
formdata.append("avatar", $("#avatar")[0].files[0]); // 拿到用户传递的文件对象
$.ajax({
url: "",
type: "post",
contentType: false,
processData: false,
data: formdata,
success:function (data) {
console.log(data)
}
})
})
控制台输出如下:
注意:
(1)jQuery ajax - serializeArray() 方法
serializeArray() 方法通过序列化表单值来创建对象数组(名称和值)。可以选择一个或多个表单元素(比如 input 及/或 textarea),或者 form 元素本身。
在register.html中给form元素添加id="form"。在登录按钮的点击事件中添加:
var ret = $("#form").serializeArray();
console.log(ret);
浏览器控制台输出如下:
打印出一个列表,列表中保存一个个object类型,每个object类型都有name和value.
(2)jqeury的遍历方法:.each()
each() 方法为每个匹配元素规定运行的函数。返回 false 可用于及早停止循环。
由于serializeArray()返回的是一个数组,因此这里each处理的request_data是一个数组。each方法会对数组中子元素的逐个进行fn函数调用,直至调用某个子元素返回的结果为false
$.each(request_data, function (index, data) {}在这里index表示数组当前下标,data则表示数组当前元素。
4、基于Ajax在注册页面显示错误信息
(1) 在register.html中添加注册失败信息<span>标签:
<form id="form">
{% csrf_token %}
{% for field in form %}
{# 一个个获取字段对象 #}
<div class="form-group">
<label for="{{ field.auto_id }}">{{ field.label }}</label>
{{ field }} <span class="error pull-right"></span>
</div>
{% endfor %}
......
<form>
(2)register.html中的注册点击事件ajax请求回调函数做如下处理
// 基于Ajax提交数据
$(".reg-btn").click(function () {
var formdata = new FormData();
var request_data = $("#form").serializeArray();
$.each(request_data, function (index, data) {
// 依次循环,每次的操作
formdata.append(data.name, data.value)
});
formdata.append("avatar", $("#avatar")[0].files[0]); // 拿到用户传递的文件对象
$.ajax({
url: "",
type: "post",
contentType: false,
processData: false,
data: formdata,
success:function (data) {
// console.log(data)
if (data.user){
// 注册成功
} else {
// 注册失败
console.log(data.msg);
$.each(data.msg, function (field, error_list) { // 键:每个字段字符串; 值:错误信息列表
console.log(field, error_list);
$("#id_"+field).next().html(error_list[0]);
})
}
}
})
})
注意:
1)在回调函数中处理注册信息,success:function(data){}中的data就是视图函数register中返回的response对象:
from django.http import JsonResponse
def register(request):
if request.is_ajax():
...
return JsonResponse(response)
字典放进去直接序列化,ajax拿到的就是对象,两边都不需要进行json的序列化与反序列化。
$.ajax({
url: "",
type: "post",
contentType: false,
processData: false,
data: formdata,
success:function (data) {
// console.log(data)
if (data.user){
// 注册成功
} else {
// 注册失败
console.log(data.msg);
}
}
})
在视图函数中,当校验成功时,会给字典response的键user赋值,否则仍为None。Ajax中依此判断注册是否成功。
2)当注册失败时,处理视图函数中返回的response的键msg的值(错误信息):
$.ajax({
url: "",
type: "post",
contentType: false,
processData: false,
data: formdata,
success:function (data) {
// console.log(data)
if (data.user){
// 注册成功
} else {
// 注册失败
console.log(data.msg);
$.each(data.msg, function (field, error_list) { // 键:每个字段字符串; 值:错误信息列表
console.log(field, error_list)
})
}
}
})
浏览器控制台输出如下:
3)由于错误字段的名字和input标签的id相同:可以用"id"和field拼接为id_user、id_re_pwd等input标签的id值。
又由于error_list是一个数组,且数组中保存的是一个字符串,因此只需要取数组的第一条记录即可:
$("#id_"+field).next().html(error_list[0]);
(3)给错误信息设置样式
<style>
#avatar_img {
margin-left: 20px;
}
#avatar {
display: none;
}
.error {
color: red;
}
</style>
显示效果如下:
(4)每次点击提交,在展示span标签的错误信息前,都应该将所有span标签清空一次
$.ajax({
url: "",
type: "post",
contentType: false,
processData: false,
data: formdata,
success:function (data) {
// console.log(data)
if (data.user){
// 注册成功
} else {
// 注册失败
console.log(data.msg);
// 清空错误信息
$("span.error").html("");
$.each(data.msg, function (field, error_list) { // 键:每个字段字符串; 值:错误信息列表
console.log(field, error_list);
$("#id_"+field).next().html(error_list[0]);
})
}
}
})
这样在第一次所有注册信息都错误,第二次注册填写的用户名正确时,就只会显示当前错误的提示了。
(5)进一步优化,让错误的注册信息的input标签边框变红
// 基于Ajax提交数据
$(".reg-btn").click(function () {
var formdata = new FormData();
var request_data = $("#form").serializeArray();
$.each(request_data, function (index, data) {
// 依次循环,每次的操作
formdata.append(data.name, data.value)
});
formdata.append("avatar", $("#avatar")[0].files[0]); // 拿到用户传递的文件对象
$.ajax({
url: "",
type: "post",
contentType: false,
processData: false,
data: formdata,
success:function (data) {
// console.log(data)
if (data.user){
// 注册成功
} else {
// 注册失败
console.log(data.msg);
// 清空错误信息
$("span.error").html("");
$(".form-group").removeClass("has-error");
// 展示此次提交的错误信息
$.each(data.msg, function (field, error_list) { // 键:每个字段字符串; 值:错误信息列表
console.log(field, error_list);
$("#id_"+field).next().html(error_list[0]);
$("#id_"+field).parent().addClass("has-error");
})
}
}
})
})
显示效果:
注意:
1)对input标签的父标签添加bootstrap的类has-error。
Bootstrap 对表单控件的校验状态,如 error、warning 和 success 状态,都定义了样式。使用时,添加 .has-warning
、.has-error
或 .has-success
类到这些控件的父元素即可。
2)清空错误信息时也需要同时清掉class = "form-group"的组件的表框变红样式
// 清空错误信息
$("span.error").html("");
$(".form-group").removeClass("has-error");
// 展示此次提交的错误信息
$.each(data.msg, function (field, error_list) { // 键:每个字段字符串; 值:错误信息列表
console.log(field, error_list);
$("#id_"+field).next().html(error_list[0]);
$("#id_"+field).parent().addClass("has-error");
})
5、forms组件的局部钩子和全局钩子校验
(1)首先代码解耦
创建/cnblog/blog/Myforms.py文件存放forms组件和钩子,并在views.py中引入forms
from blog.Myforms import UserForm
(2)应用引入widgets模块,配置修改forms类参数
在字段构造参数中设置"error_messages"修改字段错误提示消息
from django import forms
from django.forms import widgets
from blog.models import UserInfo
class UserForm(forms.Form):
user = forms.CharField(max_length=32,
error_messages={"required": "该字段不能为空"},
label="用户名",
widget=widgets.TextInput(attrs={"class": "form-control"},)
)
pwd = forms.CharField(max_length=32,
label="密码",
widget=widgets.PasswordInput(attrs={"class": "form-control"}, )
)
re_pwd = forms.CharField(max_length=32,
label="确认密码",
widget=widgets.PasswordInput(attrs={"class": "form-control"},)
)
email = forms.EmailField(max_length=32,
label="邮箱",
widget=widgets.EmailInput(attrs={"class": "form-control"},)
)
其中"requried"负责字段不能为空消息提示;"invalid"负责格式错误消息提示等.
(3)添加局部钩子,校验用户是否注册
from django import forms
from django.forms import widgets
from blog.models import UserInfo
from django.core.exceptions import ValidationError
class UserForm(forms.Form):
...
# 局部钩子
def clean_user(self):
val = self.cleaned_data.get("user")
user = UserInfo.objects.filter(username=val).first()
if not user:
return val
else:
raise ValidationError("该用户已注册!")
显示效果:
注意:
1)引入ValidationError模块
from django.core.exceptions import ValidationError
2)val = self.cleaned_data.get("user") 在用户输入的用户名不为空时,符合字段要求,因此添加在cleaned_data中,通过此方法可以拿到用户输入的用户名。
3)再根据这个用户名去数据库表blog_userinfo中查找相关用户:
user = UserInfo.objects.filter(username=val).first()
如果这个用户名不存在则通过校验,如果存在则通过ValidationError设置错误提示:
if not user:
return val
else:
raise ValidationError("该用户已注册!")
4)需要注意的是当检验通过时,需要返回的是用户输入的用户名而不是数据库中查找的记录,如果返回的值有问题,在生成用户记录时,往往会报ValueError: The given username must be set。这样的错误。
(4)添加全局钩子——检验两次密码不一致
from django import forms
from django.forms import widgets
from blog.models import UserInfo
from django.core.exceptions import ValidationError
class UserForm(forms.Form):
......
# 局部钩子
def clean_user(self):
user = self.cleaned_data.get("user")
user = UserInfo.objects.filter(username=user).first()
if not user:
return user
else:
raise ValidationError("该用户已注册!")
# 全局钩子
def clean(self):
pwd = self.cleaned_data.get("pwd")
re_pwd = self.cleaned_data.get("re_pwd")
if pwd and re_pwd:
# 如果两个都有值
if pwd == re_pwd:
# 验证成功
return self.cleaned_data
else:
# 验证失败
raise ValidationError("两次密码不一致!")
else:
# 如果任有一个没有值则不做处理
return self.cleaned_data
注意:
1)在register.html中ajax回调函数中,通过__all__取到全局错误信息:
$.ajax({
url: "",
type: "post",
contentType: false,
processData: false,
data: formdata,
success:function (data) {
// console.log(data)
if (data.user){
// 注册成功
} else {
// 注册失败
console.log(data.msg);
// 清空错误信息
$("span.error").html("");
$(".form-group").removeClass("has-error");
// 展示此次提交的错误信息
$.each(data.msg, function (field, error_list) { // 键:每个字段字符串; 值:错误信息列表
console.log(field, error_list);
if (field == "__all__"){
// 全局错误信息
$("#id_re_pwd").next().html(error_list[0]).parent().addClass("has-error");
}
$("#id_"+field).next().html(error_list[0]);
$("#id_"+field).parent().addClass("has-error");
})
}
}
})
查看页面信息:
2)如上所示在找到field=="__all__"的情况下,在id=“id_re_pwd”的input标签的下一个兄弟标签即span标签中填写错误信息,并在input的标签的父标签div中添加类has_error,修改input标签的显示样式。
if (field == "__all__"){
// 全局错误信息
$("#id_re_pwd").next().html(error_list[0]).parent().addClass("has-error");
}
3)当两个密码都有输入时,验证两个密码是否一致;当两个密码任有一个没输入则不做处理
if pwd and re_pwd:
# 如果两个都有值
if pwd == re_pwd:
# 验证成功
return self.cleaned_data
else:
# 验证失败
raise ValidationError("两次密码不一致!")
else:
# 如果任有一个没有值则不做处理
return self.cleaned_data
显示效果:
四、数据校验通过——FileField字段处理
1、在register.html的ajax回调函数中注册成功时跳转到登录页面登录
$.ajax({
url: "",
type: "post",
contentType: false,
processData: false,
data: formdata,
success:function (data) {
// console.log(data)
if (data.user){
// 注册成功,跳转登录页面
location.href = "/login/"
} else {
// 注册失败
console.log(data.msg);
// 清空错误信息
$("span.error").html("");
$(".form-group").removeClass("has-error");
// 展示此次提交的错误信息
$.each(data.msg, function (field, error_list) { // 键:每个字段字符串; 值:错误信息列表
console.log(field, error_list);
if (field == "__all__"){
// 全局错误信息
$("#id_re_pwd").next().html(error_list[0]).parent().addClass("has-error");
}
$("#id_"+field).next().html(error_list[0]);
$("#id_"+field).parent().addClass("has-error");
})
}
}
})
2、在视图函数register中处理校验通过后,用户注册操作
from blog.Myforms import UserForm
from blog.models import UserInfo
def register(request):
if request.is_ajax(): # 也可以使用 if request.method == "POST":
# 如果是一个Ajax请求
print(request.POST) # 所有提交的数据
form = UserForm(request.POST) # 创建UserForm对象,传入当前提交的字典
response = {"user": None, "msg": None}
if form.is_valid(): # form.is_valid是帮忙校验返回布尔值的,true或false(所有都通过才返回true)
# 类定义的字段全符合要求,返回true
response["user"] = form.cleaned_data.get("user")
# 生成一条用户记录
user = form.cleaned_data.get("user")
pwd = form.cleaned_data.get("pwd")
email = form.cleaned_data.get("email")
avatar_obj = request.FILES.get("avatar")
user_obj = UserInfo.objects.create_user(username=user, password=pwd, email=email, avatar=avatar_obj) # 用户认证组件使用create_user辅助函数创建用户
else:
# 包含错误信息返回false
print(form.cleaned_data) # 字段值符合要求的放在cleaned_data
print(form.errors) # 字段不符合要求的对应的键作为键,错误信息作为值
response["msg"] = form.errors
return JsonResponse(response)
form = UserForm() # 实例化form对象
return render(request, "register.html", {"form": form}) # 注入要传入的是一个字典
注意:
(1)需要在视图中引入模型
from blog.models import UserInfo
(2)form.cleaned_data:字段值符合要求的放在cleaned_data中。字典数据类型。由于校验通过,所以用户名、密码、邮箱信息都可以用如下方法拿到:
# 生成一条用户记录
user = form.cleaned_data.get("user")
pwd = form.cleaned_data.get("pwd")
email = form.cleaned_data.get("email")
(3)django操作models.FileField数据类型:
class UserInfo(AbstractUser):
......
avatar = models.FileField(upload_to='avatars/', default="/avatars/default.png") # 该字段存放每个用户的头像文件
def __str__(self):
return self.username
FileField与ImageField用法类似,FileField这个字段一定要接受一个文件对象;ImageField一定要接受一个图片对象。
接受文件对象,django会做的事情:默认下载文件到项目的根目录;设置upload_to字段后,会下载到项目根目录的avatars目录下(没有该目录则创建一个)。
user_obj的avatar存的是文件的相对路径
(4)用户认证组件使用create_user辅助函数创建用户
user_obj = UserInfo.objects.create_user(username=user, password=pwd, email=email, avatar=avatar_obj)
3、注册验证
(1)注册完成后页面跳转到登录页面
(2)数据库的blog_userinfo表产生一条新的用户数据,且avatar保存的确实是文件的相对路径
(3)设置upload_to字段后,会下载到项目根目录的avatars目录下,没有提前创建目录的情况下会自动创建:
五、media配置——MEDIA_ROOT
1、Django静态文件区分
Django有两种静态文件:
/static/:服务器自己用到的文件,如:js,css,img
/media/:用户上传的文件
2、在settings.py中配置MEDIA_ROOT
MEDIA_ROOT = os.path.join(BASE_DIR, "media")
一旦配置了MEDIA_ROOT,Django会将文件对象下载到MEDIA_ROOT中的avatar目录中。如果没有avatar文件夹,Django也会自动创建,user_obj的avatar存的是文件对象。
3、注册一个新用户项目效果
4、media配置的用处
在使用FileFIeld或者ImageField时,上传实例化的对象,所有上传的文件都会放在media/"定义的文件夹名称"/,与服务器的文件分开,耦合性非常好!
5、根据头像上传不同情况生成用户对象
(1)在注册时,考虑到有的人没有上传头像,可以做如下处理
首先将default.png拷到/media/avatars/目录下,
然后修改register视图函数在生成用户记录时做如下判定:
# 生成一条用户记录
user = form.cleaned_data.get("user")
pwd = form.cleaned_data.get("pwd")
email = form.cleaned_data.get("email")
avatar_obj = request.FILES.get("avatar")
if avatar_obj:
# 如果上传了头像,即有值
# 用户认证组件使用create_user辅助函数创建用户
user_obj = UserInfo.objects.create_user(username=user, password=pwd, email=email, avatar=avatar_obj)
else:
# 如果没有传头像,就用默认的default.png
user_obj = UserInfo.objects.create_user(username=user, password=pwd, email=email)
(2)生成用户对象代码优化
from blog.Myforms import UserForm
from blog.models import UserInfo
def register(request):
if request.is_ajax(): # 也可以使用 if request.method == "POST":
# 如果是一个Ajax请求
print(request.POST) # 所有提交的数据
form = UserForm(request.POST) # 创建UserForm对象,传入当前提交的字典
response = {"user": None, "msg": None}
if form.is_valid(): # form.is_valid是帮忙校验返回布尔值的,true或false(所有都通过才返回true)
# 类定义的字段全符合要求,返回true
response["user"] = form.cleaned_data.get("user")
# 生成一条用户记录
user = form.cleaned_data.get("user")
pwd = form.cleaned_data.get("pwd")
email = form.cleaned_data.get("email")
avatar_obj = request.FILES.get("avatar")
extra = {} # 空字典
if avatar_obj:
extra["avatar"] = avatar_obj # 传值进空字典
UserInfo.objects.create_user(username=user, password=pwd, email=email, **extra) # **extra代表额外的参数
"""
if avatar_obj:
# 如果上传了头像,即有值
# 用户认证组件使用create_user辅助函数创建用户
user_obj = UserInfo.objects.create_user(username=user, password=pwd, email=email, avatar=avatar_obj)
else:
# 如果没有传头像,就用默认的default.png
user_obj = UserInfo.objects.create_user(username=user, password=pwd, email=email)
"""
else:
# 包含错误信息返回false
print(form.cleaned_data) # 字段值符合要求的放在cleaned_data
print(form.errors) # 字段不符合要求的对应的键作为键,错误信息作为值
response["msg"] = form.errors
return JsonResponse(response)
form = UserForm() # 实例化form对象
return render(request, "register.html", {"form": form}) # 注入要传入的是一个字典
注意:
1)create_user方法的源代码如下:
def create_user(self, username, email=None, password=None, **extra_fields):
extra_fields.setdefault('is_staff', False)
extra_fields.setdefault('is_superuser', False)
return self._create_user(username, email, password, **extra_fields)
说明额外的参数通过键值对的方式传入即可。因此创建空字典extra。
2)由于user_obj并没有用到,因此删除这个赋值。
六、MEDIA配置——MEDIA_URL
客户端浏览器可以访问到static下的数据,但如何能直接访问到media中的数据。
1、在settings.py中配置一个MEDIA_URL
MEDIA_URL = "/media/"
2、在路由控制中添加media配置
from django.contrib import admin
from django.urls import path,re_path
from django.views.static import serve
from blog import views
from cnblog import settings
urlpatterns = [
path('admin/', admin.site.urls),
path('login/', views.login),
path('index/', views.index),
path('get_validCode_img/', views.get_validCode_img),
path('register/', views.register),
# media配置
# 匹配以media开头的任意路径
re_path(r"media/(?P<path>.*)$", serve, {"document_root": settings.MEDIA_ROOT})
]
3、显示效果
七、代码格式规范
1、导包规范
导入的包排列顺序是:python标准库、第三方插件的包、自己定义的包。
2、在代码中去除print
变量解释可以放在函数下注释来描述:
3、遵循PEP8 Python 编码规范
option+command+L,Python编辑器自动规范代码。