【Flask使用】全知识md文档，4大部分60页第3篇：Flask模板使用和案例

本文的主要内容：flask视图&路由、虚拟环境安装、路由各种定义、状态保持、cookie、session、模板基本使用、过滤器&自定义过滤器、模板代码复用：宏、继承/包含、模板中特有变量和函数、Flask-WTF 表单、CSRF、数据库操作、ORM、Flask-SQLAlchemy、增删改查操作、案例、蓝图、单元测试

全套Flask笔记直接地址： 请移步这里

共 4 章，42 子模块

模板

  • 基本使用
  • 过滤器&自定义过滤器
  • 控制代码块
  • 宏、继承、包含
  • Flask 的模板中特有变量和方法
  • web表单
  • CSRF

学习目标

  • 能够写出 jinja2 中变量代码块和控制代码块的格式
  • 能够写出在模板中字典，列表的取值方式
  • 能够写出数组反转的自定义过滤器（使用1种方式即可）
  • 能够说出Flask中模板代码复用的三种方式
  • 能够使用代码实现模板继承的功能
  • 能够说出可以在模板中直接使用的 Flask 变量和函数
  • 能够使用 Flask-WTF 扩展实现注册表单
  • 能够说出 CSRF 攻击的原理

模板的使用

  • 在项目下创建 templates 文件夹，用于存放所有的模板文件，并在目录下创建一个模板html文件 temp_demo1.html
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
我的模板html内容
</body>
</html>
  • 设置 templates 文件夹属性以便能够在代码中有智能提示

  • 设置 html 中的模板语言，以便在 html 有智能提示

  • 创建视图函数，将该模板内容进行渲染返回
@app.route('/')
def index():return render_template('temp_demo1.html')

访问：http://127.0.0.1:5000/ 运行测试

  • 代码中传入字符串，列表，字典到模板中
@app.route('/')
def index():# 往模板中传入的数据my_str = 'Hello 黑马程序员'my_int = 10my_array = [3, 4, 2, 1, 7, 9]my_dict = {'name': 'xiaoming','age': 18}return render_template('temp_demo1.html',my_str=my_str,my_int=my_int,my_array=my_array,my_dict=my_dict)
  • 模板中代码
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
我的模板html内容
<br/>{{ my_str }}
<br/>{{ my_int }}
<br/>{{ my_array }}
<br/>{{ my_dict }}</body>
</html>
  • 运行效果

我的模板html内容
Hello 黑马程序员
10
[3, 4, 2, 1, 7, 9]
{‘name’: ‘xiaoming’, ‘age’: 18}Code injected by live-server

  • 相关运算，取值
<br/> my_int + 10 的和为：{{ my_int + 10 }}
<br/> my_int + my_array第0个值的和为：{{ my_int + my_array[0] }}
<br/> my_array 第0个值为：{{ my_array[0] }}
<br/> my_array 第1个值为：{{ my_array.1 }}
<br/> my_dict 中 name 的值为：{{ my_dict['name'] }}
<br/> my_dict 中 age 的值为：{{ my_dict.age }}
  • 结果
my_int + 10 的和为：20 
my_int + my_array第0个值的和为：13 
my_array 第0个值为：3 
my_array 第1个值为：4 
my_dict 中 name 的值为：xiaoming 
my_dict 中 age 的值为：18

过滤器

过滤器的本质就是函数。有时候我们不仅仅只是需要输出变量的值，我们还需要修改变量的显示，甚至格式化、运算等等，而在模板中是不能直接调用 Python 中的某些方法，那么这就用到了过滤器。

使用方式：

  • 过滤器的使用方式为：变量名 | 过滤器。
{{variable | filter_name(*args)}}
  • 如果没有任何参数传给过滤器,则可以把括号省略掉
{{variable | filter_name}}
  • 如：``，这个过滤器的作用：把变量variable 的值的首字母转换为大写，其他字母转换为小写

链式调用

在 jinja2 中，过滤器是可以支持链式调用的，示例如下：

{{ "hello world" | reverse | upper }}

常见内建过滤器

字符串操作

  • safe：禁用转义
<p>{{ '<em>hello</em>' | safe }}</p>
  • capitalize：把变量值的首字母转成大写，其余字母转小写
<p>{{ 'hello' | capitalize }}</p>
  • lower：把值转成小写
<p>{{ 'HELLO' | lower }}</p>
  • upper：把值转成大写
<p>{{ 'hello' | upper }}</p>
  • title：把值中的每个单词的首字母都转成大写
<p>{{ 'hello' | title }}</p>
  • reverse：字符串反转
