Flask项目笔记：bbs项目

Flask—bbs项目

扩展：闭包和装饰器

内部函数调用外部变量的行为，就叫做闭包

装饰器就是通过闭包来实现的

https://blog.csdn.net/ljt735029684/article/details/80703649

https://www.runoob.com/w3cnote/python-func-decorators.html

思路

一、项目搭建以及CMS登录页面搭建

• 1、首先创建一个主程序入口的py文件：bbs.py
• 2、接着创建对应的配置文件、存放中间变量的文件、映射文件、模型文件：config、exts、manager、models
• 3、接着创建存放静态资源和模板文件的文件夹：static、templates
• 4、接着创建蓝图，有三个蓝图：cms、front、common（共有的资源放入这里），在蓝图views中完善一些简单的蓝图首页函数或类的编写，然后将蓝图注册到bbs.py（主程序入口文件）中
• 5、每个蓝图中都有对应的模型文件、表单验证文件、以及视图文件：forms、models、views
• 6、接着完善后台登录页面的模型定义，在cms蓝图下的models下定义数据库的用户表，定义其中的字段（username、password、email）
• 7、完善后台登录页面的html文件，去bootstrap中找到登陆页面的组件，点进去查看源代码，复制源代码到自己的templates文件夹下的cms文件夹下的cms_login.html中，用浏览器打开复制过来的html代码，其中的css文件也可以去bootstrap打开的登陆页面中找到，也把源代码复制下来，然后存放在static下的cms文件下的css文件夹中
  

---

• apps
  • cms
    • forms.py
    • models.py
    • views.py
  • common
    • forms.py
    • models.py
    • views.py
  • front
    • forms.py
    • models.py
    • views.py
• static
  • cms
    • css
      • …
    • js
      • …
  • front
    • css
    • js
• templates
  • cms
    • cms_login.html
• bbs.py 程序的入口
• config.py 配置文件
• exts.py 存放中间变量的文件
• manager.py 映射文件
• models.py 模型文件

二、CMS登录页面功能完善+CMS首页搭建

CMS登录页面功能完善

• 1、分析登录页面的功能有：输入邮箱、密码、还有记住我选项，这时候就需要去cms蓝图中的models下定义对应的模块并映射到数据库中，字段还可以添加username和join_time等。
• 2、需要创建用户，可以在项目目录下的manager.py中编写对应的函数并在命令行中使用命令来创建用户，在这时可以考虑到数据库中的密码应该要加密保存在数据库中，则可以去模型中添加一些方法来把密码加密
• 3、在cms蓝图中的views下编写对应的登录类
• 4、在forms.py中编写对应的表单验证类，在views中的登陆类下做验证，验证用户名和密码是否与数据库的数据对应。
• 5、做用户登录限制
  • 利用到session，没有登录的话是不可以访问CMS首页的，判断有没有携带session，没有则自动跳转到登录页面，这里利用到钩子函数(@before_request)
• 6、CSRF问题
  • 在项目程序入口文件中使用CSRFProtect方法包裹app，并在前端中添加csrf_token

CMS首页搭建

• 1、CMS页面完善（html文件、css文件、js文件、视图中的CMS方法）
  • CMS首页的用户名显示在钩子函数中将用户对象添加到g对象中，g对象可以在前端中使用
  • 注销功能
    • 在对应视图方法中删除对应session并跳转到登录页面
• 2、编写CMS的公共模板和展示个人信息页面

三、CMS后台修改密码页面布局+修改密码功能实现

修改密码页面布局

• 找到对应的html、css、js文件，应用公共模板，编写视图类完成布局

修改密码功能实现

• 分析：
  • 1、该密码修改功能页面有 旧密码、新密码以及新密码二次确认输入三个输入框，一个立即保存提交按钮
  • 2、需要完成的是三个输入框提交上来的数据需要使用表单验证
  • 3、表单验证完成之后需要去数据库中对旧密码做确认
  • 4、为了修改密码时局部刷新，这里前端的form标签中的提交按钮标签是外加了javascript代码，通过js代码去编写ajax方式提交这个form表单
  • 5、到这里修改密码功能分析差不多。
  • 6、接下来还需要将视图中返回的数据做优化，因为是ajax方式，所有视图中是返回json数据的，可以通过jsonify方法来包裹字典（将字典转化为json字符串）当作返回值。由于在修改密码视图类中需要返回多个json数据，可以使用restful规范来写一个规范好了的json格式数据用于返回。
    • 创建一个utils文件夹，在里面创建restful.py文件
    • 在里面定义一些用于返回的HttpCode类以及一些函数。在cms蓝图的修改密码视图类中只需要直接调用即可
    • 类似的也可以在密码验证forms.py中定义get_error()函数用于在视图中直接调用来使用
  • 7、在点击修改密码提交按钮时可以设置弹出提示框来告知后台人员是否修改成功
    • 这里用到sweetalert这么一个javascript脚本库，对alert方法进行了封装，装饰了弹出框的样式，优化代码等
    • 可以去密码提交按钮对应的javascript代码中添加提示框功能的代码即可

