flask_用户信息和头像

一、用户信息页

1、创建视图函数（microblog.py）

 @app.route('/user/<nickname>')
 @login_required
 def user(nickname):
     user =model.User.query.filter_by(nickname = nickname).first()
     if user == None:
         flash('User ' + nickname + ' not found.')
         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)

（1）我们在这个视图函数里所用的路由装饰器和前面的不同，我们加入了一个参数进去<nickname>,这转化为一个同名的参数添加到视图函数。

（2）我们接受到nickname参数从数据库加载用户，如果没有用户抛出错误信息，重定向到首页。

（3）这里在posts中，author都是user，说明在用回信息页上只能显示自己的blog

2.创建用户模板（templates/user.html）

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

3.在导航栏里添加用户信息页的连接（base.html）

      <div>Microblog:
         <a href="{{ url_for('index') }}">Home</a>
         {% if g.user.is_authenticated() %}
         |<a href="{{ url_for('user',nickname=g.user.nickname) }}">Your Profile</a>
         | <a href="{{ url_for('logout') }}">Logout</a>
         {% endif %}
     </div>

二、头像

1.这里我们没有采用教程上的gravatar来获取用户头像，我们使用的是本地图片(model.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), unique = True)
     posts = db.relationship('Post', backref = 'author', lazy = 'dynamic')
     about_me = db.Column(db.String(140))
     last_seen = db.Column(db.DateTime)
     def is_authenticated(self):
         return True
     def is_active(self):
         return True
     def is_anonymous(self):
         return False
     def avatars(self):
         return sep + 'static' + sep + 'img' + sep + '1.jpg'
     def get_id(self):
         try:
             return unicode(self.id)  # python 2
         except NameError:
             return str(self.id)  # python 3
     def __repr__(self):
         return '<User %r>' % (self.nickname)

2.将头像显示在用户信息页中(user.html)

 {% extends "base.html" %}
 {% block content %}
 <table>
     <tr valign="top">
         <td><img src="{{user.avatars()}}" style="width:128px;height: 128px"></td>
         <td><h1>User: {{user.nickname}}</h1></td>
     </tr>
 </table>
 <hr>
 {% for post in posts %}
 　　{{post.author.nickname}}says:<b>{{post.body}}</b>
17 {% endfor %} 
 {% endblock %}

User 类负责返回头像是一个很巧妙的事情，如果有一天决定不想要 Gravatar 头像，我们只要重构 avatar 返回不同的 URLs(即使指向我们自己的服务器，如果我们想要自己的头像服务器)，所有我们的模版将会自动地开始显示新的头像。

3.在每一个blog前面也显示用户头像(user.html)

 {% for post in posts %}
     <table>
         <tr valign="top">
             <td><img src="{{post.author.avatar(50)}}"></td><td><i>{{post.author.nickname}} says:</i><br>{{post.body}}</td>
         </tr>
     </table>
 {% endfor %}

4.下面我们通过运行来展示下效果

三、在子模板中重用

我们已经实现了用户信息页，它能够显示用户的 blog。我们的首页也应该显示任何一个用户这个时候的 blog 。这样我们有两个页需要显示用户的 blog。当然我们可以直接拷贝和复制处理渲染 blog 的模板，但这不是最理想的。因为当我们决定要修改 blog 的布局的时候，我们要更新所有使用它的模板。相反，我们将要制作一个渲染 blog 的子模板，我们在使用它的模板中包含这个子模板。我们创建一个 blog 的子模板（templates/post.html)

 table>
     <tr valign="top">
         <td><img src="{{post.author.avatars()}}"  style="width: 50px;height: 50px"></td><td><i>{{post.author.nickname}} says:</i><br>{{post.body}}</td>
     </tr>
 </table>

接着我们使用 Jinja2 的 include 命令在我们的用户模板中调用这个子模板(文件templates/user.html):

 {% for post in posts %}
     {% include 'post.html'  %}
 {% endfor %}

