Django基础篇：sweetalert弹窗、JsonResponse、批量操作数据、分页器、forms组件
2022.5.20 django自带序列化组件、批量数据操作、分页器、forms组件
- sweetalert前端插件
- django自带的序列化组件
- 批量数据操作
- 分页器推导流程
- Forms组件
一、sweetalert前端插件
下载地址：
https://github.com/lipis/bootstrap-sweetalert
简介：
# 可用cdn:
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
# 配置及方法
https://sweetalert.js.org/docs/
# 关键字
swal() # 唤起弹窗关键字，可绑定点击事件
传参方式1：
swal("标题文本","正常文本","模态图标")
eg：
swal("title","text","success")
传参方式2：
swal({
title:"标题文本",
text:"正常文本",
icon:"success",
})
# 主要参数
1.text文本
text:"字符串类型的文本"
eg：
swal({
text: "Hello world!",
});
2.title标题
title:"标题文本"
eg：
swal({
title: "Here's a title!",
});
icon:"warning/error/success/info" # 四个内置图标
eg：
swal({
icon: "success",
});
3.button单选按钮
button:{
text: "OK", # 按钮文字
value: true,
visible: true, # 为true时显示按钮，为false时隐藏
className: "", # 类名
closeModal: true,
} # 按钮设置
button:"按钮名称" # 可以直接创造一个按钮
eg：
swal({
button: "Coolio",
}); # 直接设置一个按钮
swal({
button: {
text: "Hey ho!",
...
},
}); # 按钮设置
4.buttons多选按钮
buttons:{
cancel: {
text: "Cancel",
value: null,
visible: false,
className: "",
closeModal: true,
}, # cancel按钮设置
confirm: {
text: "OK",
value: true,
visible: true,
className: "",
closeModal: true
} # confirm按钮设置
}
eg：
swal({
buttons: ["Stop", "Do it!"],
}); # 直接设置取消和确定按钮
swal({
buttons: [true, "Do it!"],
}); # 直接设置取消和确定按钮
swal("Hello world!", {
buttons: false,
}); # 直接隐藏按钮
swal({
buttons: {
cancel: true, # 取消按钮
confirm: true, # 确认按钮
},
}); # 对按钮进行设置
swal({
buttons: {
cancel: true,
confirm: "Confirm",
roll: {
text: "Do a barrell roll!",
value: "roll",
},
},
}); # 设置三个按钮
5.content自定义文本或图标
eg：
swal({
content: "input",
}); # 自定义文本，输入框
swal({
content: {
element: "input",
attributes: {
placeholder: "Type your password",
type: "password",
},
},
}); # 自定义文本及文本类型，输入框
var slider = document.createElement("input");
slider.type = "range";
swal({
content: slider,
}); # 自定义图标
6.classname类名
className:"red-bg"
eg：
swal("Hello world!", {
className: "red-bg",
}); # 自定义类，可以改变外观
closeOnClickOutside
eg：
swal({
closeOnClickOutside: false,
});
# 决定用户是否可以通过在模态外面点击来关闭它
7.closeOnEsc, Esc键退出
closeOnEsc:true
eg：
swal({
closeOnEsc: false,
}); # 决定用户是否可以通过按ESC键来解除模式
8.dangerMode设置危险操作按钮
dangerMode:true
eg：
swal("Are you sure?", {
dangerMode: true,
buttons: true,
});
# 如果设置为true，确认按钮将变为红色，而默认焦点将设置在取消按钮上。 当确认操作是危险的(例如删除一个项目)时，这是很方便的。
9.timer计时关闭模态框
timer:3000 # 单位毫秒
eg：
swal("This modal will disappear soon!", {
buttons: false,
timer: 3000, # 3秒后关闭
});
# 在一定时间(以毫秒为单位)后关闭模态，与按钮组合有用button:false
# 主要方法及主题等见配置网址
https://sweetalert.js.org/docs/
版本介绍：
# sweetalert2.x
为了使库更容易使用和更灵活，引入了一些重要的突破性更改。
最重要的变化是回调函数已经弃用，取而代之的是promise，并且你不再需要导入任何外部CSS文件(因为样式现在被绑定在。js文件中)。
下面是一些已弃用得和替代选项：
When using a single string parameter (e.g. swal("Hello world!")), that parameter will be the modal's text instead of its title.
type and imageUrl have been replaced with a single icon option. If you're using the shorthand version (swal("Hi", "Hello world", "warning")) you don't have to change anything.
customClass is now className.
imageSize is no longer used. Instead, you should specify dimension restrictions in CSS if necessary. If you have a special use case, you can give your modal a custom class.
showCancelButton and showConfirmButton are no longer needed. Instead, you can set buttons: true to show both buttons, or buttons: false to hide all buttons. By default, only the confirm button is shown.
confirmButtonText and cancelButtonText are no longer needed. Instead, you can set button: "foo" to set the text on the confirm button to "foo", or buttons: ["foo", "bar"] to set the text on the cancel button to "foo" and the text on the confirm button to "bar".
confirmButtonColor is no longer used. Instead, you should specify all stylistic changes through CSS. As a useful shorthand, you can set dangerMode: true to make the confirm button red. Otherwise, you can specify a class in the button object.
closeOnConfirm and closeOnCancel are no longer used. Instead, you can set the closeModal parameter in the button options.
showLoaderOnConfirm is no longer necessary. Your button will automatically show a loding animation when its closeModal parameter is set to false.
animation has been deprecated. All stylistic changes can instead be applied through CSS and a custom modal class.
type: "input", inputType, inputValue and inputPlaceholder have all been replaced with the content option. You can either specify content: "input" to get the default options, or you can customize it further using the content object.
html is no longer used. Instead use the content object.
allowEscapeKey is now closeOnEsc for clarity.
allowClickOutside is now closeOnClickOutside for clarity.
当使用单个字符串参数(例如swal("Hello world!"))时，该参数将是模态的文本而不是它的标题。
type和imageUrl已被替换为单个图标选项。 如果你使用的是简写版本(swal("Hi"， "Hello world"， "warning"))，你不需要改变任何东西。
customClass现在是className。
不再使用imageSize。 相反，如果需要，应该在CSS中指定维度限制。 如果你有一个特殊的用例，你可以给你的模态一个自定义类。
不再需要showCancelButton和showConfirmButton。 相反，你可以设置buttons: true来同时显示两个按钮，或者buttons: false来隐藏所有的按钮。 默认情况下，只显示确认按钮。
不再需要confirmButtonText和cancelButtonText。 你可以设置按钮:“foo”，将确认按钮上的文字设置为“foo”，或者设置按钮:[“foo”，“bar”]，将取消按钮上的文字设置为“foo”，将确认按钮上的文字设置为“bar”。
不再使用confirmButtonColor。 相反，您应该通过CSS指定所有的样式更改。 作为一个有用的简写，您可以将dangerMode: true设置为红色。 否则，您可以在按钮对象中指定一个类。
closeOnConfirm和closeOnCancel不再使用。 相反，您可以在按钮选项中设置clomodal参数。
不再需要showLoaderOnConfirm。 当按钮的closeModal参数设置为false时，按钮将自动显示一个加载动画。
动画已被弃用。 所有的样式变化都可以通过CSS和一个定制的模态类来替代。
type: "input"， inputType, inputValue和inputPlaceholder都被替换为content选项。 您可以指定内容:“input”以获得默认选项，也可以使用内容对象进一步定制它。
HTML不再使用。 而是使用内容对象。
为了清晰起见，allowEscapeKey现在是closeOnEsc。
为了清晰起见，allowClickOutside现在是closeOnClickOutside。
二、django自带的序列化组件
"""
以后我们用的序列化组件是DRF 这里学自带的是提前看一眼效果
"""
1.使用JsonResponse序列化
from app01 import models
from django.http import JsonResponse
def d_data(request):
# 前后端分离之后 django orm产生的queryset无法直接被前端识别 还是需要json格式数据(硬通货)
data_list = [] # [{}, {}, {}] 存储格式为列表套字典
user_queryset = models.User.objects.all()
for user_obj in user_queryset: # for循环queryset获取每个对象，将数据添加到datalist
data_list.append({
'pk':user_obj.pk,
'name':user_obj.name,
'age':user_obj.age,
'gender':user_obj.gender,
'gender_real':user_obj.get_gender_display(),
'addr':user_obj.addr
})
return JsonResponse(data_list,safe=False) # 使用JsonResponse将datalist序列化返回前端
2.django自带的序列化组件：serializers
from app01 import models
from django.core import serializers
def d_data(request):
user_queryset = models.User.objects.all() # 先获取queryset，即所有记录对象
ret = serializers.serialize('json', user_queryset) # 左边参数是json格式，右边参数是queryset对象
return HttpResponse(ret) # 返回json对象到前端
三、批量数据操作
def many_data(request):
'''普通批量插入：create'''
# 循环插入10万条数据(频繁走数据库操作 效率极低 不推荐!!!)
# for i in range(100000):
# models.Book.objects.create(title=f'第{i}本书')
'''批量快速插入：bulk_create'''
book_list = [] # 空列表用于存储批量数据
for i in range(100000):
# 先用类产生一个对象
source_book_obj = models.Books(title=f'第{i}本书')
# 将对象追加到列表中
book_list.append(source_book_obj)
models.Books.objects.bulk_create(book_list) # 批量插入
book_queryset = models.Books.objects.all()
return render(request,'many_data.html',locals())
四、分页器推导流程
"""
django本身也自带了一个分页器 只是不好用 所以我们自己写!!!
"""
# 总体思路
1.all()结果集支持正数的索引切片
2.分页相关参数数学关系
3.后端渲染前端分页代码
4.后端限制分页展示数量
5.当页面小于6或者大于
# 手写分页器
def many_data(request):
# 批量插入数据
book_list = []
for i in range(100000):
source_book_obj = models.Books(title=f'第{i}本书')
book_list.append(source_book_obj)
models.Books.objects.bulk_create(book_list)
data_queryset = models.Books.objects.all()
# 获取用户想要查看的页码
current_page_num = request.GET.get('page') # 后面都是基于当前页做的判断
try:
current_page_num = int(current_page_num)
except Exception:
current_page_num = 1
# 每页展示几条数据
per_page_num = 10
# 起始位置
start_num = (current_page_num - 1) * per_page_num
# 终止位置
stop_num = current_page_num * per_page_num
# 前端渲染的页码数量 应该跟总数据相关 不是写死的
# 渲染的页码数量不能太多 应该限制死 之后动态变化 展示几个即可
show_num = 11
all_count = data_queryset.count()
# 判断总页数
page_num, more = divmod(all_count, per_page_num) # 整除，取余
if more:
page_num += 1
# 获取展示给前端的页码范围，并将网址格式化输出到前端
html = ''
xxx = current_page_num
if current_page_num < 6: # 当前页码不能小于6，防止首页为负数
xxx = 6
for i in range(xxx-5,xxx+6):
if current_page_num == i:
html += '<li class="active"><a href="?page=%s">%s</a></li>'%(i,i)
else:
html += '<li><a href="?page=%s">%s</a></li>'%(i,i) # html相当于后端写前端代码，拿到前端展示
book_queryset = data_queryset[start_num:stop_num] # 前端展示的数据对象
return render(request,'many_data.html',locals())
# 基于当前页的数学公式分析
"""
per_page_num = 10
current_page_num start_num stop_num
1 0 10
2 10 20
3 20 30
per_page_num = 5
current_page_num start_num stop_num
1 0 5
2 5 10
3 10 15
start_num = (current_page_num - 1) * per_page_num
end_num = current_page_num * per_page_num
"""
封装好的自定义分页器
from utils import mypage
book_queryset = models.Books.objects.all()
# 产生分页器对象
page_obj = mypage.Pagination(current_page=request.GET.get('page'),all_count=book_queryset.count()) # 左边参数是当前页数，右边参数是总页数
# 产生分页数据对象
page_queryset = book_queryset[page_obj.start:page_obj.end]
return render(request,'many_data.html',locals())
# 前端代码
{% for book_obj in page_queryset %}
<p>{{ book_obj.title }}</p>
{% endfor %}
{{ page_obj.page_html|safe }}
参考博客:https://www.cnblogs.com/Dominic-Ji/articles/12035722.html
五、Forms组件
引入：
# 前戏
编写一个校验用户名和密码是否合法的功能
前端需要自己编写获取用户数据的各种标签
前端需要自己想方设法的展示错误的提示信息
后端需要自己想方设法的编写校验代码(很多if判断)
# form组件
上面的三件事有一个人可以一次性帮你搞定>>>:form组件
1.数据校验
2.标签渲染
3.展示信息
# 编写校验性组件forms类
from django import forms
class MyForm(forms.Form):
# 用户名至少三个字符最多八个字符
username = forms.CharField(min_length=3,max_length=8,label='用户名',
error_messages={
'min_length':'用户名最短3位',
'max_length':'用户名最长8位',
'required':'用户名必填'
}
)
# 年龄最小不能小于0 最大不能超过150
age = forms.IntegerField(min_value=0,max_value=150,label='年龄')
# 邮箱必须符合邮箱格式(@关键符号)
email = forms.EmailField(label='邮箱') # required=False 该字段可以不传值
1、校验数据
from app01 import views
# 1.将数据传入实例化对象
form_obj =MyForm({'username':'jason','age':18,'email':'123qq'})
# 2.查看数据是否合法(全部合法结果才是True)
form_obj.is_valid()
# 3.查看不符合条件的数据及原因
form_obj.errors
# {'email': ['Enter a valid email address.']}
# 4.查看符合条件的数据
form_obj.cleaned_data
# {'username': 'jason', 'age': 18}
"""
（1）forms类中所有的字段数据默认都是必填的，不能少；
如果想忽略某些字段，可以添加：required=False；
（2）forms类中额外传入的字段数据不会做任何的校验，直接忽略；
"""
2、渲染标签
渲染方式1:
封装程度高 扩展性较差 主要用于快速生成页面测试功能
{{ form_obj.as_p }} # 纵向展示
{{ form_obj.as_table }} # 横向展示
{{ form_obj.as_ul }} # 标签点展示
渲染方式2:
封装程度低 扩展性较好 但是字段比较多的情况下不方便
{{ form_obj.username.label }} # label为文本提示，字段名设置的默认名字
{{ form_obj.username }} # 获取用户数据的标签
渲染方式3:
推荐使用!!!
{% for form in form_obj %}
<p>
{{ form.label }}
{{ form }}
</p>
{% endfor %}
"""
forms组件只负责渲染获取用户数据的标签；
form表单标签和提交按钮需要自己写；
渲染标签中文提示，可以使用参数，label指定，不指定默认使用字段名首字母大写；
"""
3、展示信息
"""
forms类中填写的校验性参数前端浏览器会识别并添加校验操作；
但是前端的校验是可有可无的 不能指望它!!! 后端必须要有
"""
# form表单可以取消浏览器自动添加校验功能的操作
<form action="" method="post" novalidate></form>
{% for form in form_obj %}
<p>
{{ form.label }}
{{ form }}
<span style="color: red">{{ form.errors.0 }}</span>
</p>
{% endfor %}
<input type="submit">
</form>
提示信息可以自定义
username = forms.CharField(min_length=3,max_length=8,label='用户名',
error_messages={
'min_length':'用户名最短3位',
'max_length':'用户名最长8位',
'required':'用户名必填'
})
浙公网安备 33010602011771号