這是Flask Mega-Tutorial系列的第六部分，我將告訴你如何建立個人主頁。

本章將致力於為應用添加個人主頁。個人主頁用來展示使用者的相關資訊，其個人資訊由本人錄入。 我將為你展示如何動態地生成每個使用者的主頁，並提供一個編輯頁面給他們來更新個人資訊。

本章的GitHub連結為：Browse, Zip, Diff.

個人主頁

作為建立個人主頁的第一步，讓我們為其URL /user/ 新建一個對應的檢視函式。

@app.route('/user/<username>')
@login_required
def user(username):
    user = User.query.filter_by(username=username).first_or_404()
    posts = [
        {'author'
 
: user, 'body': 'Test post #1'},
        {'author': user, 'body': 'Test post #2'}
    ]
    return render_template('user.html', user=user, posts=posts)

我用來裝飾該檢視函式的@app.route裝飾器看起來和之前的有點不一樣。 本例中被<和>包裹的URL <username>是動態的。 當一個路由包含動態元件時，Flask將接受該部分URL中的任何文字，並將以實際文字作為引數呼叫該檢視函式。 例如，如果客戶端瀏覽器請求URL /user/susan

這個檢視函式的實現相當簡單。 我首先會嘗試在資料庫中以使用者名稱來查詢和載入使用者。 之前你見過通過呼叫all()來得到所有的結果的查詢，或是呼叫first()來得到結果中的第一個或者結果集為空時返回None的查詢。 在本檢視函式中，我使用了first()的變種方法，名為first_or_404()，當有結果時它的工作方式與first()完全相同，但是在沒有結果的情況下會自動傳送404 error給客戶端。 以這種方式執行查詢，我省去檢查使用者是否返回的步驟，因為當用戶名不存在於資料庫中時，函式將不會返回，而是會引發404異常。

如果執行資料庫查詢沒有觸發404錯誤，那麼這意味著找到了具有給定使用者名稱的使用者。 接下來，我為這個使用者初始化一個虛擬的使用者動態列表，最後用傳入的使用者物件和使用者動態列表渲染一個新的user.html模板。

user.html模板如下所示：

{% extends "base.html" %}{% block content %}
    <h1>User: {{ user.username }}</h1>
    <hr>
    {% for post in posts %}
    <p>
    {{ post.author.username }} says: <b>{{ post.body }}</b>
    </p>
    {% endfor %}{% endblock %}

個人主頁雖然已經完成了，但是網站上卻沒有一個入口連結。我將會在頂部的導航欄中新增這個入口連結，以便使用者可以輕鬆檢視自己的個人資料：

    <div>
      Microblog:
      <a href="{{ url_for('index') }}">Home</a>
      {% if current_user.is_anonymous %}
      <a href="{{ url_for('login') }}">Login</a>
      {% else %}
      <a href="{{ url_for('user', username=current_user.username) }}">Profile</a>
      <a href="{{ url_for('logout') }}">Logout</a>
      {% endif %}
    </div>

這裡唯一有趣的變化是用來生成連結到個人主頁的url_for()呼叫。 由於個人主頁檢視函式接受一個動態引數，所以url_for()函式接收一個值作為關鍵字引數。 由於這是一個指向當前登入個人主頁的連結，我可以使用Flask-Login的current_user物件來生成正確的URL。

嘗試點選頂部的Profile連結就能將你帶到自己的個人主頁。 此時，雖然沒有連結來訪問其他使用者的主頁，但是如果要訪問這些頁面，則可以在瀏覽器的位址列中手動輸入網址。 例如，如果你在應用中註冊了名為“john”的使用者，則可以通過在位址列中鍵入http:// localhost:5000/user/john來檢視該使用者的個人主頁。

頭像

我相信你也覺得我剛剛建立的個人主頁非常枯燥乏味。為了使它們更加有趣，我將新增使用者頭像。與其在伺服器上處理大量的上傳圖片，我將使用Gravatar為所有使用者提供圖片服務。

Gravatar服務使用起來非常簡單。 要請求給定使用者的圖片，使用格式為的URL即可，其中<hash>是使用者的電子郵件地址的MD5雜湊值。 在下面，你可以看到如何生成電子郵件為[email protected]的使用者的Gravatar URL：

>>> from hashlib import md5
>>> 'https://www.gravatar.com/avatar/' + md5(b'[email protected]').hexdigest()
'https://www.gravatar.com/avatar/d4c74594d841139328695756648b6bd6'

