flask-模板(下)

最新推荐文章于 2023-02-21 17:12:05 发布

MonCheri_Flowers

最新推荐文章于 2023-02-21 17:12:05 发布

阅读量743

点赞数

CC 4.0 BY-SA版权

分类专栏： flask 文章标签： flask-web moment 自定义错误页面 flask-bootstrap 模板继承

本文链接：https://blog.youkuaiyun.com/Dimples_54/article/details/77687899

flask 专栏收录该内容

14 篇文章

订阅专栏

模板继承

模板继承允许你构建一个包含你站点共同元素的基本模板“骨架”，并定义子模板可以覆盖的块。模板继承是重复使用代码的一种强大方式，它类似于 Python 代码中的类继承。

首先，创建一个名为 base.html 的基模板：

<html>
<head>    
    {% block head %}
        <title>
            {% block title %}
            {% endblock %}
            - My Application
        </title>
    {% endblock %}
</head>
<body>
    {% block body %}
    {% endblock %
</body>
</html>

block 标签定义的元素可在衍生模板中修改。上例中，定义了名为 head、title和body的块。注意， title 包含在head中。下面这个示例是基模板的衍生模板：【extend.html】

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

extends声明这个模板继承自base.html。在extends之后，基模板中的三个三个块被重新定义，模板引擎会将其插入适当的位置。若想添加内容到父模板内已经定义的块，又不想失去父模板里面的内容，可以使用super()函数

Flask-Bootstrap

Bootstrap是Twitter开发的一个开源框架，它提供的用户界面组件可用于创建整洁且具有吸引力的网页，而且这些网页还能兼容所有现代Web浏览器。

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

要想在程序中集成 Bootstrap，显然要对模板做所有必要的改动。不过，更简单的方法是使用一个名为 Flask-Bootstrap 的 Flask 扩展，简化集成的过程。 Flask-Bootstrap 使用 pip安装：

(venv) $ pip install flask-bootstrap

Flask 扩展一般都在创建程序实例后就初始化。

初始化 Flask-Bootstrap 之后，就可以在程序中使用一个包含所有 Bootstrap 文件的基模板。

【boootstrap.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 %}

Jinja2 中的 extends 指令从 Flask-Bootstrap 中导入 bootstrap/base.html，从而实现模板继承。

基模板中 block 和 endblock 指令定义的块中的内容可添加到基模板中。

上面这个模板，title 块的作用很明显，其中的内容会出现在渲染后的 HTML 文档头部，放在 <title> 标签中。 navbar 和 content 这两个块分别表示页面中的导航条和主体内容。

在这个模板中， navbar 块使用 Bootstrap 组件定义了一个简单的导航条。content 块中有个<div> 容器，其中包含一个页面头部。之前版本的模板中的欢迎信息，现在就放在这个页面头部。

from flask_bootstrap import Bootstrap
bootstrap = Bootstrap(app)
@app.route('/bootstrap/<name>')
def bootstraptemplate(name):
    return render_template('boootstrap.html',name = name)

【注意】

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

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

自定义错误页面

如果你在浏览器的地址栏中输入了不可用的路由，那么会显示一个状态码为 404 的错误页面。现在这个错误页面太简陋、平庸，而且样式和使用了 Bootstrap 的页面不一致。

像常规路由一样， Flask 允许程序使用基于模板的自定义错误页面。最常见的错误代码有两个：

404，客户端请求未知页面或路由时显示；
500，有未处理的异常时显示。为这两个错误代码指定自定义处理程序的方式如下所示：【templates/404.html】

<h1> Page is not Found </h1>

@app.errorhandler(404)
def page_not_found(e):  #这个e即使用不到，也必须要写上
    return render_template('404.html'), 404

此时随便访问一个没有相应视图函数的网页，就会显示404.html。和视图函数一样，错误处理程序也会返回响应。它们还返回与该错误对应的数字状态码。

静态文件

Web 程序不是仅由 Python 代码和模板组成。大多数程序还会使用静态文件，例如 HTML代码中引用的图片、 JavaScript 源码文件和 CSS。

默认设置下， Flask 在程序根目录中名为 static 的子目录中寻找静态文件。如果需要，可在static 文件夹中使用子文件夹存放文件。给静态文件生成 URL ，使用特殊的 'static' 端点名:

【image.html】

<img src = "{{url_for('static',filename = 'd.jpg')}}">

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

这个图片文件应该存储在文件系统上的 static/d.jpg 。

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

如果 Web 程序的用户来自世界各地，那么处理日期和时间不是一个简单的任务。

服务器需要统一时间单位，这和用户所在的地理位置无关，所以一般使用协调世界时（Coordinated Universal Time，UTC）。不过用户看到 UTC 格式的时间会感到困惑，他们更希望看到当地时间，而且采用当地惯用的格式。

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

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

(venv) $ pip install flask-moment

这个扩展的初始化方法和Bootstrap一样，以程序实例app为参数：

from flask_moment import Moment
moment = Moment(app)

【base.html中增加了】

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

【moment.html】

{% extends "base.html" %}
{% block page_content %}
<div class="page-header">
    <h1>Hello World!</h1>
</div>
<p>The local date and time is {{moment(current_time).format('LLL')}}.</p>
<p>That was {{moment(current_time).fromNow(refresh = true)}}.</p>
{% endblock %}

format('LLL') 根据客户端电脑中的时区和区域设置渲染日期和时间。参数决定了渲染的方式， 'L' 到 'LLLL' 分别对应不同的时间显示格式。

fromNow() 渲染相对时间戳，会随着时间的推移自动刷新显示时间。（这个时间戳最开始显示为“a few seconds ago”，但指定 refresh 参数后，其内容会随着时间的推移而更新。如果一直待在这个页面，几分钟后，会看到显示的文本变成“a minuteago”“2 minutes ago”等）

增加路由。把变量current_time 传入模板进行渲染。

from datetime import datetime

@app.route('/moment/')
def momenttemplate():
    return render_template('moment.html',current_time = datetime.utcnow())