30分鐘搭建Python的Flask架構並在上面編寫第一個應用_python

Flask 是一種很贊的Python web架構。它極小，簡單，最棒的是它很容易學。
今天我來帶你搭建你的第一個Flask web應用！和官方教程 一樣，你將搭建你自己的微部落格系統：Flaskr。和官方Flask教程不同的是——我們通過使用Stormpath來建立並系統管理使用者賬戶和資料，你的工作效率會更高。開發進程會顯著地加快！

我們這就開始吧。

注意：這篇教程面向Flask開發新人，協助他們理解如何使用Flask和Stormpath建立一個簡單的網站。本文是Flask官方教程的改版。
目標

Flaskr 應用的目標很簡單：

•     允許使用者以事先產生的賬戶（使用Stormpath儲存）登入、登出本微部落格系統。
•     允許登入使用者在頁面添加包含了純文字和一些HTML body文本的條目。使用者被認為是可信任的，HTML內容不會被審查。
•     以時間順序（新的在最上）在網站首頁顯示所有部落格條目。

最終的網站應該看起來像這樣：
準備

開始之前，我們需要先安裝一些Python包才能幹活！我們通過?Python包管理器pip來完成這件事。
 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?放到建立的項目目錄：
 

$ mkdir -p flaskr/{static,templates}; cp ~/path/to/apiKey.properties flaskr/$ tree flaskrflaskr├── apiKey.properties├── static└── templates 2 directories, 1 file

flaskr目錄將是你應用的根目錄。static目錄用於存放你的靜態檔案（css，javascript, 和影像檔）.templates目錄用於存放你的Jinja模板（用於渲染HTML）。
安裝應用

現在你的目錄結構搭好了，我們開始配置應用了！

首先，在你flaskr目錄下建立名為flaskr.py的新檔案。你的應用代碼放在這個檔案裡。

一切將從這裡開始：

 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'] = Trueapp.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.html
•         STORMPATH_APPLICATION 變數應該是你之前建立的Stormpath 應用程式名稱。
•     你建立了一個stormpath_manager 對象，它用於控制Stormpath 庫，後面將幫你輕鬆與使用者以及使用者資料進行互動。
•     You're calling?app.run()?at the bottom. This tells Flask to run your site in development mode for testing.
•     在最後你調用了app.run()?。它告訴Flask以開發模式運行你的網站以便於測試。

運行下述命令之後，你就可以看到你的Flask應用開始在連接埠5000運行：

$ 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 檔案中，在這個上面：

if __name__ == ‘__main__': app.run()

代碼如下：

@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_requireddef 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字典： 
  

{ '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模板檔案：
 

<!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 模板檔案：
 

{% 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 模板檔案：
 

{% 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模板，還顯示所有的閃回資訊。
 

{% if user.email %}

因為你用的是Flask-Stormpath，所有模板都可以訪問一個神奇的user 變數。當一個使用者登入後，該使用者的所有細節都是可見的（因此這個檢查能生效）。

show_posts.html?模板迭代posts數組，它是被show_posts視圖調用render_template時傳入的。Jinja允許你對任何可以迭代的東西使用for迴圈。

還有很重要的一點，為了輸出變數內容，你需要在變數外面加上花括弧.
 

{{ variable }} {{ post['text']|safe }}

既然我們決定了允許使用者在他們的博文中輸入任性的HTML代碼，我們就得使用模板的safe過濾器來輸出博文中的body塊。

Jinja預設會自動忽略任何特殊字元，所以我們得使用safe過濾器來顯示使用者輸入的HTML和Javascript。
添加樣式

最後一件要做的就是建立一個帶有如下內容的static/style.css 檔案：
 

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 網頁伺服器：
 

$ python flaskr.py * Running on http://127.0.0.1:5000/ * Restarting with reloader

然後在你的瀏覽器訪問http://127.0.0.1:5000吧。你現在應該能看到正在啟動並執行flaskr 網站，並能使用Stormpath 賬戶登入，發博文等等。