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应用开发实战(第二版)》