概述：模板就是按照特定规则书写的负责展示效果的HTML文件，模板引擎就是特定规则的解释和替换的工具jinja2；flask的模板引擎使用的就是jinja2的模板引擎，它是由flask核心开发组成员开发。
一、模板
1、工作目录
project/
manage.py/ 项目启动控制文件
templates/ 模板文件的目录2、渲染模板
方法1：render_template
视图文件
# 视图文件
@app.route('/')
def index():
return render_template('index.html')模板文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>首页</title>
</head>
<body>
hello world!
</div>
</body>
</html>方法2：render_template_string
# 视图文件
@app.route('/')
def index():
render_template_string('<p style="color:blue;font-size:20px">你好，世界！</p>')使用变量
# 视图函数
@app.route('/')
def index():
return render_template('index.html', name='marry', age=25)
# 模板渲染
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>首页</title>
</head>
<body>
{{ name}}--{{ age}}
</body>
</html>注意：如果传入的变量不存在，则在模板中插入空白字符。
二、标签
1、作用
- 在输出中创建文本；
- 控制逻辑与循环
2、流程控制
（1）if语句
主体结构：
{% if 条件 %}
pass
{% elif 条件 %}
pass
{% else %}
pass
{% endif %}实例：
{% if age<=18 %}
{{ name }}用户为儿童用户
{% elif age<=30 %}
{{ name }}用户为青年用户
{% elif age<=60 %}
{{ name }}用户为中年用户
{% else%}
{{ name }}用户为老年用户
{% endif %}（2）for循环
实例1：迭代列表
{% for i in myRange %}
第{{ i }}次迭代<br>
{% else %}
没有找到该变量<br>
{% endfor %}实例2：迭代字典
{% for key,value in myInfo.items() %}
我的{{ key }}是{{ value }}，
{% else %}
没有找到该变量<br>
{% endfor %}变量：for循环中还包含了一些变量，用来获取当前变量状态。
| 变量 | 描述 |
| loop.index | 当前迭代的索引从1开始 |
| loop.index0 | 当前迭代的索引从0开始 |
| loop.first | 是否为第一次迭代，如果是则返回True |
| loop.last | 是否为最后一次迭代，如果是则返回True |
| loop.length | 迭代的长度 |
实例：
{% for item in myRange %}
{{ loop.index }}--
{{ loop.index0 }}--
{{ loop.first }}--
{{ loop.last }}--
{{ loop.length }}<br>
{% endfor %}注意：
- for循环搭配else，只有当迭代的变量不存在的时候才会执行else；
- 循环不可以使用continue和break来控制循环的执行；
三、注释标签
1、作用
- 代码调试
- 说明代码内容
格式：
{# 注释内容 #}注意：注释的代码不会在浏览器中的html中显示出来
四、文件包含include
1、概述：
include语句可以把一个模板引入到另外一个模板，类似于把一个不安的代码copy到另外一个模板的指定位置中实现模板代码的复用；
2、实例
header.html
<header>我是头部</header>footer.html
<footer>我是尾部</footer>test_include.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test_include</title>
<style>
*{
padding: 0;
margin: 0;
}
header{
width: 100%;
height: 40px;
background-color: #000;
color: #fff;
}
footer{
width: 100%;
height: 100px;
background-color: antiquewhite;
position: absolute;
bottom: 0;
}
</style>
</head>
<body>
{% include 'common/header.html' %}
<div>我是中间主体部分</div>
{% include 'common/footer.html' %}
</body>
</html>五、宏macro
1、概述
类似于python中的函数，可以封装一段特殊功能的html代码。
2、使用实例
<body>
{% macro test(name='关羽',age=25) %}
<p>我的名字叫{{ name }},我今年{{ age }}岁了！</p>
{% endmacro %}
{{ test(name='张飞',age=27) }} # 传参
{{ test() }} # 使用默认参数
</body>3、导入宏
宏的导入
{% macro test(name='关羽',age=25) %}
<p>我的名字叫{{ name }},我今年{{ age }}岁了！</p>
{% endmacro %}宏的调用
{% from 'common/pubilc_macro.html' import test %}
{{ test() }}
{% from 'common/pubilc_macro.html' import test as t1 %}
{{ t1() }}
{% import 'common/pubilc_macro.html' as t1 %}
{{ t1.test()}} 六、模板继承
flask中的模板可以继承，通过继承可以把模板中许多重复出现的元素抽取出来，放在父亲模板中，并且父亲模板通过定义block给自模板开一口，自末班根据需要再实现block
关键标签
- extends：继承
- block:替换
实例：
视图函数：
@app.route('/')
def hello():
return render_template('hello.html')父模板：base.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>{% block title %}父模板{% endblock %}</title>
</head>
<body>
{% block context %}<h2>我是父模板中的内容</h2>{% endblock %}
</body>
</html>子模板：hello.html
{% extends 'common/base.html' %}
{% block title %}子模板{% endblock %}
{% block context %}
{{ super() }}
我是子模板
{% endblock %}注意：
- 父模板中添加了block，但是在子模板中没有被替换，则正常显示，无任何影响；
- 在子模板进行block替换的位置以外的地方添加任何代码都不会被显示出来；
- 如果在子模板中进行了父模板中某个block内容的替换，如果想将替换的内容显示出来，则调用变量super()方法；{{ super() }};
- 父模板中如果存在的block越多，那么就证明父模板越灵活。
七、flask-bootstrap扩展库
1、概述
安装：
pip install flask-bootstrap实例化bootstrap对象：
from flask import Flask,redirect,url_for,render_template,render_template_string,request
from flask_script import Manager
from flask_bootstrap import Bootstrap
app = Flask(__name__)
Bootstrap(app=app) # 实例化bootstrap对象
manager=Manager(app)查看flask-bootstrap扩展库的base.html
{% block doc -%}
<!DOCTYPE html>
<html{% block html_attribs %}{% endblock html_attribs %}>
{%- block html %}
<head>
{%- block head %}
<title>{% block title %}{{title|default}}{% endblock title %}</title>
{%- block metas %}
<meta name="viewport" content="width=device-width, initial-scale=1.0">
{%- endblock metas %}
{%- block styles %}
<!-- Bootstrap -->
<link href="{{bootstrap_find_resource('css/bootstrap.css', cdn='bootstrap')}}" rel="stylesheet">
{%- endblock styles %}
{%- endblock head %}
</head>
<body{% block body_attribs %}{% endblock body_attribs %}>
{% block body -%}
{% block navbar %}
{%- endblock navbar %}
{% block content -%}
{%- endblock content %}
{% block scripts %}
<script src="{{bootstrap_find_resource('jquery.js', cdn='jquery')}}"></script>
<script src="{{bootstrap_find_resource('js/bootstrap.js', cdn='bootstrap')}}"></script>
{%- endblock scripts %}
{%- endblock body %}
</body>
{%- endblock html %}
</html>
{% endblock doc -%}
继承bootstrap库中的base.html,并替换部分内容
{% extends 'bootstrap/base.html' %}
{% block title %}我是bootstrap替换后的标题{% endblock %}
{% block content %}我是bootstrap替换后的导航栏{% endblock %}bootstrap库中所有block的作用
| block | 说明 |
| doc | 整个HTML文档 |
| html | HTML内部所有代码 |
| head | head标签 |
| title | title标签 |
| style | 引入css样式 |
| metas | 一组meta标签 |
| body | body标签 |
| navbar | 用户自定义导航条 |
| content | 用户自定义内容 |
| scripts | 用户自定义js脚本 |
路由和视图函数
@app.route('/')
def hello():
return render_template('common/bootstrap_base.html')
400
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
