在Python的web框架中中编写日志列表的教程


Posted in Python onApril 30, 2015

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:

<script>
function initVM(data) {
  $('#div-blogs').show();
  var vm = new Vue({
    el: '#div-blogs',
    data: {
      blogs: data.blogs,
      page: data.page
    },
    methods: {
      previous: function () {
        gotoPage(this.page.page_index - 1);
      },
      next: function () {
        gotoPage(this.page.page_index + 1);
      },
      edit_blog: function (blog) {
        location.assign('/manage/blogs/edit/' + blog.id);
      }
    }
  });
}

$(function() {
  getApi('/api/blogs?page={{ page_index }}', function (err, results) {
    if (err) {
      return showError(err);
    }
    $('#div-loading').hide();
    initVM(results);
  });
});
</script>

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

<div id="div-blogs" class="uk-width-1-1" style="display:none">
  <table class="uk-table uk-table-hover">
    <thead>
      <tr>
        <th class="uk-width-5-10">标题 / 摘要</th>
        <th class="uk-width-2-10">作者</th>
        <th class="uk-width-2-10">创建时间</th>
        <th class="uk-width-1-10">操作</th>
      </tr>
    </thead>
    <tbody>
      <tr v-repeat="blog: blogs" >
        <td>
          <a target="_blank" v-attr="href: '/blog/'+blog.id" v-text="blog.name"></a>
        </td>
        <td>
          <a target="_blank" v-attr="href: '/user/'+blog.user_id" v-text="blog.user_name"></a>
        </td>
        <td>
          <span v-text="blog.created_at.toDateTime()"></span>
        </td>
        <td>
          <a href="#0" v-on="click: edit_blog(blog)"><i class="uk-icon-edit"></i>
        </td>
      </tr>
    </tbody>
  </table>
  <div class="uk-width-1-1 uk-text-center">
    <ul class="uk-pagination">
      <li v-if="! page.has_previous" class="uk-disabled"><span><i class="uk-icon-angle-double-left"></i></span></li>
      <li v-if="page.has_previous"><a v-on="click: previous()" href="#0"><i class="uk-icon-angle-double-left"></i></a></li>
      <li class="uk-active"><span v-text="page.page_index"></span></li>
      <li v-if="! page.has_next" class="uk-disabled"><span><i class="uk-icon-angle-double-right"></i></span></li>
      <li v-if="page.has_next"><a v-on="click: next()" href="#0"><i class="uk-icon-angle-double-right"></i></a></li>
    </ul>
  </div>
</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列表页如下:

在Python的web框架中中编写日志列表的教程

Python 相关文章推荐
python处理二进制数据的方法
Jun 03 Python
对Python 3.2 迭代器的next函数实例讲解
Oct 18 Python
python利用小波分析进行特征提取的实例
Jan 09 Python
在python下使用tensorflow判断是否存在文件夹的实例
Jun 10 Python
Django继承自带user表并重写的例子
Nov 18 Python
Python3 中作为一等对象的函数解析
Dec 11 Python
Python面向对象编程基础实例分析
Jan 17 Python
如何在Django中使用聚合的实现示例
Mar 23 Python
Python GUI编程学习笔记之tkinter界面布局显示详解
Mar 30 Python
python适合做数据挖掘吗
Jun 16 Python
python 爬虫网页登陆的简单实现
Nov 30 Python
python excel和yaml文件的读取封装
Jan 12 Python
python登录pop3邮件服务器接收邮件的方法
Apr 30 #Python
python通过smpt发送邮件的方法
Apr 30 #Python
在Python的web框架中编写创建日志的程序的教程
Apr 30 #Python
用Python实现web端用户登录和注册功能的教程
Apr 30 #Python
用Python编写web API的教程
Apr 30 #Python
为Python的web框架编写前端模版的教程
Apr 30 #Python
为Python的web框架编写MVC配置来使其运行的教程
Apr 30 #Python
You might like
php实现的在线人员函数库
2008/04/09 PHP
PHP 操作文件的一些FAQ总结
2009/02/12 PHP
PHP高级对象构建 工厂模式的使用
2012/02/05 PHP
PHP扩展开发教程(总结)
2015/11/04 PHP
php+jQuery+Ajax实现点赞效果的方法(附源码下载)
2020/07/21 PHP
PHP设计模式之装饰器模式定义与用法简单示例
2018/08/13 PHP
PHP实现图片压缩
2020/09/09 PHP
JSON.stringify 语法实例讲解
2012/03/14 Javascript
可插入图片的TEXT文本框
2013/12/27 Javascript
新手快速学习JavaScript免费教程资源汇总
2015/06/25 Javascript
JavaScript截断字符串的方法
2015/07/15 Javascript
JavaScript实现页面跳转的方式汇总
2016/05/16 Javascript
AJAX实现瀑布流触发分页与分页触发瀑布流的方法
2016/05/23 Javascript
Bootstrap选项卡学习笔记分享
2017/02/13 Javascript
微信小程序中悬浮窗功能的实现代码
2019/08/02 Javascript
countUp.js实现数字动态变化效果
2019/10/17 Javascript
在vue中使用echars实现上浮与下钻效果
2019/11/08 Javascript
JS数组Reduce方法功能与用法实例详解
2020/04/29 Javascript
JS实现公告上线滚动效果
2021/01/10 Javascript
python操作日期和时间的方法
2014/03/11 Python
Python编程之黑板上排列组合,你舍得解开吗
2017/10/30 Python
Python3 queue队列模块详细介绍
2018/01/05 Python
python爬虫之xpath的基本使用详解
2018/04/18 Python
Python Numpy:找到list中的np.nan值方法
2018/10/30 Python
对python读取zip压缩文件里面的csv数据实例详解
2019/02/08 Python
使用python求斐波那契数列中第n个数的值示例代码
2020/07/26 Python
天巡全球:Skyscanner Global
2017/06/20 全球购物
泰国的头号网上婴儿用品店:Motherhood.co.th
2019/04/09 全球购物
师范生自荐信范文
2013/10/06 职场文书
智能电子应届生求职信
2013/11/10 职场文书
小学新学期教师寄语
2014/01/18 职场文书
周年庆典邀请函范文
2014/01/24 职场文书
英文请假条
2014/04/11 职场文书
经典禁毒标语
2014/06/16 职场文书
大学生求职自荐信范文
2015/03/04 职场文书
Python OpenCV形态学运算示例详解
2022/04/07 Python