flask-bootstrap 模板 +用户界面+自定义错误页面

最新推荐文章于 2021-12-15 09:46:01 发布

happy_bigqiang

最新推荐文章于 2021-12-15 09:46:01 发布

阅读量4.5k

点赞数

分类专栏： flask

本文链接：https://blog.csdn.net/happy_bigqiang/article/details/50888372

版权

flask 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

做一个简单的界面，如果自己写前端，效率低而且界面不美观，有什么好办法？用模板！
bootstrap 是 tvitter 开发的一个开源网页模板，我们用flask-Boostrap 这个扩展框架去使用它。
使用前准备工作：
1 ，安装 flask框架

pip install flask-bootstrap

2, 在自己的hello.py 文件中导入bootstrap模块

from flask.ext.bootstrap import Bootstrap  #导入模块

app = Flask(__name__)
bootstrap = Bootstrap(app) #实例化

3，建立基模板，即在template文件夹下新建base.html，以下是复制书上的代码（涉及前端知识，前端渣只能复制了）：

{% extends "bootstrap/base.html" %}  # 由于1,2步准备工作，此时这样就导入了bootstrap 模板

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

———-万能的分割线

基本准备工作完毕，接下来开始：
用户界面：
1，hello.py中代码：

from flask import Flask,render_template,url_for
from flask.ext.bootstrap import Bootstrap
app = Flask(__name__)
bootstrap = Bootstrap(app)
@app.route('/user/<name>')
def user(name):
    return render_template('user.html',name = name）
    # user.html文件在下面
if __name__ == '__main__':
    app.run(debug=True)

2，在template文件夹中的user.html文件：

<!DOCTYPE html>
{% extends 'base.html' %}

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

{% block page_content %} #page_content 是base.html中自己定义的一个内容块
<div class = 'page-header' >
    <h1>Hello,{{ name }}!</h1>  
 </div>
{% endblock %}

3 ，运行程序，效果图：
这里写图片描述

———-接下来是自定义错误页面
1，这次准备先写404.html (与user.html文件大同小异):

<!DOCTYPE html>
{% extends 'base.html' %}
{% block title %} not found {% endblock %}

{% block page_content %}

<div class="page-header">
    <h1>Not Found</h1>
</div>

{% endblock %}

2 ，原有基础添加hello.py的代码：

@app.errorhandler(404)  #注意这里用到新函数errorhandler
def page_not_found(e):
    return render_template('404.html'),404

3，就不放效果图了，大同小异。

未完，见下一篇博客

happy_bigqiang

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
flask-bootstrap 模板 +用户界面+自定义错误页面

做一个简单的界面，如果自己写前端，效率低而且界面不美观，有什么好办法？用模板！ bootstrap 是 tvitter 开发的一个开源网页模板，我们用flask-Boostrap 这个扩展框架去使用它。使用前准备工作： 1 ，安装 flask框架 pip install flask-bootstrap2, 在自己的hello.py 文件中导入bootstrap模块from flask.ex
复制链接

扫一扫