<p>{{ 'olleh' | reverse }}</p>
  • format：格式化输出
<p>{{ '%s is %d' | format('name',17) }}</p>
  • striptags：渲染之前把值中所有的HTML标签都删掉
<p>{{ '<em>hello</em>' | striptags }}</p>

列表操作

  • first：取第一个元素
<p>{{ [1,2,3,4,5,6] | first }}</p>
  • last：取最后一个元素
<p>{{ [1,2,3,4,5,6] | last }}</p>
  • length：列表长度
<p>{{ [1,2,3,4,5,6] | length }}</p>
  • sum：列表求和
<p>{{ [1,2,3,4,5,6] | sum }}</p>
  • sort：列表排序
<p>{{ [6,2,3,1,5,4] | sort }}</p>

语句块过滤

{% filter upper %}#一大堆文字#
{% endfilter %}

自定义过滤器

过滤器的本质是函数。当模板内置的过滤器不能满足需求，可以自定义过滤器。自定义过滤器有两种实现方式：

  • 一种是通过Flask应用对象的 add_template_filter 方法
  • 通过装饰器来实现自定义过滤器

重要：自定义的过滤器名称如果和内置的过滤器重名，会覆盖内置的过滤器。

需求：添加列表反转的过滤器

方式一

通过调用应用程序实例的 add_template_filter 方法实现自定义过滤器。该方法第一个参数是函数名，第二个参数是自定义的过滤器名称：

def do_listreverse(li):# 通过原列表创建一个新列表temp_li = list(li)# 将新列表进行返转temp_li.reverse()return temp_liapp.add_template_filter(do_listreverse,'lireverse')
方式二

用装饰器来实现自定义过滤器。装饰器传入的参数是自定义的过滤器名称。

@app.template_filter('lireverse')
def do_listreverse(li):# 通过原列表创建一个新列表temp_li = list(li)# 将新列表进行返转temp_li.reverse()return temp_li
  • 在 html 中使用该自定义过滤器
<br/> my_array 原内容：{{ my_array }}
<br/> my_array 反转：{{ my_array | lireverse }}
  • 运行结果
my_array 原内容：[3, 4, 2, 1, 7, 9] 
my_array 反转：[9, 7, 1, 2, 4, 3]

控制代码块

控制代码块主要包含两个：

- if/else if /else / endif
- for / endfor

if语句

Jinja2 语法中的if语句跟 Python 中的 if 语句相似,后面的布尔值或返回布尔值的表达式将决定代码中的哪个流程会被执行:

{%if user.is_logged_in() %}<a href='/logout'>Logout</a>
{% else %}<a href='/login'>Login</a>
{% endif %}

过滤器可以被用在 if 语句中:

{% if comments | length > 0 %}There are {{ comments | length }} comments
{% else %}There are no comments
{% endif %}

循环

  • 我们可以在 Jinja2 中使用循环来迭代任何列表或者生成器函数
{% for post in posts %}<div><h1>{{ post.title }}</h1><p>{{ post.text | safe }}</p></div>
{% endfor %}
  • 循环和if语句可以组合使用，以模拟 Python 循环中的 continue 功能，下面这个循环将只会渲染post.text不为None的那些post：
{% for post in posts if post.text %}<div><h1>{{ post.title }}</h1><p>{{ post.text | safe }}</p></div>
{% endfor %}
  • 在一个 for 循环块中你可以访问这些特殊的变量:
变量描述
loop.index当前循环迭代的次数（从 1 开始）
loop.index0当前循环迭代的次数（从 0 开始）
loop.revindex到循环结束需要迭代的次数（从 1 开始）
loop.revindex0到循环结束需要迭代的次数（从 0 开始）
loop.first如果是第一次迭代，为 True 。
loop.last如果是最后一次迭代，为 True 。
loop.length序列中的项目数。
loop.cycle在一串序列间期取值的辅助函数。见下面示例程序。

  • 在循环内部,你可以使用一个叫做loop的特殊变量来获得关于for循环的一些信息

    • 比如：要是我们想知道当前被迭代的元素序号，并模拟Python中的enumerate函数做的事情，则可以使用loop变量的index属性,例如:
{% for post in posts%}
{{loop.index}}, {{post.title}}
{% endfor %}
  • 会输出这样的结果
1, Post title
2, Second Post
  • cycle函数会在每次循环的时候,返回其参数中的下一个元素,可以拿上面的例子来说明:
{% for post in posts%}
{{loop.cycle('odd','even')}} {{post.title}}
{% endfor %}
  • 会输出这样的结果：
odd Post Title
even Second Post

