Day 12 - 编写日志列表页

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

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

  1. class Page(object):
  2. def __init__(self, item_count, page_index=1, page_size=10):
  3. self.item_count = item_count
  4. self.page_size = page_size
  5. self.page_count = item_count // page_size + (1 if item_count % page_size > 0 else 0)
  6. if (item_count == 0) or (page_index > self.page_count):
  7. self.offset = 0
  8. self.limit = 0
  9. self.page_index = 1
  10. else:
  11. self.page_index = page_index
  12. self.offset = self.page_size * (page_index - 1)
  13. self.limit = self.page_size
  14. self.has_next = self.page_index < self.page_count
  15. self.has_previous = self.page_index > 1
  16. def __str__(self):
  17. 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)
  18. __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直接变成多行的&lt;tr&gt;

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

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

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

完整的Blog列表页如下:

awesomepy-manage-blogs

参考源码

day-12

原文: https://wizardforcel.gitbooks.io/liaoxuefeng/content/py3/118.html