微信号:TesterTalk

介绍:专注软件测试技术分享,包括不限于Web 测试,Mobile测试,API测试,自动化测试,性能测试知识/方法, 以及软件测试职位推荐.

[Web开发] Flask+Python 开发个人博客(一)

2017-03-09 23:36 iTesting

点击上方蓝色「iTesting」关注本公众号

最近几个月工(个)作(人)比(非)较(常)忙(懒),公众号一直没更新,但比较欣慰的是,广大测试同仁并没有抛弃我,反而关注我的人又多了很多,难道这就是传说中的春节效应?


虽说没更新,但自己也没闲着,用Flask撸了个个人博客(稍微改动下就是个论坛),因为是从零写起,开发过程中对web安全测试也有了一点新理解,今天开始我就逐渐分享给大家。


先给大家看下网站的整体效果:

登录页面(也是首页):

注册页面:

这两个页面都实现了基本的验证,比如:

用户名密码为空:

密码不正确:


正确登录后会跳转到系统主页面,长下面的样子


这个页面看起来不复杂,其实由好多个部分组成,技术难点也都在这个页面,具体来说这个页面分为以下模块:

  1. Header

  2. Footer

  3. 文章模块

  4. 文章分类tag

  5. 分页模块

  6. 新建/修改/删除 文章模块。

  7. 文章详页模块

  8. 权限控制模块(包括用户,权限,登录验证,管理员验证等)

  9. 项目配置(使用instance)


以上每个模块都说解耦的,可以随意拼接使用。


下面我们来解释下各个模块作用:

  1. Header

  2. Footer

    前两个就不解释了。

  3. 文章模块

    所有的文章,也是个人博客最重要的部分,简单起见,我以 “时间|文章标题|文章类别|作者” 这样的形式来展现,文章标题点击会进入具体的文章detail页,类别点击会列出所有同类别的文章并且排序显示。

    这个模块会跟下面的分页联系起来,一次只从服务端请求一个页面的文章,防止服务端压力过大。

  4. 文章分类tag

    点击主页上的模块,或者在任何文章的类别上点击,会进入下面的两个页面:

    一个是列在Header上的类别,类别选中会高亮。

    一个是未列在Header上的类别,无高亮:

    可以看到分页是跟着类别走的,主页更准确。

  5. 分页模块

    参考了Flask上的分页,加上用了Bootstrap的样式,后面我们相信解释。

  6. 新建/修改/删除 文章模块。

    用了CK Editor,最好的编辑器之一。

    新建:

    修改:

    删除:


  7. 文章详页模块

    打开就是文章的内容,注意页面元素,这个用了Flask里的BluePrint技术。红框圈起来的是user和admin组,这个是对于文章权限本身而言,不是用户组。

    一个是对文章只有浏览权限,没有修改和删除按钮:

    一个是文章的作者或者Admin用户组的用户,对文章有full control权限

  8. 权限控制是全局的,比如登录与否的检查,记住用户功能,是否有管理权限等。大都后端代码实现



以上就是这段时间我的成果了,所谓赠人玫瑰,手有余香,从今天开始我将一步步按照本文详解解说如何开发个人论坛,等这个系列完成后,你也是测试开发了 :)


最后附上项目代码文件层级,方便理解。



END

关于iTesting

欢迎关注 iTesting. 
iTesting致力于软件测试技术分享, 包括不限于 Web测试, Mobile测试, API测试, 性能测试以及测试职位推荐.


长按下图二维码,在弹出菜单中选择“识别图中二维码”关注本公众号.


更多内容,敬请期待





 
iTesting 更多文章 浏览器缓存知识小结及应用 真情假意藏不住,自古套路得人心 Python的logging详解 Python 多进程 Python Queue详解
猜您喜欢 巧用HTTP 响应头部提高 Web 安全性 用云加速你的开发及测试 开源组件:EventBus 升级!更拉风的谷歌街景 8种极品程序员,你属于哪一种?