Flask实践：待办事项（ToDo-List）

这一次我用Flask实现了一个待办事项（To-Do List）应用。这篇文章主要介绍这个应用的大致实现过程和一些让交互更简洁的处理技巧。这个App用了这篇文章里提到的Materialize框架。

程序界面

Demo体验：http://task5.herokuapp.com/

简化模板

不论是从用户体验的角度，还是从减少工作量，提高加载速度等方面考虑，页面和跳转应该尽可能的少一些，尤其是这样的工具类应用。这可以通过优化模板实现，也可以通过JavaScript实现。

举两个例子。

一、编辑条目

我找到了另一个使用Flask实现的To-Do List应用，做个参照。在这个应用里，加上基模板，他一共用了4个页面。

Demo：http://flask-todoapp.herokuapp.com/

编辑一个条目的流程是这样的：

点击编辑按钮，页面跳转到另一个模板
渲染出表单，编辑内容
提交后跳转回主页面。

当你点击新建或是编辑条目/分类时，会跳转到另一个页面：

跳转到新页面编辑条目

这其实只要一个页面就够了。

借助jQuery，我们可以这样实现：

渲染主页面的条目时，为每一个条目附加一个编辑表单，使用CSS隐藏它（display: none）
点击编辑按钮时，隐藏条目，显示表单（使用jQuery的hide和show函数）
表单提交后跳转到原页面

编辑条目

这样一来，就只需要一个页面了。在续篇里，使用AJAX技术在后台传送数据，体验会更好。

二、删除条目

想象一下，你在豆瓣收藏了很多喜欢的条目，你想清理一下，在页面最底端你删除了一个条目，如果这时页面在删除后跳转，就回到页面顶端了，可你还想删除在底端的另一些条目。因为删除不用传递数据，我们可以用这个小技巧解决：

在页面上，点击删除按钮后，使用jQuery的slideUp()函数隐藏条目，在后台仍然指定相应的视图函数，但是这个函数不跳转到任何页面（只是在数据库里删除条目），只返回下面的204状态码（代表无内容）。

return (''), 204

这样删除条目的体验会更加流畅和自然。

数据库框架Flask-SQLAlchemy

因为程序很小，我这次仍然把配置选项放在单个文件里。这次使用了数据库框架Flask-SQLAlchemy，数据库使用SQLite。和其他扩展一样，安装后初始化并配置数据库：

from flask_sqlalchemy import SQLAlchemy

basedir = os.path.abspath(os.path.dirname(__file__))
app = Flask(__name__)
app.config['SECRET_KEY'] = 'a secret string'
app.config['SQLALCHEMY_DATABASE_URI'] = \
   'sqlite:///' + os.path.join(basedir, 'data.sqlite')
app.config['SQLALCHEMY_COMMIT_ON_TEARDOWN'] = True
app.config['SQLALCHEMY_TRACK_MODIFICATIONS'] = True

db = SQLAlchemy(app)

解释一下这里的配置选项：

SQLALCHEMY_DATABASE_URI：这里要注意拼写，不要把URI写成URL。前一个是通用资源表示号（Universal Resource Identifier），后者是统一资源定位符（Uniform Resource Locator）。
- 在《Flask Web开发》里，介绍数据库时用的是URL，导致很多人在后面的配置里也写成了URL。简单来说，URL是URI的子集。更详细的解释见：http://stackoverflow.com/questions/176264/what-is-the-difference-between-a-uri-a-url-and-a-urn
- 注意在Linux主机部署时，数据库URI里是四根斜线。

SQLALCHEMY_COMMIT_ON_TEARDOWN：按字面理解就是，在每次请求结束后自动提交数据库会话，也就是db.session.commit()。
- 在2.0版本里，这个配置选项被认为有害，从文档里删掉了，在这个issue里讨论了这个问题。如果不想手动提交数据库会话，你可以继续使用它。
- 但是有时候，你需要手动提交，比如在这个应用里，有一个创建新的分类的函数，创建后使用redirect函数跳转到这个新建的分类（需要分类的id作为参数），如果不提交数据库会话，就没法获得新建分类的id。

@app.route('/new-category', methods=['GET', 'POST'])
def new_category():
    name = request.form.get('name')
    category = Category(name=name)
    db.session.add(category)
    db.session.commit()  # commit后使下面的category.id获得实际值
return redirect(url_for('category', id=category.id))

SQLALCHEMY_TRACK_MODIFICATIONS：启动项目后会出现一个警告，我不太清楚这个配置的作用（跟踪对象的修改？）。将它设为True可以抑制这个警告。

上述配置会在你程序根目录下生成一个data.sqlite文件。而最后实例SQLAlchemy类的db对象表示程序的数据库，你在视图函数里使用它（db）来操作数据库。

一对多关系

在这个应用里，用到了一对多关系（条目和分类）。这是条目和分类的模型（Model）：

class Item(db.Model):
    __tablename__ = 'items'
    id = db.Column(db.Integer, primary_key=True)
    body = db.Column(db.Text)
    category_id = db.Column(db.Integer, db.ForeignKey('categories.id'))  # step2


class Category(db.Model):
    __tablename__ = 'categories'
    id = db.Column(db.Integer, primary_key=True)
    name = db.Column(db.String(64))
    items = db.relationship('Item', backref='category')  # step1

实现一个一对多关系需要两步（这里父模型指分类Category，子模型指条目Item）：

在父模型里relationship函数定义一个引向子模型的对象（items）
在子模型里定义一个外键（category_id），并添加一个到父模型的反向引用（backref）

在存储一个条目到数据库时，同时也要指定一个分类，这里的分类需要是一个对象（Object），而不是id：

body = request.form.get('item')  # 条目的内容
id = request.form.get('category')  # 分类的id
category = Category.query.get_or_404(id)  # 分类的对象
item = Item(body=body, category=category)
db.session.add(item)

这次还用到了另一个扩展——Flask-Script，用来增强命令行功能。暂时没有太深入的应用，有机会再作总结。

具体实现

程序比较简单，具体实现没太多需要介绍的。和之前不同的是，这次我使用jQuery对表单进行简单的验证。感兴趣的话，可以去体验一下demo，或是看看源码。为了方便体验（偷懒），没有添加用户系统，你可以随便玩，但条目和分类的数量做了一些限制。

目前功能比较简单，后续会加上拖拽排序，设置日期，设置优先级等功能（考虑加上像wunderlist那样的音效……）。

安装和下载见介绍页：https://helloflask.github.io/todo/

在续篇里，我会介绍使用jQuery（AJAX）把它改造成一个单页应用（SPA，Single-page application）。

李辉

Web 开发者，写作爱好者

Flask实践：待办事项（ToDo-List）

简化模板

数据库框架Flask-SQLAlchemy

一对多关系

具体实现

相关链接