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

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

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

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

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  8.     <h1>Hello {{ name }}!!!</h1>
  9. </body>
  10. </html>
{{  name }}就是一个变量符，它的值要渲染得到
1.2. 加载模板
  1. from flask import Flask
  2. from flask import render_template
  3.  
  4. app=Flask(__name__)
  5.  
  6. @app.route('/user/<name>')
  7. def user(name):
  8.     return render_template('user.html',name=name)
  9.  
  10. if __name__ == '__main__':
  11.     app.run(debug=True)
1.3 变量和过滤器

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

{{ MyList[1] }}

{{ MyObj.test() }}

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

用法： {{ name|uppr }}

1.4 控制结构

判断：

  1. {% if user %}
  2. 	Hello,{{ user }}
  3. {% else %}
  4.     Please input your name!!!
  5.  {% endif %}

循环：

  1. {% for name in user %}
  2.   <li>{{ name }}</li>
  3. {% endfor %}
1.5  定义宏　

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

macro.html

  1. {% macro render_comment(comment) %}
  2.  	<li>{{ comment }}</li>
  3. {% endmacro %}
  4.  
  5. <ul>
  6. 	{% for comment in comments %}
  7. 		{{ render_comment(comment) }}
  8. 	{% endfor %}
  9. </ul>

在模板中导入这个宏文件

  1. <body>
  2.     {% import 'macro.html' as macros %}
  3.     <ul>
  4.     	{% for user in names  %}
  5. 			{{ macros.render_comment(user) }}
  6. 		{% endfor %}
  7. 	<ul>
  8. </body>
1.6 继承

base.html

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     {% block head %}
  5.     <title>{% block title %}{% endblock %} - My APP</title>
  6.     {% endblock %}
  7. </head>
  8.  
  9. <body>
  10.     {% block body %}
  11.     {% endblock %}
  12. </body>
  13. </html>

　继承base.html

  1. {% extends "base.html" %}
  2.  
  3. {% block title %}Index{% endblock %}
  4.  
  5. {% block body %}
  6.     <h1>hello world</h1>
  7. {% endblock %}
2. 使用Flask-BootStrap

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

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

user.html

  1. {% extends "bootstrap/base.html" %}
  2.  
  3. {% block title %}Flasky{% endblock %}
  4.  
  5. {% block navbar %}
  6. <div class="navbar navbar-inverse" role="navigation">
  7.     <div class="container">
  8.         <div class="navbar-header">
  9.             <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
  10.                 <span class="sr-only">Toggle navigation</span>
  11.                 <span class="icon-bar"></span>
  12.                 <span class="icon-bar"></span>
  13.                 <span class="icon-bar"></span>
  14.             </button>
  15.             <a class="navbar-brand" href="/">Flasky</a>
  16.         </div>
  17.         <div class="navbar-collapse collapse">
  18.             <ul class="nav navbar-nav">
  19.                 <li><a href="/">Home</a></li>
  20.             </ul>
  21.         </div>
  22.     </div>
  23. </div>
  24. {% endblock %}
  25.  
  26. {% block content %}
  27. <div class="container">
  28.     <div class="page-header">
  29.         <h1>Hello, {{ name }}!</h1>
  30.     </div>
  31. </div>
  32. {% endblock %}

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

页面效果：

bootstrap/base.html定义的所有块

3.3 定义错误页面

hello.py

  1. from flask import Flask, render_template
  2. from flask_bootstrap import Bootstrap
  3.  
  4. app = Flask(__name__)
  5.  
  6. bootstrap = Bootstrap(app)
  7.  
  8. @app.errorhandler(404)
  9. def page_not_found(e):
  10.     return render_template('404.html'), 404
  11.  
  12. @app.errorhandler(500)
  13. def internal_server_error(e):
  14.     return render_template('500.html'), 500
  15.  
  16. @app.route('/')
  17. def index():
  18.     return render_template('index.html')
  19.  
  20. @app.route('/user/<name>')
  21. def user(name):
  22.     return render_template('user.html', name=name)
  23.  
  24. if __name__ == "__main__":
  25.     app.run()

　编写base.html

  1. {% extends "bootstrap/base.html" %}
  2.  
  3. {% block title %}Flasky{% endblock %}
  4.  
  5. {% block navbar %}
  6. <div class="navbar navbar-inverse" role="navigation">
  7.     <div class="container">
  8.         <div class="navbar-header">
  9.             <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
  10.                 <span class="sr-only">Toggle navigation</span>
  11.                 <span class="icon-bar"></span>
  12.                 <span class="icon-bar"></span>
  13.                 <span class="icon-bar"></span>
  14.             </button>
  15.             <a class="navbar-brand" href="/">Flasky</a>
  16.         </div>
  17.         <div class="navbar-collapse collapse">
  18.             <ul class="nav navbar-nav">
  19.                 <li><a href="/">Home</a></li>
  20.             </ul>
  21.         </div>
  22.     </div>
  23. </div>
  24. {% endblock %}
  25.  
  26. {% block content %}
  27. <div class="container">
  28.     {% block page_content %}{% endblock %}
  29. </div>
  30. {% endblock %}

