Day 12 - 编写日志列表页

MVVM模式不但可用于Form表单，在复杂的管理页面中也能大显身手。例如，分页显示Blog的功能，我们先把后端代码写出来：

+

在apis.py中定义一个Page类用于存储分页信息：

+

  1. class Page(object):
  3.     def __init__(self, item_count, page_index=1, page_size=10):
  4.         self.item_count = item_count
  5.         self.page_size = page_size
  6.         self.page_count = item_count // page_size + (1 if item_count % page_size > 0 else 0)
  7.         if (item_count == 0) or (page_index > self.page_count):
  8.             self.offset = 0
  9.             self.limit = 0
  10.             self.page_index = 1
  11.         else:
  12.             self.page_index = page_index
  13.             self.offset = self.page_size * (page_index - 1)
  14.             self.limit = self.page_size
  15.         self.has_next = self.page_index < self.page_count
  16.         self.has_previous = self.page_index > 1
  18.     def __str__(self):
  19.         return 'item_count: %s, page_count: %s, page_index: %s, page_size: %s, offset: %s, limit: %s' % (self.item_count, self.page_count, self.page_index, self.page_size, self.offset, self.limit)
  21.     __repr__ = __str__

在handlers.py中实现API：

+

  1. @get('/api/blogs')
  2. def api_blogs(*, page='1'):
  3.     page_index = get_page_index(page)
  4.     num = yield from Blog.findNumber('count(id)')
  5.     p = Page(num, page_index)
  6.     if num == 0:
  7.         return dict(page=p, blogs=())
  8.     blogs = yield from Blog.findAll(orderBy='created_at desc', limit=(p.offset, p.limit))
  9.     return dict(page=p, blogs=blogs)

管理页面：

+

  1. @get('/manage/blogs')
  2. def manage_blogs(*, page='1'):
  3.     return {
  4.         '__template__': 'manage_blogs.html',
  5.         'page_index': get_page_index(page)
  6.     }

模板页面首先通过API：GET /api/blogs?page=?拿到Model：

+

  1. {
  2.     "page": {
  3.         "has_next": true,
  4.         "page_index": 1,
  5.         "page_count": 2,
  6.         "has_previous": false,
  7.         "item_count": 12
  8.     },
  9.     "blogs": [...]
  10. }

然后，通过Vue初始化MVVM：

+

  1. <script>
  2. function initVM(data) {
  3.     var vm = new Vue({
  4.         el: '#vm',
  5.         data: {
  6.             blogs: data.blogs,
  7.             page: data.page
  8.         },
  9.         methods: {
  10.             edit_blog: function (blog) {
  11.                 location.assign('/manage/blogs/edit?id=' + blog.id);
  12.             },
  13.             delete_blog: function (blog) {
  14.                 if (confirm('确认要删除“' + blog.name + '”？删除后不可恢复！')) {
  15.                     postJSON('/api/blogs/' + blog.id + '/delete', function (err, r) {
  16.                         if (err) {
  17.                             return alert(err.message || err.error || err);
  18.                         }
  19.                         refresh();
  20.                     });
  21.                 }
  22.             }
  23.         }
  24.     });
  25.     $('#vm').show();
  26. }
  27. $(function() {
  28.     getJSON('/api/blogs', {
  29.         page: {{ page_index }}
  30.     }, function (err, results) {
  31.         if (err) {
  32.             return fatal(err);
  33.         }
  34.         $('#loading').hide();
  35.         initVM(results);
  36.     });
  37. });
  38. </script>

View的容器是#vm，包含一个table，我们用v-repeat可以把Model的数组blogs直接变成多行的<tr>：

+

  1. <div id="vm" class="uk-width-1-1">
  2.     <a href="/manage/blogs/create" class="uk-button uk-button-primary"><i class="uk-icon-plus"></i> 新日志</a>
  4.     <table class="uk-table uk-table-hover">
  5.         <thead>
  6.             <tr>
  7.                 <th class="uk-width-5-10">标题 / 摘要</th>
  8.                 <th class="uk-width-2-10">作者</th>
  9.                 <th class="uk-width-2-10">创建时间</th>
  10.                 <th class="uk-width-1-10">操作</th>
  11.             </tr>
  12.         </thead>
  13.         <tbody>
  14.             <tr v-repeat="blog: blogs" >
  15.                 <td>
  16.                     <a target="_blank" v-attr="href: '/blog/'+blog.id" v-text="blog.name"></a>
  17.                 </td>
  18.                 <td>
  19.                     <a target="_blank" v-attr="href: '/user/'+blog.user_id" v-text="blog.user_name"></a>
  20.                 </td>
  21.                 <td>
  22.                     <span v-text="blog.created_at.toDateTime()"></span>
  23.                 </td>
  24.                 <td>
  25.                     <a href="#0" v-on="click: edit_blog(blog)"><i class="uk-icon-edit"></i>
  26.                     <a href="#0" v-on="click: delete_blog(blog)"><i class="uk-icon-trash-o"></i>
  27.                 </td>
  28.             </tr>
  29.         </tbody>
  30.     </table>
  32.     <div v-component="pagination" v-with="page"></div>
  33. </div>

往Model的blogs数组中增加一个Blog元素，table就神奇地增加了一行；把blogs数组的某个元素删除，table就神奇地减少了一行。所有复杂的Model-View的映射逻辑全部由MVVM框架完成，我们只需要在HTML中写上v-repeat指令，就什么都不用管了。

+

可以把v-repeat="blog: blogs"看成循环代码，所以，可以在一个<tr>内部引用循环变量blog。v-text和v-attr指令分别用于生成文本和DOM节点属性。

+

完整的Blog列表页如下：

+

awesomepy-manage-blogs

参考源码

day-12

+