Jinja模版
在之前,使用了render_template()这个函数。然后去看了看,发现又要接触一块完全陌生的东西。。。Jinja模版。慢慢看好了。。
先附上官网介绍这玩意儿的地址
首先,官网给了一个最小模版。那就ctr c+v先拿来再说
<!DOCTYPE html>
<html lang="en">
<head>
<title>My Webpage</title>
</head>
<body>
<ul id="navigation">
{% for item in navigation %}
<li><a href="{{ item.href }}">{{ item.caption }}</a></li>
{% endfor %}
</ul>
<h1>My Webpage</h1>
{{ a_variable }}
{# a comment #}
</body>
</html>
运行先看看得到啥玩意儿。
就这?看着之前的html,有一个for循环,那应该会循环展示一些东西。
肯定是我没有传参数
<ul id="navigation">
{% for item in navigation %}
<li><a href="{{ item.href }}">{{ item.caption }}</a></li>
{% endfor %}
</ul>
从参数上来看,item.href, item.caption有点像字典。href和caption是里面的key值
那就传一个字典看看
然后就报错。。。。
看了看这个函数,好像我得传一个参数名字。
估摸着传一个navigation就行吧。试试。
emmm,真香。那这就可以弄一个列表,里面放多个字典,就实现了循环了。
从头开始学习
主要分为 变量,控制块,过滤器,模版复用进行学习
变量
变量使用{{xxx}},并且在render_template时传入
举个栗子🌰
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>用户</title>
</head>
<body>
<p>{{ name }}--{{ pawd }}--{{ age }}</p>
</body>
</html>
得到的结果中,没有传入age,所以展示的时候直接为空白
同理,也可传入列表,元组,字典以及他们的操作等
值得注意的是:
{{ list.0 }} == {{ list[0] }}
{{ dict.key }} == {{ dict.get(key) }}
控制块
一个语法除了变量,就是逻辑。jinjia也是。
{% if}
{% for}
for循环
{% for 变量 in 可迭代对象%}
…
{% endfor %}
每遍历一个人,就创建一个li展示
if判断
{% if 条件%}
…
{%else%}
…
{% endif% }
通过加入if判断,可以对不同的内容进行渲染
loop
在for 循环中,默认存在一个loop变量
loop.index 序号从1开始
loop.index 序号从0开始
loop.revindex 序号反转,最小为1
。。。。。
<table border="1" cellpadding="0" cellspacing="0" width="40%">
{% for user in users %}
<tr {% if loop.index % 2 == 0 %} bgcolor="#6495ed" {% endif %} >
<td>{{ loop.index }}</td>
<td>{{ user.username }}</td>
<td>{{ user.password }}</td>
<td>{{ user.address }}</td>
<td>{{ user.phone }}</td>
</tr>
{% endfor %}
</table>
过滤器
{{ 变量|过滤器 }}
过滤器本质就是函数
正常python能用的自带函数,在模版中不一定能用,例如{{ len(变量)}}
在模版中需要使用 {{变量|len}}
常见过滤器:
safe 禁用转译
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>过滤器使用</title>
</head>
<body>
{{ msg }}
<hr>
{{ msg | safe }}
</body>
</html>
@app.route('/show2')
def show_msg():
msg = '<h1> flask学习 </h1>'
return render_template('show2.html', msg = msg)
关于字符串的过滤器使用:
- capitalize 首字母大写
- lower 和 upper 全部大小写
- tittle 一句话中每个单词首字母大写
- reverse 反转
- format 格式化:{{ ‘%s is %s’ | format(‘john’,‘18’) }}
- truncate 字符串截断
关于常用的列表过滤器
{# 列表过滤器的使用 #}
{{ person|first }}<br>
{{ person|last }}<br>
{{ person|length }}<br>
{# {{ person|first }} 针对整形求和#}
{{ [1,5,2,4]|sum }}<br>
{{ [1,8,5,7,3]|sort }}<br>
字典过滤器
获取键,值,都获取
<p>
{% for v in users.0.values() %}
<p>{{ v }}</p>
{% endfor %}<br>
{% for v in users.0.keys() %}
<p>{{ v }}</p>
{% endfor %}<br>
{% for v,k in users.0.items() %}
<p>{{ v }}----{{ k }}</p>
{% endfor %}<br>
</p>
自定义过滤器
1.通过flask对象中的add_template_fliter
1.定义函数,带参数和返回值
2.添加过滤器,app.add_template_filter(函数名, name)
3.在模版中使用{{ 变量|name }}
@app.route('/')
def index():
msg = 'hello a,hello b,helloo!'
return render_template('define_filter.html',msg=msg)
def replace_hello(value):
print('------->', value)
value = value.replace('hello', '')
print('======>', value)
return value.strip()
app.add_template_filter(replace_hello, 'replace_hello')
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>自定义过滤器</title>
</head>
<body>
{{ msg }}
<hr>
{{ msg|replace_hello }}
</body>
</html>
2. 通过装饰器完成
1.定义函数,带参数和返回值
2.通过装饰器完成,@app.template_filter(name)
3.在模版中使用{{ 变量|name }}
@app.template_filter('rev_list')
def reverse_list(li):
temp_list = list(li)
temp_list.reverse()
return temp_list
@app.route('/')
def index():
msg = 'hello a,hello b,helloo!'
li = [1,3,5,7,9]
return render_template('define_filter.html',msg=msg,li=li)
----------------------------------------------
define_filter.html
{{ li }}
<br>
{{ li|rev_list }}
模版复用
- 模版继承 *重点
- include
- 宏
模版继承
使用的场景:
- 多个模版具有相同的顶和底
- 多个模版具有相同内容,只是某一部分值不一样
- 多个模版完全相同
标签:
{% block %}
…
{ % endblock % }
1.定义父模版base.html
分析父模版中哪些是变化的,使用block进行预留位置(挖坑)
样式和脚本需要提前预留位置{% block myscript %} {% endblock %}
2.子模版继承父模版
{% extends '父模版名称.html' %}将夫模版继承
找到对应的block进行填充,每一个block都是有名字的
include
在A,B,C页面有共同部分,其他页面没有。使用include
1.先定义一个公共的模版部分 xxx.html
2.谁使用,就include
{% include 'common/head.html' %}
宏 macro
可以看成jinja2的一个函数,返回一个html字符串
目的:代码复用,避免代码冗余
1.在模版中直接定义
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>宏的使用</title>
</head>
<body>
{#定义宏#}
{% macro form(action,value='登录',method='POST') %}
<form action="{{ action }}" method="{{ method }}">
<input type="text" placeholder="用户名" name="username">
<br>
<input type="password" placeholder="密码" name="password">
<br>
<input type="submit" value="{{ value }}">
</form>
{% endmacro %}
{#引用宏#}
{{ form('/') }}
</body>
</html>
2.将所有宏定义到一个html文件中
使用时再导入
{% import 'macro.html' as f %}
{{ f.form('/',value='xx',method='xx') }}