文章目录
一、flask中的分页
1. flask中分页的介绍
flask不像Django中有封装好的方法Paginator；在Django中可以直接拿来使用，在flask中要自己封装分页器
2. 封装分页器
# Paginator(data,10) 将data数据进行分页， 每页10条
class Pager:
"""
flask通过limit offset 对数据进行分页，但在分页器中却不能这样使用
User.query.offset(2).limit(10).all() ## offset 和limit的用法，我们传进来的数据是一个列表，并不能这样使用
切片
提供的功能
"""
#### params = User.query
### data = 列表
def __init__(self,data,page_size):
"""
:param data: 数据
:param page_size: 每页的条数
"""
self.data = data ### 数据
self.page_size = page_size ### 每页条数
self.is_start = False
self.is_end = False
self.page_count = len(data) ## 总条数
self.previous_page = 0 ####上一页
self.next_page = 0 ##### 下一页
self.page_number = self.page_count / self.page_size ### 总共的页数 len(data) / page_size
if self.page_number == int(self.page_number):
self.page_number = int(self.page_number)
else:
self.page_number = int(self.page_number) + 1
self.page_range =( x for x in range(1,self.page_number + 1)) ## 迭代器 1 2 3 4 5 6 7 8 9 10
def page_data(self,page):
"""
page offset limit 每页10条
1 0 10
2 10 10
切片 start end
1 0 10 (page-1)* 10
2 10 20
3 20 30
:return: 返回分页的数据
"""
# result = self.data.offset().limit().all()
page_start = (page -1) * self.page_size### 切片开始的位置
page_end = page * self.page_size ## 切片结束的位置
result = self.data[page_start:page_end]
print (page)
if page == 1:
print ("--------------")
self.is_start = True
if page == self.page_number:
self.is_end = True
self.next_page = page + 1 ## 下一页
self.previous_page = page - 1 ##上一页
return result
3. 分页方法的使用
if __name__ == '__main__':
while True:
page = int(input(">>>>"))
params = Leave.query.all() ## 列表
pager = Pager(params,10)
result = pager.page_data(page)
print (result)
print(pager.page_size) ### 每页的条数
# print(pager.data) ### 全部数据
print(pager.page_number) ### 最大页数
print(list(pager.page_range)) ## 页数范围
print(pager.page_count) ## 数据总条数
print(pager.is_end) ### 是否是尾页
print(pager.is_start) ### 是否首页
print(pager.next_page) ### 下一页
print(pager.previous_page) ### 上一页
4. 视图页调用分页器进行分页
5. 模板中使用返回的数据
<ul class="pagination" style="float: right;">
{% if not pager.is_start %}
<li class="paginate_button page-item previous">
<a href="/leave_all_list/{{ pager.previous_page }}/" class="page-link">上一页</a>
</li>
{% endif %}
{% for p in pager.page_range %}
{% if p == page %}
<li class="paginate_button page-item previous active">
<a href="/leave_all_list/{{ p }}/" class="page-link">{{ p }}</a>
</li>
{% else %}
<li class="paginate_button page-item previous">
<a href="/leave_all_list/{{ p }}/" class="page-link">{{ p }}</a>
</li>
{% endif %}
{% endfor %}
{% if not pager.is_end %}
<li class="paginate_button page-item previous">
<a href="/leave_all_list/{{ pager.next_page }}/" class="page-link">下一页</a>
</li>
{% endif %}
</ul>
6. 在当前页面显示固定的页数的方法
在视图函数中先定义好page_range（可迭代的页数），再在模板中使用
current_page = page # 获取当前页码
start = current_page - 3 # 使遍历的起始页面固定在当前页面前面第三个4---->1
if start < 1: # 在起始页面小于1时，变0
start = 0
end = current_page + 2 # 终止页面加2 如4 ----> 5
if end > paginator.page_number: # 终止页面大于当前页面变为当前页面
end = paginator.page_number
if start == 0: # 起始页面为0,终止页面加5
end = 5
if end == paginator.page_number: # 终止页面为当前页面，起始页面加5
start = paginator.page_number - 5
if end == paginator.page_number - 1: # 终止页面为当前页面前一个页面时起始页面减4
start = paginator.page_number - 4
page_range = list(paginator.page_range)[start:end]
模板中调用page_range
效果：
二、sys模块的使用（添加路径）
import sys
import os
sys.path.insert(0,os.path.dirname(os.path.abspath(os.path.dirname(__file__))))
三、撤销功能
- 模板：
{% block script %}
<script>
$(".chexiao").each(
function () {
$(this).click(
function () {
var id = $(this).attr("cx_id");
$.ajax(
{
url:"/chexiao/",
type:"post",
data:{"id":id},
success:function (data) {
console.log(data);
alert(data["msg"]);
window.location.reload(); // 重新加载
},
error:function (error) {
console.log(error)
}
}
)
}
)
}
)
</script>
前端中获取cx_id的值
var id = $(this).attr("cx_id");
前端中重新加载到当前页
window.location.reload(); // 重新加载
- 视图
四、表单插件 flask-wtf
django中学过csrf，django中间件 中已经写好了，flask中csrf嵌在表单后端校验（form表单类),叫flask-wtf
我们需要下载安装 插件
pip install flask-wtf
表单校验方式：
- 前端校验
- 对页面上数据进行校验，校验的字符串的长度，类型，是否为空，字段约束
- 后端校验
- 校验用户是否存在，校验数据的（敏感字（admin））
1. form表单类前端校验
① 定义form模型
② 视图返回实例对象
导入类并实例化
③ 前端调用
{% extends "base.html" %}
{% block label %}
任务发布
{% endblock %}
{% block content %}
<p>
{{ task.name.label }}:
{{ task.name }}
</p>
<p>
{{ task.description.label }}:
{{ task.description }}
</p>
<p>
{{ task.time.label }}:
{{ task.time }}
</p>
<p>
{{ task.public.label }}:
{{ task.public }}
</p>
{% endblock %}
④ 修改form前端样式
- 修改form.py中字段在html中显示的样式
- 优化前端模板
- 修改后样式
flask的form表单默认携带了csrf_token,但是进行post请求的时候此时不进行csrf_token校验
⑤ form 表单常用的前端校验的规则
⑥ 在视图中看到检验结果需要添加
- 前端校验的一些用法
- 使用验证器需要导包
设置的验证器属性from wtforms import validators
一些效果：
2. form表单后端校验（自定义校验）
① 定义函数
- 定义规则
- 使用需要导包，抛出错误警告
- 如果数据中有任何已经定义好的敏感字都会抛出验证器警告
② 调用函数（安装）
③ 完善视图和模板
- 视图
- 模板
五、jQuery属性操作,加载页面
① jQuery属性操作之attr
-
定义和用法：
-
attr() 方法设置或返回被选元素的属性值。
-
根据该方法不同的参数，其工作方式也有所差异。
-
-
前端中获取cx_id的值 （获取属性值）
var id = $(this).attr("cx_id"); -
改变图像的 width 属性（改变属性值）
$("button").click(function(){ $("img").attr("width","180"); });
② 前端中重新加载页面
-
前端中重新加载到当前页
window.location.reload(); // 重新加载 -
前端中加载到指定url
window.location.href=url;