　　编写404.html

  1. {% extends "base.html" %}
  2.  
  3. {% block title %}Flasky - Page Not Found{% endblock %}
  4.  
  5. {% block page_content %}
  6. <div class="page-header">
  7.     <h1>Not Found</h1>
  8. </div>
  9. {% endblock %}
　　3.4 静态文件
  1. {% extends "bootstrap/base.html" %}
  2.  
  3. {% block title %}Flasky{% endblock %}
  4.  
  5. {% block head %}
  6. {{ super() }}
  7. <link rel="shortcut icon" href="{{ url_for('static', filename='favicon.ico') }}" type="image/x-icon">
  8. <link rel="icon" href="{{ url_for('static', filename='favicon.ico') }}" type="image/x-icon">
  9. {% endblock %}
  10.  
  11. {% block navbar %}
  12. <div class="navbar navbar-inverse" role="navigation">
  13.     <div class="container">
  14.         <div class="navbar-header">
  15.             <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
  16.                 <span class="sr-only">Toggle navigation</span>
  17.                 <span class="icon-bar"></span>
  18.                 <span class="icon-bar"></span>
  19.                 <span class="icon-bar"></span>
  20.             </button>
  21.             <a class="navbar-brand" href="/">Flasky</a>
  22.         </div>
  23.         <div class="navbar-collapse collapse">
  24.             <ul class="nav navbar-nav">
  25.                 <li><a href="/">Home</a></li>
  26.             </ul>
  27.         </div>
  28.     </div>
  29. </div>
  30. {% endblock %}
  31.  
  32. {% block content %}
  33. <div class="container">
  34.     {% block page_content %}{% endblock %}
  35. </div>
  36. {% 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. iOS:用Block写一个链式编程

    一.介绍 链式编程是一个比较新颖的编程方式,简单直观,用起来也比较舒服.目前比较有名的Mansory和BabyBlueTooth就是使用链式编程写的第三方框架. 二.写法 链式编程写法不同于传统方式, ...

  2. 新鲜：阿里云的DataV数据可视化技术可以用起来

    直接通过拖拽+关联的方式就可以比较方便的做出下面这种大屏展示数据的界面   只要阿里云上购买DataV数据可视化套件(https://data.aliyun.com/experience/case8? ...

  3. 几种php加速器比较

    一.PHP加速器介绍 PHP加速器是一个为了提高PHP执行效率,从而缓存起PHP的操作码,这样PHP后面执行就不用解析转换了,可以直接调用PHP操作码,这样速度上就提高了不少. Apache中使用mo ...

  4. MySQL查看数据库表容量大小

    本文介绍MySQL查看数据库表容量大小的命令语句,提供完整查询语句及实例,方便大家学习使用. 1.查看所有数据库容量大小 select table_schema as '数据库', sum(table ...

  5. 【Mac使用系列】常用软件及快捷键

    Mac下配置ss: 下载地址:https://github.com/shadowsocks/shadowsocks-iOS/releases 旧版本:https://blog.csdn.net/vqh ...

  6. python2判断编码格式

    def getCoding(strInput): ''' 获取编码格式 ''' if isinstance(strInput, unicode): return "unicode" ...

  7. SNF快速开发平台--规则引擎介绍和使用文档

    设计目标: a) 规则引擎语法能够满足分单,计费,WMS策略的配置要求.语法是一致和统一的 b) 能够在不修改规则引擎模块的情况下,加入任意一个新的规则:实现上述需求之外的规则配置需求 c) 运算速度 ...

  8. 处理用千牛导出淘宝数据，供Logstash到Elasticsearch使用。（NodeJS）

    var rf=require("fs"); // 加载编码转换模块 //npm install iconv-lite var iconv = require('iconv-lite ...

  9. ES6，Array.of()函数的用法

    ES6为Array增加了of函数用已一种明确的含义将一个或多个值转换成数组. 因为,用new Array()构造数组的时候,是有二意性的. 构造时,传一个参数,表示生成多大的数组. 构造时,传多个参数 ...

  10. Paxos算法1-算法形成理论[转载]

    地址 http://blog.csdn.net/chen77716/article/details/6166675 中文wiki http://zh.wikipedia.org/zh-cn/Paxos ...