Python项目WebApp实战之八——新建日志及日志列表

新建日志

设计上一个简单的Blog包含name，summary和content。name可以写出一个创建blog的接口：

困难的地方在于前端页面，前端页面需要混合HTML，CSS，JavaScript，而且前端页面通常是动态的，为了便于编写和维护，前端页面同样可以使用MVVM的模式。

Model用纯JavaScript对象表示，View则是纯HTML，ViewModel负责将Model的数据同步显示到View中，并把View中的修改同步回Model。

现有的MVVM框架有AngularJS，Vue等，项目中使用简单易用的Vue来实现。

初始化Vue时需要指定三个参数，需要绑定的View；JavaScript对象表示的Model；View可以触发的JavaScript函数。

代码中使用 属性就可以关联起来View和Model。 则表示将提交事件关联到submit方法。

在MVVM中，Model和View是双向绑定的。如果我们在Form中修改了文本框的值，可以在Model中立刻拿到新的值。如果我们在JavaScript逻辑中修改了Model，这个修改会立刻反映到View上。

日志列表页

新建了日志后，还需要将所有的日志按列表显示出来。

定义一个Page类用于存储分页：

在handlers.py中实现API：

管理页面：

模板页面首先通过API： 拿到Model：

通过Vue初始化MVVM

View包含一个table，用 可以把Model的数组blogs直接变成多行的：

可以把 看成循环代码，所以，可以在一个内部引用循环变量blog。 和 指令分别用于生成文本和DOM节点属性。