基于 flask 框架的模拟instagram 图片分享网站的开发 2

news/2024/5/11 13:57:49/文章来源:https://blog.csdn.net/zhyh1435589631/article/details/51855281

1. 前言

我们之前写过一篇博文http://blog.csdn.net/zhyh1435589631/article/details/51787577, 在那篇博文里面, 我们完成了instagram 网站开发的几个基本功能, 包括首页展示, 个人信息页面显示, 图片详情页面展示等。 而在这篇博文中, 我们将在这个基础上, 添加登陆注册, 导航栏优化, 注册邮件通知等功能的编写。

2. 处理的基本流程及思路

2.1 登陆注册页面编写

这里写图片描述
说一下, 这里的基本逻辑流程:
1. 在点击 “注册” 或者 “登陆”按钮的时候, 会触发 js 的一个 onclick 事件响应, 并将表单数据(包括用户名, 密码) post 到相应的 action 路由上, 通过路由所对应的函数 reg(), login() 进行解析
2. 对注册流程, reg() 会先查看在数据库中是否已经有相应的用户名存在, 如果存在就提醒用户直接登陆, 否则, 注册成功, 直接跳转到个人详情页面
3. 而对登陆页面, login() 会查看数据库中是否存在相应的用户名, 加盐 后的密码是否与数据库中的密码相符合(加密存储), 符合的话, 就跳转到用户的个人页, 如果不符合, 提示用户重新登陆。

2.2 next 跳转的优化

我们注意到在注册页的路由后面跟了一个 next 字段, 这是用来表明在用户登录之后, 所应该跳转到的页面, 这里, 我们可以将这个 next 字段 写入到 form 表单中, 提交处理后, 根据next 字段是否为空, 进行相应的跳转

2.3 导航栏的优化

  1. 我们看到我们拿到的前端的页面看上去很费劲, 没有地方让我们点击退出登录, 于是, 我们就考虑借助bootstrap 优化下导航栏, 实现用户可以点击登陆登出操作
    这里写图片描述
    这里写图片描述
    实际干的一个操作, 只是替换了一下 base.html, 将相应的导航栏加入进来

2.4 登陆页面替换

  1. 由于这个前端给出的登陆注册页面是合在一起的, 但是我们通常的注册页面, 是需要填写邮箱, 密码也是需要重复输入, 避免错误录入的, 很显然这个登陆页面是不符合我们的需求的
  2. 于是, 这里我们使用flask-bootstrap 以及 flask-wtf 扩展功能实现了登陆和注册两个表单, 用来替换我们之前的登陆页面
    这里写图片描述
    这里写图片描述

2.5 注册通知邮件

  1. 我们一般在注册一个网站的时候, 都会收到一份注册邮件, 用来激活我们的账户, 这里为了简化起见, 我们仅仅只是向我们的注册邮箱发送一份邮件
  2. 这里主要用到的是 flask-mail 扩展功能
    http://blog.csdn.net/zhyh1435589631/article/details/51585231
  3. 实现效果:
    这里写图片描述

