Flask 是一種很讚的Python web框架。它極小，簡單，最棒的是它很容易學。
今天我來帶你搭建你的第一個Flask web應用！和官方教程 一樣，你將搭建你自己的微部落格系統：Flaskr。和官方Flask教程不同的是——我們通過使用Stormpath來建立並管理使用者賬戶和資料，你的工作效率會更高。開發程式會顯著地加快！
我們這就開始吧。
注意：這篇教程面向Flask開發新人，幫助他們理解如何使用Flask和Stormpath建立一個簡單的網站。本文是Flask官方教程的改版。
目標
Flaskr 應用的目標很簡單：
- 允許使用者以事先生成的賬戶（使用Stormpath儲存）登入、登出本微部落格系統。
- 允許登入使用者在頁面新增包含了純文字和一些HTML body文字的條目。使用者被認為是可信任的，HTML內容不會被審查。
- 以時間順序（新的在最上）在網站主頁顯示所有部落格條目。
最終的網站應該看起來像這樣：
準備
開始之前，我們需要先安裝一些Python包才能幹活！我們通過?Python包管理器pip來完成這件事。
|
1 |
$ pip install flask flask-stormpath |
上述命令會安裝兩個包：Flask, 和?Flask-Stormpath，這兩個包在整篇教程都會用到。
接著，你需要建立一個Stormpath賬戶。你可以在Stormpath網站註冊：https://api.stormpath.com/register
當你建立了一個Stormpath賬戶並登入後，你還需要建立一個API 金鑰。你可以在操作頁面上點選建立API金鑰按鈕來完成：https://api.stormpath.com/ui/dashboard
建立了API金鑰後，你會被提示要去下載一個名為apiKey.properties的檔案，稍後我們將用到它。
注意：不要把apiKey.properties檔案檢入你的版本控制系統（如果你在用的話）！這個檔案儲存著你的Stormpath證照，應該被妥善保管。
接著，你會想要建立新的Stormpath應用，請訪問應用網頁：https://api.stormpath.com/v#!applications?，點選註冊應用。建立一個名為flaskr的新應用，選項按預設的來。
最後，訪問賬戶頁面：https://api.stormpath.com/ui/accounts/create? ，在flaskr Directory建立新使用者賬戶。所有在這兒建立的賬戶都可以用來登入你將搭建的微部落格。
目錄結構
你要做的第一件事就是建立一個存放你應用程式碼的目錄結構。你需要建立若干目錄，然後把你的apiKey.properites?放到新建的專案目錄：
|
1 2 3 4 5 6 7 8 |
$ mkdir -p flaskr/{static,templates}; cp ~/path/to/apiKey.properties flaskr/ $ tree flaskr flaskr ├── apiKey.properties ├── static └── templates 2 directories, 1 file |
flaskr目錄將是你應用的根目錄。static目錄用於存放你的靜態檔案（css，javascript, 和影像檔案）.templates目錄用於存放你的Jinja模板（用於渲染HTML）。
安裝應用
現在你的目錄結構搭好了，我們開始配置應用了！
首先，在你flaskr目錄下建立名為flaskr.py的新檔案。你的應用程式碼放在這個檔案裡。
一切將從這裡開始：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
from datetime import datetime from flask import ( Flask, abort, flash, redirect, render_template, request, url_for, ) from flask.ext.stormpath import ( StormpathError, StormpathManager, User, login_required, login_user, logout_user, user, ) app = Flask(__name__) app.config['DEBUG'] = True app.config['SECRET_KEY'] = 'some_really_long_random_string_here' app.config['STORMPATH_API_KEY_FILE'] = 'apiKey.properties' app.config['STORMPATH_APPLICATION'] = 'flaskr' stormpath_manager = StormpathManager(app) if __name__ == '__main__': app.run() |
需要關注的：
- 在flaskr.py檔案的開頭你匯入了若干庫——下面整篇教程都會用到它們
- 你建立了一個app物件——這是每個Flask 專案的核心
- 你在app.config裡新增了若干配置變數。app.config是一個Python字典變數，你可以用它存放你想存放的任何定製配置。這裡我們設定了若干後面會用到的重要的變數：
- DEBUG 變數可以設定為True或者False。它用於控制Flask的內建錯誤報告行為（開發模式下它讓Flask可以顯示詳細的錯誤資訊）
- SECRET_KEY 變數在內部使用，用來保證客戶端的會話安全。當部署一個真正的Flask應用時，要確保這是一個較長的隨機生成的字串。
STORMPATH_API_KEY_FILE? 變數應該指向你的apiKey.properties 檔案位置。更多資訊參見：http://flask-stormpath.readthedocs.org/en/latest/setup.htmlSTORMPATH_APPLICATION 變數應該是你之前建立的Stormpath 應用名。
- 你建立了一個stormpath_manager 物件，它用於控制Stormpath 庫，後面將幫你輕鬆與使用者以及使用者資料進行互動。
- 在最後你呼叫了
app.run()。它告訴Flask以開發模式執行你的網站以便於測試。
執行下述命令之後，你就可以看到你的Flask應用開始在埠5000執行：
|
1 2 3 |
$ python flaskr.py * Running on http://127.0.0.1:5000/ * Restarting with reloader |
不過當你訪問http://127.0.0.1:5000， 你會看到一個404 not found 資訊。這是因為你還沒有定義任何檢視或者URL路由 。
檢視
現在安裝的部分你已經做完了，我們來定義檢視。下面的程式碼應該放在flaskr.py 檔案中，在這個上面：
|
1 2 |
if __name__ == ‘__main__': app.run() |
程式碼如下：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 |
@app.route('/') def show_posts(): posts = [] for account in stormpath_manager.application.accounts: if account.custom_data.get('posts'): posts.extend(account.custom_data['posts']) posts = sorted(posts, key=lambda k: k['date'], reverse=True) return render_template('show_posts.html', posts=posts) @app.route('/add', methods=['POST']) @login_required def add_post(): if not user.custom_data.get('posts'): user.custom_data['posts'] = [] user.custom_data['posts'].append({ 'date': datetime.utcnow().isoformat(), 'title': request.form['title'], 'text': request.form['text'], }) user.save() flash('New post successfully added.') return redirect(url_for('show_posts')) @app.route('/login', methods=['GET', 'POST']) def login(): error = None if request.method == 'POST': try: _user = User.from_login( request.form['email'], request.form['password'], ) login_user(_user, remember=True) flash('You were logged in.') return redirect(url_for('show_posts')) except StormpathError, err: error = err.message return render_template('login.html', error=error) @app.route('/logout') def logout(): logout_user() flash('You were logged out.') return redirect(url_for('show_posts')) |
我們來討論一下上面的程式碼。
你可能注意到首先定義的函式是show_posts。這個函式用於在網站前端頁面顯示釋出的博文。如你可能已經猜到的，裝飾器@app.route(‘/’)告訴Flask如何執行這個函式。
每次使用者請求 URL “/”，Flask就會執行show_posts，把輸出返回給使用者。
show_posts 就只是：
- 迭代所有的使用者賬戶，查詢博文。每篇博文就是一個簡單的如下格式的Python字典：
|
1 2 3 4 5 |
{ 'date': '2014-04-01T22:50:49.762475', 'text': 'Blog content.', 'title': 'Post title' } |
- 每找到一篇博文就新增到posts陣列。
- 按日期對posts陣列排序，因此新發布的在前面。
- 以posts陣列作為輸入，渲染出一個叫做show_posts.html的HTML模板.
add_posts 檢視用於登入使用者向網站釋出新博文。這個檢視帶來下面幾樣東西：
- 裝飾器@app.route(‘/add’, methods=[‘POST’])告訴Flask該URL只接受POST請求。Flask預設只接受GET請求。
- @login_required 裝飾器確保能訪問該檢視前使用者已經登入。如果使用者沒有登入而嘗試對該檢視POST，會得到HTTP 401 未授權應答。
- 任何裝飾了?
@login_required的檢視都可以訪問user變數。這是一個存放了使用者賬戶細節的物件。
它的工作機制很簡單：
- 檢查使用者賬戶下是否有儲存的博文。這一步是通過檢查user.custom_data.get(‘posts’) 不是False來實現的。user.custom_data是一個Python字典，你可以在其中儲存任何想儲存的使用者資料。
- 從POST 請求中抓取標題和正文，在使用者的posts陣列中建立一個新的post物件。
- 儲存新博文到使用者賬戶的Stormpath中。
- 發出一個後面會向使用者展示的訊息。
- 最後，把使用者重定向到
show_posts?檢視，讓新新增的博文可以展現出來。 - login 和logout檢視特別地簡單。
login檢視就是簡單地從使用者POST請求中提取電子郵件地址和密碼，然後從Stormpath抓取user物件，嘗試登入，並建立一個本地會話。
logout檢視就是銷燬使用者會話。
模板
下一樣要加入的東西就是模板程式碼。Flask使用Jinja模板語言，它讓編寫HTML模板變得非常簡單。
讓我們定義一個佈局模板templates/layout.html作為開始。後面我們寫的其他模板都將從這個基礎模板而來。這個策略很有用，因為它允許你在一個地方定義會被多次引用的模板程式碼。
把下面的程式碼新增到你的layout.html模板檔案：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<!doctype html> <title>Flaskr</title> <link rel=stylesheet type=text/css href="{{ url_for('static', filename='style.css') }}"> <div> <h1>Flaskr</h1> <div> {% if user.email %} <a href="{{ url_for('logout') }}">log out</a> {% else %} <a href="{{ url_for('login') }}">log in</a> {% endif %} </div> {% for message in get_flashed_messages() %} <div>{{ message }}</div> {% endfor %} {% block body %}{% endblock %} </div> |
接著是templates/show_posts.html 模板檔案：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
{% extends "layout.html" %} {% block body %} {% if user.email %} <form action="{{ url_for('add_post') }}" method=post> <dl> <dt>Title: <dd><input type=text size=30 name=title> <dt>Text: <dd><textarea name=text rows=5 cols=40></textarea> <dd><input type=submit value=Share> </dl> </form> {% endif %} <ul> {% for post in posts %} <li><h2>{{ post['title'] }}</h2>{{ post['text']|safe }} {% else %} <li><em>Unbelievable. No posts here so far!</em> {% endfor %} </ul> {% endblock %} |
最後，是templates/login.html 模板檔案：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
{% extends "layout.html" %} {% block body %} <h2>Login</h2> {% if error %}<p><strong>Error:</strong> {{ error }}{% endif %} <form action="{{ url_for('login') }}" method=post> <dl> <dt>Email: <dd><input type=text name=email> <dt>Password: <dd><input type=password name=password> <dd><input type=submit value=Login> </dl> </form> {% endblock %} |
首先要注意的是?layout.html模板定義了一個body塊，在任何子模板中它都可以被同名的塊替代。
layout.html模板顯示了一個login或者logout模板，還顯示所有的閃回資訊。
|
1 |
{% if user.email %} |
因為你用的是Flask-Stormpath，所有模板都可以訪問一個神奇的user 變數。當一個使用者登入後，該使用者的所有細節都是可見的（因此這個檢查能生效）。
show_posts.html?模板迭代posts陣列，它是被show_posts檢視呼叫render_template時傳入的。Jinja允許你對任何可以迭代的東西使用for迴圈。
還有很重要的一點，為了輸出變數內容，你需要在變數外面加上花括號.
|
1 |
{{ variable }} |
|
1 |
{{ post['text']|safe }} |
既然我們決定了允許使用者在他們的博文中輸入任性的HTML程式碼，我們就得使用模板的safe過濾器來輸出博文中的body塊。
Jinja預設會自動忽略任何特殊字元，所以我們得使用safe過濾器來顯示使用者輸入的HTML和Javascript。
新增樣式
最後一件要做的就是建立一個帶有如下內容的static/style.css 檔案：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
body { font-family: sans-serif; background: #eee; } a, h1, h2 { color: #377ba8; } h1, h2 { font-family: 'Georgia', serif; margin: 0; } h1 { border-bottom: 2px solid #eee; } h2 { font-size: 1.2em; } .page { margin: 2em auto; width: 35em; border: 5px solid #ccc; padding: 0.8em; background: white; } .entries { list-style: none; margin: 0; padding: 0; } .entries li { margin: 0.8em 1.2em; } .entries li h2 { margin-left: -1em; } .add-entry { font-size: 0.9em; border-bottom: 1px solid #ccc; } .add-entry dl { font-weight: bold; } .metanav { text-align: right; font-size: 0.8em; padding: 0.3em; margin-bottom: 1em; background: #fafafa; } .flash { background: #cee5F5; padding: 0.5em; border: 1px solid #aacbe2; } .error { background: #f0d6d6; padding: 0.5em; } |
這個檔案會被layout.html 模板載入，提供得體的顯示風格。
測試它
現在我們完成了應用的編碼，讓我們看看最終的產品吧！
為了執行你炫酷的新網站，你得首先通過如下命令來重新啟動Flask web 伺服器：
|
1 2 3 |
$ python flaskr.py * Running on http://127.0.0.1:5000/ * Restarting with reloader |
然後在你的瀏覽器訪問http://127.0.0.1:5000吧。你現在應該能看到正在執行的flaskr 網站，並能使用Stormpath 賬戶登入，發博文等等。
下面是一個網站執行的視訊——看一下:)
有問題麼？直接給我們發郵件吧！我們樂意效勞：support@stormpath.com