Flask Web開發學習筆記（三）

本文主要整理下幾個Flask擴展：

0.Flask-Bootstrap：集成Twitter開發的一個開源框架Bootstrap。
1.Flask-Script：為Flask程序添加一個命令行解析器
2.Flask-Moment：本地化日期和時間

本篇基于前兩篇博文，需要使用虛擬環境、使用pip安裝flask等。

0.什么是擴展

Flask被設計為可擴展形式，故而沒有提供一些重要的功能，例如數據庫和用戶認證，所以我們可以選擇最適合的程序的包，或者按需求自行開發。

說白了擴展就是一些附加功能，獨立完成某種功能。

1.Flask-Bootstrap

Bootstrap 是 Twitter 開發的一個開源框架，它提供的用戶界面組件可用于創建整潔且具有吸引力的網頁，而且這些網頁還能兼容所有現代 Web 瀏覽器。

Bootstrap是客戶端框架，因此不會直接涉及服務器。

服務器需要做的指示提供引用了 Bootstrap 層疊樣式表（CSS）和 Javascript 文件的 HTML 響應，并在 HTML、CSS 和 JavaScript 代碼中實例化所需組件。這些操作最理想的執行場所就是模板。

0.安裝Flask-Bootstrap擴展

pip install flask-bootstrap

1.創建app.py文件

app.py文件中寫入：

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

app = Flask(__name__)
bootstrap = Bootstrap(app)#注意這個地方 

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

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

解釋下：

0.from flask.ext.bootstrap import Bootstrap：專為 Flask 開發的擴展都暴露在 flask.ext 命名空間下，Flask-Bootstrap 輸出了一個 Bootstrap 類。

1.bootstrap = Bootstrap(app):Flask 擴展一般都在創建程序實例時初始化，這行代碼是 Flask-Bootstrap 的初始化方法。

2.創建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 %}

解釋下：

0.{% extends "bootstrap/base.html" %}：base.html模板繼承自bootstrap/base.html

1.其中title、navbar、content都是bootstrap/base.html中定義的塊（還有script等）。navbar是顯示導航欄。其中的代碼比較多，作用是添加Flasky和Home兩個鏈接，理解下即可。

2.page_content塊是自己加的。

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

1.修改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()#注意這個地方

解釋下：

0.from flask.ext.script import Manager：Flask-Script輸出了一個名為Manager的類，同樣也是***flask.ext.XXX***下。

1.manager.run()代替了app.run()，啟動后就能解析命令行啦。

2.使用Flask-Script

0.運行app.py:python app.py

1.Flask-Script官方文檔

3.Flask-Moment

服務器需要統一時間單位，這和用戶所在的地理位置無關，所以一般使用協調世界時間（Coordinated Universal Time,UTC）。用戶不愿意看到UTC時間，他們更希望看到當地時間，而且采用當地慣用的格式。

要想在服務器上只使用UTC時間，一個優雅的解決方案是，把時間單位發送給Web瀏覽器。轉換成當地時間，然后渲染。Web瀏覽器可以更好的完成這一任務，因為它能獲取用戶電腦中的時區和區域設置。

有一個使用JavaScript開發的優秀客戶端開源代碼，名為moment.js(http://momentjs.com/),它可以在瀏覽器中渲染日期和時間。

0.安裝Flask-Moment擴展

pip install flask-moment

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())

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

解釋下：

0.from flask.ext.moment import Moment：導入一個Moment類

1.from datetime import datetime：導入一個datetime類，用于獲取UTC時間

2.moment = Moment(app)：向模板開放了moment類，可以在模板中使用

3.current_time=datetime.utcnow()：獲取當前UTC時間，作為參數傳入index.html

2.修改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 %}

解釋下：

0.除了moment.js，Flask-Moment還依賴jquery.js。但是Bootstrap中已經引入了jquery.js，故只需要引入moment.js

1.{{ moment.include_moment() }}：引入moment.js，請注意上方的{{ super() }}

3.修改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 %}

解釋下：

0.{{ moment(current_time).format('LLL') }}：根據客戶端電腦中的時區和區域設置渲染日期和時間。參數決定了渲染的方式，'L'到'LLL'分別對應不同的復雜度。format()函數還可以接受自定義的格式說明符。

1.{{ moment(current_time).fromNow(refresh=True) }}：moment是app.py開放的類，current_time是app.py傳遞過來的參數，fromNow()渲染相對時間戳，參數refresh=True會隨著時間的推移自動刷新顯示時間。

4.一個完整的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 %}

6.favicon.png

favicon.png

最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。

推薦閱讀更多精彩內容