资深程序员教你用Flask给自己搭建一款牛逼的Blog!超级好看!

  • A+
所属分类:python基础入门

资深程序员教你用Flask给自己搭建一款牛逼的Blog!超级好看!

1、模型中添加头像路径字段

保留原有的avatar_hash字段,定义real_avatar字段用来存储头像地址。

资深程序员教你用Flask给自己搭建一款牛逼的Blog!超级好看!

资深程序员教你用Flask给自己搭建一款牛逼的Blog!超级好看!

资深程序员教你用Flask给自己搭建一款牛逼的Blog!超级好看!

资深程序员教你用Flask给自己搭建一款牛逼的Blog!超级好看!

资深程序员教你用Flask给自己搭建一款牛逼的Blog!超级好看!

资深程序员教你用Flask给自己搭建一款牛逼的Blog!超级好看!

配置文件中配置头像文件保存路径:

资深程序员教你用Flask给自己搭建一款牛逼的Blog!超级好看!

4、前端的修改

在change_avatar.html页面渲染ChangeAvatarForm表单:

资深程序员教你用Flask给自己搭建一款牛逼的Blog!超级好看!

在个人用户页面,可直接使用头像图片作为链接,地址是头像上传页面。由于用户资料页面是开放的,只有用户本人或管理员访问时才加上此链接。同时为了和原有的Gravatar头像功能兼容,这里进行了判断:当用户上传了自己的头像时,显示自定义头像,否则显示默认的Gravatar头像。同时,还将自定义头像的尺寸与Gravatar头像的尺寸保持一致,显得更协调些。也可以不用Gravatar头像,像多数网站一样设置一个默认的头像。

除了用户页面外,账户、博客文章、评论这几处也会用到小头像,要予以修改,保持一致。

资深程序员教你用Flask给自己搭建一款牛逼的Blog!超级好看!

5、测试

完成以上代码后,修改头像后的个人页面显示效果如下:

资深程序员教你用Flask给自己搭建一款牛逼的Blog!超级好看!

点击大头像即可进入上传头像页面。目前用户提供的头像需要自行截切成正方形,否则头像会压扁或拉长,很难看。一般的社交网站的头像修改界面往往提供图像的预览和截切功能,主要和前端相关,后续也可将该部分功能集成到程序里。

资深程序员教你用Flask给自己搭建一款牛逼的Blog!超级好看!

可以多测试几个用户:

资深程序员教你用Flask给自己搭建一款牛逼的Blog!超级好看!

这只是搭建一个头像!下次带来页面的搭建!

资深程序员教你用Flask给自己搭建一款牛逼的Blog!超级好看!

weinxin
我的微信公众号
爱真理,得永生!          爱在灵灵久博客,网罗天下,福利大家!

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: