夜色涪江
夜色涪江

flask开发一个留言板

注：本文主要是参照李辉大大《Flask Web开发实战》一书第7章——留言板所写，基本上都是照抄啦，主要是做笔记用，有不清楚的地方可以去查阅原文，同时附上留言板项目的Github仓库地址。

1、使用包组织程序代码

使用包组织程序代码，创建程序实例，初始化扩展等操作都可以在程序包的构造文件(init.py)中实现，代码如下

from flask import Flask
from flask_sqlalchemy import SQLAlchemy

app = Flask('sayhello')  
# 在单脚本中可以直接传入__name__,Flask由此来确定程序路径，所以在使用包组织代码的时候，以硬编码的方式传入包名称作为程序名称
# 在创建程序对象后，使用config对象的from_pyfile方法即可加载配置文件，传入配置文件名作为参数
app.config.from_pyfile('settings.py')
app.jinja_env.trim_blocks = True
app.jinja_env.lstrip_blocks = True

db = SQLAlchemy(app)  # 使用SQLAIchemy读取app对象生成数据库对象

from sayhello import views,errors,commands

为什么要在最后其他脚本呢？
1、在init构造文件中导入这些模块，将这些函数和程序实例关联起来
2、因为这些模块也需要从构造函数中导入程序实例，所以为了避免循环依赖，这些导入语句在构造文件的末尾定义

  • 小贴士
    在其他文件中导入构造文件中的变量，不需要注明注明构造文件的路径，只需要通过通过包名称导入，举个例子，在构造文件中定义的程序实例app，可以使用from sayhello import app

Flask在通过FLASK_APP环境变量定义的模块中寻找程序实例。所以在程序启动之前，我们需要给.flaskenv中的环境变量FLASK_APP重新赋值，这里只写出包名称即可FLASK_APP=sayhello

2、Web程序开发流程 遇事不决，先写注释，哈哈哈哈

  1. 分析需求，列出功能清单或写需求说明书
  2. 设计程序功能，写功能规格书和技术规格书 虽然不懂是啥
  3. 进入开发和测试迭代
  4. 调试和性能等专项测试
  5. 部署上线
  6. 运行维护与营销

写好功能规格书后，我们就可以开始实际的代码编写。具体分为前端页面(front end)和后端程序(back end)。

  1. 前端开发主要流程
  • 根据功能规格书画页面草图
  • 根据草图做交互式原型图
  • 根据原型图开发前端页面(HTML CSS Javascript)
  1. 后端开发主要流程
  • 数据库建模
  • 编写表单类
  • 编写视图函数和相关的处理函数
  • 在页面使用Jinja2替换虚拟数据

前期考虑和规划越周全，在实际开发时就可以越高效和省力

程序功能设计

因为本程序比较简单，所以写一个非常简短的功能规格书就行

  • 咋居中
  • 概述：用户输入问候信息和姓名，按下提交按钮，就可以将问候加入到页面的消息列表中。
  • 主页：主页是SayHello唯一的页面，页面中包含创建留言的表单和所有的问候消息。页面上方是程序的标题"SayHello"，使用大字号和鲜艳的颜色，页面底部包含程序的版权标志、编写者、源码等相关信息
  • 问候表单：这个表单包含姓名和问候消息两个字段，其中姓名是普通的文本字段，消息字段是文本区域字段。为了获得良好的样式效果，需要对这两个字段进行长度限制，姓名最长为20个字符，消息最长为200个字符。
  • 用户提交发布表单以后：
  1. 如果验证出错，错误消息以红色小字的形式显示在字段下面
  2. 如果通过验证，在程序标题下面显示一个提示消息，用户可以通过消息右侧的按钮关闭提示。
  • 问候消息列表：问候列表的上方显示所有消息的数量。每一条问候消息都要包含发布者姓名、消息正文、发布时间、消息编号。消息发布时间要显示相对时间，比如"3分钟前"，当鼠标悬停在时间上时，弹出窗口显示具体的时间值。消息根据时间先后顺序，最新发布的排在上面。为了方便用户查询最早的消息，我们提供一个前往页面底部的按钮，同时提供一个回到页面顶部的按钮。
  • 错误页面：错误页面包括404和500，和主页包含相同的部分——程序标题。程序标题下显示错误信息以及一个返回主页的"Go Back"链接。

3、前端页面开发

首先我们使用纸币画草图，然后使用原型设计软件画出原型图，最后编写对应的HTML页面。

  • 主页原型图


    image.png

常用的原型设计工具有Axure RP，Mockplus

  • 错误原型图


    image.png

    为了简化工作量，采用Bootstrap来编写页面样式。
    在传统的Flask程序中，后端完成功能后会操作HTML代码，在其中添加Jinja2语句。比如，将页面的临时URL替换为url_for函数调用，把虚拟数据换成通过视图函数传入模板的变量，或是使用模板继承等技术组织这些HTML文件

4、后端页面开发

  1. 数据库建模
    编写完功能规格书以后，我们也就确定了需要使用哪些表来存储数据，表中需要创建哪些字段，以及各表之间的关系。对于复杂的数据库结构，可以通过建模工具来辅助建立数据库关系。
class Message(db.Model):  # 定义一个Message类用来保存信息，因为使用的是SQLAIchemy，所以创建的数据库类继承自Model类
    id = db.Column(db.Integer, primary_key=True)
    body = db.Column(db.String(200))
    name = db.Column(db.String(20))
    timestamp = db.Column(db.DateTime,default=datetime.now,index=True)

使用index参数为timestamp建立索引，一般来说，取值较多的列（比如姓名）以及经常被用来作为排序参照的列（比如时间戳），适合建立索引。使用default参数设置默认值，传入函数名，在执行时自动调用datetime.now()

  1. 创建表单类
    问候表单由表单类HelloForm表示，表单中使用了文本区域字段TextAreaField表示HTML中的