第3节、模板引擎01

一、模板简介

概述： 模板就是按照一定的规则书写的负责展示的html页面，模板引擎提供特定规则、替换的工具。

模板引擎：jinja2

目录结构

project/
   templates/   #推荐使用该文件名，使用其他的名称需重新配置
   manage.py

模板渲染使用的方法

(1)render_template(template_name,**context)
响应一个html模板

(2)render_template_string
响应一段html代码（适合响应简短的样式的响应）

二、模板中语法的分类

1. 变量

视图传递给模板的数据
遵循变量/标识符的命名规则
关键字参数

实例
可以给render_template 添加关键字参数,进行变量的传递

   @tem.route('/test/')
   def test():
       h1con = '模板的变量'
       return render_template('test.html',h1=h1con) #渲染模板响应给用户
   模板中使用
   <h1>{{ h1 }}</h1>

注意： 如果给定的变量不存在则什么都不插入（什么都没有）

2. 标签 { % 标签名称 % }

就是python中的逻辑的判断
循环/if…

三、过滤器（相当于python中的函数）

过滤器使用管道符 | 添加上函数和值进行使用

abs 返回一个数值的绝对值
default 默认值

注意：默认只有当前变量不存在才执行默认值，将参数boolean改为True，则bool和undefined都执行默认值

实例

{{ bool|default('默认值') }}
{{ bool|default('默认值',boolean=True) }} boolean默认为False

first 返回序列中的第一个元素
last 返回序列中的最后一个值
format 格式化输出

{{ "我叫%s 我今年%d岁了 我的存款为%.2f元"|format('张三',18,123) }}

length 值长度
join 拼接

{{ ['a','b','c']|join('') }}
{{ data.str|join('x') }}

safe 对视图传递的html代码进行转义解析（默认不解析转义掉）
int 转换整形
float 浮点
string 字符串
list 转换成列表
upper 转换成大写
lower 转换成小写
replace 替换
```
{{ 'abcd'|replace('a','x') }}
```
striptags 取出html标签
trim 去除两侧空格

四、标签

语法格式：{ % % }

注意： 标签有开始，就要有结束

> < >= <= == != in not in and or

(1) if elif else

{ % if 90<=data.grade<=100 % }
    优秀

{ % elif 80<=data.grade % }
    良

{ % elif 70<=data.grade % }
    中
{ % else % }
    还可以
{ % endif % }

(2) for 循环

{ % for … % }

…

{ % endfor % }

迭代字典

{ % for k,v in data.items() % }
    <p>{{ k }}----{{ v }}</p>
{ % endfor % }

{ % for i in range(10) % }
    <p>{{ i }}</p>
{ % endfor % }

搭配else

{ % for i in abc % }
    <p>{{ i }}</p>
{ % else % }
    <h1>执行else了</h1>
{ % endfor % }

注意： 当迭代的变量不存在则执行else

获取当前迭代的状态

变量	说明
loop.index	当前迭代的索引从1开始
loop.index0	当前迭代的索引从0开始
loop.first	是否为第一次迭代
loop.last	是否为最后一次迭代
loop.length	迭代的长度

注意： 没有break 和 continue

五、注释

多行注释

{ # 注释的内容 # }

注意： 多行注释不能嵌套多行注释

六、文件的包含 include

概述：
include语句可以把一个模板导入到另外的一个模板的指定位置，就相当于把另外的模板中的代码粘贴到了你的指定位置

结构：

{ % include 路径/模板名称.html % }

实例

文件目录
project/
    templates/
        commom/
            header.html
            footer.html
        index.html
     manage.py

manage.py

@app.route('/')
def index():
    return render_template('index.html') #跳到首页模板

common/header.html

<header>导航</header>

common/footer.html

<footer>底部栏</footer>

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        header,footer{
            width:100%;
            height:40px;
            border:1px solid #000;
            background-color: #000;
            color: #fff;
        }
        div{
            width:100%;
            height:400px;
            background-color: red;
        }
    </style>
</head>
<body>
{ % include 'common/header.html' % }
<div></div>
{ % include 'common/footer.html' % }
</body>
</html>