四、CMS修改邮箱页面布局+功能完善

• 难点：

  • 如何发送带有信息的邮件到指定的邮箱（使用flask-mail）
  • 分析html中对应的点击按钮使用的是什么方式与后端交互的（是否是ajax）
  • 分析ajax代码（请求方式、url）
  • 如何判断用户输入的验证码是否正确（使用redis存储验证码来做对比，也可以用session，但是考虑效率问题还是选择redis）
  • 注意csrf的问题（ajax中传递csrf的方式，html中添加csrf的方式）

• 1、修改邮箱和修改密码类似

• 2、把修改邮箱功能对应的html、css、js文件添加到对应的目录中，编写视图类，因为邮箱字段已经包含在用户表了所以不需要去建立邮箱字段

• 3、发送邮件使用的是flask-mail第三方工具，可以百度搜索进去查看使用教程

• 4、发送邮件这个功能在视图中编写对应的类

• 5、修改邮箱这个功能也在视图中编写对应的类，还需要编写form进行表单验证

• 6、使用redis来存储验证码，在对应的form中编写验证器，在里面完成验证码的验证功能，就无须在视图中完成，实现解耦

• 7、由于这里使用的是ajax方式去修改邮箱，所以返回值也是json格式的，可以使用前面编写好的restful.py中的函数去返回即可

五、权限管理功能分析+封装权限判断功能+客户端和服务端权限验证

• 难点
  • 权限管理架构是怎样的(用户<---->角色<—>权限，用户与角色是多对多，角色与权限也是多对多)
  • 如何表示权限的种类（使用8位二进制来表示8中权限），分清楚有哪些权限

权限管理功能分析

• 1、用户和角色和权限两两之间的关系都是多对多，然而权限并不需要写对应的模型，只需要在models中编写普通类，在类中用二进制数来表示并编写对应的权限属性即可，用于调用
• 2、由于角色和用户之间是多对多，所以models中需要定义角色表并且要定义和用户之间的中间表，还需要写角色和用户之间的relationship字段
• 3、去manager.py中编写方法去创建角色，分别有访问者、运营人员、管理者和开发者，每种类型角色都对应着不同的权限，所以也需要添加对应的权限
• 4、接着在manager.py中编写添加用户对应角色的方法，并在命令行中去添加

封装权限判断功能

• 在models中的用户类中可以去封装一些方法（查看当前用户有哪些权限、当前用户是否有对应的权限、当前用户是否是开发者）以便于后续完善功能时被调用

客户端和服务端权限验证

客户端是指前端、服务端是指后端

• 1、首先需要在视图中定义对应的帖子、评论、板块等等函数和对应的html文件去显示页面
• 2、客户端权限验证：
  • 在html中可以通过 调用 models中用户表定义好的 判断用户是否有对应权限的方法去判断当前用户能在前端的CMS页面能看到哪些模块（即如果是访问者，只能看到首页和个人中心页面，其他帖子、评论等等页面都被隐藏了）
  • 这里考虑到了前端模板中要使用models中的权限二进制属性，是通过context_processor上下文处理器钩子函数来将定义权限的类当成变量传入模板中
