用戶資料頁面
在用戶資料頁面,基本上沒有什么特別要強調和介紹的新概念。只需要創建一個含有HTML的新視圖函數模板頁面即可。
下面是視圖函數(項目目錄/views.py):
?
@app.route('/user/') @login_required def user(nickname): user = User.query.filter_by(nickname = nickname).first() if user == None: flash('不存在用戶:' + nickname + '!') return redirect(url_for('index')) posts = [ { 'author': user, 'body': 'Test post #1' }, { 'author': user, 'body': 'Test post #2' } ] return render_template('user.html', user = user, posts = posts)
這里的@app.route標識主要是用來說明此視圖函數不同于之前的那些。我們定義了一個名為
沒必要為此方法的實現過程感到驚訝。首先我們需要通過把轉化后的nickname參數作為條件,嘗試著從數據庫里把此用戶的數據調用出來。如果沒有查詢到數據,我們就像之前那樣,給用戶一個錯誤的提示并且跳轉到主頁去。
一旦我們找到了改用戶,我們就在模板下面來顯示該用戶的文章。要注意下的是在用戶資料頁面我們只讓顯示該用戶的文章,所以文章的作者要是該用戶。
初始化的視圖模板非常的簡單(項目目錄/templates/user.html):
?
{% extends "base.html" %} {% block content %}用戶昵稱: {{user.nickname}}!
{% for post in posts %}{{post.author.nickname}} 發布了: {{post.body}}
{% endfor %} {% endblock %}
用戶資料頁面就做好了,不過在站點中還沒有指向改頁面的鏈接地址。為了讓用戶很方便的來查看自己的資料信息我們就把鏈接地址放到最上面的導航上去(項目目錄/templates/base.html):
?
注意一下我們已經給函數傳參了之后的和之前的URL。
現在就來試一試這個項目。點擊上面的“你的資料”鏈接就會跳轉到用戶資料頁面。由于我們還沒有指向一個隨意用戶資料頁面的鏈接地址,所以在這里如果你想看他人的資料,就需要自己手動輸入一下地址了。比如你想看miguel的資料,那么地址就是:http://localhost:5000/user/miguelt
頭像部分
我相信你會覺得目前的用戶資料頁面看起來很單調。為了好看,我們就來添加用戶頭像的功能。
為了避免我們服務器需要來處理大量上傳后的頭像圖片,我們在這里就使用Gravatar給咋們提供的用戶頭像即可。
鑒于返回一個用戶頭像是屬于用戶這塊的,所以我們就把代碼放在theUserclass里面(項目目錄/models.py):
?
from hashlib import md5 # ... class User(db.Model): # ... def avatar(self, size): return 'http://www.gravatar.com/avatar/' + md5(self.email).hexdigest() + '?d=mm&s=' + str(size)
avatar將會返回用戶頭像圖片的地址, 根據你的需要來請求你想要的圖片尺寸像素。
從Gravatar上得到圖像圖片很簡單。你只需要用md5把用戶的郵箱hash加密之后合并成上面的那種url形式即可。當然你也可以自由選擇自 定義圖像大小。其中“d=mm”是設置用戶在沒有Gravatar賬號的情況下顯示的默認頭像。“mm”選項會返回一張只有人輪廓的灰色圖片,稱之為“謎 樣人”。而“s=”選項是用來設置返回你給定的圖片尺寸像素。
當然Gravatar也有自己的文檔來描述URL的拼接技術!
到這里Userclass就可以返回一個用戶頭像的圖片了,我們就需要把這個整合到用戶資料布局去(項目目錄/templates/user.html):
?
{% extends "base.html" %} {% block content %}
|
用戶昵稱: {{user.nickname}} |
{% for post in posts %}
{{post.author.nickname}} 發布了: {{post.body}}
{% endfor %} {% endblock %}我們設計Userclass來返回用戶頭像的亮點在于:如果某一天我們要是覺得Gravatar網站上的頭像不是我們所想要的頭像的時候,我們只需要我們只需要重寫一下頭像處理的函數來返回我們想要的地址即可(即使有人盜鏈指向我們的服務器,我們也可以保護好自己的主機),這樣一來只需要修改這么點點,所以的模板都還是自動正常運行。
我們已經把用戶頭像部分添加到了用戶資料詳情頁面的頂部去了,不過在頁面底部我們還有顯示文章的沒做,在文章前面我們也需要顯示一下用戶的頭像。當 然在用戶資料頁面需要對所以的文章都顯示同樣的頭像,不過要是把頭像函數移動到主頁去來給所以的文章都顯示作者的頭像,那該多好。
我們只需要稍稍修改模板文件即可實現給文章顯示相應作者頭像的功能(項目目錄/templates/user.html):
?
{% extends "base.html" %} {% block content %}
|
用戶昵稱: {{user.nickname}} |
{% for post in posts %}
|
{{post.author.nickname}}
發布了:
{{post.body}} |
這就是到此為止我們的用戶資料頁面:
微博客用戶詳情頁面
重復使用子模板
用戶資料頁面顯示了用戶自己的文章,不過網站的首頁需要顯示此刻不同用戶文章。在這里就有兩個用于顯示 用戶文章的模板文件了。我們可以直接復制把處理顯示文章的那段代碼然后直接粘貼到新的模板,其實那并不是最理想的方法,倘若有一天我們需要修改下顯示文章 那塊,我們就需要來更新所以的那些含有文章顯示代碼的模板文件。
反之,我們將會去新建一個子模板文件來處理文章顯示的功能,之后在需要顯示文章的時候包含一下這個文件即可。
開始我們還是來創建一個子空模板文件,然后把用戶資料頁面中展示文章的那段代碼復制過來(項目目錄/templates/post.html):
?
|
{{post.author.nickname}}
發布了:
{{post.body}} |
然后我們使用Jinja2的包含功能調用一下該子模板文件(項目目錄/templates/user.html)
?
{% extends "base.html" %} {% block content %}
|
用戶昵稱: {{user.nickname}} |
{% for post in posts %} {% include 'post.html' %} {% endfor %} {% endblock %}
一旦有了完整的頁面我們就可以按照上面的方法去調用下子模板來顯示文章,不過現在還不急說,將在后面章節的教程中說到。
更多相關個人信息
盡管到此用戶信息頁面比較精密了,不過還是有許多信息沒有顯示出來。用戶大多喜歡在網站上顯示自己更多的信息,因此我們就可以讓用戶填寫自己的信息顯示在這里。當然我們也可以記錄下用戶每次登陸到本站的的時間,顯示到他們自己的資料詳情頁。
為了顯示等多的信息我們就需要更新下數據庫。特別需要在Userclass里面新加字段(項目目錄/models.py):
class User(db.Model): id = db.Column(db.Integer, primary_key = True) nickname = db.Column(db.String(64), unique = True) email = db.Column(db.String(120), index = True, unique = True) role = db.Column(db.SmallInteger, default = ROLE_USER) posts = db.relationship('Post', backref = 'author', lazy = 'dynamic') about_me = db.Column(db.String(140)) last_seen = db.Column(db.DateTime)
我們每次修改數據庫的時候就需要生成新的記錄(migration)。需要注意下我們在處理數據更新到數據庫的時候記得創建一個(migration),現在我們就來看下最后結果。我們只需要下面的代碼就可以把新加的兩個字段更新到數據庫里去了:
?
./db_migrate.py
當然相應的響應腳本是
?
New migration saved as db_repository/versions/003_migration.py Current database version: 3
現在我們新加的兩個字段就保存到數據庫了。不過需要提醒的是在window系統下面調用此腳本是有點不一樣的。
如果不支持數據遷移的話你還得手動修改數據庫,否則你就需要刪除之后重新從頭開始創建數據。
接下來我們就需要修改下用戶詳情頁來顯示我們剛添加的字段(項目目錄/templates/user.html):
?
{% extends "base.html" %} {% block content %}
|
用戶昵稱: {{user.nickname}}{% if user.about_me %}{{user.about_me}} {% endif %} {% if user.last_seen %}Last seen on: {{user.last_seen}} {% endif %} |
{% for post in posts %} {% include 'post.html' %} {% endfor %} {% endblock %}
由于我們需要只有當用戶自己填寫了這兩個字段的時候才顯示出來,所以我們主要利用Jinja2的判斷條件來顯示這些字段即可。
對于這點,對所有的用戶而言,這兩個字段都是空的,什么都不會顯示的。
?
最后顯示的字段(last_seen)就特別的好處理。需要注意的是在上面我們已經設置了用于注冊用戶請求的(flask.g和global, asg.user)接收參數。也就是需要在這個最佳段來記錄用戶的登陸時間(項目目錄/views.py):
?
from datetime import datetime # ... @app.before_request def before_request(): g.user = current_user if g.user.is_authenticated(): g.user.last_seen = datetime.utcnow() db.session.add(g.user) db.session.commit()
如果你登陸了之后就會在資料詳情頁面顯示最后的登陸時間,當然如果你每刷新一次頁面的話相應的登陸時間就會自動更新。這是由于當瀏覽器沒刷新一次就會去請求我們上面設置的接收參數并更新數據庫的處理函數。
在這里我們記錄的是國際標準時間UTC時區。在之前的章節中我們也提到了怎么去儲存一個適合所有時區的時間戳,這就會在有一個負面的錯誤信息,因為在所有用戶的資料頁面顯示的都是UTC的時區的時間,這個問題我會在接下來說關于出來時間和日期的章節中詳細講解。
想顯示關于用戶的更多信息,我們得給他們一個鏈接, 最適合放在用戶資料的編輯頁面。
?
編輯用戶詳細資料
創建一個用戶資料編輯頁面那真是太簡單了,我們只需要創建下面的web表單即可(項目目錄/forms.py):
?
from flask.ext.wtf import Form, TextField, BooleanField, TextAreaField from flask.ext.wtf import Required, Length class EditForm(Form): nickname = TextField('nickname', validators = [Required()]) about_me = TextAreaField('about_me', validators = [Length(min = 0, max = 140)])
視圖模板文件(項目目錄/templates/edit.html):
?
{% extends "base.html" %} {% block content %}{% endblock %}Edit Your Profile
最后當然就是創建視圖的方法(項目目錄/views.py):
?
from forms import LoginForm, EditForm @app.route('/edit', methods = ['GET', 'POST']) @login_required def edit(): form = EditForm() if form.validate_on_submit(): g.user.nickname = form.nickname.data g.user.about_me = form.about_me.data db.session.add(g.user) db.session.commit() flash('Your changes have been saved.') return redirect(url_for('edit')) else: form.nickname.data = g.user.nickname form.about_me.data = g.user.about_me return render_template('edit.html', form = form)
方便用戶編輯,我們需要在用戶的個人資料頁面添加一個到此頁面的鏈接地址(項目目錄/templates/user.html):
?
{% extends "base.html" %} {% block content %}
|
用戶昵稱: {{user.nickname}}{% if user.about_me %}{{user.about_me}} {% endif %} {% if user.last_seen %}最后登陸時間: {{user.last_seen}} {% endif %} {% if user.id == g.user.id %} {% endif %} |
{% for post in posts %} {% include 'post.html' %} {% endfor %} {% endblock %}
不過你需要判斷的一下,條件就是只有當用戶瀏覽自己的個人資料頁面的時候才顯示該鏈接,而不是瀏覽任何人的個人資料頁面都顯示出來。
下面是最新個人資料頁面的截圖,包含了我們新加的所以字段,也含有“關于我”的文字:
最后一點留給你自己去研究了
貌似通過上面的一些列制作,個人資料頁面感覺已經很完善了,對不?仔細想來,是這樣不過我們還有一些bug需要修復下。
不知道你有沒有發現?
提醒下你吧,在之前的章節中我們瀏覽用戶登陸的時候其實我就已經提到過這個bug的。現在我們在上面的代碼片中也犯了同樣錯。
仔細想想吧,如果你知道是什么問題的話可以在下面評論中說下。我將會在下一個章節詳細地說此bug,并說怎么去修正它。
跟以前一樣我會把今天說講到的代碼打包提供下載
下載地址 microblog-0.6.zip.
更多文章、技術交流、商務合作、聯系博主
微信掃碼或搜索:z360901061

微信掃一掃加我為好友
QQ號聯系: 360901061
您的支持是博主寫作最大的動力,如果您喜歡我的文章,感覺我的文章對您有幫助,請用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧,狠狠點擊下面給點支持吧,站長非常感激您!手機微信長按不能支付解決辦法:請將微信支付二維碼保存到相冊,切換到微信,然后點擊微信右上角掃一掃功能,選擇支付二維碼完成支付。
【本文對您有幫助就好】元