另一個可傳遞給Gravatar的有趣引數是d，它讓Gravatar為沒有向服務註冊頭像的使用者提供的隨機頭像。 我最喜歡的隨機頭像型別是“identicon”，它為每個郵箱都返回一個漂亮且不重複的幾何設計圖片。 如下：

請注意，一些Web瀏覽器外掛（如Ghostery）會遮蔽Gravatar影象，因為它們認為Automattic（Gravatar服務的所有者）可以根據你傳送的獲取頭像的請求來判斷你正在訪問的網站。 如果在瀏覽器中看不到頭像，你在排查問題的時候可以考慮以下是否在瀏覽器中安裝了此類外掛。

由於頭像與使用者相關聯，所以將生成頭像URL的邏輯新增到使用者模型是有道理的。

from hashlib import md5
# ...

class User(UserMixin, db.Model):
    # ...
    def avatar(self, size):
        digest = md5(self.email.lower().encode('utf-8')).hexdigest()
        return 'https://www.gravatar.com/avatar/{}?d=identicon&s={}'.format(
            digest, size)

User類新增的avatar()方法需要傳入需求頭像的畫素大小，並返回使用者頭像圖片的URL。 對於沒有註冊頭像的使用者，將生成“identicon”類的隨機圖片。 為了生成MD5雜湊值，我首先將電子郵件轉換為小寫，因為這是Gravatar服務所要求的。 然後，因為Python中的MD5的引數型別需要是位元組而不是字串，所以在將字串傳遞給該函式之前，需要將字串編碼為位元組。

如果你對Gravatar服務很有興趣，可以學習他們的文件。

下一步需要將頭像圖片插入到個人主頁的模板中：

{% extends "base.html" %}{% block content %}
    <table>
        <tr valign="top">
            <td><img src="{{ user.avatar(128) }}"></td>
            <td><h1>User: {{ user.username }}</h1></td>
        </tr>
    </table>
    <hr>
    {% for post in posts %}
    <p>
    {{ post.author.username }} says: <b>{{ post.body }}</b>
    </p>
    {% endfor %}{% endblock %}

使用User類來返回頭像URL的好處是，如果有一天我不想繼續使用Gravatar頭像了，我可以重寫avatar()方法來返回其他頭像服務網站的URL，所有的模板將自動顯示新的頭像。

我的個人主頁的頂部有一個不錯的大頭像，不止如此，底下的所有使用者動態都會有一個小頭像。 對於個人主頁而言，所有的頭像當然都是對應使用者的。我將會在主頁面上實現每個使用者動態都用其作者的頭像來裝飾，這樣一來看起來就非常棒了。

為了顯示使用者動態的頭像，我只需要在模板中進行一個小小的更改：

{% extends "base.html" %}{% block content %}
    <table>
        <tr valign="top">
            <td><img src="{{ user.avatar(128) }}"></td>
            <td><h1>User: {{ user.username }}</h1></td>
        </tr>
    </table>
    <hr>
    {% for post in posts %}
    <table>
        <tr valign="top">
            <td><img src="{{ post.author.avatar(36) }}"></td>
            <td>{{ post.author.username }} says:<br>{{ post.body }}</td>
        </tr>
    </table>
    {% endfor %}{% endblock %}

使用Jinja2子模板

我設計的個人主頁，使用頭像和文字組合的方式來展示了使用者動態。 現在我想在主頁也使用類似的風格來佈局。 我可以複製/貼上來處理使用者動態渲染的模板部分，但這實際上並不理想，因為之後如果我想要對此佈局進行更改，我將不得不記住要更新兩個模板。

取而代之，我要建立一個只渲染一條使用者動態的子模板，然後在user.html和index.html模板中引用它。 首先，我要建立這個只有一條使用者動態HTML元素的子模板。 我將其命名為app/templates/_post.html， _字首只是一個命名約定，可以幫助我識別哪些模板檔案是子模板。

    <table>
        <tr valign="top">
            <td><img src="{{ post.author.avatar(36) }}"></td>
            <td>{{ post.author.username }} says:<br>{{ post.body }}</td>
        </tr>
    </table>

我在user.html模板中使用了Jinja2的include語句來呼叫該子模板：

{% extends "base.html" %}{% block content %}
    <table>
        <tr valign="top">
            <td><img src="{{ user.avatar(128) }}"></td>
            <td><h1>User: {{ user.username }}</h1></td>
        </tr>
    </table>
    <hr>
    {% for post in posts %}{% include '_post.html' %}{% endfor %}{% endblock %}