一旦我们有一个功能上完全实现的首页，我们将会调用这个子模板，但是现在不准备这么做，将会把它留在后面的章节。

四、添加用户简介以及每个用户访问页面的最后一次的时间在用户信息页上

1.修改数据库，user表中增加两个字段（about_me,last_seen）(model.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), unique = True)
     posts = db.relationship('Post', backref = 'author', lazy = 'dynamic')
     about_me = db.Column(db.String(140))
     last_seen = db.Column(db.DateTime)
     def is_authenticated(self):
         return True
     def is_active(self):
         return True
     def is_anonymous(self):
         return False
     def avatars(self):         return sep + 'static' + sep + 'img' + sep + '1.jpg'
     def get_id(self):
         try:
             return unicode(self.id)  # python 2
         except NameError:
             return str(self.id)  # python 3
     def __repr__(self):
         return '<User %r>' % (self.nickname)

2.运行迁移数据库脚本：python db_migrate.py

3.修改用户信息页：（user.html）

 <tr valign="top">
         <td><img src="{{user.avatars()}}" style="width:128px;height: 128px"></td>
         <td>
             <h1>User: {{user.nickname}}</h1>
             {% if user.about_me %}<p>{{user.about_me}}</p>{% endif %}
             {% if user.last_seen %}<p><i>Last seen on: {{user.last_seen}}</i></p>{% endif %}         </td>
</tr>

注：我们利用 Jinja2 的条件语句来显示这些字段，因为只有当它们被设置的时候才会显示出来。

4.修改before_request函数，在数据库中更新用户最后一次访问的时间(microblog.py)

 @app.before_request
 def before_request():
     from model import  db
     g.user = current_user
     if g.user.is_authenticated():
         g.user.last_seen = datetime.utcnow()
         db.session.add(g.user)
         db.session.commit()

如果你登录到你的信息页，最后出现时间会显示出来。每次刷新页面，最后出现时间都会更新，因此每次浏览器在发送请求之前，before_request 函数都会在数据库中更新时间。

五、编辑用户信息

1.添加一个编辑用户信息的表单（form.py）

 # encoding=utf8
 from flask_wtf import Form
 from wtforms import StringField, BooleanField,TextAreaField
 from wtforms.validators import DataRequired ,length #简单地检查相应域提交的数据是否是空
 class EditForm(Form):
     nickname = StringField('nickname', validators=[DataRequired()])
     about_me = TextAreaField('about_me', validators=[length(min=0, max=140)])

2添加模板(templates/edit.html)

 <!-- extend base layout -->
 {% extends "base.html" %}

 {% block content %}
 <h1>Edit Your Profile</h1>
 <form action="" method="post" name="edit">
     {{form.hidden_tag()}}
     <table>
         <tr>
             <td>Your nickname:</td>
             <td>{{form.nickname(size = 24)}}</td>
         </tr>
         <tr>
             <td>About yourself:</td>
             <td>{{form.about_me(cols = 32, rows = 4)}}</td>
         </tr>
         <tr>
             <td></td>
             <td><input type="submit" value="Save Changes"></td>
         </tr>
     </table>
 </form>
 {% endblock %}

3.编写视图函数(microblog.py)

 @app.route('/edit', methods=['GET', 'POST'])
 @login_required
 def edit():
     from model import db
     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)

4.我们在用户信息页上添加一个编辑页的连接

 <tr valign="top">
         <td><img src="{{user.avatars()}}" style="width:128px;height: 128px"></td>
         <td>
             <h1>User: {{user.nickname}}</h1>
             {% if user.about_me %}<p>{{user.about_me}}</p>{% endif %}
             {% if user.last_seen %}<p><i>Last seen on: {{user.last_seen}}</i></p>{% endif %}
              {% if user.id == g.user.id %}<p><a href="{{url_for('edit')}}">Edit</a></p>{% endif %}
         </td>
 </tr>

5.运行程序在浏览器中显示：