（学习flask） 03 使用flask-bootstrap

flask-bootstrap集成Bootstrap

Bootstrap是Twitter开发的一个开源框架，提供的用户界面组件可用于创建简洁且具有吸引力的网页。使用bootstrap需要(1)引用bootstrap层叠样式表和相关js(2)在代码中实例化所需组件。

安装flask-bootstrap

pip install flask-bootstrap

flask-bootstrap的实例化

from flask_bootstrap import Bootstrap
from flask import Flask,render_template
app=Flask(__name__)

bootstrap=Bootstrap(app)

使用flask-bootstrap模板

bootstemp3.html完整代码：

{% extends "bootstrap/base.html" %}

{% block title %}这是个title{% 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="https://www.baidu.com">这是个navbar，跳到百度</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">
    <div class="page-header">
        <h1>Hello, {{ name | upper}}!</h1>
    </div>
</div>
{% endblock %}

• 首先Jinja2中的指令从flask-bootstrap中导入bootstrap/base.html，bootstemp3.html继承自bootstrap/base.html。flask-bootstrap的基模板base.html提供了一个网页框架，引入bootstrap所需的所有CSS和js文件。
• 基模板中定义了可以在衍生模块中重定义的块{% block %}，本示例中使用到title、navbar、content这三种block。

base中定义的block

运行效果

自定义404页面

修改py文件，添加路由：

@app.errorhandler(404)
def page_not_found(e):
    return render_template('404.html'),404

定义一个base.html，继承自bootstrap/base.html，是一个包含navbar的模板：

{% extends "bootstrap/base.html" %}

{% block title %}base{% 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="https://www.baidu.com">这是个navbar，跳到百度</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">
    <div class="page_content">
    </div>
</div>
{% endblock %}

定义404.html，继承自base.html：

{% extends "base.html" %}
{% block title %}Page not Found{% endblock %}

{% block content %}
<div class="container">
    <div class="page_content">
        <h1>Not Found</h1>
    </div>
</div>
{% endblock %}

重定向和用户会话

因为如果一个请求是包含表单数据的POST请求，在刷新页面后会再次提交表单。为了解决这个问题，需要用到重定向和用户会话。
用户会话是一种私有存储，存在于每个连接到服务器的客户端中。是一个请求上下文中的变量，名为session。
修改路由：

from flask import Flask,render_template,session,redirect,url_for

@app.route('/',methods=['GET','POST'])
def index():
    myform = NameForm()
    if myform.validate_on_submit():
        session['name']=myform.name.data
        return redirect(url_for('index'))
    return render_template('index2.html',form=myform,name=session.get('name'))

注意：

• 当redirect之后的请求是一个POST，这里如果没有修改路由规则为methods=[‘GET’,‘POST’]，则会默认处理为GET，导致报出405的错误
• url_for函数的第一个且唯一必须指定的参数是端点名，即路由的内部名字，也就是处理路由@app.route所定义的那个函数，这里是index