[我的翻譯]30分鐘編寫一個Flask應用

本文由 伯樂在線 - drowzju 翻譯，Lingfeng Ai 校稿。未經許可，禁止轉載！
英文出處：stormpath。

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   2directories, 1file

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

fromdatetime importdatetime   fromflask import(     Flask,     abort,     flash,     redirect,     render_template,     request,     url_for, ) fromflask.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.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運行：

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('/') defshow_posts():     posts=[]     foraccount instormpath_manager.application.accounts:         ifaccount.custom_data.get('posts'):             posts.extend(account.custom_data['posts'])       posts=sorted(posts, key=lambdak: k['date'], reverse=True)     returnrender_template('show_posts.html', posts=posts)   @app.route('/add', methods=['POST']) @login_required defadd_post():     ifnot 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.')     returnredirect(url_for('show_posts'))   @app.route('/login', methods=['GET','POST']) deflogin():     error=None       ifrequest.method =='POST':         try:             _user=User.from_login(                 request.form['email'],                 request.form['password'],             )             login_user(_user, remember=True)             flash('You were logged in.')               returnredirect(url_for('show_posts'))         exceptStormpathError, err:             error=err.message       returnrender_template('login.html', error=error)   @app.route('/logout') deflogout():     logout_user()     flash('You were logged out.')       returnredirect(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>   {%ifuser.email %}     <a href="{{ url_for('logout') }}">log out</a>   {%else%}     <a href="{{ url_for('login') }}">login</a>   {% endif %}   </div>   {%formessage inget_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 %}   {%ifuser.email %}     <form action="{{ url_for('add_post') }}" method=post>       <dl>         <dt>Title:         <dd><input type=text size=30name=title>         <dt>Text:         <dd><textarea name=text rows=5cols=40></textarea>         <dd><input type=submit value=Share>       </dl>     </form>   {% endif %}   <ul>   {%forpost inposts %}     <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>   {%iferror %}<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	{%ifuser.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.8em1.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 withreloader

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

下面是一個網站運行的視頻——看一下:)

有問題麼？直接給我們發郵件吧！我們樂意效勞：[email protected]