Python学习笔记：Day 12 编写日志列表页

前言

最近在学习深度学习，已经跑出了几个模型，但Pyhton的基础不够扎实，因此，开始补习Python了，大家都推荐廖雪峰的课程，因此，开始了学习，但光学有没有用，还要和大家讨论一下，因此，
写下这些帖子，廖雪峰的课程连接在这里：廖雪峰
Python的相关介绍，以及它的历史故事和运行机制，可以参见这篇：python介绍
Python的安装可以参见这篇：Python安装
Python的运行模式以及输入输出可以参见这篇：Python IO
Python的基础概念介绍，可以参见这篇：Python 基础
Python字符串和编码的介绍，可以参见这篇：Python字符串与编码
Python基本数据结构：list和tuple介绍，可以参见这篇：Python list和tuple
Python控制语句介绍：ifelse，可以参见这篇：Python 条件判断
Python控制语句介绍：循环实现，可以参见这篇：Python循环语句
Python数据结构：dict和set介绍Python数据结构dict和set
Python函数相关：Python函数
Python高阶特性：Python高级特性
Python高阶函数：Python高阶函数
Python匿名函数：Python匿名函数
Python装饰器：Python装饰器
Python偏函数：Python偏函数
Python模块：Python模块
Python面向对象编程（1）：Python面向对象
Python面向对象编程（2）：Python面向对象（2）
Python面向对象编程（3）：Python面向对象（3）
Python面向对象编程（4）：Pyhton面向对象（4）
Python面向对象高级编程（上）：Python面向对象高级编程（上）
Python面向对象高级编程（中上）：Python面向对象高级编程（中上）
Python面向对象高级编程（中下）：Python面向对象高级编程（中下）
Python面向对象高级编程（完）：Python面向对象高级编程（完）
Python错误调试（起）：Python调试：起
Python错误调试（承）：Python调试：承
Python错误调试（转）：Python调试：转
Python错误调试（合）：python调试：合
Python文件IO编程：Python文件IO
Python文件IO编程2：Python文件IO2
Python文件IO编程3：PYthon文件IO3
Python进程和线程（起）：Python进程和线程起
Python进程和线程（承）：Python进程和线程承
Python进程和线程（转）：Python进程和线程转
Python进程和线程（合）：Python进程和线程合
Python正则表达式：Python正则表达式
Python学习笔记:常用内建模块1：Python学习笔记：常用内建模块1
Python学习笔记:常用内建模块2：Python学习笔记：常用内建模块2
Python学习笔记:常用内建模块3：Python学习笔记：常用内建模块3
Python学习笔记:常用内建模块4：Python学习笔记: 常用内建模块4
Python学习笔记:常用内建模块5：Python学习笔记: 常用内建模块5
Python学习笔记:常用内建模块6:Python学习笔记：常用内建模块6
Python学习笔记:第三方模块1：Python常用第三方模块
Python学习笔记:第三方模块2：Python常用第三方模块
Python学习笔记:第三方模块3：Python常用第三方模块
Pytho学习笔记：网络编程：Python网络编程
Python学习笔记：电子邮件：Python电子邮件1
Python学习笔记：SMTP服务器：PythonSMTP服务器
Python学习笔记：POP3服务器：PythonPOP3服务器
Python学习笔记：Python数据库 Python数据库1
Python学习笔记：Python数据库2Python数据库2
Python学习笔记：web开发1Python学习笔记：web开发1
Python学习笔记：web开发2Python学习笔记: web开发2
Python学习笔记: web开发3Python学习笔记: web开发3
Python学习笔记：异步IO（1）Python学习笔记：异步IO（1）
Python学习笔记：异步IO（2）Python学习笔记：异步IO（2）
Python学习笔记：异步IO（3）Python学习笔记：异步IO（3）
Python学习笔记：Day 1-2开发Python学习笔记：Day1-2开发
Python学习笔记：Day 3 ORMPython学习笔记：Day3 ORM
Python学习笔记：Day 4 ModelPython学习笔记：Day4Model
Python学习笔记：Day 5 web框架PYTHON学习笔记：DAy5
Python学习笔记：Day 6 配置文件Python学习笔记：Day 6 配置文件
Python学习笔记：Day 7 编写MVCPython学习笔记：Day 7编写MVC
Python学习笔记：Day 8 构建前端Python学习笔记:Day 8 构建前端
Python学习笔记：Day 9 编写APIPython 9编写API
Python学习笔记：Day 10 用户注册和登陆Python 10用户注册和登陆
Python学习笔记：Day11 编写日志创建页day11 编写目录

#目录 [TOC] #编写日志列表页 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 > 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

    def __str__(self):
        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)

    __repr__ = __str__

在handlers.py中实现API：

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

管理页面：

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

模板页面首先通过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) {
    var vm = new Vue({
        el: '#vm',
        data: {
            blogs: data.blogs,
            page: data.page
        },
        methods: {
            edit_blog: function (blog) {
                location.assign('/manage/blogs/edit?id=' + blog.id);
            },
            delete_blog: function (blog) {
                if (confirm('确认要删除“' + blog.name + '”？删除后不可恢复！')) {
                    postJSON('/api/blogs/' + blog.id + '/delete', function (err, r) {
                        if (err) {
                            return alert(err.message || err.error || err);
                        }
                        refresh();
                    });
                }
            }
        }
    });
    $('#vm').show();
}
$(function() {
    getJSON('/api/blogs', {
        page: {{ page_index }}
    }, function (err, results) {
        if (err) {
            return fatal(err);
        }
        $('#loading').hide();
        initVM(results);
    });
});
</script>

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

新日志

标题 / 摘要	作者	创建时间	操作

“`v-repeat指令，就什么都不用管了。

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

完整的Blog列表页如下：