Python的Flask架構中實現分頁功能的教程_python

Blog Posts的提交

讓我們從簡單的開始。首頁上必須有一張使用者提交新的post的表單。

首先我們定義一個單域表單對象（fileapp/forms.py）：
 

class PostForm(Form):  post = TextField('post', validators = [Required()])

下面，我們把這個表單添加到template中(fileapp/templates/index.html)：
 

<!-- 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）:
 

from forms import LoginForm, EditForm, PostFormfrom models import User, ROLE_USER, ROLE_ADMIN, Post @app.route('/', methods = ['GET', 'POST'])@app.route('/index', methods = ['GET', 'POST'])@login_requireddef 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請求到資料庫中：
 

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在索引檢視表中建立的。
 

posts = [    {      'author': { 'nickname': 'John' },      'body': 'Beautiful day in Portland!'    },    {      'author': { 'nickname': 'Susan' },      'body': 'The Avengers movie was so cool!'    }  ]

但是在上一篇文章中，我們建立的查詢語句允許我們從“關注的人”當中擷取所有的請求，所以我們可以用下面的這個語句來替換上文（fileapp/views.py）:
 

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：
 

posts = g.user.followed_posts().paginate(1, 3, False).items

分頁方法可以被任何query對象調用。它接受3個參數：

1.     頁碼，從1開始
2.     每頁顯示的記錄數
3.     錯誤標記。如果是True,如果接收到超出記錄範圍的頁面請求，那麼404錯誤請求將會自動反饋到用戶端瀏覽器。如果是False，那麼一個空列表將會被返回，而不顯示錯誤。

paginate的傳回值是一個Pagination對象。這個對象裡面的成員包括了請求頁面中的記錄列表。稍後，我們會探討Pagination對象中另外一些有用的東西。

現在讓我們來想想，如何在我們的view函數中實現分頁。我們可以先把一些配置資訊添加到我們的應用中，包括我們每頁需要顯示多少條記錄（fileconfig.py）:
 

# paginationPOSTS_PER_PAGE = 3

使用全域設定檔去改變我們應用是一個很好的構思，因為我們只需要去一個地方就可以修改所有的配置。

在最後的應用中，我們當然會使用比3更大的數字，但是作為測試，使用小的數字會更有效。

之後，讓我們來看看URLs是如何判斷請求不同的頁面的。我們之前已知道，Flask的routes可以接受參數的，所以我們可以在URL添加尾碼，來指明我們想要的頁面：
 

http://localhost:5000/     <-- page #1 (default)http://localhost:5000/index  <-- page #1 (default)http://localhost:5000/index/1 <-- page #1http://localhost:5000/index/2 <-- page #2

我們可以輕易地實現URLs格式，並添加新的route到我們的view函數當中（fileapp/views.py）：

 

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_requireddef 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方法中修改：
 

posts = g.user.followed_posts().paginate(page, POSTS_PER_PAGE, False).items

我們只保留了paginate方法返回的Pagination對象的item成員。但是這個對象包含一些非常有用的資訊在裡面，所以我們更改為保留Pagination對象（fileapp/views.py）：
 

posts = g.user.followed_posts().paginate(page, POSTS_PER_PAGE, False)

為了完成這個修改，我們還需要修改模板(fileapp/templates/index.html):
 

<!-- 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）：
 

<!-- 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）：
 

<!-- 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）：
 

@app.route('/user/<nickname>')@app.route('/user/<nickname>/<int:page>')@login_requireddef 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）：
 

<!-- 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 %}

結束語

以下我把本文開發的帶分頁的微型部落格應用代碼打包並提供大家下載：

下載：microblog-0.9.zip.