在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备份文件的脚本
Aug 11 Python
python利用正则表达式搜索单词示例代码
Sep 24 Python
Python3.6.0+opencv3.3.0人脸检测示例
May 25 Python
python实现贪吃蛇小游戏
Mar 21 Python
Python连接Oracle之环境配置、实例代码及报错解决方法详解
Feb 11 Python
python 读取二进制 显示图片案例
Apr 24 Python
keras 多任务多loss实例
Jun 22 Python
Python3爬虫中Ajax的用法
Jul 10 Python
Python装饰器如何实现修复过程解析
Sep 05 Python
用Python监控你的朋友都在浏览哪些网站?
May 27 Python
Python使用华为API为图像设置多个锚点标签
Apr 12 Python
Python中的socket网络模块介绍
Jul 23 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
颠覆常识!无色透明的咖啡诞生了(中日双语)
2021/03/03 咖啡文化
PHP开发环境配置(MySQL数据库安装图文教程)
2010/04/28 PHP
实测在class的function中include的文件中非php的global全局环境
2013/07/15 PHP
Codeigniter生成Excel文档的简单方法
2014/06/12 PHP
PHP使用range协议实现输出文件断点续传代码实例
2014/07/04 PHP
PHP网站常见安全漏洞,及相应防范措施总结
2021/03/01 PHP
JavaScript高级程序设计 读书笔记之八 Function类及闭包
2012/02/27 Javascript
.net,js捕捉文本框回车键事件的小例子(兼容多浏览器)
2013/03/11 Javascript
Node.js的包详细介绍
2015/01/14 Javascript
Javascript中3个需要注意的运算符
2015/04/02 Javascript
javascript实现tab切换的两个实例
2015/11/05 Javascript
日常收集整理的JavaScript常用函数方法
2015/12/10 Javascript
js数组的五种迭代方法及两种归并方法(推荐)
2016/06/14 Javascript
JavaScript实现in-place思想的快速排序方法
2016/08/07 Javascript
用js控件div的滚动条,让它在内容更新时自动滚到底部的实现方法
2016/10/27 Javascript
javascript+html5+css3自定义提示窗口
2017/06/21 Javascript
vuejs 制作背景淡入淡出切换动画的实例
2018/09/01 Javascript
vue路由插件之vue-route
2019/06/13 Javascript
详解vue-video-player使用心得(兼容m3u8)
2019/08/23 Javascript
python在windows下实现备份程序实例
2014/07/04 Python
Python操作Word批量生成文章的方法
2015/07/28 Python
Python中字符串的修改及传参详解
2016/11/30 Python
Python在不同目录下导入模块的实现方法
2017/10/27 Python
python中将字典形式的数据循环插入Excel
2018/01/16 Python
python迭代dict的key和value的方法
2018/07/06 Python
python使用selenium实现批量文件下载
2019/03/11 Python
HTML5实现移动端点击翻牌功能
2020/10/23 HTML / CSS
请介绍一下WSDL的文档结构
2013/03/17 面试题
创意活动策划书
2014/01/15 职场文书
幼儿园大班开学教师寄语
2014/04/03 职场文书
2014年度安全生产目标管理责任书
2014/07/25 职场文书
自我推荐信怎么写
2015/03/24 职场文书
谢师宴学生致辞
2015/07/27 职场文书
导游词之镇江西津古渡
2019/11/06 职场文书
Python 全局空间和局部空间
2022/04/06 Python
Python如何快速找到多个字典中的公共键(key)
2022/04/29 Python