Web前端之Flask框架--任务清单管理系统(三：用户资料显示与编辑)

一、用户资料信息

1、准备工作

为了让用户的资料页面更吸引人，我们可以在其中添加一些关于用户的其他信息。扩充 User 模型，添加新字段。

app/models.py

class User(UserMixin,db.Model):
# 此处省略之前的代码
   # 新添加的用户资料
    name=db.Column(db.String(64))       # 用户真实姓名
    location=db.Column(db.String(64))   # 所在地
    about_me=db.Column(db.Text())       # 自我介绍
    # 注册日期
    #     default 参数可以接受函数作为默认值
    #     所以每次生成默认值时，db.Column()都会调用指定的函数
    # utcnow为国际通用的当前时间
    create_date=db.Column(db.DateTime(),default=datetime.utcnow)
    # 最后一次访问时间,由于每次用户访问网络后，这个之都会被刷新，因此添加一个方法完成刷新，即def ping(self)
    last_seen=db.Column(db.DateTime(),default=datetime.utcnow)
    # 外键写在多的一端，外键关联的是roles表中的id列

last_seen 字段创建时的初始值也是当前时间，但用户每次访问网站后，这个值都会被刷新。
我们可以在 User 模型中添加一个方法完成这个操作：

app/models.py

class User(UserMixin,db.Model):
   # 省略之前的代码
    def ping(self):
    """刷新用户的最后访问时间,在登录路由下，当用户登录成功后，使用ping方法更新最后一次登录时间"""
    self.last_seen=datetime.utcnow()
    db.session.add(self)
    db.session.commit()

每次收到用户的请求时都要调用 ping() 方法。由于 auth 蓝本中的 before_app_request 处理程序会在每次请求前运行，所以能很轻松地实现这个需求,代码修改如下:

app/auth/views.py

@auth.before_app_request 
def before_request(): 
    if current_user.is_authenticated: 
	# 更新已登录用户的访问时间 
	current_user.ping() 
	if not current_user.confirmed \ 
		and request.endpoint[:5] != 'auth.' \ 
		and request.endpoint != 'static': 
	   return redirect(url_for('auth.unconfirmed')) 

2、视图函数

专门创建蓝图user用于用户信息的处理，包括资料展示，密码修改，图像上传，邮箱地址更新等等用户操作。

user蓝图的实现步骤：

• 蓝图的创建：app/auth/__ init __.py

# 1)创建蓝图

from flask import Blueprint
#实例化一个蓝图对象，指定蓝图的名字和蓝图所在的位置
auth=Blueprint('auth',__name__)

#将路由与蓝本关联，一定要写在最后，防止循环导入
from . import views

• 蓝图对象上注册路由，指定静态文件夹，注册模板过滤器：app/auth/views.py

@user.route('/user/<username>') 
@login_required 
def users(username): 
    user=User.query.filter_by(username=username).first() 
    if user is None: 	
	abort(404) 
    return render_template('user/user.html', user=user)

• 注册蓝图对象app/__ init __.py

def create_app(config_name='development'): 
    """ 默认创建开发环境的app对象 """ 
    # ........此处省略之前的代码 
    # 附加路由和自定义的错误页面 
    from app.user import auth as user_bp 
    app.register_blueprint(user_bp) # 注册蓝本 
    return app

3、前端页面

templates/user/user.html

• css样式和JS杨hi是位置的指定
  
• 获取当前登录用户的信息
  
  
  显示效果如下：
  

二、用户资料编辑

1、编辑表单的定义

app/user/forms.py

from flask_wtf import FlaskForm
from wtforms import StringField,TextAreaField,SubmitField,FileField
from wtforms.validators import Length

class EditProfileForm(FlaskForm):
    name=StringField('真实名字',validators=[Length(0,64)])
    location=StringField('用户住址',validators=[Length(0,64)])
    about_me=TextAreaField('自我介绍')
    submit=SubmitField('更改资料')

2、视图函数

• 在显示表单之前，这个视图函数为所有字段设定了初始值。是通过把初始值赋值 给 form..data 完成的
• 提交表单后，表单字段的 data 属性中保存有更新后的值，因此可以将其赋值给用户对象中的各字段，然后再把用户对象添加到数据库会话中。

app/user/views.py

@user.route('/edit-profile',methods=['POST','GET'])
def edit_profile():
    form=EditProfileForm()
    if form.validate_on_submit():
        current_user.name=form.name.data
        current_user.location=form.location.data
        current_user.about_me=form.about_me.data
        db.session.add(current_user)
        db.session.commit()
        flash('用户配置信息更新成功',category='success')
        return redirect(url_for('user.get_user',id=current_user.id))
    form.name.data=current_user.name
    form.location.data=current_user.location
    form.about_me.data=current_user.about_me
    return render_template('user/edit_profile.html',form=form)

3、前端页面

为了让用户能轻易找到编辑页面，我们可以在资料页面中添加一个链接。
文件 templates/user-profile.html 的内容和 templates/user/users.html 基本一致， 只是body中的内容变化如下:

三、项目流程的完善

为了让用户点击进入到用户信息查看与编辑页面， 添加对应的超链接如下:

• templates/base.html 完善导航栏
  
• templates/base.html 完善左侧栏