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

 

 

转载于:https://www.cnblogs.com/sanduzxcvbnm/p/6649508.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/417012.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

前端学习(2348):tabber

{"pages": [ //pages数组中第一项表示应用启动页&#xff0c;参考&#xff1a;https://uniapp.dcloud.io/collocation/pages{"path" : "pages/message/message","style" : {"navigationBarTitleText": "信息页",&…

前端学习(2349):tabber的其他属性

pages.json {"pages": [ //pages数组中第一项表示应用启动页&#xff0c;参考&#xff1a;https://uniapp.dcloud.io/collocation/pages{"path" : "pages/message/message","style" : {"navigationBarTitleText": "信…

thinkphp无法登陆,session跨页后值为空

我已经出现过两次这种问题了&#xff0c;出现了两次就说明第一次没有解决彻底&#xff0c;所以表示thinkphp这个跨页后session为空而无法登陆的问题牵扯很多方面的问题了。经过这两次的研究&#xff0c;我觉得基本上能真正解决它了。 第一次出现的时候&#xff0c;我以为是目录…

前端学习(2350):condition启动模式配置

pages.json {"pages": [ //pages数组中第一项表示应用启动页&#xff0c;参考&#xff1a;https://uniapp.dcloud.io/collocation/pages{"path" : "pages/message/message","style" : {"navigationBarTitleText": "信…

前端学习(2351):text组件的使用

detail.vue <template><view><view class""><text>唱歌跳舞</text></view><view seletable><text>唱歌跳舞</text></view><view seletable space"ensp"><text>唱歌 跳舞<…

前端学习(2352):view组件的使用

detail.vue <template><view><!-- <view class""><text>唱歌跳舞</text></view><view seletable><text>唱歌跳舞</text></view><view seletable space"ensp"><text>唱歌 …

计算机里创建本地磁盘分区,大神教你如何将本地硬盘进行分区!

如何将本地硬盘进行分区呢&#xff1f;不少小伙伴的电脑上只有一个磁盘C&#xff0c;这样子的话很容易造成磁盘空间不足&#xff0c;可要是进行分区一下的话&#xff0c;那么就不会有这个困扰咯&#xff0c;所以今天小编就来教教大家在不借助任何工具的情况下把本地硬盘进行分区…

前端学习(2353):button按钮组件的使用

detail.vue <template><view><!-- <view class""><text>唱歌跳舞</text></view><view seletable><text>唱歌跳舞</text></view><view seletable space"ensp"><text>唱歌 …

三维触控测试软件,10 条小技巧,告诉你 iPhone XS Max 的三维触控功能怎么用

苹果在 2018 年发布了 iPhone XS 系列&#xff0c;并且这两款设备都支持 3D Touch(三维触控)&#xff0c;如果您还不太了解这项功能的实用之处&#xff0c;不妨一起来看看&#xff1a;如何开启&#xff1f;前往 iPhone 【设置】-【通用】-【辅助功能】-【三维触控】&#xff0c…

前端学习(2354):image组件的基本使用

pages.json <template><view><!-- <view class""><text>唱歌跳舞</text></view><view seletable><text>唱歌跳舞</text></view><view seletable space"ensp"><text>唱歌 …

前端学习(2355):uni里面的样式学习

style.vue <template><view><view class"box">我是歌谣</view></view> </template><script>export default {data() {return {}},methods: {}} </script><style> .box{width: 375rpx;height: 375rpx;backgrou…

C#之调用存储过程

C#调用存储过程 以下内容可能有错漏之处&#xff0c;请大家多多指教。 C#后台代码如下&#xff1a; //调用存储过程的方法public static void Startupworkflow(string firstnodename, string secondnodename, string firstact) { SqlConnection conn new Sq…

前端学习(2357):uni的基本数据绑定

<template><view><view>{{msg}}</view><view>{{你好世界}}</view></view> </template><script>export default {data() {return {msg:hello}},methods: {}} </script><style></style>运行结果

win7下搭建小程序服务器,技术开发人员告诉你微信小程序怎么做

现在每个玩微信公众号的博主基本上都在玩微信小程序&#xff0c;现在的小程序特别火。虽然小程序特别火但也不是任何人想立马做就能做的&#xff0c;也是需要会开发及了解微信小程序的相关规则才能做的。今天邀请技术开发人员告诉你微信小程序怎么做&#xff0c;想入门的小伙伴…

前端学习(2358):v-bind和v-for

geyao.vue <template><view><view>{{msg}}</view><view>{{你好世界}}</view><image v-bind:src"imgUrl" mode""></image><view v-for"(item,index) in arr">序号:{{index}}名字:{{item.…

怎么把数据文件上传云服务器,怎么把数据上传导云服务器

怎么把数据上传导云服务器 内容精选换一换安装传输工具在本地主机和Windows云服务器上分别安装数据传输工具&#xff0c;将文件上传到云服务器。例如QQ.exe。在本地主机和Windows云服务器上分别安装数据传输工具&#xff0c;将文件上传到云服务器。例如QQ.exe。本地磁盘映射(推…

前端学习(2359):如何注册事件

<template><view><view>{{msg}}</view><view>{{你好世界}}</view><image v-bind:src"imgUrl" mode""></image><view v-for"(item,index) in arr">序号:{{index}}名字:{{item.name}},年龄…

微信无法连接服务器1-502,只有一部iphone x手机,在微信公众号中选择菜单,出现bad gateway 502错误,原因?...

1.菜单项对应的网页链接参见下图&#xff1a;2.后台看到下面的错误信息:--- iphone x 访问日志172.17.0.28 - - [03/Jan/2020:10:19:17 0800] "GET /m02?atwxyes HTTP/1.0" 502 182 "-" "Mozilla/5.0 (iPhone; CPU iPhone OS 13_3 like Mac OS X) Ap…

前端学习(2360):生命周期函数的学习

app.vue <script>export default {onLaunch: function() {console.log(App Launch)},onShow: function() {console.log(App Show)},onHide: function() {console.log(App Hide)},onError:function(err){console.log(出现异常,err)}} </script><style>/*每个…