• 3、服务端权限验证：
  • 就算将页面隐藏了，但是可以通过输入url来访问，所以为了防止此事件发生，还需在后端再做一次验证
  • 分析如何实现：
    • 1、在每个对应的函数前做判断，判断是否有对应的权限，有则正常显示，无则当用户通过输入url去访问时让用户跳转到cms的首页栏
    • 2、这里不使用钩子函数，因为在并不能判断用户接下来要访问哪个网页对应的函数，这里使用的是装饰器。
      • 因为钩子函数是在每次任何请求之前或之后会自动执行，会导致所有编写的函数的钩子函数都会被执行，并不是我们想要的。我们只想要其中一些被编写的方法执行某些额外功能而已
      • 装饰器比钩子函数优势在于可以传递参数，并不是说钩子函数不能传递参数，而是传递参数的话，会比较麻烦。
    • 3、使用装饰器去封装其中一些评论、板块、前台用户管理等等方法，达到验证该用户权限有哪些，从而让没有对应权限的用户不能通过输入url的方法在前端页面中显示对应的功能栏

六、前台用户模型定义+注册页面的图形验证码+注册页面发送短信

前台用户模型定义

• 1、前台用户的模型字段大致有用户名、密码、邮件、手机号、头像、签名、性别、真实名字
  • 其中性别是使用Enum类型的字段
  • 密码字段是需要加密的，使用werkzeug.security库中的generate_password_hash方法去对密码进行加密，然后使用check_password_hash方法对用户的密码进行验证
• 2、在蓝图front中的views里编写对应的代码实现前端访问

注册页面的图形验证码

• 1、首先要完成注册页面的展示
  • 添加注册页面的html、css和js，然后去html和js中分析代码请求访问顺序，摸清对应的视图类应该写什么请求方法，起什么函数名，定义什么名字的路由
• 2、图形验证码的展示
  • 2-1、图形验证码的代码编写以及展示可以去搜索引擎中搜"flask 图形验证码"字样，即可得到用PIL库编写的图形验证码类。
  • 2-2、由于图形验证码代码在整个项目中相当于一个工具，所以可以放到utils文件夹中
  • 2-3、前端中通过img标签中的src去找到视图中对应的函数， 通过id对应js代码，通过class对应样式
    • js代码作用：实现用户点击图形验证码，图形验证码自动刷新
  • 2-4、在views中编写对应的图形验证码函数，并在函数中return对应的响应给前端用于响应

注册页面发送短信

• 1、本项目发送短信API是在”云片“官网获取，”阿里云“中也有短信服务可以完成。
• 2、通过查看云片API的教程，可以知道如何使用短信服务。首先从教程中复制粘贴对应的代码放在utils文件夹（工具文件夹）的py文件中，在里面利用函数将代码封装起来以便于被调用
• 3、将短信发送服务功能编写在在蓝图common里面的原因是因为前台和后台都可能调用短信服务功能，所以放在中间蓝图common里面最合适。
• 4、在蓝图common的views中编写对应的代码，其中生成短信验证码中的随机字符串并用于发送的函数可以去搜索引擎自行搜索
• 5、到这里还没完，其中有一点需要注意，先梳理用户点击发送验证码按钮去获取对应的验证码的流程：
  • 用户点击发送验证码按钮–>浏览器携带*(用户的form表单)信息生成请求去提交给后端–>后端接收到请求去访问对应的发送短信验证码功能的函数–>该函数中的代码（含有向云片网接口发送请求的代码）被执行–>然后用户得到对应的短信验证码并在注册页面输入
  • 注意点在于：带*的form表单信息这一点，浏览器提交的form表单中信息类型其实是在js代码中已经定义好了有哪几种，然后后台用这几种form表单中的信息去请求短信验证码接口对应的url
    • 危险点：
    • 如果用户是爬虫工作者，他首先可以通过浏览器的检查工具查看到提交数据时需要哪几种form类型的信息，然后如果后台没有对短信验证码接口的url进行封装加密之类的且被他发现，则爬虫工作者可以利用爬虫工具模拟form信息提交到对应的短信验证码url，实现对该短信url无限次发送请求或利用这一点去做别的事情。
• 6、基于第5点的分析，可以对短信验证码的url进行封装或者对页面请求中需要提交的form表单中的信息进行封装加密
  • 6-1、这里是对页面请求中的form表单信息进行封装加密。在js代码中添加sign参数（sign参数组成：telephone字段+timestamp+js中定义的一连串字符）到form表单中，并且是通过md5方式加密，每次提交请求，sign参数中的值都会变动（因为时间戳的原因）。这样可以有一点防护效果（别人不知道一连串字符是啥）。
  • 6-2、但是还是不行，别人可以通过全局搜索去搜索sign字段可以查看到对应的js代码，然后就会发现sign中那一连串的字符是啥，从而可以通过爬虫去模拟。
