1. jinja2
Flask中使用jinja2模板引擎
jinja2是由Flask作者开发，模仿Django的模板引擎
优点：
速度快，被广泛使用
HTML设计和后端python分离
非常灵活，快速和安全
提供了控制，继承等高级功能
2. 模板语法
2.1 模板语法主要分为两种：变量和标签
模板中的变量：{{ var }}
视图传递给模板的数据
前面定义出来的数据
变量不存在，默认忽略
模板中的标签：{% tag %}
控制逻辑
使用外部表达式
宏定义
2.2 结构标签：
- block:
{% block xxx %}
{% endblock %}
块操作
父模板挖坑，子模板填坑
-
extends :
{% extends ‘xxx.html’ %}
继承以后保留块中的内容
{{ super() }}
挖坑继承体现的化整为零的操作 - macro:
{% macro hello(name) %}
{{ name }}
{% endmacro %}
宏定义，可以在模板中定义函数，在其他地方调用
宏定义可导入
{% from 'xxx' import xxx %}
例子1：
在index.html中定义macro标签，定义一个方法，然后去调用方法，结果是展示商品的id和商品名称
{% macro show_goods(id, name) %}
商品id：{{ id }}
商品名称：{{ name }}
{% endmacro %}
{{ show_goods('1', '娃哈哈') }}
<br>
{{ show_goods('2', '雪碧') }}
例子2：
在index.html页面中定义一个say()方法，然后解析该方法：
{% macro say() %}
<h3>今天天气气温回升</h3>
<h3>适合去游泳</h3>
<h3>适合去郊游</h3>
{% endmacro %}
{{ say() }}
例子3：
定义一个function.html中定义一个方法：
{% macro create_user(name) %}
创建了一个用户:{{ name }}
{% endmacro %}
在index.html中引入function.html中定义的方法
{% from 'functions.html' import create_user %}
{{ create_user('小花') }}`
2.3 循环
{% for item in cols %}
{% if <conditional statement > :%}
aa
{% else %}
bb
{% endif %}
{% endfor %}
也可以获取循环信息loop
loop.first
loop.last
loop.index
loop.revindex
例子:
在视图中定义一个视图函数：
@stu.route('/scores/')
def scores():
scores_list = [21,34,32,67,89,43,22,13]
content_h2 = '<h2>今天你们真帅</h2>'
content_h3 = ' <h3>今天你们真帅</h3> '
return render_template('scores.html',
scores=scores_list,
content_h2=content_h2,
content_h3=content_h3)
(该视图函数，在下面讲解的过滤器中任然使用其返回的content_h2等参数)
首先: 在页面中进行解析scores的列表。题目要求：第一个成绩展示为红色，最后一个成绩展示为绿色，其他的不变
{% for score in scores %}
{% if loop.first %}
<li style="color:red;">{{ loop.revindex }}:{{ loop.index }}:{{ score }}</li>
{% elif loop.last %}
<li style="color:green;">{{ loop.revindex }}:{{ loop.index }}:{{ score }}</li>
{% else %}
<li> {{ loop.revindex }}:{{ loop.index }}:{{ score }}</li>
{% endif %}
{% endfor %}
</ul>
2.4 过滤器
过滤器资料链接
语法：
{{ 变量|过滤器|过滤器... }}
| capitalize | 单词首字母大写 |
|---|---|
| lower | 单词变为小写 |
| upper | 单词变为大写 |
| title | |
| trim | 去掉字符串的前后的空格 |
| reverse | 单词反转 |
| format | |
| striptags | 渲染之前，将值中标签去掉 |
| safe | 讲样式渲染到页面中 |
| default | |
| last | 最后一个字母 |
| first | |
| length | |
| sum | |
| sort |
例子：
<ul>
<li>{{ content_h2 }}</li>
<li>{{ content_h2|safe }}</li>
<li>{{ content_h2|striptags }}</li>
<li>{{ content_h3 }}</li>
<li>{{ content_h3|length }}</li>
<li>{{ content_h3|trim|safe }}</li>
<li>{{ content_h3|trim|length }}</li>
</ul>
过滤器
过滤器通过管道符号“|”与变量连接，并且可以通过圆括号传递参数。
| 过滤器 | 说明 |
|---|---|
| abs(number) | 将被转换的变量转换为绝对值形成 |
| attr(object,name) | 获得被转换的变量的指定属性 account attr('name')与account["name"]同效果 |
| capitalize(s) | 将字符串的第一个字符转换为大写，之后的小写 |
| center(value,width=80) | 接受一个字符串，将其置于80的长度中并居中，不足的字符使用空格填充 |
| default(value,default_name="u",boolean=False) | 返回value指定的变量值，比如value是未定义的，则返回default_value指定的值，如果在value被指定为False时，也想用default_value替换，需要设置为Ture |
| dictsort(value,case_sensitive=False,by='key') | value为要遍历的字典，case_sensitive指示是否立即加载，设置为False表示延迟加载，by表示以什么方式排序，默认以key键排序，也可以设置by=‘key’来以值排序 |
| escape(string) | 把字符串的HTML特殊字符，转换为HTML表达方式 |
| filesizeformat(value,binary=False) | 接受一个数值，返回让人容易阅读的形式，比如10KB，1.3MB，如果打开binary，显示以Mebi,Gibi形式展示 |
| first(sequence) | 返回序列的第一个元素 |
| float(value,default=0.0) | 将接受的value转换为float类型，如果转换失败则返回指定的default值 |
| forcesscape(value) | 强制进行HTML转码，不检查要转码的字符串是否被标记为安全 |
| format(value,*attribute) | 字符串格式化转化 |
| groupby(value,attribute) | 按照指定的共有属性将集合进行分组，返回元祖组成的列表 |
| indent(string,width=4,indentfirst=False) | 将接受的string每行缩进width指定的字符数，indentfirst用来指定首行是否缩进 |
| int(value,default=0) | 将接受的value转换成int型，如果转换失败了，则返回default指定的值 |
| join(value,d='u') | 接受一个序列类型的对象，返回用d指定的字符将所有序列元素连接在一起的字符串结果 |
| last(seq) | 返回指定序列的最后一个元素 |
| length(obj) | 返回序列或者字典的项数 |
| lower(string) | 将接受的字符串转换为小写形式 |
| pprint(value,verbose=False) | 漂亮地打印一个变量的值，多用于调试，verbose是否显示冗长的信息 |
| random(seq) | 接受一个序列对象，随机返回其中一个元素 |
| replace(string old,new, count=None) | 接受一个字符串，将其中old表示的子串替换成new指定的子串，count是指定替换次数，不指定则替换一次 |
| reverse(value) | 接受一个可迭代的对象，返回逆序的迭代器 |
| round(value,precision = 0,method='common') | 舍去运算，接受一个值，percision表示精度，common，ceil,floor分别为四舍五入，进位，舍去 |
| safe(value) | 标记传入的value值是安全的，使用escape转码时不会进行二次转码 |
| slice(value,slices,fill_width=None) | 切片，接受一个可迭代的对象，不足slices个则使用fill_width指定的对象进行填充 |
| sort(value,reverse=False,case_sensitive=False,attribute=None) | 对可迭代的变量进行排序。默认情况下以升序，大小写不敏感的方式进行，如果变量本身包含属性，通过attribute参数按变量中属性排序 |
| string(object) | 变成字符串类型 |
| striptags(value) | 去除SGML,XML标签 |
| sum(iterable,attribute=None,start=0) | 对可迭代变量进行求和，如果包含属性，可以设置attribute参数 |
| title(s) | 将字符串转换为以标题形式显示 |
| trim(value) | 去除字符串的前导和续尾空格 |
| truncate(s,length=255,killwords=False,end='...') | 将字符串转换为简略形式，length截取长度，killWord设置是否保持单词完整性，end为简略写法后缀 |
| upper(s) | 将字符串转换为大写 |
| wordcount(s) | 计算字符串个数 |
| wordwrap(s,width=79,break_long_words=True,wrapstring=None) | 将字符串按参数中的值进行分行处理 |
3. 定义模板
3.1 定义基础模板base.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>
{% block title %}
{% endblock %}
</title>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
{% block extCSS %}
{% endblock %}
</head>
<body>
{% block header %}
{% endblock %}
{% block content%}
{% endblock %}
{% block footer%}
{% endblock %}
{% block extJS %}
{% endblock %}
</body>
</html>
3.2 定义基础模板base_main.html
{% extends 'base.html' %}
{% block extCSS %}
<link rel="stylesheet" href="{{ url_for('static', filename='css/main.css') }}">
{% endblock %}
4. 静态文件信息配置
-
Django：
第一种方式：
{% load static %}
<link rel="stylesheet" href="{% static 'css/index.css' %}">
第二种方式：
<link rel="stylesheet" href="/static/css/index.css"> -
Flask：
第一种方式：
{% load static %}
<link rel="stylesheet" href="/static/css/index.css">
第二种方式：
<link rel="stylesheet" href="{{ url_for('static', filename='css/index.css') }}">
网友评论