为了把业务逻辑和表现逻辑分开，Flask把表现逻辑移到JinJa2模板，模板是一个包含响应文本的文件。它用占位变量表示动态部分，其具体要从请求上下文才知道。

把真实值替换掉占位变量成为渲染，JinJa2模板的创造者也是Flask的创造者，所以不需要额外安装包。

1. Flask使用模板
1.1 建立模板

在程序的同一级目录下建立templates目录，在该目录下建立user.html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <h1>Hello {{ name }}!!!</h1>

</body>

</html>
{{  name }}就是一个变量符，它的值要渲染得到
1.2. 加载模板
from flask import Flask

from flask import render_template

app=Flask(__name__)

@app.route('/user/<name>')

def user(name):

    return render_template('user.html',name=name)

if __name__ == '__main__':

    app.run(debug=True)
1.3 变量和过滤器

JinJia2可以识别所有类型变量，如：

{{ MyList[1] }}

{{ MyObj.test() }}

Jinja2还提供了过滤器用于修改变量

用法： {{ name|uppr }}

1.4 控制结构

判断：

{% if user %}

	Hello,{{ user }}

{% else %}

    Please input your name!!!

 {% endif %}

循环：

{% for name in user %}

  <li>{{ name }}</li>

{% endfor %}
1.5  定义宏　

宏类似于Python中的函数，可以被重复使用

macro.html

{% macro render_comment(comment) %}

 	<li>{{ comment }}</li>

{% endmacro %}

<ul>

	{% for comment in comments %}

		{{ render_comment(comment) }}

	{% endfor %}

</ul>

在模板中导入这个宏文件

<body>

    {% import 'macro.html' as macros %}

    <ul>

    	{% for user in names  %}

			{{ macros.render_comment(user) }}

		{% endfor %}

	<ul>

</body>
1.6 继承

base.html

<!DOCTYPE html>

<html lang="en">

<head>

    {% block head %}

    <title>{% block title %}{% endblock %} - My APP</title>

    {% endblock %}

</head>

<body>

    {% block body %}

    {% endblock %}

</body>

</html>

　继承base.html

{% extends "base.html" %}

{% block title %}Index{% endblock %}

{% block body %}

    <h1>hello world</h1>

{% endblock %}
2. 使用Flask-BootStrap

想要在程序中继承bootstrap，可以使用flask-bootstrap的flask拓展，简化集成过程。

2.1 安装Flask-BootStrap
pip install flask-bootstrap
2.2 继承bootstrap/base.html

user.html

{% extends "bootstrap/base.html" %}

{% block title %}Flasky{% endblock %}

{% block navbar %}

<div class="navbar navbar-inverse" role="navigation">

    <div class="container">

        <div class="navbar-header">

            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">

                <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="/">Flasky</a>

        </div>

        <div class="navbar-collapse collapse">

            <ul class="nav navbar-nav">

                <li><a href="/">Home</a></li>

            </ul>

        </div>

    </div>

</div>

{% endblock %}

{% block content %}

<div class="container">

    <div class="page-header">

        <h1>Hello, {{ name }}!</h1>

    </div>

</div>

{% endblock %}

　　navbar和content分别表示导航条和主体内容

页面效果：

bootstrap/base.html定义的所有块

3.3 定义错误页面

hello.py

from flask import Flask, render_template

from flask_bootstrap import Bootstrap

app = Flask(__name__)

bootstrap = Bootstrap(app)

@app.errorhandler(404)

def page_not_found(e):

    return render_template('404.html'), 404

@app.errorhandler(500)

def internal_server_error(e):

    return render_template('500.html'), 500

@app.route('/')

def index():

    return render_template('index.html')

@app.route('/user/<name>')

def user(name):

    return render_template('user.html', name=name)

if __name__ == "__main__":

    app.run()

　编写base.html

{% extends "bootstrap/base.html" %}

{% block title %}Flasky{% endblock %}

{% block navbar %}

<div class="navbar navbar-inverse" role="navigation">

    <div class="container">

        <div class="navbar-header">

            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">

                <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="/">Flasky</a>

        </div>

        <div class="navbar-collapse collapse">

            <ul class="nav navbar-nav">

                <li><a href="/">Home</a></li>

            </ul>

        </div>

    </div>

</div>

{% endblock %}

{% block content %}

<div class="container">

    {% block page_content %}{% endblock %}

</div>

{% endblock %}

　　编写404.html

{% extends "base.html" %}

{% block title %}Flasky - Page Not Found{% endblock %}

{% block page_content %}

<div class="page-header">

    <h1>Not Found</h1>

</div>

{% endblock %}
　　3.4 静态文件
{% extends "bootstrap/base.html" %}

{% block title %}Flasky{% endblock %}

{% block head %}

{{ super() }}

<link rel="shortcut icon" href="{{ url_for('static', filename='favicon.ico') }}" type="image/x-icon">

<link rel="icon" href="{{ url_for('static', filename='favicon.ico') }}" type="image/x-icon">

{% endblock %}

{% block navbar %}

<div class="navbar navbar-inverse" role="navigation">

    <div class="container">

        <div class="navbar-header">

            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">

                <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="/">Flasky</a>

        </div>

        <div class="navbar-collapse collapse">

            <ul class="nav navbar-nav">

                <li><a href="/">Home</a></li>

            </ul>

        </div>

    </div>

</div>

{% endblock %}

{% block content %}

<div class="container">

    {% block page_content %}{% endblock %}

</div>

{% endblock %}

　　url_for会找到视图函数对应的URL。

