3.3、自定义错误页面

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

像常规路由一样，Flask 允许程序使用基于模板的自定义错误页面。最常见的错误代码有两个：404，客户端请求未知页面或路由时显示；500，有未处理的异常时显示。为这两个错误代码指定自定义处理程序的方式如示例 3-6 所示。

示例 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 所示。 。

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

 

 

 

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

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

{% extends "base.html" %}

 

{% block title %}User{% endblock %}

 

{% block content%}

<div class="container">

<div class="page-header">

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

</div>

</div>

{% endblock %}