• 7、这时还有方法，对js代码进行加密，可以复制js代码，去搜索引擎搜索：”js代码加密“，即会出现加密工具而且有很多种加密方式，在里面粘贴js代码，将加密过后的js代码放在项目中即可，这样别人就在浏览器中搜索不出来sign字段，自然也不知道那一串字符是啥，从而很难破解。

七、注册页面完善+登录页面完善+首页搭建

注册页面完善

• 1、至此，注册页面的图形验证码生成和短信验证码发送功能已经完成
• 2、只剩下点击注册按钮时，对提交的信息做form验证和在视图中做好对应的跳转功能(这里看下面第3点)即可。
• 3、在注册页面中的注册按钮上面添加了一行代码""< span style=“display:none” id=“return-to-span”>{{ return_to }}"" ，这里的span标签是通过id：return-to-span联系到js代码的，js代码完成了注册跳转功能。
  • js代码中的注册跳转功能：如果用户是从首页（或者其他（除了注册页面以外）页面）点击注册按钮来到注册页面的，注册完成后会自动跳转回去，如果是直接通过输入url进入的注册页面则注册完成后不会自动跳转。
  • 这里有一点还需要补充的是：其他页面不代表是bbs论坛中的页面，也可能是在其他域名通过链接点进来的，所以是否自动跳转回去还需要在视图中更一步编写逻辑代码
• 4、在视图中我们设定如果用户是从其他（不是bbs论坛的网址）网址跳转到注册页面的话，网页不会自动跳转回去。
  • 4-1、这里需要编写一个url安全的函数，可以去搜索引擎搜索"flask url安全"，则可以搜到对应的函数，函数里面会判断跳转过来的页面的url中的主机号和当前url的主机号是否相同，相同则代表两个url都是bbs论坛的网址，不相同则代表是从其他网址跳转过来的。
  • 4-2、视图中利用这个函数去做判断，函数返回值为True，则向前端传递要跳转的网址，反之则不传递要跳转的网址。前端接收到对应的变量，在js中会执行跳转回去操作，反之没有接收到对应的变量则让网页跳转到首页。

登录页面完善

• 1、登录页面也没什么需要完善的，逻辑和注册页面差不多一样的。添加html、css、js，写form表单验证，在视图中编写逻辑代码。
• 2、一样也需要在视图中完善"“跳转回上一个页面”"的功能

首页搭建

• 1、首页利用Bootstrap网站中的组件来做，导航条、轮播图的html、css都是从中获取

八、轮播图后台管理

轮播图后台页面展示

• html、css、js添加

轮播图功能逻辑

• 添加
• 编辑
• 删除
• 添加编辑和删除都是在js代码中完成的，视图中只需要查询数据库返回restful定义好的函数即可。

九、前台页面轮播图展示+后台上传轮播图图片保存到七牛云存储空间+前台板块页面搭建+后台板块管理

前台页面轮播图展示

• 视图传递参数到模板即可

后台上传轮播图图片保存到七牛云存储空间

• 结合js代码和七牛云提供的sdk文档来完成

前台板块页面搭建+后台板块管理

• 逻辑和轮播图一样，html、js、css添加，model定义表，form表单验证，视图中结合js代码逻辑判断请求方式和应该返回什么格式的信息

十、发布帖子页面功能前后端

• 1、在首页点击发布帖子功能会跳转到对应的发布帖子页面，这里用到的富文本编辑器是：https://github.com/pandao/editor.md
• 2、接下来就是添加对应的js文件css文件，然后根据html文件中信息、js信息，外加结合浏览器检查工具中查看对应的信息去编写model、form表单验证、views中编写逻辑函数、查询数据库等…

十一、发布评论+前后端板块分类&分页

发布评论

• 1、点击对应帖子可以发表评论
• 2、一样的 html、js、css、model、views、forms都需要完善
• 3、这里评论内容的编写框是使用百度的富文本编辑器ueditor：https://segmentfault.com/a/1190000002429055

前后端板块分类&分页

• 1、这里的分类逻辑要点在于：利用点击板块传递到url中的板块ID去做分类
• 2、分页使用的是flask paginate：https://pythonhosted.org/Flask-paginate/

十二、celery的简单使用

• 百度flask celery查看对应的文档

十三、项目部署在阿里云的centos服务器上

http://120.24.150.115/