Blog Posts的提交
讓我們從簡單的開始。首頁上必須有一張用戶提交新的post的表單。
首先我們定義一個單域表單對象(fileapp/forms.py):
1
2
|
class PostForm(Form): post = TextField( 'post' , validators = [Required()]) |
下面,我們把這個表單添加到template中(fileapp/templates/index.html):
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
|
<! - - extend base layout - - > { % extends "base.html" % } { % block content % } <h1>Hi, {{g.user.nickname}}!< / h1> <form action = " " method=" post " name=" post"> {{form.hidden_tag()}} <table> <tr> <td>Say something:< / td> <td>{{ form.post(size = 30 , maxlength = 140 ) }}< / td> <td> { % for error in form.errors.post % } <span style = "color: red;" >[{{error}}]< / span><br> { % endfor % } < / td> < / tr> <tr> <td>< / td> <td>< input type = "submit" value = "Post!" >< / td> <td>< / td> < / tr> < / table> < / form> { % for post in posts % } <p> {{post.author.nickname}} says: <b>{{post.body}}< / b> < / p> { % endfor % } { % endblock % } |
到目前為止沒啥新的東西,你可以看到,我們僅僅添加了另一表單,就像我們上一次做的那樣。
最后,功能試圖把所有東西都聯系在一起,并被擴展來處理這個表單(fileapp/views.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
|
from forms import LoginForm, EditForm, PostForm from models import User, ROLE_USER, ROLE_ADMIN, Post @app .route( '/' , methods = [ 'GET' , 'POST' ]) @app .route( '/index' , methods = [ 'GET' , 'POST' ]) @login_required def index(): form = PostForm() if form.validate_on_submit(): post = Post(body = form.post.data, timestamp = datetime.utcnow(), author = g.user) db.session.add(post) db.session.commit() flash( 'Your post is now live!' ) return redirect(url_for( 'index' )) posts = [ { 'author' : { 'nickname' : 'John' }, 'body' : 'Beautiful day in Portland!' }, { 'author' : { 'nickname' : 'Susan' }, 'body' : 'The Avengers movie was so cool!' } ] return render_template( 'index.html' , title = 'Home' , form = form, posts = posts) |
下面讓我們逐一回顧一下這個功能中的變動:
- 我們導入了Post和PostForm類
- 我們接收了來自兩個路徑下的index和視圖的POST請求,因為那就是我們如何接收提交的請求。
- 當我們通過表單提交到功能視圖后,我們會把新的Post記錄錄入數據庫。然后就像之前做的一樣,通過常規的GET請求來訪問它。
- Templat會收到一條額外的內容--表單,所以它會提交給文本域。
在我們繼續之前還有最后一點提醒:注意下面我們如何添加一條新的Post請求到數據庫中:
1
|
return redirect(url_for( 'index' )) |
我們可以很容易的跳過重定向,并且允許它跳到模板渲染部分,而且效率更高。因為所做的所有重定向在經過web瀏覽器之后,都返回到這個相同的功能視圖中來。
所以,為什么選擇重定向?考慮到當用戶寫下一個blog post請求之后,它只需提交然后點擊瀏覽器刷新按鈕。“Refresh”命令能做什么呢?瀏覽器會重新發送最后發布的請求作為一個“Refresh”命令的結果。(譯者注:由于個人水平有限,如果您發現譯處與原文有出入敬請指正。謝謝!)
如果沒有重定向,那么最后提交給表單的就是POST請求,所以一個“Refresh Action”會重新提交那個表單,將會導致第二次提交的post記錄和第一次寫入數據庫中的是相同的。這樣的行為Not so good.
若是有了重定向,我們可以強制瀏覽器在表單提交之后發出另一個請求,它抓取了重定向的頁面。這是一個簡單的“GET”請求,所以“Refresh”動作會重復“GET”請求而不是再次提交表單。
這個簡單的小技巧避免用戶在提交一個blog post請求之后,不小心刷新頁面導致重復寫入post請求。
展現blog post請求
下面我們來說點有意思的東西。我們要從數據庫中抓取blog post請求并失之顯示。
如果你回憶一下之前部分文章,我們曾創建了許多所謂“虛假的”的請求并且在首頁上面顯示了很長時間。這些“虛假的”對象是作為Python list在索引視圖中創建的。
1
2
3
4
5
6
7
8
9
10
|
posts = [ { 'author' : { 'nickname' : 'John' }, 'body' : 'Beautiful day in Portland!' }, { 'author' : { 'nickname' : 'Susan' }, 'body' : 'The Avengers movie was so cool!' } ] |
但是在上一篇文章中,我們創建的查詢語句允許我們從“關注的人”當中獲取所有的請求,所以我們可以用下面的這個語句來替換上文(fileapp/views.py):
1
|
posts = g.user.followed_posts(). all () |
然后當你運行這個應用的時候,你將會看到沖數據庫中抓取到的bolg post請求。
User類的followed_posts方法返回了一條抓取我們感興趣請求的SQL查詢語句。在這個查詢語句中,Callingall()檢索所有的請求到一個list當中,所以我們以這個很像我們一直沿用至今的“虛假”請求的結構結束。他們如此的相像甚至template都沒有注意到。
此時您可以在此應用上自由發揮。你可以創建多個用戶,讓他們follow其他人,然后發布一些信息來看每一個用戶是如何看到它的bolg post請求數據流的。
我們的程序是越來越像樣了,但是我們面臨另外一個問題。我們在首頁顯示了所有的followed post。如果一個用戶有上千篇followed post將會發生什么情況?或者一百萬篇?就像我們可以想象到的,抓取并處理這么龐大的對象列表是十分低效率的。
我們可以顯示把這么大量的post分組來顯示,或者分頁。
Flask-SQLAlchemy可以很好的支持分頁。例如,我們可以通過如下方法,輕松獲取某個用戶的前3篇的followed posts:
1
|
posts = g.user.followed_posts().paginate( 1 , 3 , False ).items |
分頁方法可以被任何query對象調用。它接受3個參數:
- 頁碼,從1開始
- 每頁顯示的記錄數
- 錯誤標記。如果是True,如果接收到超出記錄范圍的頁面請求,那么404錯誤請求將會自動反饋到客戶端瀏覽器。如果是False,那么一個空列表將會被返回,而不顯示錯誤。
paginate的返回值是一個Pagination對象。這個對象里面的成員包括了請求頁面中的記錄列表。稍后,我們會探討Pagination對象中另外一些有用的東西。
現在讓我們來想想,如何在我們的view函數中實現分頁。我們可以先把一些配置信息添加到我們的應用中,包括我們每頁需要顯示多少條記錄(fileconfig.py):
1
2
|
# pagination POSTS_PER_PAGE = 3 |
使用全局配置文件去改變我們應用是一個很好的構思,因為我們只需要去一個地方就可以修改所有的配置。
在最后的應用中,我們當然會使用比3更大的數字,但是作為測試,使用小的數字會更有效。
之后,讓我們來看看URLs是如何判斷請求不同的頁面的。我們之前已知道,Flask的routes可以接受參數的,所以我們可以在URL添加后綴,來指明我們想要的頁面:
1
2
3
4
|
http: / / localhost: 5000 / < - - page #1 (default) http: / / localhost: 5000 / index < - - page #1 (default) http: / / localhost: 5000 / index / 1 < - - page #1 http: / / localhost: 5000 / index / 2 < - - page #2 |
我們可以輕易地實現URLs格式,并添加新的route到我們的view函數當中(fileapp/views.py):
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
from config import POSTS_PER_PAGE @app .route( '/' , methods = [ 'GET' , 'POST' ]) @app .route( '/index' , methods = [ 'GET' , 'POST' ]) @app .route( '/index/<int:page>' , methods = [ 'GET' , 'POST' ]) @login_required def index(page = 1 ): form = PostForm() if form.validate_on_submit(): post = Post(body = form.post.data, timestamp = datetime.utcnow(), author = g.user) db.session.add(post) db.session.commit() flash( 'Your post is now live!' ) return redirect(url_for( 'index' )) posts = g.user.followed_posts().paginate(page, POSTS_PER_PAGE, False ).items return render_template( 'index.html' , title = 'Home' , form = form, posts = posts) |
我們的新route接受分頁參數,并把參數定義為整數。我們還需要添加分頁參數到index函數當中,并給它們一個默認值,因為那三個route當中有兩個route沒有分頁參數,所以這些route就必須用到默認值。
現在我們已經得到了一個頁碼參數,并且可以輕易的應用到我們的followed_post查詢當中,而且還有一個我們之前以定義好的配置常量:POSTS_PER_PAGE。
我們可以注意到,這些更改是如何的簡單,并且當我們更改一個頁面的時候,很少代碼會被影響。我們嘗試在寫應用中的每個部分的時候,不去假設其他部分是如何的工作,這樣就會讓我們寫出模塊化的和健壯的應用,使得測試更簡單,而且更少的出錯機會,或者缺陷。
現在你可以嘗試在你的瀏覽器地址欄中,在URLs中輸入頁碼。請確保你的pots超過3個,這樣你就可以看到多個頁面。
頁面導航
現在我們需要添加鏈接,好讓我們的用戶可以查看上一個/下一個頁面,很幸運,這個功能很容易實現,Flask-SQLAlchemy給我們完成了大部分的工作。
我們現在給view函數更改一小部分代碼。我們在paginate方法中修改:
1
|
posts = g.user.followed_posts().paginate(page, POSTS_PER_PAGE, False ).items |
我們只保留了paginate方法返回的Pagination對象的item成員。但是這個對象包含一些非常有用的信息在里面,所以我們更改為保留Pagination對象(fileapp/views.py):
1
|
posts = g.user.followed_posts().paginate(page, POSTS_PER_PAGE, False ) |
為了完成這個修改,我們還需要修改模板(fileapp/templates/index.html):
1
2
3
4
5
6
|
<! - - posts is a Paginate object - - > { % for post in posts.items % } <p> {{post.author.nickname}} says: <b>{{post.body}}< / b> < / p> { % endfor % } |
我們所做的這些是為了把全套分頁對象應用到我們的模板當中。分頁對象會用到如下成員:
- has_next: 如果本頁之后還有超過一個分頁,則返回True
- has_prev: 如果本頁之前還有超過一個分頁,則返回True
- next_num: 返回下一頁的頁碼
- prev_num: 返回上一頁的頁碼
應用這些成員,我們可以生成如下代碼(app/templates/index.html):
1
2
3
4
5
6
7
8
|
<! - - posts is a Paginate object - - > { % for post in posts.items % } <p> {{post.author.nickname}} says: <b>{{post.body}}< / b> < / p> { % endfor % } { % if posts.has_prev % }<a href = "{{ url_for('index', page = posts.prev_num) }}" ><< Newer posts< / a>{ % else % }<< Newer posts{ % endif % } | { % if posts.has_next % }<a href = "{{ url_for('index', page = posts.next_num) }}" >Older posts >>< / a>{ % else % }Older posts >>{ % endif % } |
現在我們有兩個超鏈接。第一個是叫做"Newer posts",可以鏈接到上一頁(請記住,我們是把最新的post排在最前面,所以上一頁的post是更加新的post)。相反,"Older posts"指向的是下一頁。
當我們在第一頁的時候,我們不想顯示上一頁的鏈接,因為根本不存在。我們可以輕易的檢測得到,因為posts.has_prev返回False。針對這種情況,我們可以只顯示"上一頁"的文本而不帶鏈接屬性。而下一頁也是如此。
實現Post子模板
回到我們添加了阿凡達圖片的文章,我們使用HTML給一個單獨的post定義了一個子模板。原因是我們只需創建一次就可以多個地方使用,避免重復代碼。現在我們就把這個子模板應用到我們的index頁面中。就如我們今天做的事情一樣,這是非常簡單的事情(app/templates/index.html):
1
2
3
4
|
<! - - posts is a Paginate object - - > { % for post in posts.items % } { % include 'post.html' % } { % endfor % } |
神奇吧?我們只是把子模板替換舊的渲染代碼。現在我們得到了包含了用戶的阿凡達圖片的post頁面。
用戶個人頁面
我們已完成了index頁面的開發。但是我們在用戶個人頁面中也引入了posts,該頁面只列出用戶自己所發表的post。相應的,用戶個人頁面也需要按照index的設計去更改。
和index頁面的更改相似,以下是我們要做的幾點:
增加一個接受頁碼的route
為view函數增加一個頁碼參數,默認值為1
使用合適的數據庫查詢與分頁代碼,替換post列表
使用分頁對象更新模板
下面是更新后的view函數(app/views.py):
1
2
3
4
5
6
7
8
9
10
11
12
|
@app .route( '/user/<nickname>' ) @app .route( '/user/<nickname>/<int:page>' ) @login_required def user(nickname, page = 1 ): user = User.query.filter_by(nickname = nickname).first() if user = = None : flash( 'User ' + nickname + ' not found.' ) return redirect(url_for( 'index' )) posts = user.posts.paginate(page, POSTS_PER_PAGE, False ) return render_template( 'user.html' , user = user, posts = posts) |
我們注意到,這個函數已經包含了一個參數(用戶的昵稱),所以我們把頁碼添加到第二個參數。
更改模板也是相當簡單(app/templates/user.html):
1
2
3
4
5
6
|
<! - - posts is a Paginate object - - > { % for post in posts.items % } { % include 'post.html' % } { % endfor % } { % if posts.has_prev % }<a href = "{{ url_for('user', nickname = user.nickname, page = posts.prev_num) }}" ><< Newer posts< / a>{ % else % }<< Newer posts{ % endif % } | { % if posts.has_next % }<a href = "{{ url_for('user', nickname = user.nickname, page = posts.next_num) }}" >Older posts >>< / a>{ % else % }Older posts >>{ % endif % } |
結束語
以下我把本文開發的帶分頁的微型博客應用代碼打包并提供大家下載: