Flask 是一種很贊的Python web框架。它極小，簡單，最棒的是它很容易學(xué)。
今天我來帶你搭建你的第一個(gè)Flask web應(yīng)用！和官方教程 一樣，你將搭建你自己的微博客系統(tǒng)：Flaskr。和官方Flask教程不同的是——我們通過使用Stormpath來創(chuàng)建并管理用戶賬戶和數(shù)據(jù)，你的工作效率會更高。開發(fā)進(jìn)程會顯著地加快！

我們這就開始吧。

注意：這篇教程面向Flask開發(fā)新人，幫助他們理解如何使用Flask和Stormpath建立一個(gè)簡單的網(wǎng)站。本文是Flask官方教程的改版。
目標(biāo)

Flaskr 應(yīng)用的目標(biāo)很簡單：

•     允許用戶以事先生成的賬戶（使用Stormpath保存）登錄、登出本微博客系統(tǒng)。
•     允許登入用戶在頁面添加包含了純文本和一些HTML body文本的條目。用戶被認(rèn)為是可信任的，HTML內(nèi)容不會被審查。
•     以時(shí)間順序（新的在最上）在網(wǎng)站主頁顯示所有博客條目。

最終的網(wǎng)站應(yīng)該看起來像這樣：
準(zhǔn)備

開始之前，我們需要先安裝一些Python包才能干活！我們通過?Python包管理器pip來完成這件事。
 pip install flask flask-stormpath

上述命令會安裝兩個(gè)包：Flask, 和Flask-Stormpath，這兩個(gè)包在整篇教程都會用到。

接著，你需要?jiǎng)?chuàng)建一個(gè)Stormpath賬戶。你可以在Stormpath網(wǎng)站注冊：https://api.stormpath.com/register

當(dāng)你創(chuàng)建了一個(gè)Stormpath賬戶并登入后，你還需要?jiǎng)?chuàng)建一個(gè)API 密鑰。你可以在操作頁面上點(diǎn)擊創(chuàng)建API密鑰按鈕來完成：https://api.stormpath.com/ui/dashboard

創(chuàng)建了API密鑰后，你會被提示要去下載一個(gè)名為apiKey.properties的文件，稍后我們將用到它。

注意：不要把a(bǔ)piKey.properties文件檢入你的版本控制系統(tǒng)（如果你在用的話）！這個(gè)文件存儲著你的Stormpath證書，應(yīng)該被妥善保管。

接著，你會想要?jiǎng)?chuàng)建新的Stormpath應(yīng)用，請?jiān)L問應(yīng)用網(wǎng)頁：https://api.stormpath.com/v#!applications?，點(diǎn)擊注冊應(yīng)用。創(chuàng)建一個(gè)名為flaskr的新應(yīng)用，選項(xiàng)按默認(rèn)的來。

最后，訪問賬戶頁面：https://api.stormpath.com/ui/accounts/create? ，在flaskr Directory創(chuàng)建新用戶賬戶。所有在這兒創(chuàng)建的賬戶都可以用來登入你將搭建的微博客。
目錄結(jié)構(gòu)

你要做的第一件事就是創(chuàng)建一個(gè)存放你應(yīng)用代碼的目錄結(jié)構(gòu)。你需要?jiǎng)?chuàng)建若干目錄，然后把你的apiKey.properites?放到新建的項(xiàng)目目錄：
 

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

flaskr目錄將是你應(yīng)用的根目錄。static目錄用于存放你的靜態(tài)文件（css，javascript, 和圖像文件）.templates目錄用于存放你的Jinja模板（用于渲染HTML）。
安裝應(yīng)用

現(xiàn)在你的目錄結(jié)構(gòu)搭好了，我們開始配置應(yīng)用了！

首先，在你flaskr目錄下創(chuàng)建名為flaskr.py的新文件。你的應(yīng)用代碼放在這個(gè)文件里。

一切將從這里開始：

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

需要關(guān)注的：

•     在flaskr.py文件的開頭你導(dǎo)入了若干庫——下面整篇教程都會用到它們
•     你創(chuàng)建了一個(gè)app對象——這是每個(gè)Flask 項(xiàng)目的核心
•     你在app.config里添加了若干配置變量。app.config是一個(gè)Python字典變量，你可以用它存放你想存放的任何定制配置。這里我們設(shè)置了若干后面會用到的重要的變量：
•         DEBUG 變量可以設(shè)置為True或者False。它用于控制Flask的內(nèi)置錯(cuò)誤報(bào)告行為（開發(fā)模式下它讓Flask可以顯示詳細(xì)的錯(cuò)誤信息）
•         SECRET_KEY 變量在內(nèi)部使用，用來保證客戶端的會話安全。當(dāng)部署一個(gè)真正的Flask應(yīng)用時(shí)，要確保這是一個(gè)較長的隨機(jī)生成的字符串。
•         STORMPATH_API_KEY_FILE? 變量應(yīng)該指向你的apiKey.properties 文件位置。更多信息參見：http://flask-stormpath.readthedocs.org/en/latest/setup.html
•         STORMPATH_APPLICATION 變量應(yīng)該是你之前創(chuàng)建的Stormpath 應(yīng)用名。
•     你創(chuàng)建了一個(gè)stormpath_manager 對象，它用于控制Stormpath 庫，后面將幫你輕松與用戶以及用戶數(shù)據(jù)進(jìn)行交互。
•     You're calling?app.run()?at the bottom. This tells Flask to run your site in development mode for testing.
•     在最后你調(diào)用了app.run()?。它告訴Flask以開發(fā)模式運(yùn)行你的網(wǎng)站以便于測試。

