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列表页如下:
这里写图片描述

阅读更多

没有更多推荐了,返回首页