Flask项目实战(五)

用户个人资料页

登录模块完成了,接下来做一做用户个人资料页的显示。

app/routes.py : 添加用户方法

Flask项目实战(五)_第1张图片

既然添加了方法,肯定要添加对应的模板了。

app/templates/user.html : 用户个人中心模板

Flask项目实战(五)_第2张图片

对基类模板进行小小的改动,当用户是未登录状态看不到用户中心的超链接,登录后看到。

app/templates/base.html : 完善基类模板

Flask项目实战(五)_第3张图片

现在登录查看:

Flask项目实战(五)_第4张图片

用户头像,我使用的是Gravatar来提供,使用这个网站生成头像是https:// s.gravatar.com/avatar/(hash) 这种格式,会把邮箱地址用md5加密拼接在后面。如果感兴趣可以去上传一个玩一玩,如果不想去的话可以直接使用我提供的。https://www.gravatar.com/avatar/6b541a0a667f5558208aad7309c22936,默认像素是80x80,但是你可以在这个地址后面添加参数?s=128,会变成128x128像素,当然你可以尝试改成更大的数字也可以,很是方便。可以根据你的需求改变大小。

Flask项目实战(五)_第5张图片


app/models.py : 添加avatar地址

Flask项目实战(五)_第6张图片

方法写好了,接下来就修改模板

app/templates/user.html : 显示用户头像

Flask项目实战(五)_第7张图片

run测试下:

Flask项目实战(五)_第8张图片

 

现在用户个人资料页面设计好了,这样用户写的帖子以及他们的头像都可以显示出来。 现在我想让首页也有类似的布局,但是复制/粘贴处理这种方法显然不太合适,因此新建模板用来被调用。

app/templates/_post.html : 用来放posts里面的内容

Flask项目实战(五)_第9张图片

把格式完善的更丰满些。

app/models.py : 增加新的字段

Flask项目实战(五)_第10张图片

下一步,写入数据库中!

Flask项目实战(五)_第11张图片

查看数据库

user模型又新增了字段,那么模板也要相应的改变啦。

app/templates/user.html : 添加字段

Flask项目实战(五)_第12张图片

模型、模板都改了,那修改中间最重要的视图部分。

app/routes.py : 添加对应的方法

Flask项目实战(五)_第13张图片

运行测试

Flask项目实战(五)_第14张图片

刚才在User模型添加了2个字段,上面完成了一个最近登录,还有一个关于我about_me,首先要在forms.py进行设计。

Flask项目实战(五)_第15张图片

既然forms里进行修改,那么就要新增加一个专门的编辑个人资料的页面更合适些。

app/templates/edit_profile.html : 个人资料编辑

Flask项目实战(五)_第16张图片

这些都完成差不多了,接下来就是增加视图函数了。

app/routes.py : 编辑个人资料的视图函数

Flask项目实战(五)_第17张图片

在用户界面添加一个可以点击的超链接,就完成个人资料编辑的页面啦。

app/templates/user.html : 编辑页面的链接

Flask项目实战(五)_第18张图片

运行测试:

Flask项目实战(五)_第19张图片

效果显示如下:

Flask项目实战(五)_第20张图片

你可能感兴趣的:(flask)