Flask 是一種很贊的Python web框架。它極小,簡單,最棒的是它很容易學。
今天我來帶你搭建你的第一個Flask web應用!和官方教程 一樣,你將搭建你自己的微博客系統:Flaskr。和官方Flask教程不同的是――我們通過使用Stormpath來創建并管理用戶賬戶和數據,你的工作效率會更高。開發進程會顯著地加快!
我們這就開始吧。
注意:這篇教程面向Flask開發新人,幫助他們理解如何使用Flask和Stormpath建立一個簡單的網站。本文是Flask官方教程的改版。
目標
Flaskr 應用的目標很簡單:
最終的網站應該看起來像這樣:
準備
開始之前,我們需要先安裝一些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 fileflaskr目錄將是你應用的根目錄。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()
需要關注的:
運行下述命令之后,你就可以看到你的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 就只是:
{ 'date': '2014-04-01T22:50:49.762475', 'text': 'Blog content.', 'title': 'Post title'}它的工作機制很簡單:
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 web 服務器:
$ python flaskr.py * Running on http://127.0.0.1:5000/ * Restarting with reloader
然后在你的瀏覽器訪問http://127.0.0.1:5000吧。你現在應該能看到正在運行的flaskr 網站,并能使用Stormpath 賬戶登入,發博文等等。
新聞熱點
疑難解答
圖片精選