Python3 Tutorial Web Development Combat-day12 (write Log list page) __python

Day12: Writing a log list page

The MVVM mode can be used not only for form forms, but also for complex management pages. Therefore, in the implementation of Pagination display blog function, still use MVVM mode, the first back-end code to write out:

Define a page class in apis.py to store paging information:

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_ind ex = 1
        else:
            self.page_index = page_index
            self.offset = self.page_size * (page_index-1)
            Self.limit = s Elf.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 __

Day 12-Write a log list page

Reading: 3940
The MVVM mode can be used not only for form forms, but also for complex management pages. For example, paging shows the function of the blog, we first write back-end code:

Define a page class in apis.py to store paging information:

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_cou NT, Self.page_count, Self.page_index, Self.page_size, Self.offset, self.limit)

__repr__ = __str__

Implementing APIs in handlers.py:

def get_page_index (page_str):
    p = 1
    try:
        p = Int (page_str)
    except ValueError as e:
        pass
    if p < 1:
        p = 1 return
    p

@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, BL Ogs= ())
    blogs = yield from Blog.findall (orderby= ' created_at desc ', limit= (P.offset. P.limit)) return
    Dict ( Page=p, Blogs=blogs)

Admin page:

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

MVVM page code in VUE mode:
Manage_blogs.html:

{% extends ' __base__.html '%}
        {% block title%} log {% Endblock%} {% block beforehead%} <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 (' Confirm to delete ' + Blog.name + '). Cannot be recovered after deletion. ')} {Postjson ('/api/blogs/' + blog.id + '/delete '), function (err, R) {if (er
                        R) {return alert (err.message | | err.error | | err);
                    Refresh ();
                });
    }
            }
        }
    });
$ (' #vm '). Show (); } $ (function () {Getjson ('/api/blogs ', {page: {{page_index}}}, function (err, results) {if (E
        RR) {    Return fatal (ERR);
        $ (' #loading '). Hide ();
    INITVM (results);
});
}); </script> {% Endblock%} {% block content%} <div class= "Uk-width-1-1 uk-margin-bottom" > <di V class= "Uk-panel uk-panel-box" > <ul class= "uk-breadcrumb" > <li><a href= "/ma" Nage/comments "> Review </a></li> <li class=" uk-active "><span> log &LT;/SPAN&GT;&LT;/LI&G
                T <li><a href= "/manage/users" > User </a></li> </ul> </div> </div&

    Gt <div id= "error" class= "Uk-width-1-1" > </div> <div id= "Loading" class= "Uk-width-1-1 uk-text-center"
    > <span><i class= "uk-icon-spinner uk-icon-medium uk-icon-spin" ></i> loading ...</span> </div> <div id= "vm" class= "uk-width-1-1" > <a href= "/manage/blogs/create" class= "Uk-button uk-b Utton-primary "><i class= "Uk-icon-plus" ></i> new log </a> <table class= "uk-table uk-table-hover" >
                    <thead> <tr> <th class= "uk-width-5-10" > title/Summary </th> <th class= "uk-width-2-10" > Author </th> <th class= "uk-width-2-10" > Creation time </th&gt
                    ; <th class= "uk-width-1-10" > Operations </th> </tr> </thead> <tbody > <tr v-repeat= "blog:blogs" > <td> <a targe
                    t= "_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=" bl og. Created_at.todatetime () "></span> </td> <td>
                        <a href= "#0" v-on= "Click:edit_blog (blog)" ><i class= "Uk-icon-edit" ></i> <a href= "#0" v-on= "Click:delete_blog (blog)" ><i class= "Uk-icon-trash-o" ></i> </td > </tr> </tbody> </table> <div v-component= "Paginatio N "v-with=" page ></div> </div> {% Endblock%}