應用的主頁還沒有完善，所以現在我不打算在其中新增這個功能。

更多有趣的個人資料

新增的個人主頁存在的一個問題是，真正顯示的內容不夠豐富。 使用者喜歡在個人主頁上展示他們的相關資訊，所以我會讓他們寫一些自我介紹並在這裡展示。 我也將跟蹤每個使用者最後一次訪問該網站的時間，並顯示在他們的個人主頁上。

為了支援所有這些額外的資訊，首先需要做的是用兩個新的欄位擴充套件資料庫中的使用者表：

class User(UserMixin, db.Model):
    # ...
    about_me = db.Column(db.String(140))
    last_seen = db.Column(db.DateTime, default=datetime.utcnow)

每次資料庫被修改時，都需要生成資料庫遷移。 在第四章中，我向你展示瞭如何設定應用以通過遷移指令碼跟蹤資料庫的變更。 現在有兩個新的欄位我想新增到資料庫中，所以第一步是生成遷移指令碼：

(venv) $ flask db migrate -m "new fields in user model"
INFO  [alembic.runtime.migration] Context impl SQLiteImpl.
INFO  [alembic.runtime.migration] Will assume non-transactional DDL.
INFO  [alembic.autogenerate.compare] Detected added column 'user.about_me'
INFO  [alembic.autogenerate.compare] Detected added column 'user.last_seen'
  Generating /home/miguel/microblog/migrations/versions/37f06a334dbf_new_fields_in_user_model.py ... done

migrate命令的輸出表示一切正確執行，因為它顯示User類中的兩個新欄位已被檢測到。 現在我可以將此更改應用於資料庫：

(venv) $ flask db upgrade
INFO  [alembic.runtime.migration] Context impl SQLiteImpl.
INFO  [alembic.runtime.migration] Will assume non-transactional DDL.
INFO  [alembic.runtime.migration] Running upgrade 780739b227a7 -> 37f06a334dbf, new fields in user model

我希望你認識到使用遷移框架是多麼有用。 資料庫中的使用者資料仍然存在，遷移框架如同實施手術教學般地精準執行遷移指令碼中的更改並且不損壞任何資料。

下一步，我將會把新增的兩個欄位增加到個人主頁中：

{% extends "base.html" %}{% block content %}
    <table>
        <tr valign="top">
            <td><img src="{{ user.avatar(128) }}"></td>
            <td>
                <h1>User: {{ user.username }}</h1>
                {% if user.about_me %}<p>{{ user.about_me }}</p>{% endif %}{% if user.last_seen %}<p>Last seen on: {{ user.last_seen }}</p>{% endif %}
            </td>
        </tr>
    </table>
    ...
{% endblock %}

請注意，我用Jinja2的條件語句來封裝了這兩個欄位，因為我只希望它們在設定後才可見。 目前，所有使用者的這兩個欄位都是空的，所以如果現在執行應用，則不會看到這些欄位。

記錄使用者的最後訪問時間

讓我們從更容易實現的last_seen欄位開始。 我想要做的就是一旦某個使用者向伺服器傳送請求，就將當前時間寫入到這個欄位。

為每個檢視函式新增更新這個欄位的邏輯，這麼做非常的枯燥乏味。在檢視函式處理請求之前執行一段簡單的程式碼邏輯在Web應用中十分常見，因此Flask提供了一個內建功能來實現它。解決方案如下：

from datetime import datetime

@app.before_request
def before_request():
    if current_user.is_authenticated:
        current_user.last_seen = datetime.utcnow()
        db.session.commit()

Flask中的@before_request裝飾器註冊在檢視函式之前執行的函式。這是非常有用的，因為現在我可以在一處地方編寫程式碼，並讓它在任何檢視函式之前被執行。該程式碼簡單地實現了檢查current_user是否已經登入，並在已登入的情況下將last_seen欄位設定為當前時間。我之前提到過，應用應該以一致的時間單位工作，標準做法是使用UTC時區，使用系統的本地時間不是一個好主意，因為如果那麼的話，資料庫中儲存的時間取決於你的時區。最後一步是提交資料庫會話，以便將上面所做的更改寫入資料庫。如果你想知道為什麼在提交之前沒有db.session.add()，考慮在引用current_user時，Flask-Login將呼叫使用者載入函式，該函式將執行一個數據庫查詢並將目標使用者新增到資料庫會話中。所以你可以在這個函式中再次新增使用者，但是這不是必須的，因為它已經在那裡了。

