详解flask入门模板引擎
作者：rottengeek 发布时间：2023-06-27 00:05:41
标签：flask,模板引擎
模板引擎
说明：模板文件就是按照一定的规则书写的展示效果的HTML文件 模板引擎就是负责按照指定规则进行替换的工具
模板引擎选择jinja2
一、渲染模板的方法
1、将渲染的模板进行返回
render_template()
2、渲染字符串返回
render_templates_string()
实例
@app.route('/')
def index():
#将模板内容响应给用户
return render_template('index.html')
#渲染一内容响应给用户
return render_template_string('<h1 style="color:green;font-size:18px;">原谅色</h1>')
二、模板的语法
模板中只存在俩种语法
1、变量
{{ var }}
#像模板文件中传参
return render_template('index.html',title='首恶')
{{ title }}
2、标签
{％ 标签名 ％}
注意：
在模板中使用字典中的键 需要像使用对象得方式来调用
{{data.key}}
如果在模板中给定的变量不存在 则插入的是空字符串 不会报错
三、过滤器
过滤器使用管道符 | 来使用的
1、{{ var|abs }} 返回一个数值的绝对值
2、default 设置默认值
只有当给定的变量不存在时 则执行默认值
当设置default的boolean的时候 会执行默认值
<li>{{ data.bool|default('我是默认值',boolean=True) }}</li>
3、first: 取出变量中的第一个字符
4、last: 取出变量中的最后一个字符
5、format： 字符的格式化
<li>{{ '我叫％s 我今年％d岁了 我的存款为 ％.2f'|format('罗铁汉',38,23) }}</li>
6、length: 返回变量值的长度
7、join: 拼接成字符串
<li>{{ [1,2,3,4]|join('') }}</li>
<li>{{ [1,2,3,4]|join('x') }}</li>
8、safe: 不转义标签 原样显示
9、lower 转为小写
10、upper 转为大写
11、replace 替换
<li>{{ data.string|replace('a','x') }}</li>
12、striptages 去除HTML标签
{{ data.html|striptags }}
四、标签
语法格式 ：{％ 标签名 ％}
(1) if
实例
{％ if data.bool ％}
<li>{{ data.bool }}值为真</li>
{％ elif True ％}
<li>{{ True }}职位真</li>
{％ else ％}
<li>{{ data.bool }}值为假</li>
{％ endif ％}
(2) for 循环
实例
{％ for i in data.xxxx ％}
{# 错误的迭代方法TypeError: 'bool' object is not iterable #}
{# {％ for i in data.bool ％}#}
<li>{{ i }}</li>
{％ else ％}
<li>当迭代的变量不存在时 则执行else</li>
{％ endfor ％}
注意：
break continue 不能够在这里使用
迭代字典
{％ for k,v in data.items() ％}
<li>{{ k }}=>{{ v }}</li>
{％ endfor ％}
获取当前迭代的状态
| 变量 | 描述 |
|---|---|
| loop.index | 获取当前迭代的索引 从1开始 |
| loop.index0 | 获取当前迭代的索引 从0开始 |
| loop.first | 是否为第一次迭代 |
| loop.last | 是否为最后一次迭代 |
| loop.length | 迭代的长度 |
六、注释
{# 多行注释 #}
七、文件包含 include
相当于把一个文件 拷贝到当前的你的包含的位置
实例
{％ include 'common/header.html' ％}
<div>我是中间的内容</div>
{％ include 'common/footer.html' ％}
注意：
1、包含的公共的文件中 只存放 公共的代码 除此以外什么都不要存在
2、导入的时候 如果文件和在同一级别 直接导入就可以 如果包含在某个目录中 需要写出路径
{％ include 'common/header.html' ％}
{％ include 'test.html' ％}
八、宏 macro
概念： 类似python中的函数
实例
在macro.html中
{％ macro input(name,type='text',value='') ％}
<input type="{{ type }}" name="{{ name }}" value="{{ value }}">
{％ endmacro ％}
宏的调用
{{ input('text','username','') }}
{{ input() }}
{{ input(type='password',name='userpass') }}
宏的导入
(1) import
{％ import 'test.html' as test ％}
{％ import 'common/test.html' as test ％}
<p>用户名： {{ test.input(type='password',name='userpass') }}</p>
(2) form import
{％ from 'test.html' import input ％}
{％ from 'common/test.html' import input ％}
<p>用户名： {{ input(type='password',name='userpass') }}</p>
注意：
宏的调用只能在定义的下方去调用 否则未定义
宏如果存在形参 且没有默认值 则可以调用(没意义)
形参的默认值 需要遵循默认值规则 有默认值的参数 放右侧
可以正常使用 关键字参数
九、继承 extends
语法：
{％ extends ％} 继承某个模板
{％ block ％} 挖坑和填坑
{{ super() }} 调用被替换掉的代码
base.html
<!DOCTYPE html>
<html lang="en">
<head>
{％ block header ％}
<meta charset="UTF-8">
{％ block meta ％}
{％ endblock ％}
<title>{％ block title％}首页{％ endblock ％}</title>
<style>
{％ block style ％}
p{color:red;}
{％ endblock ％}
</style>
{％ block link ％}
{％ endblock ％}
{％ block script ％}
{％ endblock ％}
{％ endblock ％}
</head>
<body>
<header>头部</header>
{％ block con ％}
我是中间的内容部分
{％ endblock ％}
<footer>尾部</footer>
</body>
</html>
index.html继承 base.html
{％ extends 'common/base.html' ％}
{％ block title ％}
我的首页
{％ endblock ％}
{％ block style ％}
{{ super() }}
p{color:green;}
{％ endblock ％}
{％ block con ％}
<p>我是首页的内容</p>
我是首页的内容
{％ endblock ％}
注意：
如果当替换某个样式的时候 所有原来的样式 都消失了 去查看是否使用了super()
十、flask-bootstrap
安装
pip install flask-bootstrap
sudo pip3 install flask-bootstrap
使用
继承 bootstrap/base.html 基础模板 改造成适用于自己网站的base.html基础模板
自己的base.html
{％ extends 'bootstrap/base.html' ％}
{％ block navbar ％}
<nav class="navbar navbar-inverse" style="border-radius: 0px;">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><span class="glyphicon glyphicon-signal" aria-hidden="true"></span></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >首页 <span class="sr-only">(current)</span></a></li>
<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >发帖子</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<form class="navbar-form navbar-left">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >注册</a></li>
<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >登录</a></li>
<li class="dropdown">
<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
aria-expanded="false">个人中心 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >个人信息</a></li>
<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >修改头像</a></li>
<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >修改密码</a></li>
<li role="separator" class="divider"></li>
<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Separated link</a></li>
<li role="separator" class="divider"></li>
<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >退出登录</a></li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
{％ endblock ％}
{％ block content ％}
<div class="container">
{％ block pagecontent ％}
网页的中间内容部分写在当前的位置
{％ endblock ％}
</div>
{％ endblock ％}
使用 index.html
{％ extends 'common/base.html' ％}
{％ block title ％}
首页
{％ endblock ％}
十一、错误页面的定制
manage.py
@app.errorhandler(404)
def page_not_found(e):
return render_template('common/error.html',error=e,code=404)
@app.errorhandler(500)
def server_error(e):
return render_template('common/error.html',error=e,code=500)
error.html
{％ extends 'common/base.html' ％}
{％ block title ％}
{{ code }}错误
{％ endblock ％}
{％ block pagecontent ％}
<div class="alert alert-danger" role="alert">{{ error }}</div>
{％ endblock ％}
十二、视图传递多个参数
(1) 原始传参
@app.route('/')
def index():
return render_template('index.html',arg1=1,arg2=2...)
(2) 使用字典
@app.route('/')
def index():
return render_template('index.html',arg={arg1:1,arg2:2...})
kwarg={arg1:1,arg2:2...}
return render_template('index.html',``)
(3) 使用全局变量g
@app.route('/')
def index():
g.name = '张三'
g.age = 18
return render_template('index.html')
模板中
<ol>
<li>{{ g.name }}</li>
<li>{{ g.age }}</li>
</ol>
(4) 使用 **locals()
@app.route('/')
def index():
name = '张三'
age = 18
print(locals())
return render_template('index.html',**locals())
模板中
<li>{{ name }}</li>
<li>{{ age }}</li>
十三、url_for 构造绝对的链接地址
@app.route('/test/')
def test():
print(url_for('index',_external=True))
return 'test'
十四、加载静态资源
静态资源：图片，css，js，视频，音频，，
实例
<img src="{{ url_for('static',filename='img/17.jpg') }}" alt="">
来源：https://segmentfault.com/a/1190000015205323
0
投稿猜你喜欢
前言本文将使用pytorch框架的目标识别技术实现滑块验证码的破解。我们这里选择了yolov5算法例：输入图像输出图像可以看到经过检测之后，- session 不用多介绍，使一个http可以对应一个终端用户。session的本质使用cookie来实现。原理大概是：http 带来服务端
- 前提示时间一个博友，建议我提供PHP开发环境的搭建文章。当然我们一般在windows平台下开发的居多，那么，今天我就在Windows平台下搭
- TensorFlow是一个基于数据流编程（dataflow programming）的符号数学系统，被广泛应用于各类机器学习（machine
- Python最近挺火呀，比鹿晗薛之谦还要火，当然是在程序员之间。下面我们看看有关Python的相关内容。上一篇文章我们已经介绍了部分Pyth
- 本次做一个最简单的贪食蛇雏形游戏，就是一个小蛇在画面上移动，我们可以控制蛇的移动方向，但是不能吃东西，蛇不会长大。但是基础的有了，完整版的贪
- 将两个嵌套for循环写成一个列表生成式如，有一个嵌套列表，a=[[1,2],[3,4],[5,6]]，要提取列表里的每一个元素用for循环处
- 在SQL Server 2005中，它的另外一个强大的新特点是数据库快照。数据库快照是一个数据库的只读副本，它是数据库所有数据的映射，由快照
- Python 编程中可以使用 PyMysql 进行数据库的连接及诸如查询/插入/更新等操作，但是每次连接 MySQL 数据库请求时，都是独立
- 上一篇：微软建议的ASP性能优化28条守则(7)技巧 22：尽可能使用 Server.Transfer 代替 Response.Redire
- 关于端口复用一个套接字不能同时绑定多个端口，如果客户端想绑定端口号，一定要调用发送信息函数之前绑定( bind )端口，因为在发送信息函数(
- 本文实例分析了python开发之str.format()用法。分享给大家供大家参考，具体如下：格式化一个字符串的输出结果，我们在很多地方都可
- ISSET();——适合于检测是否存在这个参数。 定义和作用范围：用于测试一个变量是否具有值（包括0，FALSE，或者一个空字串，但不能是N
- 发现一个很简单的配置方法，一直想写的没写上，今天抽空就把它给补充完整好了。本文的配置方法Windows，Mac和Linux系统均适合。一.安
- 一、事件流 IE中是冒泡型事件，即从最特定的事件目标到最不特定的事件目标。 Netscape Navigator使用的是捕获型事件，这个跟I
- 总结了部分所学、所听、所看、所问的一些CSS写作经验，书写高效的CSS - 漫谈CSS的渲染效率，它们与渲染效率及所占用
- 一、现象凌晨对线上一张表添加索引，表数据量太大(1亿+数据，数据量50G以上)，造成主从延迟几个小时，各个依赖从库的系统无法查询数据，最终影
- 本文实例分析了JS限制条件补全问题。分享给大家供大家参考，具体如下：题目一.a和b两个变量，不用第三个变量来切换两个变量值var a=5;v
- <％'解析一个xml文件的公用函数集合dim document'装载一个xml文档，函数名Loaddocument(文
- make介绍借助Makefile我们在编译过程中不再需要每次手动输入编译的命令和编译的参数，可以极大简化项目编译过程。make是一个构建自动