Flask框架（2）-JinJa2模板的更多相关文章

  1. Flask 框架下 Jinja2 模板引擎高层 API 类——Environment

    Environment 类版本: 本文所描述的 Environment 类对应于 Jinja2-2.7 版本.   Environment 类功能: Environment 是 Jinja2 中的一个 ...

  2. Python框架学习之Flask中的Jinja2模板

    前面也提到过在Flask中最核心的两个组件是Werkzeug和Jinja2模板.其中Werkzeug在前一节已经详细说明了.现在这一节主要是来谈谈Jinja2模板. 一.为什么需要引入模板: 在进行软 ...

  3. 自定义Web框架与jinja2模板

    web应用与web框架 web应用 对于所有的Web应用,本质上其实就是一个socket服务端,用户的浏览器其实就是一个socket客户端 import socket def handle_reque ...

  4. Flask初学者：Jinja2模板

    Python的Jinja2模板,其实就是在HTML文档中使用控制语句和表达语句替换HTML文档中的变量来控制HTML的显示格式,Python的Jinja2模板可以更加灵活和方便的控制HTML的显示,而 ...

  5. flask(二)之Jinja2模板与Flask-WTF

    01-文档 官方文档:http://docs.jinkan.org/docs/jinja2/ 02-基本语义 Jinja2做构成的模板文件中,文本内容大致可以分成几个种类.比如特殊文本(不进行转义,比 ...

  6. 测开之路二十九：Flask基础之jinja2模板

    中文文档:http://docs.jinkan.org/docs/jinja2/ 与静态资源一样,Flask默认的模板目录名为templates,如果有需要的话和static一样,要在初始化的时候声明 ...

  7. 测开之路三十：Flask基础之jinja2模板继承

    实现某些位置的内容固定,某些位置的内容动态展示,如: 中文文档地址:http://docs.jinkan.org/docs/jinja2/templates.html#template-inherit ...

  8. Flask框架函数

    title: flask学习笔记 subtitle: 1. flask框架函数 date: 2018-12-14 10:17:28 --- Flask学习 学习Miguel Grinberg的2017 ...

  9. flask框架下的jinja2模板引擎(2)(过滤器与自定义过滤器)

    flask框架下的jinja2模块引擎(1):https://www.cnblogs.com/chichung/p/9774556.html 这篇论文主要用来记录下 jinja2 的过滤器. 什么是过 ...

  10. flask框架下的jinja2模板引擎(1)(模板渲染)

    #转载请留言联系 模板是什么? 在 flask 框架中,视图函数有两个作用:处理业务逻辑和返回响应内容.在大型应用中,把业务逻辑和表现内容放在一起,会增加代码的复杂度和维护成本.模板作用即是承担视图函 ...

随机推荐

  1. Linux.Centos.yum命令的“No module named yum”错误

    Centos版本: uname -a Linux ygpiao -.el6.x86_64 # SMP Tue Jun :: UTC x86_64 x86_64 x86_64 GNU/Linux 在一次 ...

  2. UVa 127 - &quot;Accordian&quot; Patience POJ 1214 链表题解

    UVa和POJ都有这道题. 不同的是UVa要求区分单复数,而POJ不要求. 使用STL做会比較简单,这里纯粹使用指针做了,很麻烦的指针操作,一不小心就错. 调试起来还是很费力的 本题理解起来也是挺费力 ...

  3. WebSocket——为Web应用带来桌面应用般的灵活性【转载+整理】

    原文地址 本文内容 WebSocket 简介 浏览器端的 JavaScript 实现 Java 端的 WebSocket 实现 对 Web 应用的重新思考 使用WebSocket时所需注意的要点 We ...

  4. wifipineapple获取用户上网信息

    ssh连接到wifipineapple: 输入连接信息:ssh root@172.16.42.1 输入密码:pineapplesareyummy 安装依赖基本环境: opkg update opkg ...

  5. 利用python制作在Linux服务器后台定时运行的任务-邮件提醒

    1. 自动任务的功能为: 定时扫描数据库中的记录,然后发邮件 代码如下 scheduleMail.py import pymysql import smtplib from email.mime.te ...

  6. git 命令常用总结

    详细git教程可参考:http://www.liaoxuefeng.com/wiki/0013739516305929606dd18361248578c67b8067c8c017b000 基础命令 用 ...

  7. 9-8-B树-查找-第9章-《数据结构》课本源码-严蔚敏吴伟民版

    课本源码部分 第9章  查找 - B树 ——<数据结构>-严蔚敏.吴伟民版        源码使用说明  链接☛☛☛ <数据结构-C语言版>(严蔚敏,吴伟民版)课本源码+习题集 ...

  8. ES6，新增数据结构Map的用法

    Javascript的Object本身就是键值对的数据结构,但实际上属性和值构成的是”字符串-值“对,属性只能是字符串,如果传个对象字面量作为属性名,那么会默认把对象转换成字符串,结果这个属性名就变成 ...

  9. 【iCore1S 双核心板_FPGA】例程三：计数器实验——计数器的使用

    实验现象: 程序下载成功后,程序中的计数器开始计数,每次计满后,计数器清零,三色LED中红色LED的状态反转.可以看到,红色LED以一定的时间间隔闪烁. 核心源代码: //-------------- ...

  10. 【emWin】例程十六：窗口管理器

    介绍: 显示器上出现的任何内容都包含在窗口中,窗口可以为任何尺寸,并且可在屏幕上一次显示多个窗口, 甚至部分或整个窗口在其他窗口的前面也可.我们可以对窗口进行创建.移动.调整大小等操作,也 可以操控任 ...