如果在進行此更改後檢視你的個人主頁，則會看到“Last seen on”行，並且時間非常接近當前時間。 如果你離開個人主頁，然後返回，你會看到時間在不斷更新。

事實上，我在儲存時間和在個人主頁顯示時間的時候，使用的都是UTC時區。 除此之外，顯示的時間格式也可能不是你所預期的，因為實際上它是Python datetime物件的內部表示。 現在，我不會操心這兩個問題，因為我將在後面的章節中討論在Web應用中處理日期和時間的主題。

個人資料編輯器

我還需要給使用者一個表單，讓他們輸入一些個人資料。 表單將允許使用者更改他們的使用者名稱，並且寫一些個人介紹，以儲存在新的about_me欄位中。 讓我們開始為它寫一個表單類吧：

from wtforms import StringField, TextAreaField, SubmitField
from wtforms.validators import DataRequired, Length

# ...

class EditProfileForm(FlaskForm):
    username = StringField('Username', validators=[DataRequired()])
    about_me = TextAreaField('About me', validators=[Length(min=0, max=140)])
    submit = SubmitField('Submit')

我在這個表單中使用了一個新的欄位型別和一個新的驗證器。 對於“about_me”欄位，我使用TextAreaField，這是一個多行輸入文字框，使用者可以在其中輸入文字。 為了驗證這個欄位的長度，我使用了Length，它將確保輸入的文字在0到140個字元之間，因為這是我為資料庫中的相應欄位分配的空間。

該表單的渲染模板程式碼如下：

{% extends "base.html" %}{% block content %}
    <h1>Edit Profile</h1>
    <form action="" method="post">
        {{ form.hidden_tag() }}
        <p>
            {{ form.username.label }}<br>
            {{ form.username(size=32) }}<br>
            {% for error in form.username.errors %}
            <span style="color: red;">[{{ error }}]</span>
            {% endfor %}
        </p>
        <p>
            {{ form.about_me.label }}<br>
            {{ form.about_me(cols=50, rows=4) }}<br>
            {% for error in form.about_me.errors %}
            <span style="color: red;">[{{ error }}]</span>
            {% endfor %}
        </p>
        <p>{{ form.submit() }}</p>
    </form>
{% endblock %}

最後一步，使用檢視函式將它們結合起來：

from app.forms import EditProfileForm

@app.route('/edit_profile', methods=['GET', 'POST'])
@login_required
def edit_profile():
    form = EditProfileForm()
    if form.validate_on_submit():
        current_user.username = form.username.data
        current_user.about_me = form.about_me.data
        db.session.commit()
        flash('Your changes have been saved.')
        return redirect(url_for('edit_profile'))
    elif request.method == 'GET':
        form.username.data = current_user.username
        form.about_me.data = current_user.about_me
    return render_template('edit_profile.html', title='Edit Profile',
                           form=form)

這個檢視函式處理表單的方式和其他的檢視函式略有不同。如果validate_on_submit()返回True，我將表單中的資料複製到使用者物件中，然後將物件寫入資料庫。但是當validate_on_submit()返回False時，可能是由於兩個不同的原因。這可能是因為瀏覽器剛剛傳送了一個GET請求，我需要通過提供表單模板的初始版本來響應。也可能是這種情況，瀏覽器傳送帶有表單資料的POST請求，但該資料中的某些內容無效。對於該表單，我需要區別對待這兩種情況。當第一次請求表單時，我用儲存在資料庫中的資料預填充欄位，所以我需要做與提交相反的事情，那就是將儲存在使用者欄位中的資料移動到表單中，這將確保這些表單欄位具有使用者的當前資料。但在驗證錯誤的情況下，我不想寫任何表單欄位，因為它們已經由WTForms填充了。為了區分這兩種情況，我需要檢查request.method，如果它是GET，這是初始請求的情況，如果是POST則是提交表單驗證失敗的情況。

我將個人資料編輯頁面的連結新增到個人主頁，以便使用者使用：

                {% if user == current_user %}
                <p><a href="{{ url_for('edit_profile') }}">Edit your profile</a></p>
                {% endif %}

請注意我巧妙使用的條件，它確保在檢視自己的個人主頁時出現編輯個人資料的連結，而在檢視其他人的個人主頁時不會出現。