青岛东八区创意做网站,中堂东莞网站建设,网站建设产品,为知笔记写wordpress文章目录 9 图片社交网站9.1 项目组织架构9.2 编写程序骨架9.3 高级用户认证9.4 基于用户角色的权限管理9.5 使用Flask-Dropzone优化文件上传9.6 使用Flask-Avatars处理用户头像9.7 图片展示与管理9.8 收藏图片9.9 用户关注9.10 消息提醒9.11用户资料与账户设置9.12 首页与探索… 文章目录 9 图片社交网站9.1 项目组织架构9.2 编写程序骨架9.3 高级用户认证9.4 基于用户角色的权限管理9.5 使用Flask-Dropzone优化文件上传9.6 使用Flask-Avatars处理用户头像9.7 图片展示与管理9.8 收藏图片9.9 用户关注9.10 消息提醒9.11用户资料与账户设置9.12 首页与探索9.13 使用Flask-Whooshee实现全文搜索9.14 编写网站后台小记 9 图片社交网站
本章新涉及的Python包Flask-Dropzone, Pillow, Flask-Avatars, Whoosh, Flask-Whooshee。
9.1 项目组织架构
1、功能式架构
在该架构中程序包由各个代表程序组件功能的子包组成如 blueprints蓝本froms表单templates模板models模型等。这也是前一章个人博客项目中所采用的架构方式。
2、分区式架构
在分区式架构中程序被按照自身的板块分成不同的子包如 front前台auth用户dashboard后台。这种分类自然决定了每一个子包都对应着一个蓝本。
myapp/dashboard/- __init__.py- views.py- forms.pytemplates/static/front/...auth/...__init__.py也许上面两种架构的描述会让你有些混淆你也可以这样理解功能式架构将相似的代码组织在一起而分区式架构将同一块业务组织在一起。 3、混合式架构
即不按照常规的分类来组织。比如在分区式架构的基础上使各个蓝本公用程序包根目录下的模板文件夹和静态文件夹。
Flask并不限制你组织项目的方式你可以根据自己程序的特点自由选择。
9.2 编写程序骨架
1、可能用到的资源 在线图片占位服务如基于Unspalsh的Lorem Picsum。在程序开发的过程种可以生成不同的用于占位的图片。开源图标集如Font AwesomeMaterial Design IconsOctions等还有与Bootstrap集成良好的Iconic。(p308) 2、缓存破坏
如果你总是向同一个url发起请求而实际获取不同的返回结果。如
img srchttps://picsum.photos/800/?random但浏览器可能会使用缓存的响应。为了处理这个问题你可以再加一个无意义但是会变化的查询字符串。
9.3 高级用户认证
注册一个账号通常包含这样的步骤填写注册信息、接收注册邮件、通过单击验证链接来确认账号。
1、验证邮箱地址
验证链接是一个类似/confirm/foo的URL后面是一个传递给视图函数的变量即一个用来验证用户身份的令牌。用户点击链接使服务器收到请求后会解析令牌以获得存储再其中的用户 id然后执行确认的操作。
因为令牌经过签名所以可以确保其不会被篡改。 问题“签名”是原理是什么扩展Flask-Security可以简化用户认证的实现过程。 9.4 基于用户角色的权限管理
在一些简单的程序中通常只有两种用户角色普通用户和管理员所以在角色和权限上并不需要花费太多的功夫。但在一些复杂的程序中你可能会有更丰富的角色如被封禁的用户、被锁定的用户等等。每一种角色又有着不同的权限角色和权限之间是多对多的关系。
roles_permissions_map {Locked: [Follow, Collect],User: [Follow, Collect, Comment],...
}在程序开始时你需要提供一个方法初始化角色和权限的关系即将该关系写入数据库中。然后你可以编写权限验证装饰器附加到视图函数前使具有响应权限的用户才能访问该视图函数。
9.5 使用Flask-Dropzone优化文件上传
使用普通表单进行文件上传时如果同时上传多个文件用户只能在一个毫无变化的页面面前苦苦等待。为了优化用户体验我们可以显示一个包含上传文件的列表展示文件上传的进度。Flask-Dropzone扩展可以帮助我们做到这件事情。 Flask-Dropzone提供了基本配置、内置的文件类型配置、以及错误消息的配置。p326 该扩展还内置了对于CSRFProtect扩展的支持可以在上传文件表单中自动添加csrf令牌隐藏字段并在处理文件上传请求时自动验证csrf令牌。
DROPZONE_ENABLE_CSRF True渲染上传区域需要加载对应的css和javascrip静态资源文件可以在http://www.dropzonejs.com下载。有可以分别使用dropzone.load_css()和dropzone.load_js()方法从CDN加载静态资源。
保存图片
Flask-dropzone扩展承担了渲染界面、接收文件和验证工作而保存图片需要我们自己完成。图片的保存包含两个更具体的操作
将图片文件保存到文件系统将图片信息保存到数据库
Flask-Dropzone还扩展内置了一个生成随机文件名的函数
from flask_dropzone import random_filename
filename random_filename(f.filename) # 从原文件名生成新的文件名Dropzone.jsFlask-Dropzone的静态资源通过AJAX请求发送文件每个文件一个请求因此在完成上传后并不会将网页的控制权交给Flask的视图函数。一个不错的做法是提供一个按钮让用户自行控制。你也可以配置键DROPZONE-DEDIRECT_VIEW在完成上传后自动跳转到指定页面。
图片裁剪
网页中大量体积较大的图片会延缓网页的加载速度。一种可行的做法是为一张图片保存同时保存多个不同大小的副本在不同的场景下使用不同大小的图片。p333
9.6 使用Flask-Avatars处理用户头像
在用户还没有自定义头像时可以为用户提供一个默认头像。Flask-Avatars在模板中开放了avatars类
img src{{ avatars.defualt() }}默认头像太过简陋你可以在注册时为用户生成随机的头像像素样式。配置如下
AVATARS_SAVE_PATH os.path.join(ALBUMY_UPLOAD_PATH, avatars)
AVATARS_SIZE_TUPLE (30, 100, 200) # 同时生成三种尺寸的头像然后就可以在User模型中添加生成头像的代码。扩展会自动生成和保存图像到文件系统中你只需要再将文件的信息保存到数据库中即可。
from flask_avatars import Identicon
avatar Identicon()
filenames avatar.generate(textself.username) # 可以通过一些参数进行更加丰富的配置p336你可以创建一个类似Flask内置的static视图的视图函数以方便在模板中通过url_for()函数访问图片文件。p337
9.7 图片展示与管理
在用户的主页可以展示图片的列表。如果你的用户对象使用location字段存储城市信息你还可以将这个字符渲染为链接通过将城市值拼接到Google地图的查询链接后点击可以跳转到Gootle地图显示相关结果。
!-- target_blank : 在新窗口打开链接 --
a hrefhttps://www.google.com/maps?q{{ user.location }} target_blank {{ user.location | truncate(20) }}
/atruncate过滤器可以将字符截取到指定长度后显示。 在图片标签的外部添加一个a标签可以用于访问图片的详情页面即实现通过点击图片进行页面跳转。p340
删除确定模态框
删除图片时相比浏览器默认的确认窗口使用模态框可以使页面的样式显得更加一致。如果通过jinja2的for循环对每个删除按钮都生成一个模态框最终的页面中将包含大量的模态框代码但这些代码大部分通常都不会被使用。
更合理的方式是使所有的删除按钮都指向同一个模态框
{# 删除按钮 #}
a classbtn data-tgglemodal data-target#confirm-delete data-href...Delete/a
{# 模态框 #}
div classmodal fade idconfirm-delete .../div然后通过JavaScript代码监听模态框的打开事件。p345
$(#confirm-delete).on(show.bs.modal, function(e){$(.delete-form).attr(action, $(e.relatedTarget).data(href));
})编辑图片描述
常用的一个做法是添加一个编辑按钮在用户单击时跳转到对应的编辑页面在完成编辑后再跳转回来。但更好的方式是让用户直接在当前页面编辑。这个效果也会借助javascript实现直接把编辑表单渲染在图片描述的下方但是通过css属性display设置为none将表单先隐藏起来在用户单击时通过javascript显示表单。p347
用户资料弹窗
我们希望当鼠标悬停在某个用户的头像上时会显示一个小弹窗来显示用户的详细信息。大致流程鼠标悬停触发javascript函数发送AJAX请求到某个URLURL对应的视图函数返回数据javascript获取到返回的数据后更新页面的内容。
具体实现较为复杂详见p353。
动态显示提示消息
此外简单的程序在出错时可以使用alert()调用浏览器内置的弹窗组件进行提示但不够美观。我们希望自定义一个这样的弹窗在页面的上层动态显示并在一定时间内自动隐藏。一般称为Toast。p357
9.8 收藏图片
前面已经学习过如何使用关联表来表示多对多关系缺点是只能表示关系不能存储数据如我还想记录下收藏图片的时间戳。这种情况下我们可以使用关联模型来表示多对多关系。
在关联模型中我们将Photo模型与User模型的多对多关系分离成了User模型和Collect模型的一对多关系和Photo模型与Collect模型的一对多关系。 不过在使用了关联模型后Photo和User模型中的关系属性relationship返回的不再是关系另一侧的记录而是关系的中间人——Collect记录。需要进一步调用collector和collected才会加载对应的用户和图片对象。
class Collect(db.Model):...collector_id db.Column(db.Integer, db.ForeignKey(user.id), primary_keyTrue)collected_id db.Column(db.Integer, db.ForeighKey(photo.id), primary_keyTrue)collector db.relationship(User, back_populatescollections, lazyjoined)collected db.relationship(Photo, back_populatescollectors, lazyjoined)class User(db.Model):...collections db.relationship(Collect, back_populatescollectors, cascadeall)class Photo(db.Model):...collectors db.relationship(Collect, back_populatescollected, cascadeall)9.9 用户关注
和图片收藏一样用户关注也是多对多的关系我们同样希望可以记录关注行为的时间戳因此仍然使用关系模型来表示多对多关系。但不同之处在于关注关系的两侧都在同一个模型User中这种关系被称为自引用关系。
我们不妨令关注关系为Follow则在Follow模型上建立反向关系时SQLAlchemy没法知道哪个外键对应哪个反向属性需要在关系函数中使用foreign_keys参数来明确对应的字段。p366 感觉这一段很绕 补充如果对关系属性设置了dynamic类型的加载方式调用关系属性会返回查询对象此时可以进行进一步的过滤操作。 事件绑定
前面提到了用户资料弹窗我们希望在用户资料弹窗中也有一个关注按钮但jQuery中on()以及快捷方法click()、hover()等事件处理器只能绑定到已经存在的元素所以不能通过弹窗元素的id作为选择器如
$(.follow-btn).on(...)有两种解决方式
在html元素中使用onclick属性指定调用的目标函数即行内JavaScript但不推荐。监听整个DOM
$(document).on(click, .follow-btn, follow.bind(this));这里on()方法的三个参数分别是事件选择器触发的回调函数。
AJAX请求下的错误消息
因为AJAX请求异步发送不会重载页面因此不能使用flash()发送消息。我们可以在视图中返回包含提示消息的json响应并使用jquery提供的ajaxError()方法设置一个统一的ajax错误回调函数。p377
9.10 消息提醒
我们希望未读消息数是实时更新显示的而不是需要手动刷新一次页面才能看到新的数据。这个功能可以通过轮询实现即每隔一段事件自动发出一个ajax请求。在JavaScript中使用setInterval()方法可以周期性地按照时间间隔不停地执行代码见p384。
9.11用户资料与账户设置
前面介绍了如何为用户生成随机的头像但作为一个社交程序我们希望可以使用自己喜欢的图片作为自己的头像。Flask-Avatars通过集成jQuery插件Jcrop需要在模板中加载对应的资源文件提供了裁剪头像的支持。p387
实现自定义头像的功能需要两个表单一个用于单纯的上传图片另一个用于保存裁剪图片的坐标。
修改密码疑惑
书中修改密码增加了“新鲜的”标记判断据说通过“使用session对象写入名为_fresh的cookie实现”。但登录状态和是否新鲜这两个字段不都是写在session对象中吗怎么能够判断“虽然用户仍然保持登录状态但会话已经被标记为不新鲜”
9.12 首页与探索
我们希望在首页可以看到自己关注的用户最近发布的图片这个查询包含以下步骤p399
获取用户关注的所有用户获取每个用户发布的图片使用时间降序排列这些图片
这里有两种实现方式子查询和联结通常来说联结的效率更高。
# 子查询
followed_ids db.session.query(Follow.followed_id).filter(Follow.follower_id current_user.id).subquery()
# 主查询
followed_photos Photo.query.filter(Photo.author_id.in_(followed_ids)).order_by(Photo.timestamp.desc()).all()# 联结查询
Photo.query.join(Follow, Follow.followed_id Photo.author_id).filter(Follow.follower_id current_user.id)联结查询的代码也显得更加简洁。
9.13 使用Flask-Whooshee实现全文搜索
我们生活中常见的各种网站基本上都会提供一个搜索框大多数数据库引擎本身也提供了全文搜索的功能。但如果你希望实现的是一个不局限于某个数据库引擎的搜索引擎可以考虑使用集成了Whoosh的Flask-Whooshee扩展它同时也与SQLAlchemy扩展进行了集成。 全文搜索的原理索引程序通过扫描数据库中的每一个词对每一个词建立一个索引指明它出现的次数和位置。 from albumy.extensions import whoosheewhooshee.register_model(username, name)
class User(db.Model):...索引默认会在写入相应的字段后自动更新。你也使用reindex()方法可以重建索引
whooshee.reindex()对于写入频繁的程序最好关闭索引的自动更新使用定时任务工具周期性手动地重建更新索引。关于定时任务工具你可以考虑使用Celery或者扩展Flask-APScheduler。
使用搜索
User.query.whooshee_search(q).all() # q为想要搜索的字符串9.14 编写网站后台
对于一个真实的程序来说后台管理可能会包含以下内容
用户行为分析网站访问统计内容过滤与关键词审核推送系统消息编辑推荐内容网站固定内容编辑数据库在线操作
书中只实现了对于用户和资源发布内容、评论等的关系实现比较简单不再介绍。
小记
这一章真的非常非常的长在书中有100多页。虽然我现在已经将这一部分看完了但是自己用来边做边学的玩具项目却没有跟上。不知道这些新鲜的知识会不会很快就从我的脑海里消逝。
啃砖头书确实也是一件比较有成就感的事情。身边有朋友说感觉看书很浪费时间有很多东西根本没必要去看。但是网站上的一些视频或文档教程常常让我感觉一半好像知道了一半却直入云里雾里。还是砖头的作者更有耐心。比如即使我没有学习过javascript书中的解释也可以使我基本明白代码的意思。也仍是一件需要好好权衡的事情毕竟看书会很花时间。
为什么会学习flask呢我并没有对依靠它寻找工作抱有希望Web开发已经卷疯了。它相对简单易学我可以使用它尝试做一些自己的小工具希望会对我的学习生活起到一些帮助作用。
在写笔记的过程中也在继续慢慢地学习如何写笔记。记下需要注意的、容易出错的地方记下主要的流程和思路总之还有很长的路要走。