示例程序

  • 实现的效果

  • 准备数据
  # 只显示4行数据，背景颜色依次为：黄，绿，红，紫my_list = [{"id": 1,"value": "我爱工作"},{"id": 2,"value": "工作使人快乐"},{"id": 3,"value": "沉迷于工作无法自拔"},{"id": 4,"value": "日渐消瘦"},{"id": 5,"value": "以梦为马，越骑越傻"}
]
  • 模板代码
{% for item in my_list if item.id != 5 %}{% if loop.index == 1 %}<li style="background-color: orange">{{ item.value }}</li>{% elif loop.index == 2 %}<li style="background-color: green">{{ item.value }}</li>{% elif loop.index == 3 %}<li style="background-color: red">{{ item.value }}</li>{% else %}<li style="background-color: purple">{{ item.value }}</li>{% endif %}
{% endfor %}

模板代码复用

在模板中，可能会遇到以下情况：

  • 多个模板具有完全相同的顶部和底部内容
  • 多个模板中具有相同的模板代码内容，但是内容中部分值不一样
  • 多个模板中具有完全相同的 html 代码块内容

像遇到这种情况，可以使用 JinJa2 模板中的 宏、继承、包含来进行实现

宏

对宏(macro)的理解：

  • 把它看作 Jinja2 中的一个函数，它会返回一个模板或者 HTML 字符串
  • 为了避免反复地编写同样的模板代码，出现代码冗余，可以把他们写成函数以进行重用
  • 需要在多处重复使用的模板代码片段可以写入单独的文件，再包含在所有模板中，以避免重复

使用

  • 定义宏
{% macro input(name,value='',type='text') %}<input type="{{type}}" name="{{name}}"value="{{value}}" class="form-control">
{% endmacro %}
  • 调用宏
{{ input('name' value='zs')}}
  • 这会输出
<input type="text" name="name"value="zs" class="form-control">
  • 把宏单独抽取出来，封装成html文件，其它模板中导入使用，文件名可以自定义macro.html
{% macro function(type='text', name='', value='') %}
<input type="{{type}}" name="{{name}}"
value="{{value}}" class="form-control">{% endmacro %}
  • 在其它模板文件中先导入，再调用
{% import 'macro.html' as func %}
{% func.function() %}

代码演练

  • 使用宏之前代码