3. 遇到的问题及其解决方案

  1. UnicodeDecodeError: ‘ascii’ codec can’t decode byte 0xe5 in position 108: ordinal not in
    http://blog.sina.com.cn/s/blog_6c39196501013s5b.html

  2. SMTPSenderRefused: (503, ‘Error: need EHLO and AUTH first !’
    这个问题, 后来查出来是设置到环境变量中的密码没有被读入进来, 所导致的

  3. SMTPAuthenticationError: (535
    这个问题, 主要是授权码写错了

  4. HTTP 405 错误 – 方法不被允许 (Method not allowed)
    http://www.cnblogs.com/LCX/p/3633704.html
    遇到这个问题, 主要是因为我们试图向一个静态网页传递数据, 需要确认:

    • 相应的响应路由所对应的处理函数是否支持表单数据
    • 响应的响应路由是否支持 post 方法
  5. TypeError: ‘bool’ object is not callable g.user.is_authenticated() [duplicate]
    这个的原因, 主要是 is_authenticated 是一个属性, 不是一个函数, 所以后面的 () 不需要

  6. UndefinedError: ‘current_user’ is undefined
    这个问题, 主要是我们没有从 flask-login 模块中导入 current_user 产生的

  7. TypeError: is not JSON serializable
    这个原因, 主要是 为了使用 flask-login 模块, 我们需要为我们的数据对象添加 几个属性 http://flask-login.readthedocs.io/en/latest/#your-user-class

    get_id()
    Returns a unicode that uniquely identifies this user, and can be used to load the user from the user_loader callback. Note that this must be a unicode - if the ID is natively an int or some other type, you will need to convert it to unicode.

其中, get_id() 返回的字段一定是 unicode 的。
这里写图片描述

  1. flask-login 之后 redirect 之后 current_user 发生变化
    redirect 之后:
    这里写图片描述
    redirect 之前:
    这里写图片描述

这个问题困扰我们很久, 最终发现, 原来问题还是出在 get_id() 上, 这个get_id , 应该返回一个 有效的数据库字段, 而不是一个临时变量!!!

这里写图片描述

  1. TemplateNotFound: bootstrap/wtf.html
    这个的主要原因在于, 没有导入 bootstrap 对象

4. 项目地址

https://code.csdn.net/zhyh1435589631/instagram_simulation/tree/master

5. 后续

后续还会继续添加一些功能扩展, 用来支持图片上传, 注册邮件激活等功能

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.luyixian.cn/news_show_856905.aspx

如若内容造成侵权/违法违规/事实不符,请联系dt猫网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

基于 flask 框架的模拟instagram 图片分享网站的开发 3

1. 摘要 这次添加的功能是 实现首页和 个人信息页面的异步加载功能 传送门: 基于 flask 框架的模拟instagram 图片分享网站的开发 2 基于 flask 框架的模拟instagram 图片分享网站的开发 1 2. 流程 2.1 profile.js 分析 这里需要编写相应的js 代码&#xff0…

基于 flask 框架的模拟instagram 图片分享网站的开发 4

1. 摘要 这次添加的功能是 个人页图片上传功能和图片详情页评论异步加载功能 传送门: 基于 flask 框架的模拟instagram 图片分享网站的开发 3 基于 flask 框架的模拟instagram 图片分享网站的开发 2 基于 flask 框架的模拟instagram 图片分享网站的开发 1 2. …

基于 flask 框架的模拟instagram 图片分享网站的开发 7 (爬虫机器人)

1. 前言 我们之前使用flask实现了一个模拟instagram的图片分享网站的开发, 但是图片的更新需要用户上传, 但是由于用户比较少, 鉴于这个问题, 我们就考虑引入一个爬虫机器人, 自动的向web程序相关的数据库表项中写入数…

url带斜杠和不带斜杠对seo优化的影响

点我进入原文 ps: seo 是指搜索引擎优化 url带斜杠和不带斜杠对seo优化的影响 作为seo的专员对于这个问题,我觉得很多细心的人都能发现,这二者的区别,但是不知道其中奥妙。今天博主给大家说说关于搜索引擎网址中带/与不带/对于seo的影响。 在…

高并发高流量网站架构

http://blog.csdn.net/SmartTony/archive/2010/09/09/5874485.aspx Web2.0的兴起,掀起了互联网新一轮的网络创业大潮。以用户为导向的新网站建设概念,细分了网站功能和用户群,不仅成功的造就了一大批新生的网站,也极大的方便了上网…

从“奥运门票网站800万访问量”想到的成本、质量、进度、风险等关系

看到这个新闻后颇有一番滋味,更体验到我一直关注的软件性能着实无处不在,这个案例也确实值得我们好好反思一下。 不知道网友们有没有报名参加国际日语考试的——这个网站每年05年前都有人不能报名,因为报名人数太多,所以报名当日大…

h5跳微信小程序流程实现——使用云函数,不开通静态网站

官方开源库: GitHub TCloudBase/WXSEVER-SMS 参考教程: https://developers.weixin.qq.com/community/develop/doc/000ae2a7a7c9402a4d8bca2875b409 此教程为官方提供,包含视频文档 步骤: 1. 开通云开发 2. 新建云函数 ope…

搜索引擎SEO外挂:一边搜索,一边看PageRank

搜索引擎SEO外挂:一边搜索,一边看PageRank 下载地址:多么乐站长工具 我原来曾写过一篇统计分析搜索引擎排名和Page Rank 关联分析 的文章。很多人引用,回复和我讨论了我的结论。有赞成的,有反对的,有鼓励的…

seo优化:把百度放进数据库

seo优化:把百度放进数据库 有时候我想,能把百度的数据放进数据库,用广大程序员熟悉的sql语句查询百度的搜索结果应该是一个不错的主意。在这方面Google早已经跨出了一大步,利用Google Search API 把Google的搜索结果放进数据库是很容易办到得…

商业网站 第八章 注册登陆模板设计

注册——插入记录 服务器行为——添加——插入记录——连接:web_ljdata——插入到表格:T_user——获取值自:form1(注册表单)——表单元素——注册成功后:插入后转到(注册成功表单) 验证登陆信息 数据库面板…

网站推荐机制中的艺术、科学与商务问题

网站推荐机制是电子商务或内容网站的核心功能之一。例如你在一个网站买了一本书后,网站会推荐其他你可能会感兴趣的书。这被认为是亚马逊等电子商务巨头成功的关键。本文对几个出色的推荐系统进行了较透彻的分析。 2006年10月,Netflix搞了一次不寻常的有…

平面设计素材网站-庞姿姿

哈喽,大家好!今天为大家分享的是免费的平面设计素材网站,设计类网站是大家在所难免需要的了吧,下面就是我发现的比较好用的免费的平面设计素材网站,感兴趣的小伙伴看过来,如果你还发现其它好的网站评论一起…

OpenCms创建网站过程图解——献给OpenCms的初学者们

很多人都听说了OpenCms,知道了它的强大,索性的下载安装了,终于见到了久违OpenCms,看到了它简洁的界面,欣喜过后却不免一脸茫然,这个东西怎么用,我怎么用它来建站,从哪开始&#xff0…

视觉素材-免费高清!10个无版权限制的大图特供网站

今天为大家整理目前优秀的提供免费图片素材资源网站,这些网站的图片质量相当高,大部分为高分辨率(高解析),并且,最重要的是,它是免费的,无版权限制!同时具备免费、高清&a…

获取任意网站的图标,标题栏logo,网站logo的方法

不错呦~我想要这个图标怎么办呢? 直接使用网址加上: https://csdn.net/favicon.ico 获取到了 说明:这种方法适用于百分之九十的站点,如果你有想要使用的LOGO或者ico可以使用此方法简单获取。

【引用】iphone开发的好网站

分享iphone开发的好网站,希望大家也能提供一些分享下 收藏 1、http://developer.apple.com/iphone/library 这个是官方的代码实例 2、www.cocoachina.com 这个网站比较适合初期开发者,上面的版主之类的也比较热心,一般的问题都会提供帮助 3…

[.Net Core学习一]网站发布

1.首先点击图片IIS上的模块 判断是否存在 如果没有去官网下载 安装好后 按照formwork版发布即可 结果

功能超全的在线文件转换网站

转自http://blog.360converter.com/archives/1314 最近在做一个图标,找了很多的网站,有些根本就不能转换,有些可以转换,不过转换的出来的icon文件超级大,一个6464的icon转换出来达到了几百k,甚至上1M。不过…

免费文字转语音的网站

此文链接:http://blog.360converter.com/archives/1318 在通常的工作生活中,有时,我们需要将一段话,一段文字转换语音,语音文件以音频格式存储传播,如mp3, wma,wav等格式。 为了完成上述功能&#xff0c…