Flask Web开发--狗书笔记003--第三章 模板

一般而言,请求会改变程序的状态,而这种变化也会在视图函数中产生。

举个栗子,当我们在网站中注册了一个新账户,用户在表单中输入电子邮箱和密码,然后点击提交按钮。
服务器接收到包含y用户输入数据的请求,然后Flask把请求分发到注册请求的视图函数。
这个视图函数需要访问数据库,添加新用户,然后生成相应回送浏览器。
这两个过程分别是业务逻辑表现逻辑

表格中的数据由数据库中读取的数据以及必要的html字符串连接在一起。把表现逻辑移到模板中能够提升程序的可维护性。

模板是一个包含了响应文本的文件,其中包含用占位变量表示的动态部分,其具体值只有在请求的上下文中才能知道。

用真实值替换变量,再返回最终得到的字符串,这一个过程称之为渲染

为了渲染模板,Flask使用了一个叫做Jinjia2的模板引擎

Jinjia2模板引擎

给一个简单的栗子…

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

渲染模板

默认情况下,Flask在程序文件夹中的template子文件夹中寻找模板。

Flask提供的render_template函数把Jinjia2模板引擎集成到了程序中。render_template函数的第一个参数是模板的文件名,随后的参数都是键值对。
示例代码:

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

变量

{{name}} 结构表示一个变量,是一种特殊的占位符。目的是告诉模板引擎这个位置的值从渲染模板时使用的数据中获取。

Jinjia2能够识别所有类型的变量,例如字典、列表和对象。

举几个栗子…

<p>A value from a dictionary:{{ mydict['key'] }}</p>
<p>A value from a list:{{ mylist[3] }}</p>
<p>A value from a dictionary:{{ mylist[myintvar] }}</p>
<p>A value from a object's method:{{ myobj.somemethod() }}</p>

我们可以使用过滤器来修改变量,过滤器添加在变量名之后,中间用竖线分隔。
栗子,下面的模板以首字符大写形式显示变量name的值:

Hello,{{ name|capitalize }}

列出一些Jinjia2常用的过滤器:
这里写图片描述

safe与转义

默认情况下,出于安全考虑,Jinjia2会转义所有的变量。转义的意思是如果一个变量的值是'<h1>Hello</h1>',Jinjia2会将其渲染成'&lt;h1&gt;Hello&lt;/h1&gt;',浏览器可以显示这个h1元素(就是会显示出这个Hello,但是不会进行解释,变成标题1的样式)。但是很多情况下我们是需要显示变量中存储的HTML代码,这时候就可以使用safe过滤器。
注意:千万不要在不可信的值上使用safe过滤器,例如用户在表单中输入的文本。

笔者为我们提供了一个完整的过滤器列表的文档:

http://jinja.pocoo.org/docs/templates/#builtin-filters

控制结构

条件控制语句:

{% if user %}
Hello,{{ user }}
{% else %}
Hello,Stranger!
{% endif %}

另外一种常见的需求是在模板中渲染一组元素,下面展示如何使用for循环来实现这一需求:

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

Jinja2还支持。宏类似于Python代码中的函数,例如:

{% macro render_comment(comment) %}
<li>{{ comment }}</li>
{% endmacro %}

<ul>
    {% for comment in comments %}
        {{ render_comment(comment) }}
    {% endfor %} 
</ul>

为了重复使用宏,我们可以将其保存在单独的文件中,然后在需要使用的模板中导入:

{% import 'macros.html' as macros %}
<ul>
    {% for comment in comments %}
        {{ macros.render_comment(comment) }}
    {% endfor %} 
</ul>

需要在多处重复使用的模板代码片段可以写入单独的文件,再包含在所有模板中,以避免重复:

{% include 'common.html' %}

模板继承

另外一种使用代码的强大方式是模板继承,它类似于Python代码中的类继承。首先,创建一个base.html的基模板:

<!DOCTYPE html>
<html lang="en">
<head>
    {% block head %}
    <title>{% block title %}{% endblock %} - My Application</title>
    {% endblock %}
</head>
<body>
    {% block body %}
    {% endblock %}
</body>
</html>

block标签定义的元素可以在衍生模板中修改。
下面是这个示例是基模板的衍生模板:

{% extends 'base.html' %}
{% block title %}Index{% endblock %} 
{% block head %}{{ super() }} <style></style>{% endblock %}
{% block body %}
<h1>Hello,World!</h1>
{% endblock %}

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

使用Flask-Bootstrap集成Twitter Bootstrap

Bootstrap(http://getbootstrap.com/)是Twitter开发的一个开源框架,是一个客户端框架。服务器要做的知识提供引用了Bootstrap层叠样式表(CSS)和js文件的HTML响应,并在HTML、CSS和js代码中实例化所需组件。这些操作最理想的执行场所就是模板。

要想在程序中集成Bootstrap,显然要对模板做所有必要的改动。

不过当然有简单的办法了,安装Flask-Bootstrap的flask扩展

pip install flask-bootstrap

初始化Flask-Bootstrap hello.py

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

初始化Flask-Bootstrap之后,就可以在程序中使用一个包含素有Bootstrap文件的基模板。这个模板利用Jinja2的模板继承机制,让程序扩展一个具有页面结构的基模板,其中就有用来引入Bootstrap的元素。
给出一个把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 %}

