Flask 是一种很赞的Python web框架。它极小,简单,最棒的是它很容易学。
今天我来带你搭建你的第一个Flask web应用!和 官方教程 一样,你将搭建你自己的微博客系统:Flaskr。和官方Flask教程不同的是——我们通过使用 Stormpath 来创建并管理用户账户和数据,你的工作效率会更高。开发进程会显著地加快!
我们这就开始吧。
注意:这篇教程面向Flask开发新人,帮助他们理解如何使用Flask和Stormpath建立一个简单的网站。本文是Flask官方教程的改版。
Flaskr 应用的目标很简单:
最终的网站应该看起来像这样:
开始之前,我们需要先安装一些Python包才能干活!我们通过?Python包管理器 pip 来完成这件事。
Python
$ pip install flask flask-stormpath
$pipinstallflaskflask-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
?放到新建的项目目录:
Python
$ mkdir -p flaskr/{static,templates}; cp ~/path/to/apiKey.properties flaskr/ $ tree flaskr flaskr ├── apiKey.properties ├── static └── templates 2 directories, 1 file
$mkdir-pflaskr/{static,templates};cp~/path/to/apiKey.propertiesflaskr/ $treeflaskr flaskr ├──apiKey.properties ├──static └──templates 2directories,1file
flaskr目录将是你应用的根目录。static目录用于存放你的静态文件(css,javascript, 和图像文件).templates目录用于存放你的Jinja模板(用于渲染HTML)。
现在你的目录结构搭好了,我们开始配置应用了!
首先,在你flaskr目录下创建名为flaskr.py的新文件。你的应用代码放在这个文件里。
一切将从这里开始:
Python
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()
fromdatetimeimportdatetime fromflaskimport( Flask, abort, flash, redirect, render_template, request, url_for, ) fromflask.ext.stormpathimport( 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()
需要关注的:
STORMPATH_API_KEY_FILE
? 变量应该指向你的apiKey.properties 文件位置。更多信息参见: http://flask-stormpath.readthedocs.org/en/latest/setup.html STORMPATH_APPLICATION 变量应该是你之前创建的
Stormpath 应用名。 app.run()
。它告诉Flask以开发模式运行你的网站以便于测试。 运行下述命令之后,你就可以看到你的Flask应用开始在端口5000运行:
Python
$ python flaskr.py * Running on http://127.0.0.1:5000/ * Restarting with reloader
$pythonflaskr.py *Runningonhttp://127.0.0.1:5000/ *Restartingwithreloader
不过当你访问 http://127.0.0.1:5000 , 你会看到一个404 not found 信息。这是因为你还没有定义任何视图或者URL路由 。
现在安装的部分你已经做完了,我们来定义视图。下面的代码应该放在flaskr.py 文件中,在这个上面:
Python
if __name__ == ‘__main__': app.run()
if__name__==‘__main__': app.run()
代码如下:
Python
@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'))
@app.route('/') defshow_posts(): posts=[] foraccountinstormpath_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(): ifnotuser.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
{ 'date': '2014-04-01T22:50:49.762475', 'text': 'Blog content.', 'title': 'Post title' }
{ 'date':'2014-04-01T22:50:49.762475', 'text':'Blog content.', 'title':'Post title' }
add_posts 视图用于登入用户向网站发布新博文。这个视图带来下面几样东西:
@login_required的视图都可以访问user变量。这是一个存放了用户账户细节的对象。
它的工作机制很简单:
show_posts
?视图,让新添加的博文可以展现出来。 login视图就是简单地从用户POST请求中提取电子邮件地址和密码,然后从Stormpath抓取user对象,尝试登录,并创建一个本地会话。
logout视图就是销毁用户会话。
下一样要加入的东西就是模板代码。Flask使用Jinja模板语言,它让编写HTML模板变得非常简单。
让我们定义一个布局模板templates/layout.html作为开始。后面我们写的其他模板都将从这个基础模板而来。这个策略很有用,因为它允许你在一个地方定义会被多次引用的模板代码。
把下面的代码添加到你的layout.html模板文件:
Python
<!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>
<!doctypehtml> <title>Flaskr</title> <linkrel=stylesheettype=text/csshref="{{ url_for('static', filename='style.css') }}"> <div> <h1>Flaskr</h1> <div> {%ifuser.email%} <ahref="{{ url_for('logout') }}">logout</a> {%else%} <ahref="{{ url_for('login') }}">login</a> {%endif%} </div> {%formessageinget_flashed_messages()%} <div>{{message}}</div> {%endfor%} {%blockbody%}{%endblock%} </div>
接着是templates/show_posts.html 模板文件:
Python
{% 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 %}
{%extends"layout.html"%} {%blockbody%} {%ifuser.email%} <formaction="{{ url_for('add_post') }}"method=post> <dl> <dt>Title: <dd><inputtype=textsize=30name=title> <dt>Text: <dd><textareaname=textrows=5cols=40></textarea> <dd><inputtype=submitvalue=Share> </dl> </form> {%endif%} <ul> {%forpostinposts%} <li><h2>{{post['title']}}</h2>{{post['text']|safe}} {%else%} <li><em>Unbelievable.Nopostsheresofar!</em> {%endfor%} </ul> {%endblock%}
最后,是 templates/login.html 模板文件:
Python
{% 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 %}
{%extends"layout.html"%} {%blockbody%} <h2>Login</h2> {%iferror%}<p><strong>Error:</strong>{{error}}{%endif%} <formaction="{{ url_for('login') }}"method=post> <dl> <dt>Email: <dd><inputtype=textname=email> <dt>Password: <dd><inputtype=passwordname=password> <dd><inputtype=submitvalue=Login> </dl> </form> {%endblock%}
首先要注意的是? layout.html模板定义了一个body块,
在任何子模板中它都可以被同名的块替代。
layout.html模板显示了一个login或者logout模板,还显示所有的闪回信息。
Python
{% if user.email %}
{%ifuser.email%}
因为你用的是Flask-Stormpath,所有模板都可以访问一个神奇的user 变量。当一个用户登入后,该用户的所有细节都是可见的(因此这个检查能生效)。
show_posts.html
?模板迭代posts数组,它是被show_posts视图调用render_template时传入的。Jinja允许你对任何可以迭代的东西使用for循环。
还有很重要的一点,为了输出变量内容,你需要在变量外面加上花括号.
Python
{{ variable }}
{{variable}}
Python
{{ post['text']|safe }}
{{post['text']|safe}}
既然我们决定了允许用户在他们的博文中输入任性的HTML代码,我们就得使用模板的safe过滤器来输出博文中的body块。
Jinja默认会自动忽略任何特殊字符,所以我们得使用safe过滤器来显示用户输入的HTML和Javascript。
最后一件要做的就是创建一个带有如下内容的static/style.css 文件:
Python
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; }
body {font-family:sans-serif;background:#eee; } a,h1,h2 {color:#377ba8; } h1,h2 {font-family:'Georgia',serif;margin:0;} h1 {border-bottom:2pxsolid#eee; } h2 {font-size:1.2em;} .page {margin:2emauto;width:35em;border:5pxsolid#ccc; padding:0.8em;background:white;} .entries {list-style:none;margin:0;padding:0;} .entriesli {margin:0.8em1.2em;} .entrieslih2 {margin-left:-1em;} .add-entry {font-size:0.9em;border-bottom:1pxsolid#ccc; } .add-entrydl {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:1pxsolid#aacbe2; } .error {background:#f0d6d6; padding: 0.5em; }
这个文件会被layout.html 模板加载,提供得体的显示风格。
现在我们完成了应用的编码,让我们看看最终的产品吧!
为了运行你炫酷的新网站,你得首先通过如下命令来重新启动Flask web 服务器:
Python
$ python flaskr.py * Running on http://127.0.0.1:5000/ * Restarting with reloader
$pythonflaskr.py *Runningonhttp://127.0.0.1:5000/ *Restartingwithreloader
然后在你的浏览器访问 http://127.0.0.1:5000 吧。你现在应该能看到正在运行的flaskr 网站,并能使用Stormpath 账户登入,发博文等等。
下面是一个网站运行的视频——看一下:)
有问题么?直接给我们发邮件吧!我们乐意效劳: support@stormpath.com