<form><label>用户名：</label><input type="text" name="username"><br/><label>身份证号：</label><input type="text" name="idcard"><br/><label>密码：</label><input type="password" name="password"><br/><label>确认密码：</label><input type="password" name="password2"><br/><input type="submit" value="注册">
</form>
  • 定义宏
{#定义宏，相当于定义一个函数，在使用的时候直接调用该宏，传入不同的参数就可以了#}
{% macro input(label="", type="text", name="", value="") %}
<label>{{ label }}</label><input type="{{ type }}" name="{{ name }}" value="{{ value }}">
{% endmacro %}
  • 使用宏
<form>{{ input("用户名：", name="username") }}<br/>{{ input("身份证号：", name="idcard") }}<br/>{{ input("密码：", type="password", name="password") }}<br/>{{ input("确认密码：", type="password", name="password2") }}<br/>{{ input(type="submit", value="注册") }}
</form>

模板继承

模板继承是为了重用模板中的公共内容。一般Web开发中，继承主要使用在网站的顶部菜单、底部。这些内容可以定义在父模板中，子模板直接继承，而不需要重复书写。

  • 标签定义的内容
{% block top %} {% endblock %}
  • 相当于在父模板中挖个坑，当子模板继承父模板时，可以进行填充。
  • 子模板使用 extends 指令声明这个模板继承自哪个模板
  • 父模板中定义的块在子模板中被重新定义，在子模板中调用父模板的内容可以使用super()

父模板

  • base.html
{% block top %}顶部菜单
{% endblock top %}{% block content %}
{% endblock content %}{% block bottom %}底部
{% endblock bottom %}

子模板

  • extends指令声明这个模板继承自哪
{% extends 'base.html' %}
{% block content %}需要填充的内容
{% endblock content %}

  • 模板继承使用时注意点：

    • 不支持多继承
    • 为了便于阅读，在子模板中使用extends时，尽量写在模板的第一行。
    • 不能在一个模板文件中定义多个相同名字的block标签。
    • 当在页面中使用多个block标签时，建议给结束标签起个名字，当多个block嵌套时，阅读性更好。

未完待续 下一期下一章

全套笔记直接地址： 请移步这里

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.rhkb.cn/news/202088.html

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

Visual NLP：图像信息自动提取的未来

Visual NLP：图像信息自动提取的未来

本文旨在以简单的方式解释 Visual NLP 的关键概念&#xff0c;让你了解 Visual NLP 的含义、它的用例是什么、如何使用它以及为什么它是构建自动提取管道的未来 。 NSDT在线工具推荐&#xff1a; Three.js AI纹理开发包 - YOLO合成数据生成器 - GLTF/GLB在线编辑 - 3D模型格式在…
阅读更多...
在线工具收集

在线工具收集

在线工具收集 1、在线P图 https://www.photopea.com/ 一款类似于PS的在线抠图软件 ①去除图片中的文字&#xff0c;并填充背景色 第一步&#xff1a;使用矩形选中要清除的文字 第二步&#xff1a;点击编辑选择填充 第三步&#xff1a;选择内容识别&#xff0c;保留透明区域…
阅读更多...
趋势解读：TikTok独创的社交语言是如何演变的

趋势解读：TikTok独创的社交语言是如何演变的

在数字时代的浪潮中&#xff0c;社交媒体平台成为人们传递信息、表达创意和建立社交联系的重要场所。而在这众多社交平台中&#xff0c;TikTok以其独特的社交语言和创新的内容形式&#xff0c;迅速吸引了全球数以亿计的用户。本文将深入探讨TikTok的社交语言是如何独创并演变的…
阅读更多...
使用Python画一棵树

使用Python画一棵树

&#x1f38a;专栏【不单调的代码】 &#x1f354;喜欢的诗句&#xff1a;更喜岷山千里雪 三军过后尽开颜。 &#x1f386;音乐分享【如愿】 &#x1f970;欢迎并且感谢大家指出我的问题 文章目录 &#x1f339;Turtle模块&#x1f384;效果&#x1f33a;代码&#x1f6f8;代码…
阅读更多...
IvorySQL3.0：基于PG16.0最新内核，实现兼容Oracle数据库再升级

IvorySQL3.0：基于PG16.0最新内核，实现兼容Oracle数据库再升级

Oracle作为全球最大的数据库厂商之一&#xff0c;具有较高的市场知名度和份额。但随着数据处理需求日益增长&#xff0c;使用Oracle的企业可能面临一些挑战&#xff0c;如数据库复杂性、高昂维护成本、数据迁移和集成问题等&#xff0c;难以满足企业实时数据处理需求&#xff0…
阅读更多...
练习八-利用有限状态机进行时序逻辑的设计

练习八-利用有限状态机进行时序逻辑的设计

利用有限状态机进行时序逻辑的设计 1&#xff0c;任务目的&#xff1a;2&#xff0c;RTL代码&#xff0c;及原理框图3&#xff0c;测试代码&#xff0c;输出波形 1&#xff0c;任务目的&#xff1a; &#xff08;1&#xff09;掌握利用有限状态机实现一般时序逻辑分析的方法&am…
阅读更多...
第二十章 多线程

第二十章 多线程

20.2创建线程 20.2.1继承Thread类 Thread类是Java.lang包中的一个类&#xff0c;从这个类中实例化的对象代表线程&#xff0c;程序员启动一个新线程需要建议Thread实例。 public class ThreadTest extedns Thread{} run方法格式&#xff1a; public void run(){} 20.1让线…
阅读更多...
matplotlib

matplotlib

设置中文字体&#xff0c;图片大小&#xff0c;分辨率&#xff0c;中文负号 符号 x轴和y轴 设置x轴和y轴的刻度 字体大小 线条样式 绘制多个线条 图例 显示每个坐标值 gca 分辨率 画布尺寸 创建图形对象 不能直接使用区域对象作画 绘制多子图 均等的划分画布 柱状图 同一位置多…
阅读更多...
Ocam——自由录屏工具~

Ocam——自由录屏工具~

当我们想要做一些混剪、恶搞类型的视频时&#xff0c;往往需要源影视作品中的诸多素材&#xff0c;虽然可以通过裁减mp4文件的方式来获取片段&#xff0c;但在高画质的条件下&#xff0c;mp4文件本身通常会非常大&#xff0c;长此以往&#xff0c;会给剪辑工作带来诸多不便&…
阅读更多...
GDB Debugging Notes

GDB Debugging Notes

1 Debugging programs using gdb 1.1 gdb简介 gdb是一个功能强大的调试工具&#xff0c;可以用来调试C程序或C程序。在使用这个工具进行程序调试时&#xff0c;主要涉及下面几个方面的操作&#xff1a; 启动程序:在启动程序时&#xff0c;可以设置程序运行环境。设置断点:程序…
阅读更多...
使用kafka_exporter监控Kafka

使用kafka_exporter监控Kafka

prometheus 监控 kafka 常见的有两种开源方案，一种是传统的部署 exporter 的方式，一种是通过 jmx 配置监控， 项目地址： kafka_exporter：https://github.com/danielqsj/kafka_exporterjmx_exporter：https://github.com/prometheus/jmx_exporter本文将采用kafka_exporter方…
阅读更多...
matlab使用scatter函数画图时报错“数组索引必须为正整数或逻辑值”解决办法

matlab使用scatter函数画图时报错“数组索引必须为正整数或逻辑值”解决办法

一、背景 在使用matlab的scatter函数画图时报错“数组索引必须为正整数或逻辑值”。 scatter函数说明&#xff1a;scatter(x,y) 在向量 x 和 y 指定的位置创建一个包含圆形标记的散点图。 二、解决办法 如果使用scatter函数时报上述错误&#xff0c;尝试将连续函数先转换为函…
阅读更多...
ubuntu编译sqlite3并使用

ubuntu编译sqlite3并使用

SQLite3是一种轻量级的关系型数据库管理系统&#xff0c;它是在C语言基础上实现的。SQLite3具有许多优点&#xff0c;例如&#xff1a; 1.灵活&#xff1a;它可以在多种操作系统上运行&#xff0c;并且可以将多个数据库文件合并成一个文件。 2.易于使用&#xff1a;SQLite3使用…
阅读更多...
Centos上安装Docker和DockerCompose

Centos上安装Docker和DockerCompose

安装Docker Docker可以运行在MAC&#xff0c;Windows&#xff0c;CtenOS,UBUNTU等操作系统上。目前主流的版本有Docker CE和Docker EE&#xff0c;CE是免费的开源Docker版本&#xff0c;适用于开发人员和小型团队&#xff0c;EE是适用于企业的容器化解决方案。它基于Docker CE…
阅读更多...
如何判断交流回馈老化测试负载是否合格？

如何判断交流回馈老化测试负载是否合格？

交流回馈老化测试负载是用于模拟实际工作环境中设备运行状态的测试工具&#xff0c;主要用于检测设备的耐久性和稳定性。 负载性能&#xff1a;需要检查负载的性能是否符合设计要求&#xff0c;这包括负载的功率、电流、电压等参数是否在规定的范围内&#xff0c;以及负载的工作…
阅读更多...
可编程交流回馈式负载箱在电源设备中的应用

可编程交流回馈式负载箱在电源设备中的应用

可编程交流回馈式负载箱可以用于测试电源设备的输出能力&#xff0c;通过在负载箱中设置不同的负载条件&#xff0c;可以模拟不同的工作负载情况&#xff0c;从而测试电源设备在不同负载下的输出能力和稳定性。这对于电源设备的设计和生产非常重要&#xff0c;可以帮助制造商评…
阅读更多...
打造高效医患沟通：陪诊小程序开发技术指南

打造高效医患沟通：陪诊小程序开发技术指南

随着科技的不断发展&#xff0c;陪诊小程序作为医患沟通的新工具逐渐成为关注焦点。本文将带领你通过使用React和Node.js技术栈&#xff0c;构建一个功能强大且用户友好的陪诊小程序&#xff0c;实现医患互动的便捷和高效。 1. 准备工作 确保你的开发环境中已安装了Node.js和…
阅读更多...
037、目标检测-算法速览

037、目标检测-算法速览

之——常用算法速览 目录 之——常用算法速览 杂谈 正文 1.区域卷积神经网络 - R-CNN 2.单发多框检测SSD&#xff0c;single shot detection 3.yolo 杂谈 快速过一下目标检测的各类算法。 正文 1.区域卷积神经网络 - R-CNN region_based CNN&#xff0c;奠基性的工作。…
阅读更多...
原来 TinyVue 组件库跨框架（Vue2、Vue3、React、Solid）是这样实现的？

原来 TinyVue 组件库跨框架（Vue2、Vue3、React、Solid）是这样实现的？

本文由 TinyVue 组件库核心成员郑志超分享&#xff0c;首先分享了实现跨框架组件库的必要性&#xff0c;同时通过演示Demo和实际操作向我们介绍了如何实现一个跨框架的组件库。 前言 前端组件库跨框架是什么&#xff1f; 前端组件库跨框架是指在不同的前端框架&#xff08;如…
阅读更多...
类加载过程

类加载过程

Java类加载过程包括加载&#xff08;Loading&#xff09;、验证&#xff08;Verification&#xff09;、准备&#xff08;Preparation&#xff09;、解析&#xff08;Resolution&#xff09;、初始化&#xff08;Initialization&#xff09;五个阶段。这些阶段是按照顺序逐步执…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023