这个前端的框架表示不太懂,有兴趣的同学可以自己再学习……
基本笔者给我们的解释就是,上面的这个user.html模板定义了3个块,分别名为title、navbar和content。这些块都是基模板提供的,可在衍生模板中重新定义。
Flask-Bootstarp的base.html模板还定义了很多其他块,都可以在衍生模板中使用。下表列出了所有可用的块。
这里写图片描述
这里写图片描述

这其中的很多块都是Flask-Bootstrap自用的,如果直接重定义可能会导致一些问题。例如,Bootstrap所需的文件在styles和scripts块中声明。如果程序需要向已经有内容的块中添加新内容,必须使用Jinja2提供的super()函数。例如,如果要在衍生模板中添加新的js文件,需要这么定义script块:

{% block script %}
{{ super() }}
<script type="text/javascript" src="my-script.js"></script>
{% endblock %}

自定义错误页面

如果我们在浏览器的地址栏中输入了一个不可用的路由,就会出现一个状态码为404的错误页面。但是有时我们会觉得这个页面太平凡了…

Flask允许程序使用基于模板的自定义错误页面。
404,客户端请求未知页面或路由时显示;
500,有未处理的异常时显示;

举栗子时间,hello.py:自定义错误页面

@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

然后我们需要在模板中定义404.html和500.html这两个文件,文中介绍了怎么用Bootstrap实现,我这里不做代码展示了,因为对前端这块不太熟…看着心累,手打一遍更心累…
基本思想说一下就是创建了一个templates/base.html 的基模板,然后其他页面通过模板继承机制继承。

链接

在模板中编写简单的url并不难,但是对于包含可变部分的动态路由,在模板中构建正确的URL就很困难。

直接编写URL会对代码中的路由产生不必要的依赖关系。如果重新定义路由,那么模板中的链接可能会失效。

为了避免这些问题,Flask提供了url_for()辅助函数,它可以使用程序URL映射中保存的信息生成URL。

比如我们在调用url_for(‘index’)的时候得到的结果是/。调用url_for(‘index’,_external=True) 返回的是则是绝对地址,这个示例中是”http://localhost:5000/

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

将额外的参数添加到查询字符串中,例如,url_for(’index‘,page=2)的返回结果/?page=2

静态文件

Web程序不是仅由Python代码和模板组成。例如HTML代码中引用的图片、JavaScript源码文件和CSS。

大家是否记得在第二章中检查hello.py程序的URL映射时,其中有一个static路由。这是因为对静态文件的引用被当做一个特殊的路由,即/static/

默认设置下,Flask在程序根目录中名为static的子目录中寻找静态文件。

举个栗子,我们如何在基模板中放置favicon.ico图标。这个图标会显示在浏览器的地址栏中。

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

使用Flask-Moment本地化日期和时间

服务器需要一个统一的时间,这和用户所在的地理位置无关,所以一般使用协调世界时间(UTC)。但是我们用户看到UTC格式的时间会困惑,因为我们更加习惯当地惯用的格式。

一个优雅的解决方案是,把时间单位发送给Web浏览器,转化成当地时间,然后渲染。Web浏览器可以更好地完成这一任务,因为它能获取用户电脑中的时区和区域设置。

有一个使用js开发的优秀的客户端开源代码库,moment.js,它可以在浏览器中渲染日期和时间。Flask-Moment是一个Flask程序扩展,能把moment.js集成Jinja2模板中。
安装:

pip install flask-moment

hello.py:初始化Flask-Moment

from flask.ext.moment import Moment
app = Flask(__name__)
moment = Moment(app)

在基模板templates/base.html中引入moment.js库

{% block scripts %}
{{ super() }}
{{ moment.include_moment() }}
{% endblock %}

为了处理时间戳,Flask-Moment向模板开发了moment类,

举栗子,在hello.py中加入一个datetime变量

from datetime import datetime
@app.route('/')
def index():
    return render_template('index.html',current_time = datetime.utcnow())

然后我们来看下如何在模板中渲染current_time
templates/index.html:使用Flask-Moment渲染时间戳,

<p>The local date and time is {{ moment(current_time).format('LLL') }}.</p>
<p>That was {{ moment(current_time).fromNow(refresh=True) }}</p>

format(‘LLL’)根据客户端电脑中的时区和区域设置渲染日期和时间。

注明:这里我也没有写得很仔细,大致滤了一遍原文…
第三章完结撒花

猜你喜欢

转载自blog.csdn.net/enjolras_fuu/article/details/80150166