Python基础-项目实战-Day 12 - 编写日志列表页

最新推荐文章于 2026-04-25 02:02:24 发布

原创最新推荐文章于 2026-04-25 02:02:24 发布 · 1.3k 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#编辑日志列表

Python基础专栏收录该内容

143 篇文章

订阅专栏

一、项目来源

https://www.liaoxuefeng.com/wiki/0014316089557264a6b348958f449949df42a6d3a2e542c000/001432339210950e063b4795d574036bc5dcf0c2449bc52000

二、UI

点击入口
manage_blog_edit.html

{% block content %}

    <div class="uk-width-1-1 uk-margin-bottom">
        <div class="uk-panel uk-panel-box">
            <ul class="uk-breadcrumb">
                <li><a href="/manage/comments">评论</a></li>
                <li><a href="/manage/blogs">日志</a></li>
                <li><a href="/manage/users">用户</a></li>
            </ul>
        </div>
    </div>

这里写图片描述

日志列表
manage_blogs.html

        <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>
                        <a href="#0" v-on="click: delete_blog(blog)"><i class="uk-icon-trash-o"></i>
                    </td>
                </tr>
            </tbody>
        </table>

这里写图片描述

三、逻辑

1.点击日志事件

handlers.py
跳转到日志列表界面

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

2.显示列表

查找数据库
handlers.py

@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)

mysql
这里写图片描述

manage_blogs.html

$(function() {
    getJSON('/api/blogs', {
        page: {{ page_index }}
    }, function (err, results) {
        if (err) {
            return fatal(err);
        }
        $('#loading').hide();
        initVM(results);
    });
});
===========================================================================        
function initVM(data) {
    var vm = new Vue({
        el: '#vm',
        data: {
            blogs: data.blogs,
            page: data.page
        },
        .....
===========================================================================        
 <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>
            <a href="#0" v-on="click: delete_blog(blog)"><i class="uk-icon-trash-o"></i>
        </td>
    </tr>
</tbody>

3. 运行日志

INFO:root:Request: GET /manage/blogs
INFO:root:check user: GET /manage/blogs
INFO:root:SQL: select `id`, `email`, `passwd`, `admin`, `name`, `image`, `created_at` from `users` where `id`=?
INFO:root:rows returned: 1
INFO:root:set current user: 123@123.com
INFO:root:Response handler...
INFO:root:call with args: {}
INFO:root:Response handler...__template__ {'__template__': 'manage_blogs.html', 'page_index': 1}
INFO:root:isinstance dict templating <Response OK not prepared>esp
INFO:aiohttp.access:127.0.0.1 - - [11/Jan/2018:11:39:19 +0000] "GET /manage/blogs HTTP/1.1" 200 6682 "-" "Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/63.0.3239.132 Safari/537.36"
INFO:root:Request: GET /api/blogs
INFO:root:check user: GET /api/blogs
INFO:root:SQL: select `id`, `email`, `passwd`, `admin`, `name`, `image`, `created_at` from `users` where `id`=?
INFO:root:rows returned: 1
INFO:root:set current user: 123@123.com
INFO:root:Response handler...
INFO:root:call with args: {'page': '1'}
INFO:root:SQL: select count(id) _num_ from `blogs`
INFO:root:rows returned: 1
INFO:root:SQL: select `id`, `user_id`, `user_name`, `user_image`, `name`, `summary`, `content`, `created_at` from `blogs` order by created_at desc limit ?, ?
INFO:root:rows returned: 5
INFO:root:Response handler...__template__ {'page': item_count: 5, page_count: 1, page_index: 1, page_size: 10, offset: 0, limit: 10, 'blogs': [{'id': '001515636301092f26271f023994d07863fe52a164781d8000', 'user_id': '00151558881765135c1d8940a8f4bf19bb2c836eccdb707000', 'user_name': '123', 'user_image': 'http://www.gravatar.com/avatar/b2d7d2d13aed54c2ed7feb538b382b42?d=mm&s=120', 'name': 'Good old days', 'summary': 'dreams', 'content': 'We have all got our "good old days" tucked away inside our hearts, and we return to them in dreams like cats to favorite armchairs.', 'created_at': 1515640000.0}, {'id': '0015156359616096a8f75b1490348b69857777919992a7d000', 'user_id': '00151558881765135c1d8940a8f4bf19bb2c836eccdb707000', 'user_name': '123', 'user_image': 'http://www.gravatar.com/avatar/b2d7d2d13aed54c2ed7feb538b382b42?d=mm&s=120', 'name': 'Good old days', 'summary': 'dreams', 'content': 'We have all got our "good old days" tucked away inside our hearts, and we return to them in dreams like cats to favorite armchairs.', 'created_at': 1515640000.0}, {'id': '0015156358419219e13a79d61584f56bb7242064783e9ff000', 'user_id': '00151558881765135c1d8940a8f4bf19bb2c836eccdb707000', 'user_name': '123', 'user_image': 'http://www.gravatar.com/avatar/b2d7d2d13aed54c2ed7feb538b382b42?d=mm&s=120', 'name': 'sdf', 'summary': 'sdaf', 'content': 'asfdasf', 'created_at': 1515640000.0}, {'id': '001515633814914b02515cf6b284ec1b1eef741d32434ab000', 'user_id': '00151558881765135c1d8940a8f4bf19bb2c836eccdb707000', 'user_name': '123', 'user_image': 'http://www.gravatar.com/avatar/b2d7d2d13aed54c2ed7feb538b382b42?d=mm&s=120', 'name': 'Create Blog', 'summary': 'Tursday', 'content': 'Good day', 'created_at': 1515630000.0}, {'id': '1', 'user_id': '1', 'user_name': '123', 'user_image': 'safdsadfsdf', 'name': '234', 'summary': 'adsffasdf', 'content': 'fasdfsadfsa', 'created_at': 123123000.0}]}
INFO:root:isinstance dict None <Response OK not prepared>esp
INFO:aiohttp.access:127.0.0.1 - - [11/Jan/2018:11:39:19 +0000] "GET /api/blogs?page=1 HTTP/1.1" 200 2065 "-" "Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/63.0.3239.132 Safari/537.36"

四、Git

git add www/
git commit -m "Python基础-项目实战-Day 12 - 编写日志列表页"
D:\PythonProject\python3-webapp-Su\www>git push -u origin master
Counting objects: 9, done.
Delta compression using up to 4 threads.
Compressing objects: 100% (9/9), done.
Writing objects: 100% (9/9), 2.64 KiB | 2.64 MiB/s, done.
Total 9 (delta 7), reused 0 (delta 0)
remote: Resolving deltas: 100% (7/7), completed with 7 local objects.
To https://github.com/sufadi/python3-webapp-Su.git
   b98d0cb..0a956a1  master -> master
Branch 'master' set up to track remote branch 'master' from 'origin'.