python flask学习(2)

本文主要整理下几个Flask扩展：

0.Flask-Bootstrap：集成Twitter开发的一个开源框架Bootstrap。
1.Flask-Script：为Flask程序添加一个命令行解析器
2.Flask-Moment：本地化日期和时间

基于jinja2的模板引擎实现效果

什么是flask扩展？

Flask被设计为可扩展形式，故而没有提供一些重要的功能，例如数据库和用户认证，所以我们可以选择最适合的程序的包，或者按需求自行开发。

这大大拓展了flask框架的延展性，可以让开发者自由的添加想要的功能。当然，灵活的设计也意味着设计难度的增加。

0.Flask-Bootstrap学习

创建app.py文件

from flask import Flask,render_template
from flask_bootstrap import Bootstrap //Python3.6中需要此种导入

app = Flask(__name__)
bootstrap = Bootstrap(app)#注意这个地方 

@app.route('/')
def index():
    return render_template('index.html')

if __name__ == "__main__":
    app.run(debug = True)

示例代码中，bootstrap = Bootstrap(app)详解：Flask 扩展一般都在创建程序实例时初始化，这行代码是 Flask-Bootstrap 的初始化方法。

flask专用扩展都存储在flask.ext 命名空间下，Flask-Bootstrap 输出了一个 Bootstrap 类。在Python3.6中需要用flask_package方式导入。

创建templates文件夹并创建base.html

base.html中写入：

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

{% block title %}Flask{% 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.{% extends "bootstrap/base.html" %}是jinja2中的指令，声明从Flask-Bootstrap中导入bootstrap/base.html，从而实现模板继承

2.<div class="navbar navbar-inverse" role="navigation">该句code是bootstrap的默认导航栏声明语句，显示导航栏。这块代码较多，但主要作用是添加Flasky和Home两个链接

3.以后的html页面直接继承base.html就可以啦

3.创建index.html

index.html中写入：

{% extends "base.html" %}

{% block title %}首页{% endblock %}

{% block page_content %}
<h1>这里是首页，Hello World！</h1>
{% endblock %}

要点注意：

0.{% extends "base.html" %}：继承自base.html

1.page_content块就是上面的自己定义的块。

4.运行程序

显示如下：

 

运行结果.png

 

2.Flask-Script

Flask的开发Web服务器支持很多启动设置选项，但只能在脚本中作为参数传给app.run()函数。这种方式很不方便，传递设置选项的理想方式是使用命令行参数。

Flask-Scrip就是这么一个Flask扩展，为Flask程序添加一个命令行解析器。Flask-Script自带了一组常用选项，而且还支持自定义命令。

0.安装Flask-Script扩展

pip install flask-script

修改app.py文件

from flask import Flask,render_template
from flask.ext.bootstrap import Bootstrap
from flask.ext.script import Manager

app = Flask(__name__)
manager = Manager(app)#注意这个地方

@app.route('/')
def index():
    return render_template('index.html')

if __name__ == "__main__":
    manager.run()#注意这个地方

注意：此处代码用manager.run()取代了之前的app.run()，这样就可以实现解析命令行

3.Flask-Moment

服务器需要统一时间单位，这和用户所在的地理位置无关，所以一般使用协调世界时间（Coordinated Universal Time,UTC）。用户不愿意看到UTC时间，他们更希望看到当地时间，而且采用当地惯用的格式。

要想在服务器上只使用UTC时间，一个优雅的解决方案是，把时间单位发送给Web浏览器。转换成当地时间，然后渲染。Web浏览器可以更好的完成这一任务，因为它能获取用户电脑中的时区和区域设置。

有一个使用JavaScript开发的优秀客户端开源代码，名为moment.js(http://momentjs.com/),它可以在浏览器中渲染日期和时间。

修改app.py文件

from flask import Flask,render_template
from flask.ext.bootstrap import Bootstrap
from flask.ext.script import Manager
from flask.ext.moment import Moment
from datetime import datetime

app = Flask(__name__)
manager = Manager(app)
bootstrap = Bootstrap(app)
moment = Moment(app)

@app.route('/')
def index():
    return render_template('index.html',current_time=datetime.utcnow())

if __name__ == "__main__":
    manager.run()

注意：

1.moment=Moment(app)是把程序实例传入构造方法实现初始化。

2.current_time=datetime.utcnow()获取当前时间，并作为参数传入index.html页面

接下来就需要前端接收后台数据并渲染了！

修改base.html

base.html修改为：

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

{% block title %}Flask{% 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>

<!--注意下方block script-->
{% block scripts %}
{{  super() }}
{{ moment.include_moment() }}
{% endblock %}

{% endblock %}

要点解释：

1.除了moment.js，Flask-Moment还依赖jquery.js。但是Bootstrap中已经引入了jquery.js，故只需要引入moment.js。其中代码{{ moment.include_moment() }}就是引入moment.js的命令，但请注意上面的{{ super() }}。这是程序需要向已经有内容的块中添加新内容，必须用jinja2提供的super函数声明。

2.之前我将moment部分代码放在最上方，但是这样前端显示不出来。找了半天问题。发现应该放在{% block content %}中后半部分。

修改index.html

index.html内容修改为如下：

{% extends "base.html" %}

{% block title %}首页{% endblock %}

{% block page_content %}
<h1>这里是首页，Hello World！</h1>

<p>{{ moment(current_time).format('LLL') }}</p>
<p>{{ moment(current_time).fromNow(refresh=True) }}</p>

{% endblock %}

一个完整的Demo

这个Demo，包含上方未介绍到的东西：

0.url_for()函数的使用 
1.静态文件的引入：设置网页的小图标（如百度网页的那个小熊掌）
2.自定义404错误页面

0.创建文件夹，包含文件

文件夹结构如下：

--app
    --app.py
    --templates
        --base.html
        --index.html
        --user.html
        --404.html
    --static
        --favicon.png
    --venv

1.app.py

from flask import Flask,render_template
from flask.ext.bootstrap import Bootstrap
from flask.ext.script import Manager
from flask.ext.moment import Moment
from datetime import datetime

app = Flask(__name__)
manager = Manager(app)
bootstrap = Bootstrap(app)
moment = Moment(app)

@app.route('/')
def index():
    return render_template('index.html',current_time=datetime.utcnow())

@app.route('/user/<name>')
def user(name):
    return render_template('user.html',name=name)

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

if __name__ == "__main__":
    manager.run()

2.base.html

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

{% block head %}
{{ super() }}
<link rel="shortcut icon" href="{{ url_for('static',filename = 'favicon.png') }}"  type='image/x-icon'/>
<link rel="icon" href="{{ url_for('static',filename = 'favicon.png')  }}" type="image/x-icon"/>
{% endblock %}

{% block title %}Flask{% 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>

{% block scripts %}
{{  super() }}
{{ moment.include_moment() }}
{% endblock %}

{% endblock %}

3.index.html

{% extends "base.html" %}

{% block title %}首页{% endblock %}

{% block page_content %}
<h1>这里是首页，Hello World！</h1>

<p>{{ moment(current_time).format('LLL') }}</p>
<p>{{ moment(current_time).fromNow(refresh=True) }}</p>

{% endblock %}

4.user.html

{% extends "base.html"  %}

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

{% block page_content %}

{% if name %}
<h1> Hello {{ name }} </h1>
{% else  %}
<h1> Hello Stranger </h1>
{% endif %}

{% endblock %}

5.404.html

{% extends "base.html" %}

{% block title %} 404 {% endblock %}

{% block page_content %}
<h1>404错误：页面没有找到 </h1>
{% endblock %}