《Flask development》flask模板

一个最小的flask程序：

from flask import Flask
app = Flask(__name__)

@app.route('/')
def index():
    return '<h1>Hello World!</h1>'

if __name__ == '__main__':
    app.run(debug=True)

示例中比较简单直接把html代码写进视图函数， 但是现在开发的web程序都比较庞大复杂，这时模板就起到非常重要的作用了。

• 把业务逻辑和表现逻辑混在一起会导致代码难以理解和维护。假设要为一个大型表格构建HTML 代码，表格中的数据由数据库中读取的数据以及必要的 HTML 字符串连接在一起。把表现逻辑移到模板中能够提升程序的可维护性

• Flask 配备了* Jinja2 *模板引擎。你可以使用 render_template() 方法来渲染模板。模板存放在flask程序中的templates文件夹中。

hello.py：渲染模板
from flask import Flask, render_template
# ...

@app.route('/')
def index():
    return render_template('index.html')

@app.route('/user/<name>')
def user(name):
    return render_template('user.html', name=name)

Flask 提供的 render_template 函数把 Jinja2 模板引擎集成到了程序中。 render_template 函数的第一个参数是模板的文件名。随后的参数都是键值对，表示模板中变量对应的真实值。在这段代码中，第二个模板收到一个名为 name 的变量。

模板中的用法：

<h1>Hello, {{ name }}!</h1> #变量
Hello, {{ name|capitalize }} #过滤器

#控制结构
{% if user %}
    Hello, {{ user }}!
{% else %}
    Hello, Stranger!
{% endif %}

#for循环
<ul>
    {% for comment in comments %}
        <li>{{ comment }}</li>
    {% endfor %}
</ul>

#重复使用模板代码片段
{% include 'common.html' %}

#模板继承
{% extends "base.html" %}
{% block title %}Index{% endblock %}
{% block head %}
    {{ super() }}
    <style>
    </style>
{% endblock %}
{% block body %}
<h1>Hello, World!</h1>
{% endblock %}

• Jinja2 能识别所有类型的变量，甚至是一些复杂的类型，例如列表、字典和对象。

• extends 指令声明这个模板衍生自 base.html。在 extends 指令之后，基模板中的 3 个块被重新定义，模板引擎会将其插入适当的位置。注意新定义的 head 块，在基模板中其内容不是空的，所以使用 super() 获取原来的内容。

还有一强大插件Flask-Bootstrap：

Bootstrap 是客户端框架，因此不会直接涉及服务器。服务器需要做的只是提供引用了Bootstrap 层 叠 样 式 表（CSS） 和 JavaScript 文 件 的 HTML 响 应， 并 在 HTML、CSS 和JavaScript 代码中实例化所需组件。这些操作最理想的执行场所就是模板。

• 最简单的就是安装插件来使用：

(venv) $ pip install flask-bootstrap

• 初始化：

from flask.ext.bootstrap import Bootstrap
# ...
bootstrap = Bootstrap(app)

• 使用示例：

#templates/user.html：使用 Flask-Bootstrap 的模板
{% 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 %}

更多关于bootstrap的用法可以访问其中文官网bootstrap

链接：

• Flask 提供了 url_for() 辅助函数，它可以使用程序 URL 映射中保存
  的信息生成 URL。

• url_for() 函数最简单的用法是以视图函数名（或者 app.add_url_route() 定义路由时使用的端点名）作为参数，返回对应的 URL。例如，在当前版本的 hello.py 程序中调用 url_for(‘index’) 得到的结果是 / 。调用 url_for(‘index’, _external=True) 返回的则是绝对地址，在这个示例中是 http://localhost:5000/。

• 使用 url_for() 生成动态地址时，将动态部分作为关键字参数传入。例如， url_for(‘user’, name=’john’, _external=True) 的返回结果是http://localhost:5000/user/john。

• 传入 url_for() 的关键字参数不仅限于动态路由中的参数。函数能将任何额外参数添加到查询字符串中。例如， url_for(‘index’, page=2) 的返回结果是 /?page=2。

静态文件：

• 默认设置下，Flask 在程序根目录中名为 static 的子目录中寻找静态文件。存放HTML代码中引用的图片、JavaScript 源码文件和 CSS。其中有一个特殊的路由 static 。
  例如，调用
  url_for(‘static’, filename=’css/styles.css’, _external=True) 得 到 的 结 果 是 http://localhost:5000/static/css/styles.css。