運(yùn)行下述命令之后，你就可以看到你的Flask應(yīng)用開始在端口5000運(yùn)行：

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

不過當(dāng)你訪問http://127.0.0.1:5000， 你會看到一個(gè)404 not found 信息。這是因?yàn)槟氵€沒有定義任何視圖或者URL路由 。
視圖

現(xiàn)在安裝的部分你已經(jīng)做完了，我們來定義視圖。下面的代碼應(yīng)該放在flaskr.py 文件中，在這個(gè)上面：

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_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'))

我們來討論一下上面的代碼。

你可能注意到首先定義的函數(shù)是show_posts。這個(gè)函數(shù)用于在網(wǎng)站前端頁面顯示發(fā)布的博文。如你可能已經(jīng)猜到的，裝飾器@app.route(‘/')告訴Flask如何運(yùn)行這個(gè)函數(shù)。

每次用戶請求 URL “/”，F(xiàn)lask就會運(yùn)行show_posts，把輸出返回給用戶。

show_posts 就只是：

•     迭代所有的用戶賬戶，查找博文。每篇博文就是一個(gè)簡單的如下格式的Python字典： 
  

{
 'date': '2014-04-01T22:50:49.762475',
 'text': 'Blog content.',
 'title': 'Post title'
}

•     每找到一篇博文就添加到posts數(shù)組。
•     按日期對posts數(shù)組排序，因此新發(fā)布的在前面。
•     以posts數(shù)組作為輸入，渲染出一個(gè)叫做show_posts.html的HTML模板.
• add_posts 視圖用于登入用戶向網(wǎng)站發(fā)布新博文。這個(gè)視圖帶來下面幾樣?xùn)|西：
•     裝飾器@app.route(‘/add', methods=[‘POST'])告訴Flask該URL只接受POST請求。Flask默認(rèn)只接受GET請求。
•     @login_required 裝飾器確保能訪問該視圖前用戶已經(jīng)登入。如果用戶沒有登入而嘗試對該視圖POST，會得到HTTP 401 未授權(quán)應(yīng)答。
•     任何裝飾了?@login_required的視圖都可以訪問user變量。這是一個(gè)存放了用戶賬戶細(xì)節(jié)的對象。

它的工作機(jī)制很簡單：

•     檢查用戶賬戶下是否有保存的博文。這一步是通過檢查user.custom_data.get(‘posts') 不是False來實(shí)現(xiàn)的。user.custom_data是一個(gè)Python字典，你可以在其中保存任何想保存的用戶數(shù)據(jù)。
•     從POST 請求中抓取標(biāo)題和正文，在用戶的posts數(shù)組中創(chuàng)建一個(gè)新的post對象。
•     保存新博文到用戶賬戶的Stormpath中。
•     發(fā)出一個(gè)后面會向用戶展示的消息。
•     最后，把用戶重定向到show_posts?視圖，讓新添加的博文可以展現(xiàn)出來。
•     login 和logout視圖特別地簡單。

login視圖就是簡單地從用戶POST請求中提取電子郵件地址和密碼，然后從Stormpath抓取user對象，嘗試登錄，并創(chuàng)建一個(gè)本地會話。

logout視圖就是銷毀用戶會話。
模板

下一樣要加入的東西就是模板代碼。Flask使用Jinja模板語言，它讓編寫HTML模板變得非常簡單。

讓我們定義一個(gè)布局模板templates/layout.html作為開始。后面我們寫的其他模板都將從這個(gè)基礎(chǔ)模板而來。這個(gè)策略很有用，因?yàn)樗试S你在一個(gè)地方定義會被多次引用的模板代碼。

把下面的代碼添加到你的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模板定義了一個(gè)body塊，在任何子模板中它都可以被同名的塊替代。

layout.html模板顯示了一個(gè)login或者logout模板，還顯示所有的閃回信息。
 

{% if user.email %}

因?yàn)槟阌玫氖荈lask-Stormpath，所有模板都可以訪問一個(gè)神奇的user 變量。當(dāng)一個(gè)用戶登入后，該用戶的所有細(xì)節(jié)都是可見的（因此這個(gè)檢查能生效）。

show_posts.html?模板迭代posts數(shù)組，它是被show_posts視圖調(diào)用render_template時(shí)傳入的。Jinja允許你對任何可以迭代的東西使用for循環(huán)。

還有很重要的一點(diǎn)，為了輸出變量內(nèi)容，你需要在變量外面加上花括號.
 

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

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

Jinja默認(rèn)會自動(dòng)忽略任何特殊字符，所以我們得使用safe過濾器來顯示用戶輸入的HTML和Javascript。
添加樣式

最后一件要做的就是創(chuàng)建一個(gè)帶有如下內(nèi)容的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; }

這個(gè)文件會被layout.html 模板加載，提供得體的顯示風(fēng)格。
測試它

現(xiàn)在我們完成了應(yīng)用的編碼，讓我們看看最終的產(chǎn)品吧！

為了運(yùn)行你炫酷的新網(wǎng)站，你得首先通過如下命令來重新啟動(dòng)Flask web 服務(wù)器：
 

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

然后在你的瀏覽器訪問http://127.0.0.1:5000吧。你現(xiàn)在應(yīng)該能看到正在運(yùn)行的flaskr 網(wǎng)站，并能使用Stormpath 賬戶登入，發(fā)博文等等。

最新評論