当前位置: 首页 > news >正文

Flask狼书笔记 | 03_模板

请添加图片描述

文章目录

  • 3 模板
    • 3.1 模板基本使用
    • 3.2 模板结构组织
    • 3.3 模板进阶


3 模板

模板(template):包含固定内容和动态部分的可重用文件。Jinja2模板引擎可用于任何纯文本文件。

3.1 模板基本使用

HTML实体:https://dev.w3.org/html5/html-author/charref

Jinja2定界符

  • 语句:{% ... %}
  • 表达式:{{ ... }}
  • 注释:{# ... #}

:适度使用模板,仅放和输出控制有关的逻辑操作。

补充render_template()中,也可以传入python函数,并在模板中调用。

上下文

  • 在模板中定义变量:使用set标签。(p80)
  • 内置上下文变量:config,request,session,g。
  • 自定义上下文@app.context_processor ,等(p81)

全局对象

  • Flask内置模板全局函数url_for()用于生产URL,get_flashed_messages()用于获取flask消息。

自定义全局函数@app.template_global()装饰器

过滤器修改过滤变量值的特殊函数。

{{ name|title }}
{% filter upper %}This itext becomes upperase.
{% endfilter %}

Jinja2常用内置过滤器(p83)

  • 自定义过滤器@app.emplate_filter()

测试器:测试变量或表达式,返回布尔值 ,使用@app.template_test()自定义。

{% if foo is sameas(bar) %}...

模板环境对象:控制渲染行为,包含配置选项、上下文变量、全局函数(globals)、过滤器(filters)、测试器(tests),在app.jinja_env属性。

# 添加自定义全局对象 
def bar():return 'I am bar.'app.jinja_env.globals['bar'] = bar

3.2 模板结构组织

局部模板:减少代码重复。在ajax请求中可以只返回一个局部模板,而不是整个页面。

{% include '_banner.html' %}

:(macro)类似函数,也为了代码重用。

  • 注意include会自动传递上下文;而import不会,需要显示传递。
{% from 'macros.html' import qux with context%}
...
{{ qux(amount=5) }}

模板继承:在基模板中定义基本的HTML结构,而子模板只需要对特定的块进行修改(覆盖或追加{{ super() }})。(p90)

{% extends 'base.html' %}
{% block content %}
...
{% endblock content %}

3.3 模板进阶

空白控制:模板中的Jinja2语句会保留移除后的空行,但不影响浏览器的解析。可以使用工具去除空白,减小文件体积,提高数据传输速度。

{%- endif %}

加载静态文件:默认存放在主脚本同级目录的static文件夹中,使用url_for()函数获取。Flask内置了用于获取静态文件的视图函数,端点值为static

{{ url_for('static', filename='avatar.jpg') }}
  • Favicon:浏览器在标签页、地址栏、收藏夹等处显示的小图标。(p96)
  • CDN加载静态资源更方便
  • 可以创建一个专门用于加载静态资源的

疑惑:对favicon的请求是自动的吗,所有项目都有?

消息闪现:在视图函数调用flash()函数,你的消息将存储在session中,然后再模板中使用全局函数get_flashed_messages()获取消息并显示,调用后会清空session中的消息。

{% for message in get_flashed_messages() %}{{ message }}
{% endfor %}
  • 文本字符串编码问题:(p98)

自定义错误页面:默认的简陋错误页面往往另用户不知所措,我们可以注册错误处理函数来自定义错误页面。

@app.errorhandler(404)
def page_not_found(e):return render_template('errors/404.html'), 404

JavaScript和CSS中的Jinja:有时需要再JavaScript或CSS代码中使用Jinja2提供的变量,如我们希望将用户设置的主题颜色设置到对应的CSS规则中。

  • 只有使用render_template()传入的模板文件才会被渲染,而在javascript、css文件中引入的Jinja2代码不会被执行。(?)

  • 1、嵌入式Javascript/CSS:在模板文件中,使用<style><script>标签定义这部分代码。

  • 2、定义为Javascript/CSS变量

{# 定义JavaScript变量 #}
<script type="text/javascript">var foo = '{{ foo_variable }}';
</script>{# 定义CSS变量 #}
<sytle>
:root {--theme-color: {{ theme_color }};
}

相关文章:

Flask狼书笔记 | 03_模板

文章目录 3 模板3.1 模板基本使用3.2 模板结构组织3.3 模板进阶 3 模板 模板&#xff08;template&#xff09;&#xff1a;包含固定内容和动态部分的可重用文件。Jinja2模板引擎可用于任何纯文本文件。 3.1 模板基本使用 HTML实体&#xff1a;https://dev.w3.org/html5/htm…...

MySQL 数据备份和数据恢复

目录 一、数据备份 1、概述 2、MySQLdump命令备份 1&#xff09;备份单个数据库中的所有表 2) 备份数据中某个或多个表 3) 备份所有数据库 4&#xff09;备份多个库 5) 只备份一个表或多个表结构 二、数据恢复 三、数据备份与恢复应用 一、数据备份 1、概述 数据备…...

软考高级系统架构设计师系列论文八十二:论软件的可维护性设计

软考高级系统架构设计师系列论文八十二:论软件的可维护性设计 一、摘要二、正文三、总结一、摘要 随着软件大型化,复杂化的发展,软件维护所耗费的资源越来越多,软件可维护性设计日益得到重视。我单位近几年开发综合业务 ATM交换机,用户对交换机的可维护性要求很高。我参加…...

Ompl初探

在/ompl-1.x.0/build/Release/bin下有很多生成的demo可执行文件 在终端执行 ./demo_Point2DPlanning 测试程序 #include <ompl/base/SpaceInformation.h> #include <ompl/base/spaces/SE3StateSpace.h> #include <ompl/base/StateSpace.h> #include <o…...

android sdk打包aar方案步骤

1.使用fat-aar库https://github.com/kezong/fat-aar-android/blob/master/README_CN.md 第一步&#xff1a;添加以下代码到你工程根目录下的build.gradle文件中: For Maven Central (The lastest release is available on Maven Central): buildscript {repositories {maven…...

Redis之bitmap类型解读

目录 基本介绍 基本命令 Setbit Getbit BITCOUNT 应用场景 统计当日活跃用户 用户签到 bitmap - Redis布隆过滤器 &#xff08;应对缓存穿透问题&#xff09; 基本介绍 Redis 的位图&#xff08;bitmap&#xff09;是由多个二进制位组成的数组&#xff0c;只有两…...

stm32之10.系统定时器

delay_s()延时秒 delay_ms()毫秒*1000 delay_us()微秒*1000000 微秒定时器代码 void delay_us(uint32_t n) { SysTick->CTRL 0; // Disable SysTick&#xff0c;关闭系统定时器 SysTick->LOAD SystemCoreClock/1000000*n-1; // 就是nus SysTick->LOAD Sys…...

PyTorch安装教程:从头开始配置PyTorch环境

PyTorch是一个开源的机器学习框架&#xff0c;广泛用于深度学习任务。要开始使用PyTorch&#xff0c;您需要在计算机上正确配置PyTorch环境。本文将为您提供一步步的指南&#xff0c;帮助您成功安装和配置PyTorch。 第一部分&#xff1a;安装Python和相关工具 第一步&#xf…...

Docker拉取并配置Grafana

Linux下安装Docker请参考&#xff1a;Linux安装Docker 安装准备 新建挂载目录 /opt/grafana/data目录&#xff0c;准备用来挂载放置grafana的数据 /opt/grafana/plugins目录&#xff0c;准备用来放置grafana的插件 /opt/grafana/config目录&#xff0c;准备用来挂载放置graf…...

Vue+Axios搭建二次元动态登录页面(mp4视频格式)

最近想做一个前端登录页面&#xff0c;背景好看的&#xff0c;格式中规中矩的&#xff0c;这么难&#xff1f;我自己创一个吧&#xff01; 效果图如下&#xff1a; 源码可以参考我的github&#xff0c;复制源码即可用&#xff1a;gym02/loginPage_Vue: 使用VueAxios搭建的动态…...

【Kubernetes】K8S到底是什么,最近怎么这么火

前言 kubernetes&#xff0c;简称K8s&#xff0c;是用8代替名字中间的8个字符“ubernete”而成的缩写。是一个开源的&#xff0c;用于管理云平台中多个主机上的容器化的应用&#xff0c;Kubernetes的目标是让部署容器化的应用简单并且高效&#xff08;powerful&#xff09;,Kub…...

Java爬虫下载网页图片

在Java中&#xff0c;可以使用HttpURLConnection&#xff0c;Jsoup等库来实现网页爬取和图片下载。下面是一个基本的例子&#xff1a; 首先&#xff0c;需要添加Jsoup库到你的项目中。如果你使用Maven&#xff0c;可以在你的pom.xml文件中添加以下依赖&#xff1a; xml <…...

C语言之扫雷游戏实现篇

目录 主函数test.c 菜单函数 选择循环 扫雷游戏实现分析 整体思路 问题1 问题2 问题3 问题4 游戏函数&#xff08;函数调用&#xff09; 创建游戏盘数组mine 创建游戏盘数组show 初始化游戏盘数组InitBoard 展示游戏盘DisplayBoard 游戏盘置雷SetMine 游戏…...

Python面向对象中super用法与MRO机制

Python面向对象中super用法与MRO机制 最近再看trackformer&#xff0c;里面用到了super的用法&#xff0c;记录一下super的用法 class A(object):def __init__(self):print(init A)def fun(self):print(A.fun)print(self)super(A, self).fun()class B(object):def __init__(s…...

高性能网络模式-Reactor

事实上&#xff0c;Reactor 模式也叫Dispatcher模式&#xff0c;即I/O 多路复⽤监听事件&#xff0c;收到事件后&#xff0c;根据事件类型分配&#xff08;Dispatch&#xff09;给某个进程/线程。Reactor 模式也是一种非阻塞同步网络模式。 Reactor 模式主要由 Reactor部分和处…...

gRpc的四种通信方式详细介绍

&#x1f337;&#x1f341; 博主猫头虎 带您 Go to New World.✨&#x1f341; &#x1f984; 博客首页——猫头虎的博客&#x1f390; &#x1f433;《面试题大全专栏》 文章图文并茂&#x1f995;生动形象&#x1f996;简单易学&#xff01;欢迎大家来踩踩~&#x1f33a; &a…...

JWT令牌的介绍

目录 一、什么是JWT 二、JWT令牌和Cookie客户端、Session服务端对比 三、特点与注意事项 四、使用场景 优点&#xff1a; 五、结构组成 一、什么是JWT JWT&#xff08;JSON Web Token&#xff09;是一种用于在网络应用间传递信息的开放标准&#xff08;RFC 7519&#x…...

C语言入门 Day_9 条件判断

目录 前言&#xff1a; 1.if判断 2.else判断 3.易错点 4.思维导图 前言&#xff1a; 我们知道比较运算和逻辑运算都会得到一个布尔型的数据&#xff0c;要么为真&#xff08;true&#xff09;&#xff0c;要么为假&#xff08;false&#xff09;。 今天我们来学习真和假在…...

Nodejs-nrm:快速切换npm源 / npm官方源和其他自定义源之间切换

一、理解 Nodejs nrm Nodejs nrm 是一个管理 npm 源的工具。由于 npm 在国内的速度较慢&#xff0c;很多开发者会使用淘宝的 npm 镜像源&#xff0c;但是也会遇到一些问题&#xff0c;例如某些包在淘宝镜像源中不存在&#xff0c;或者淘宝镜像源本身也会有问题。 Nodejs nrm …...

数据驱动洞察:各种词频分析技术挖掘热点数据

一、引言 随着信息时代的发展&#xff0c;人们的关注点日益复杂多样。社交媒体、新闻网站和论坛等平台上涌现了大量的信息&#xff0c;这使得热点分析成为了解社会热点话题和舆情动向的重要手段。词频统计是热点分析的基础&#xff0c;本文将分别介绍基于ElasticSearch、基于S…...

IT供电系统绝缘监测及故障定位解决方案

随着新能源的快速发展&#xff0c;光伏电站、储能系统及充电设备已广泛应用于现代能源网络。在光伏领域&#xff0c;IT供电系统凭借其持续供电性好、安全性高等优势成为光伏首选&#xff0c;但在长期运行中&#xff0c;例如老化、潮湿、隐裂、机械损伤等问题会影响光伏板绝缘层…...

Maven 概述、安装、配置、仓库、私服详解

目录 1、Maven 概述 1.1 Maven 的定义 1.2 Maven 解决的问题 1.3 Maven 的核心特性与优势 2、Maven 安装 2.1 下载 Maven 2.2 安装配置 Maven 2.3 测试安装 2.4 修改 Maven 本地仓库的默认路径 3、Maven 配置 3.1 配置本地仓库 3.2 配置 JDK 3.3 IDEA 配置本地 Ma…...

ip子接口配置及删除

配置永久生效的子接口&#xff0c;2个IP 都可以登录你这一台服务器。重启不失效。 永久的 [应用] vi /etc/sysconfig/network-scripts/ifcfg-eth0修改文件内内容 TYPE"Ethernet" BOOTPROTO"none" NAME"eth0" DEVICE"eth0" ONBOOT&q…...

动态 Web 开发技术入门篇

一、HTTP 协议核心 1.1 HTTP 基础 协议全称 &#xff1a;HyperText Transfer Protocol&#xff08;超文本传输协议&#xff09; 默认端口 &#xff1a;HTTP 使用 80 端口&#xff0c;HTTPS 使用 443 端口。 请求方法 &#xff1a; GET &#xff1a;用于获取资源&#xff0c;…...

给网站添加live2d看板娘

给网站添加live2d看板娘 参考文献&#xff1a; stevenjoezhang/live2d-widget: 把萌萌哒的看板娘抱回家 (ノ≧∇≦)ノ | Live2D widget for web platformEikanya/Live2d-model: Live2d model collectionzenghongtu/live2d-model-assets 前言 网站环境如下&#xff0c;文章也主…...

【Linux手册】探秘系统世界:从用户交互到硬件底层的全链路工作之旅

目录 前言 操作系统与驱动程序 是什么&#xff0c;为什么 怎么做 system call 用户操作接口 总结 前言 日常生活中&#xff0c;我们在使用电子设备时&#xff0c;我们所输入执行的每一条指令最终大多都会作用到硬件上&#xff0c;比如下载一款软件最终会下载到硬盘上&am…...

6.9-QT模拟计算器

源码: 头文件: widget.h #ifndef WIDGET_H #define WIDGET_H#include <QWidget> #include <QMouseEvent>QT_BEGIN_NAMESPACE namespace Ui { class Widget; } QT_END_NAMESPACEclass Widget : public QWidget {Q_OBJECTpublic:Widget(QWidget *parent nullptr);…...

Python常用模块:time、os、shutil与flask初探

一、Flask初探 & PyCharm终端配置 目的: 快速搭建小型Web服务器以提供数据。 工具: 第三方Web框架 Flask (需 pip install flask 安装)。 安装 Flask: 建议: 使用 PyCharm 内置的 Terminal (模拟命令行) 进行安装,避免频繁切换。 PyCharm Terminal 配置建议: 打开 Py…...

C++--string的模拟实现

一,引言 string的模拟实现是只对string对象中给的主要功能经行模拟实现&#xff0c;其目的是加强对string的底层了解&#xff0c;以便于在以后的学习或者工作中更加熟练的使用string。本文中的代码仅供参考并不唯一。 二,默认成员函数 string主要有三个成员变量&#xff0c;…...

数据库正常,但后端收不到数据原因及解决

从代码和日志来看&#xff0c;后端SQL查询确实返回了数据&#xff0c;但最终user对象却为null。这表明查询结果没有正确映射到User对象上。 在前后端分离&#xff0c;并且ai辅助开发的时候&#xff0c;很容易出现前后端变量名不一致情况&#xff0c;还不报错&#xff0c;只是单…...