在Python的web架構中中編寫日誌列表的教程

MVVM模式不但可用於Form表單，在複雜的管理頁面中也能大顯身手。例如，分頁顯示Blog的功能，我們先把後端代碼寫出來：

在apis.py中定義一個Page類用於儲存分頁資訊：

class Page(object):  def __init__(self, item_count, page_index=1, page_size=10):    self.item_count = item_count    self.page_size = page_size    self.page_count = item_count // page_size + (1 if item_count % page_size > 0 else 0)    if (item_count == 0) or (page_index < 1) or (page_index > self.page_count):      self.offset = 0      self.limit = 0      self.page_index = 1    else:      self.page_index = page_index      self.offset = self.page_size * (page_index - 1)      self.limit = self.page_size    self.has_next = self.page_index < self.page_count    self.has_previous = self.page_index > 1

在urls.py中實現API：

def _get_blogs_by_page():  total = Blog.count_all()  page = Page(total, _get_page_index())  blogs = Blog.find_by('order by created_at desc limit ?,?', page.offset, page.limit)  return blogs, page@api@get('/api/blogs')def api_get_blogs():  blogs, page = _get_blogs_by_page()  return dict(blogs=blogs, page=page)

返回模板頁面：

@view('manage_blog_list.html')@get('/manage/blogs')def manage_blogs():  return dict(page_index=_get_page_index(), user=ctx.request.user)

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

{  "page": {    "has_next": true,    "page_index": 1,    "page_count": 2,    "has_previous": false,    "item_count": 12  },  "blogs": [...]}

然後，通過Vue初始化MVVM：

View的容器是#div-blogs，包含一個table，我們用v-repeat可以把Model的數組blogs直接變成多行的：

  
 
    
  
 
   
 
    
標題 / 摘要
 
    
作者
 
    
建立時間
 
    
操作
 
   
 
  
    
  
 
   
 
    
 
 
    
 
 
    
  
 
    
  
 
   
 
  
  
 
      
 
      
  
      
  
      
  
      
  
      
  
    
 
  

往Model的blogs數組中增加一個Blog元素，table就神奇地增加了一行；把blogs數組的某個元素刪除，table就神奇地減少了一行。所有複雜的Model-View的映射邏輯全部由MVVM架構完成，我們只需要在HTML中寫上v-repeat指令，就什麼都不用管了。

可以把v-repeat="blog: blogs"看成迴圈代碼，所以，可以在一個內部引用迴圈變數blog。v-text和v-attr指令分別用於產生文本和DOM節點屬性。

完整的Blog列表頁如下：

