3.3 自定义错误页面

如果你在浏览器的地址栏中输入了无效的路由，会看到一个状态码为 404 的错误页面。与使用 Bootstrap 的页面相比，现在这个错误页面太简陋、平庸，而且与现有页面不一致。

像常规路由一样，Flask 允许应用使用模板自定义错误页面。最常见的错误代码有两个： 404，客户端请求未知页面或路由时显示；500，应用有未处理的异常时显示。示例 3-6 使用 app.errorhandler 装饰器为这两个错误提供自定义的处理函数。

示例 3-6　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

与视图函数一样，错误处理函数也返回一个响应。此外，错误处理函数还要返回与错误对应的数字状态码。状态码可以直接通过第二个返回值指定。

错误处理函数中引用的模板也需要我们编写。这些模板应该和常规页面使用相同的布局，因此要有一个导航栏和显示错误消息的页头。

编写这些模板最直接的方法是复制 templates/user.html，分别创建 templates/404.html 和 templates/500.html，然后把这两个文件中的页头元素改为相应的错误消息。但是这么做会带来很多重复劳动。

Jinja2 的模板继承机制可以帮助我们解决这一问题。Flask-Bootstrap 提供了一个具有页面基本布局的基模板，同样，应用也可以定义一个具有统一页面布局的基模板，其中包含导航栏，而页面内容则留给衍生模板定义。

示例 3-7 展示了 templates/base.html 的内容，这是一个继承自 bootstrap/base.html 的新模板，其中定义了导航栏。这个模板本身也可作为其他模板的二级基模板，例如 templates/user.html、templates/404.html 和 templates/500.html。

示例 3-7　templates/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 %}

这个模板中的 content 区块里只有一个 <div> 容器，其中包含一个新的空区块，名为 page_ content，区块中的内容由衍生模板定义。

现在，应用中的模板继承自这个模板，而不直接继承自 Flask-Bootstrap 的基模板。通过继承 templates/base.html 模板编写自定义的 404 错误页面就简单了，如示例 3-8 所示。500 错误页面的编写方式与此类似

示例 3-8　templates/404.html：使用模板继承机制自定义 404 错误页面

{% extends "base.html" %}

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

{% block page_content %} 
<div class="page-header"> 
    <h1>Not Found</h1> 
</div>
{% endblock %}

错误页面在浏览器中的显示效果如图 3-2 所示。

图 3-2：自定义的 404 错误页面

templates/user.html 模板也可以通过继承这个基模板来简化内容，如示例 3-9 所示。

示例 3-9　templates/user.html：使用模板继承机制简化页面模板

{% extends "base.html" %}

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

{% block page_content %}
<div class="page-header"> 
    <h1>Hello, {{ name }}!</h1> 
</div>
{% endblock %}

《基于Python的Web应用开发实战(第二版)》

3.3 自定义错误页面

猜你喜欢